Interface and Application Programming

Write an application that interfaces with an input &/or output device that you made, comparing as many tool options as possible.

About my app

I want to create a simple application where a red square moves in four direction. One direction each time and the same amount of pixels over the X axes or the Y axes. The app is set to communicate with my input board of four buttons.

Experiencing with MIT app inventor

My first try was over the MIT app inventor I’ve manage to upload a background image of a grid and a red square. At this moment things got more complicated and I turn to follow a MIT app inventor tutorial for understanding some basics. The “MoleMash” guide taught me of these tools.

Over the designer view I’ve placed the following components:

  1. Csanvas- MyCanvas (Over the Drawing and Animation palette)
  2. ImageSprite- Mole (Over the Drawing and Animation palette)
  3. Label- ScoreLable (Over the User Interface palette)
  4. Button- ResetButton (Over the User Interface palette)
  5. Sound- Noise (Over the Media palette)
  6. Clock- MoleTimer (Over the Sensors palette)

I've set their parameters following as detailed over the tutorial.

Over the Blocks view I’ve written the program as follow:

  1. The MoveMole procedure where the destination set by mathematical equation
  2. Seting the 'score' as a variable
  3. The procedure where the score being labeled
  4. Seting the frequency of the Mole movement
  5. Seting the rule that when touching the Mole the score being updated

Following a tutorial was a simple task for me. When I turn to create my interface I couldn’t find instruction guide and the operating of MIT app inventor was difficult to me. I looked for a solution for communicate with my board and finally realized that I had to have a Bluetooth module, which I didn’t have. At this point I tried a new platform, Processing, in which I could communicate through the FTDI connection which was part of my board.

Experiencing with Processing

Processing is an open source computer programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks. For more information about processing visit Wikipedia.

I was looking for a way to get information from my board and to process it to visual objects. I’m still learning about coding and processing is a new language and a new IDE for me. Therefor I simplified the idea of my interface to the principle of pushing a button and presenting an arrow in the right direction.

I divided my process to several stages:

  1. Receiving information from my board
  2. Opening an image
  3. “Switch & Case”
  4. Integrating of the above steps

On the first stage I worked through this tutorial. I’ve imported the ‘processing.serial’ library into my project, set the right port and ‘printin’ the information.

download pde.File

Then I followed the instruction of how to open an image. I set the sizes of the image, loaded it from the project directory and typed the command to display it.

download pde.File download image

The switch structure is optional for selecting between alternatives. Each case is a different scenario. I set four images as variables and changed the parameter each time to a different number to open a different image.

download pde.File

The challenge was integrating the codes. I succeeded with one condition, when the first button is pushed an image is being open. After many attempts I couldn’t figured out how to complete the code in order that each button will trigger a different image. I was looking for a solution how to distinguish between the data of the string In order to separate it to different parameters. This still remain unsolved.

download pde.File download image