15 - Interface and Application Programming
Individual assignment
This week's assignment is to create an interface using as much possible options as you can connecting a board done during the Academy and a device. After thinking about it a little bit, I decided to create an Interface for my final project, connecting it with my Ukulele to create something to help with learning how to play it.
My first thought were to use p5.js and create an on-line interface to control the boards, but after some research, I realized that it is complicated to control the Serial ports through Internet, so I decided to start with Processing and try to make it on-line after it.
Processing
This was my first time using Processing so I followed some tutorial to learn how to use it. The best part of it is that it is like the Arduino IDE, with a setup void and a draw void that acts as the main loop. Also, Processing has a nice community and web to help you learn.
As I just said, It works really similar to the Arduino IDE. The nice thing, is that the draw loop is the main loop, so the application is continuously drawing all the elements and it's really easy and fast to change the visual aspect of the interface.
Visual interface
The first thing I did was creating the visual content of the interface, and then programming what it has to do. The purpose of the interface is to show what you are playing or light up the Ukulele as you want, so I decided to design the visual part in Inkscape as an SVG file, and then import it to Processing.
After some research I found the .getChild method where you can get the different objects of the SVG and file and change their properties such as color or size. This was exactly what I needed for the interface, an Ukulele shape, the different frets (LED's in real life) and some buttons. This is the SVG:
Each object was named in Inkscpe and then, when I imported the svg to Processing, I grabbed each one and named as a separate object. Note that for importing an image or svg to Processing you need to create a data folder in the same folder as the project, or drag and drop it to the program and it will create it automatically. Here are some screenshots of how the program looks like and how I defined the different parts. The full code is available at the bottom of this page.
Note that I first define globally all the objects and in the setup loop I set them up. This is important to be done in the setup loop and not in the draw loop to have a faster program as you will define it just once.
I start the draw loop with the background drawing of the elements that will be there always, the ukulele shape and the Read and Write buttons. I didn't set them up in the setup loop because I need to redraw it to cover the other parts that I don't want to show.
Buttons
For the buttons I used some Objects of the svg, I get the coordinates of the object first and then defined a boolean to be set as true if the mouse is clicked on top of it. This is an example:
Then I created a simple loop to check the first instance of the click, so you cannot click in a button, hold the mouse and change to another button. With this state I draw some thing or another, with the draw loop, if the read button is pressed it will appear as yellow, if the write button is pressed it will be yellow and the chords will appear. For each state a function ReadU() or WriteU() will run to check the states.
The ReadU() loop what it doest is to check the Serial port, if there is something it reads the information of the devices, knowing that the communication protocol is to send one byte where the 4 first bits will define the fret number and the 4 last the state of the 4 strings. Then I used the plot() function that I created to draw all the lighting LED's.
The WirteU() loop is much more complicated, because I had to take actions depending on which chord is selected, so I went chord by chord defining how it looked alike. I'm sure there is a much efficient way to do it, but it was the first thing it came to my mind, I will try to make it more efficient. Here is an example of some chords:
This is how it looks like, and a video of it working:
