Skip to content

16. Interface and application programming

In this week, I have used one of the soldered boards to generate an interface that show what is happened in a graphic way instead of reading a command text bar.

Processing

Processing is an easy-to-use, open source, Java-based integrated programming language and programming environment that serves as a medium for the teaching and production of multimedia and interactive digital design projects.

You can download the program here:

As the describe itself

“Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.”

I used it many years ago and now it is the moment to clear the dust of my knowledge of it and tray to generate something for this assignment.

Interface of an Ultrasonic sensor

In my case, I decide to use the ultrasonic board, I generated in 11 week I found so interesting the tutorials and the examples cases you can find here:

so just install the program, and connect the ultrasonic sensor to your computer with the FTDI wire.

Then you can see that the interface is very similar to Arduino. In Arduino you can find void SetUp and void loop just to indicate the task while running, and what happen with the variables, and in Processing you find the same void SetUp but the difference is here void Draw. As an interface generator, Processing is always finishing with a window that show you whatever you have done.

Programming the Interface

I used this library of example that I have modified just to achieve what I wanted.

First, the rectangle to draw, 200x400

size= (200, 400);

When connect, you first need to get the dates of your input, in my case distances of the sensor. For that you should know which is the port for receiving those data.

println (Serial.list());

My port was 1. Now is turn to void Draw.

 if ( myPort.available() > 0)
   String[] list = split(myPort.readString(), " ")

Here I had one problem when I received values. I had programing ultrasonic sensor that printed no just the distance, but “cm” too at the end of each value. This was crazy because I only saw a lot of numbers that were repeating on the screen when played the action. Finally I read on internet that processing was printing all characters in ASCII format!!

For Example if there was 13 cm, processing printed:
"1"     =     49
"3"     =     51
(espace bar)= 32
"c"     =     99      
"m"     =     109

  • Finally what I did a separation between both values (number) and (cm)

  • Then I only get the first list [0]

  • This list I transform into a integer number to recognize a value.

  • With this value I could remap to generate 2 rectangles, one in the background and other one related to that value, that increased or decreased in fact of the distance.

  • Definition ultrasonic

Here you can see better the result in a vide demo:

I hope you will enjoy it

Licencia de Creative Commons
Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional.