Visualizing Arduino Data

Arduino has come out with a serial plotter, but it leaves a lot to be desired. In order to visualize Arduino data, I have had better luck with processing. There is a sample program on the arduino site: https://www.arduino.cc/en/Tutorial/Graph. The processing code is a comment in the arduino sketch. You can download processing at: https://processing.org/download/

Also, the processing code didn’t work for me at first. I added the code I used at the end of this post, but it would be good to look at the code in the arduino sketch since it has a good way to draw a line graph.


// Example by Tom Igoe

import processing.serial.*;

Serial myPort; // The serial port
PFont myFont; // The display font
String inString; // Input string from serial port
int lf = 10; // ASCII linefeed
int xPos = 0;
void setup() {
size(600,600);
// You'll need to make this font with the Create Font Tool
//myFont = loadFont("ArialMS-18.vlw");
//textFont(myFont, 18);
// List all the available serial ports:
printArray(Serial.list());
// I know that the first port in the serial list on my mac
// is always my Keyspan adaptor, so I open Serial.list()[0].
// Open whatever port is the one you're using.
myPort = new Serial(this, Serial.list()[0], 9600);
myPort.bufferUntil(lf);
}

void draw() {
background(0);
// get the ASCII string:
if (inString != null) {
// trim off any whitespace:
inString = trim(inString);

/* replace this code with code to draw your data
String[] vals = inString.split(",");
// convert to an int and map to the screen height:
float y = float(vals[0]);
float x = float(vals[1]);
y *= -1;
x = map(x, -100, 100, 0, height);
y = map(y, -100, 100, 0, width);

// draw the line:
stroke(127,34,255);

arc(x-5, y-5, 10, 10, 0, 2*PI);
*/
}
}

void serialEvent(Serial p) {
inString = p.readStringUntil(lf);
}

Leave a Reply