Interface and Application Programming

Serial Gas Visual

Weekly assignment: write an application that interfaces with an input &/or output device

For this assignment I used again the MQ7 sensor as input connected with the FabKit. The sensor collect floating variables and the FabKit reads them on an analog pin and write detcted values on the serial monitor.

I wanted to use Processing and visualize data from arduino through serial connection. I found this interesting tutorial that helped me understanding how to make the arduino code and the processing code relate to each other (actually, it is enough to set the same serial port).

Basically, you need to import in Processing a library called "processing.serial" that will visualize data read throu serial port. If you want to visualize both on the arduino serial monitor and on the Processing display the data flow, you then need to run both IDEs. I tried to use also processing.js to visualize also on my webpage the data streaming but I couldn't achieve nothing this wy because I then realize that processing-seria library doesn't work with processing.js.



Grab the fritzing sketch

Serial_Gas_Visual.pde
import processing.serial.*;

int lf = 10;    // Linefeed in ASCII
String myString = null;
Serial myPort;  // The serial port

void setup() {v
  size(850,600);
  // List all the available serial ports
  println(Serial.list());
  // Open the port you are using at the rate you want:
  myPort = new Serial(this, "/dev/tty.usbserial-A1012WKY", 9600);
  myPort.clear();
  // Throw out the first reading, in case we started reading 
  // in the middle of a string from the sender.
  myString = myPort.readStringUntil(lf);
  myString = null;
}

void draw() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil(lf);
    if (myString != null) {
      
      println(myString);
      background(255);
      fill(float(myString),100,100);
      if (float(myString) > 100) {
      ellipse(width/2, height/2, float(myString)*2, float(myString)*2);
      } else if {
      rect(0, 100, float(myString)*4, 120); 
      }
    }
  }
}
	

Grab the Processing code

Serial_Gas_Visual.ino
    
int MQ7 = A1; // it is my sensor on analog pin
//float temp = 0;
float temp = 0; // not sure about it. Using float the sensor wasn't reading, as the serial monitor showed

void setup () {
  Serial.begin (9600);  
}
void loop () {
   temp = analogRead (MQ7);
  temp = map(temp,0,1023,0,500); 
  Serial.println(temp); 
  delay(100);
}

Grab the Arduino Code