This week we had to write an application that interfaces a user with an input or output device we made.
For this I wanted to make a interface with that the user can controll the steps for my stepper-motor output board, I made in Week 12.
I already got in contact with the company behind processing a while ago, as I tried there P5.js JavaScript library. Si I thought that Processing could be the way of creating a simple interface, that should be quick to programm.
You can find out more abot processing on theire github page HERE.
I started with the installation of Processing. You can get the installation-file Here. After finished I started the programm and it kinda looked like the Arduino IDE at first...
As I wanted to ceate an easy graphical user interface (GUI), I opend the contributon manager and installed the ControlP5 library by Andreas Schlegel:
I then watched this tutorial just to get everything started.
First I imported all the needed librarys as shown:
Then I created two variables from the imported library and used thos to create two instances, which we have to use, as Processing is a Java based language.
After that I set up a Textfield for the user as input and three buttons, one for sending the user input and two for the direction of my stepper motor:
Now I created the draw function, which will create the main windows:
Last step was to create the functions, that will be called after the user presses a button:
My final interface looks like this:
Here you can see, that when I press the send button, the TX-LED on my USB to Serial connector flashes, indicating that something was transmittet:
Programming my stepper-motor-control-board should be relativ easy. The programm opens a SoftwareSerial connection and listens to it. If it receives something, it will check, if it is the char "C" for setting the direction to clockwise, if it is the char "AC" for setting the direction to anti-clockwise, or if it is an integer, moving the stepper motor the amount of steps requested.
This is what the code looks like:
Sadly, after making some changes to the code and try to flash it againt, the programmer, that worked flawless before, didn't recognise my board anymore...
This is the eror code I receive, but I couldn't fix it:
So after trying to fix this for way to long, I decided to go on and simply controll the LED at pin 13 of my hello world board with two buttons in processing. I know it's not much, but it shows the function of a user interface...
The new code can be fond down below in the download seciton.
Here you can see the interface and communication in acttion:
Before I uploaded the code to my boards, I used two Arduino Uno just for testing. After everything worked and I removed all errors I changed the code for the daughter-board-arduino from Wire to TinyWire.
I then uploaded the code to my boards, used a breadboard to power both boards and you can see the result below:
As you can see it worked!!
For our group assignment we had to compare different tool options.
Here we compared different systems for creating a graphical user interface (GUI):
| Name | What is it? | Language | Level of difficulty | Connection to board |
| Ionic | Framework | JavaScript | A lot of documentation to read, but not so difficult | Possible via Bluetooth |
| React Native | Framework | JavaScript | A lot of documentation to read, but not so difficult | Possible via Bluetooth, WIFI |
| Android studio | IDE for developing native Android Apps | Java, C, C++, Python | A lot of documentation to read, sometimes confusing. Not for quick working. | Possible via Bluetooth, WIFI and serial (usb) |
| MIT App Inventor | IDE for developing Android Apps | Function block language ("Java, Scheme, Kawa") | Very quick build, bluetooth, wifi etc. not compatible with iOS. Confusing for me. | Possible via Bluetooth, WIFI and serial (usb) |
| Processing | IDE for developing UI in general | Java | Easy to find in (if you know some programming languages), very quick build. | Possible via Bluetooth, WIFI and serial (usb) |