Interface & Application Programming

´This week I will make an application with a graphical interface, so I can control the volume on my speaker. It would be optimal if I could create an application that could run on my iPhone or iPad. Firstly, I would start by making the application so it will run on the computer. I will use Proccessing to write the code.

Workflow in Processing

Processeing and Arduino are very similar in the layout and workflow. I start by making my graphic layout. My thought is to make three rings on the outside of a circle. The idea is that if you start in the middle and swipe outward you turn up the volume and if you swipe outside in you turn down the volume. I also make a “soundbar” in the application showing the volume level.

Coding

The first part of the code is the graphical layout. In the code I make several circles of different colours that overlap each other and therefore appear as rings and in the middle a circle.

The next part of the code is the functional part. I want to know whether a person is sliding their finger inwards or outwards, and how far before he/she releases pressure of the mouse button. I do this by reading the location of the mouse in relation to the relative x, y coordinates when clicking the mouse button down. I can read out delta x and delta y. By using Pythagoras I can calculate the distance. When the mouse button is released, I again can read the relative x, y coordinates and calculate the distance from the centre. By subtracting the "start distance" and "end distance" apart, I can read how far the cursor has moved and whether it is outward or inward depending on whether it has a positive or negative value.

At the end of the code I do a mapping of the values so that I can later use them to test the function by turning up and down a LED. The soundbar width is controlled by the “volume” value and will change depending on whether you raise or lower the volume. The codes can be downloaded

Testing the application

To test the application, I use my Hello world board from earlier in the course, because there is an LED which I can control the brightness, as if it was sound. I will use ardunino to make a simple code.

' The code is very simple. All it is doing is reading the output from my serialport, which the Processing program is sending the mapped value too. Then it will use the value to determine how bright the LED should be. By using the application a made in Processing, I can now turn up and down the LED's brightness. The codes can be downloaded here .

I have made a little video, showing the functionality. video