I recently uploaded a guide on the programming of a Cybot using an Arduino control. In the programming I created a user interface to visualize the direction being selected by the user. This guide will hopefully show you haw to create your own versions.
Step 1: Application
The user interface was programmed using a free application called scratch for Arduino (there is the simple Scratch version but this does not have Audino control) to obtain the S4A application ( free to download) go to http://s4a.cat/ scroll down to the "download and install" section and grab yourself the version that's right for your operating system (I'm using windows).
Once installed you have an additional icon which when opened will look something like the second image on this step.
Note that the application will start looking for your Arduino and the message will only disappear when it has found it so please connect up.(if you just want to play about with the interface then google scratch and download the basic version).
Once connected the Arduino Port monitor will start cycling a series of numbers - this is just the information being monitored from the board by the application.
Step 2: Costumes
Scratch allows you to create animations by setting points in the programming that updates the picture - changing one for another.
Scratch uses the term Costume for these pictures - the ones I used for the interface are in the Zip file - you can also see them on the first part of this instructable.
Direction costumes were generated using Sketchup I then took a screen shot of it. Once I had one image I copied it and for each of the buttons changed one to green. These images where then imported into Scratch by selecting the Costume tab and importing each one in turn. When you do this you must give each a unique name (left, right etc.) this is important as you will reference those names in the application
Very Important - for this program to work you will also need some bar codes generated - the third zip file has the ones I made using the web site www.barcodesinc.com/geerator/index.php - I created each one in turn the content of the Bar code is the direction required for the program. (left, right and so on). The names that I gave the costumes had to be exactly the same as the bar code content as the scanner would reed them and update a variable with that exact content.
It also makes it easier to read if you give them sensible names
Step 3: Variables
You will need to create a variable to hold the direction instruction entered while the program is running - I called mine "instruction" .
You will also need "set -to" block - grab each of thesse two and drag them to the center window of the scratch application.
Step 4: Main Code
The interface program is very simple and works on a never ending loop.
The first thing you need to do is select the starting costume - this is the purple "switch" block in the program. This block reads the costume list and provides a drop down list for you to pick.
Then comes the loop after a 1 second delay block. Inside the loop place and ask and wait block this tells the program to create an input and wait for an answer, the next operation is to change the Set - to block's drop-down to equal the name of the variable you created "instruction". and set it to equal the Answer block.
The answer block holds the result of the ask input question. So when the scanner reads a left bar code the contents of the answer block equals the variable string "left".
So we have updated the variable to equal the answer of the question - this s useful as the ask question can now be reused.
The next part of the program asks an If question - If the value held in the instruction variable equals a direction e.g. "left" then complete the rest of the instructions under it.
This means that the costume would be switched to the left green arrow costume and the digital pin settings would be used to turn the robot left
Once you have the first direction block its just a case of right clicking on it a duplicating it for the number of buttons on you interface. For each of the copies you will need to ensure that you change the If question result and the switch costume entries to the correct wording for the instruction - remember that the program is comparing this to the result of the bar code scan so the spelling has to match what is expected.
Each of the new if's goes inside the loop.
You will also see 5 blocks on the left of the picture these are controls to allow for keyboard control using the keyboard arrows. If you want the costume to change as appropriate when each arrow is pressed you would simply add a switch costume block to each between the yellow start block and the digital pin blocks. Remembering to change each in the drop down to reflect the required skin.
I have attached the code I created for the Interface so you don't have to start from scratch
(Pardon the pun)
Thanks for looking.
If you like this please take the time to vote , or if you want to see more then take a look at my other instructables e.g. https://www.instructables.com/id/Scratch-4-Arduino-...
or at my web page: http://handycrafted.jimdo.com/