interface and application programming
this week assignement are:
- Interpret and implement design and programming protocols to create a Graphic User Interface (GUI) .
Arduino & processing?
This week i choose to use PROCESSING for my weekly project. it was the first time i used it. the language is close to Arduino (C language) so a good point for starting.
After download it and istall it, i open it. and it's look really similar to the ARDUINO idea
the software is compose of two part like in the Arduino IDE
-
a setup and a "loop" in processing called draw
- PROCESSING file (processingfile.PDE)
- Ino file (RIGHT CLICK - SAVE AS)
![](images/w13/2.png)
so my imput board have already a code that i can use. it's already talking to my COM10 serial Port of my computer. since is already working. i have to plug my ftdi cable and start to work on the Processing code.
![](images/w13/3.jpg)
Time to code
![](images/w13/4.png)
import processing.serial.*;After that we have to tell him what the name of the serial and where we will keep track of the value from the serial.
Serial myPort; // Create object from Serial class int val; // Data received from the serial port
now we are ready for the setup part:
![](images/w13/5.png)
yPort = new Serial(this,Serial.list()[0], 9600);in the setup you have to now in pixel, the size of the window you want to create :
size(500, 500);then you have to tell the framerate of the "draw loop" and finally you can work on the Draw part. where everything gonna work.
![](images/w13/6.png)
if (0 < myPort.available()) {if we are receiving some data we have to take it track into "val" and to write it down for us.
val = myPort.read(); // read it and save it in val println(val); }when it's good is time to change the color of the 500X500px window we want to create. and i want it to be pink!
background(255,30,120);after that we have to tell, what to do when the value change. if the value is more than 49 so we have to change the color of the rectangle to Black
if (val >49) { // If the serial value is bigger that 49 then.., fill(0);if the value is less than 49, then change the color to Yellow
else { // If the serial value is not less than 49, }so the only thing we have to do is to tell him what is the size of the rectangle in the window we want to change the value. for that it's pretty simple. We just have to declare a new rectangle. the two first value is the position of the new rectangle in the windows, and the two last value is the size of the rectangle.
rect(125, 125, 250, 250);Et VOILAA!
Improvement & learning
it is all the time i have to do something this week, but the objectif was to make something like the Owl here![](images/w13/7.jpg)
--
file of the week.
here you'll find the file of the week
For downloading
right click and save as