Rafael Rebolleda — Fab Academy 2020 Documentation

W12: Interface Programming

Approach

For this assignment I thought I'd give Processing a go, since it seems to have a similar structure and coding environment to Arduino.

Doing a little bit of research, I learned that both can communicate over the serial port, so it seemed worth a try. I also found about ControlP5, an open source Processing library that deals with GUI elements, so I thought I would also give that a try.

The idea

Since I had built a custom version of the FabKit with an extra LED and button for my Final Project, I though I could use it to test bidireccional communication with a simple, proof of concept interface.

The idea would be to control both LEDs in the PCB via the Processing GUI, and also change the GUI via the button on the PCB. Something like this:

In the end, as it is often the case, I ended up doing something slightly different.

Creating the GUI

Processing allows the placing of text, geometric shapes and images by means of coordinates, so I used a bit of everything.

In it we can see the main elements sketched above:

To create the basic layout I setup the window size, added an image to the project folder and then loaded it in Processing as the main logo.

Then I created the basic structure with the header and the dividing lines.

Having Arduino and Processing talking to each other

For both "devices" to talk to each other, they must be on the same serial port. This will change on each computer, but on mine it was "/dev/cu.usbserial-A9M9DV3R".

Once they're both connected to the same port, each can write to that port and the other can read. All commands exchanged in this case are just one letter:

Processing to Arduino

From Arduino to Processing

Switching the LED ON and OFF

Processing

ControlP5 has a number of UI elements which can be configured in terms of size and color. Amongst them is the toggle switch and the slider.

There's also a linked function that will be trigger whenever there's a change. It is within this function that a message is sent through the serial port:

Arduino

From the other side, Arduino is reading the serial port and will react depending on the message. The one thing that didn't quite work for me is using a "case" statement. For some reason the values were not being recognised and the branching didn't work, so I went with a bunch of "if" statements instead:

Further down in the code Arduino checks the variables set up from the serial port reading to turn the LED on and off.

Here's everyting in action:

Changing blinking speed

Processing

ContolP5 also offers a slider UI element that can be easily configured:

There's a corresponding function that will send the value through the serial port whenever the slider is moved. I used the "floor" function to make a single number out of an integer.

Arduino

Just like with the switch, Arduino will check the incoming serial messages to find a recognisable command, in this cases a number from 1 to 9.

Later it will adjust the delay accoding to the speed:

Here's everything in action:

Displaying PCB button state

Arduino

This time around the command is initiated in Arduino, as it will be writing on the serial port the state of the button as euther "1" or "0".

Processing

On the other side, Processing will read this value and change the fill for the button rectangle. It took me quite a long while and lots of trial and error to get this working, and the trick was to:

Here's everything in action:

Files