Graph Arduino with Processing!

Having just started getting the feel for programming C/C++ with Arduino, I always wanted to give Processing a shot, being vaguely aware that Processing has the ability to catch serial from Arduino, and put it on a pretty graph. It’s just that Processing is Java, entirely new ground. And for many months the thought of starting on ….jAvA… just gave me the heebiddy jeebiddies. So I steamed on with C/C++

But! As I worked more with Arduino, I really wanted to graph something, and so the day finally came!

For reasons unclear to me, the most basic Graph example (THE most official, and so one would think, THE easiest), did not work. As HAL would say “Well, I don’t think there is any question about it. It can only be attributable to human error.” So the answer as to why my graph fails to graph is obviously…stupidity. I am stupid and have probably made some programming mistake somewhere. And so have …missed the plot somewhere (did you see what I did there?).

But using a longer way around, I eventually did get a lovely graph happily graphing. The problem seemed to be that the original example used a SerialEvent () function instead of putting code in the draw () function. In this example, everything is in draw (), and it seems to run fine (credit to Eric Forman).

Getting a graph running from Arduino to a computer is an important thing to do, because it is the start of learning to catch data from sensors and send it places, store it, alert you about something, or even link with a cellphone app.

The circuit was some simple feed from two gas sensor, and MQ-3 alcohol sensor, and an MQ-2 flammable gas sensor (it too can smell alcohol).

Sniff sniff — You’re drunk programmer. Go home.

On the Arduino side:

/*
MQ-3 Alcohol Sensor
MQ-2 H2, LPG, CH4, CO, Alcohol, Smoke or Propane
MQ-135 NH3,NOx, alcohol, Benzene, smoke,CO2
MQ-8 Hydrogen Sensor

*/
long Sensor1Val;
long Sensor2Val;

void setup() {
Serial.begin(9600);
Sensor1Val = 0;
Sensor2Val = 0;
}
void loop() {
for(int x = 0 ; x < 150 ; x++)
{
Sensor1Val = Sensor1Val + analogRead(A0);
}
Sensor1Val = Sensor1Val/150.0;

for(int x = 0 ; x < 150 ; x++)
{
Sensor2Val = Sensor2Val + analogRead(A1);
}
Sensor2Val = Sensor2Val/150.0;

Serial.print(Sensor2Val);
Serial.print(“,”);
Serial.println(Sensor1Val);
//delay(1);

// delay in between reads for stability
}

I did see afterward that there was another way with Arduino using code originally designed for the Java, and it likely is better if you want to scale up and add more sensors (here).

And on the Processing side:

import processing.serial.*;

Serial myPort;

int numValues = 2; // number of input values or sensors

// rename these variables for your input:
float A = 0; // red value
int Amin = 0;
int Amax = 1023;

float B = 0; // green value
int Bmin = 0;
int Bmax = 1023;

float partH; // partial screen height

int xPos = 1; // horizontal position of the graph
void setup() {
size(800, 600);
partH = height / numValues; // to divide screen up to draw the number of sensors

println(Serial.list());// List all the available serial ports
myPort = new Serial(this, “COM4”, 9600); // don’t generate a serialEvent() unless you get a newline character:
myPort.bufferUntil(‘\n’);

background(0);
}

void draw() {
// in this example, everything happens inside serialEvent()
// but you can also do stuff in every frame if you wish
// get the ASCII string:
String inString = myPort.readStringUntil(‘\n’);
//println(inString); // < – uncomment this to debug serial input from Arduino

if (inString != null) {
// trim off any whitespace:
inString = trim(inString);
// split the string on the commas and convert the resulting substrings into an integer array:
int[] values = int(split(inString, “,”));
// if the array has at least the # of elements as your # of sensors, you know
// you got the whole data packet. Map the numbers and put into the variables:
if (values.length >= numValues) {
// map them to the range of partial screen height:
A = map(values[0], Amin, Amax, 0, partH);
// A = A*4;
B = map(values[1], Bmin, Bmax, 0, partH);
println(A + “\t” + B); // < – uncomment this to debug mapped values

// draw lines:
stroke(255, 0, 0); // red
line(xPos, partH, xPos, partH – A);
stroke(0, 255, 0); // green
line(xPos, partH*2, xPos, partH*2 – B);

// draw dividing lines:
stroke(255);
line(0, partH, width, partH);
line(0, partH*2, width, partH*2);

// if at the edge of the screen, go back to the beginning:
if (xPos >= width) {
xPos = 0;
background(0); // erase screen with black
} else {
xPos++; // increment the graph’s horizontal position
}
}
}
}

When you run, you get…