Week #17 INTERFACE AND APPLICATION PROGRAMMING




Assignment





In my case I use the practice of Input ( pH probe ) I did a few weeks ago. I will create a graphic interface using " Processing".

Processing


Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks.

Of all the options, I choose Processing because it is a very similar language to that used Arduino which I know well. The program consists of reading pH data that Arduino send through the serial port and display this data in a graphical interface using Processing for this. The program loaded in Arduino is the same as the one used during the practice of Inputs week




The only thing I've changed is sending data through the serial that has nothing to do with the data to show. The main problem I've had and I have not been able to solve is to transform the character data into an integer. When information is sent over the serial port, itis sent as a text string, the length of this string can be variable and I have not been able to store this data as an integer, losing resolution to display data on the screen.



The program (Processing)


Processing like Arduino is divided into two functions "SetUp" and "Draw", in the first function all parameters are set including the port from which data is read "serialPort = new Serial(this, Serial.list()[1], 9600);". In the "Draw", I will draw the background include text and the bar that will move depending on the pH read.
This is the program that runs under Processing:



                /*
		  FabAcademy 2016: Interface and Application Programming
		  Code to show on screen the pH value (graphically)
		  Author: Guillaume Teyssié  10/06/2016 inspired by Raul Diosdado (Fab Academy student 2015)
		*/


		import processing.serial.*;

		Serial serialPort;  // Create object from Serial class


		void setup() 
		{
		  size(800, 500); //set window size
		  background(0); //set background color to black
		  stroke(255);  // set stroke to white 
		  smooth(); //smooth out the lines
		  println(Serial.list());
		  serialPort = new Serial(this, Serial.list()[1], 9600);  
		}

		void draw() 
		{
		  
		  while (serialPort.available () > 0) 
		  {
			background(0);
			
			textSize(25);
			fill(255, 0, 0);
			text("FabAcademy 2015: Interface and Application Programming", 50, 50);
			textSize(20);
			text("Code to show on screen the pH value (graphically)", 50, 85);
			text("Author: Raúl Diosdado",50 , 110);
			
			int pH = serialPort.read()-48; 
			println(pH);  //print the values read from the serial port to the console
			
			textSize(50);
			fill(255, 0, 0);
			text("pH Value:", 50, 200); 
			text(pH,300,200);
				
			stroke (250,0,0);
			fill(255,0,0);
			rect(50,250,pH*50,100);   
		  }
		}
                
                

Interface resulting of Processing program



Testing the Interface


Download


You access and download all the files generated during this week from my google drive:




Conclusion