Hello,
I’m just starting with Processing to process data from serial port.
I want to show animated data on chart something like the chart below.
Is possible use different layer for the axes and scale lines on chart?
you could start with
Issue with using array after splitTokens() this
or mod version
// v01 get CSV line // like: 1023,927,843,761,693,0,0 A0,1,2,3,4 D2,3
// v02 save to table
Table table;
String outfile = "data/arduino.csv";
/*
A0,A1,A2,A3,A4,D2,D3
1023,927,839,751,672,0,0
*/
import processing.serial.*;
Serial port;
String ports, inString;
String[] elements;
boolean diagp = true;//false;//true;
int baud = 115200; // 300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 57600, 115200, 230400, 250000, 500000, 1000000, 2000000
boolean getrecord= false;
int many = 0, expect = 7, recs=0;
int[] values = new int[expect];
float zoom;
void setup() {
size(300, 300);
if ( diagp ) printArray(Serial.list());
ports = Serial.list()[1];
port = new Serial(this, ports, baud);
port.bufferUntil('\n');
stroke(0);
zoom = (height-60)/1023.0;
background(200, 200, 0);
println("use \nkey [p] for diagnostic print\nkey [c] clear\nkey [s] save table");
setup_table();
}
void draw() {
if ( getrecord ) {
getdata();
stroke(200, 200, 0);
line(recs, 0, recs, height); // the actual line is init with the background color first ( overwriting old graph )
for (int i=0; i<expect; i++ ) {
float ypos = height-50 - values[i]*zoom;
if ( i > 4 ) ypos = height-10*(i-4) - 5*values[i]; // for the digital vals
if ( diagp ) println(" values ["+i+"] "+values[i]+" xpos "+recs+" ypos "+ypos);
stroke(0, i*40, 200-i*40);
point( recs, ypos ); // graph
}
recs++; // next pix xdir
if ( recs > width ) recs = 0;
stroke(255);
line(recs, 0, recs, height); // and draw a white line ahead to show "cursor"
stroke(200, 0, 0); // grid on cursor! analog
for (int k=0; k<6; k++ ) line(recs, 10 + k*( height-60)/5, recs+3, 10 + k*( height-60)/5);
stroke(0, 0, 200); // grid on cursor! digital
for (int k=0; k<=3; k++ ) line(recs, height -10 - k*5, recs+5, height -10 - k*5);
getrecord = false;
}
}
void getdata() {
if ( diagp ) println(inString);
elements = splitTokens(inString, ","); // split and set some globals...
int many = elements.length;
if ( many >= expect ) {
for (int i=0; i<expect; i++ ) { // convert the string to int only for the expected value list
if ( diagp ) print(elements[i]+" , ");
values[i] = int(elements[i]);
}
if ( diagp ) println();
store_record();
} else {
println("com error, found short line:"+inString);
}
}
void serialEvent(Serial thisport) { // read the serial buffer:
inString = thisport.readString();
if ( inString != null ) {
inString = trim(inString); // clean
getrecord = true;
}
}
void keyPressed() {
if ( key == 'p' ) println("diagp: "+(diagp = ! diagp));
if ( key == 'c' ) background(200, 200, 0);
if ( key == 's' ) {
saveTable(table, outfile);
println("save to: "+outfile);
}
}
void setup_table() {
table = new Table();
table.addColumn("A0");
table.addColumn("A1");
table.addColumn("A2");
table.addColumn("A3");
table.addColumn("A4");
table.addColumn("D2");
table.addColumn("D3");
}
void store_record() {
TableRow newRow = table.addRow();
for ( int c =0; c<7; c++) newRow.setInt(c, values[c]);
}
/*
// arduino code tested Arduino Leonardo Arduino IDE 1.8.9 hourly
String aline; // readable char line
void make_aline() {
aline = "";
aline += analogRead(0);
aline += ',';
aline += analogRead(1);
aline += ',';
aline += analogRead(2);
aline += ',';
aline += analogRead(3);
aline += ',';
aline += analogRead(4);
aline += ',';
aline += digitalRead(2);
aline += ',';
aline += digitalRead(3);
// ++ CR LF
}
int wait = 500;
long baud = 115200; // 300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 57600, 115200, 230400, 250000, 500000, 1000000, 2000000
void setup() {
Serial.begin(baud);
while (!Serial) {
; // wait for serial port to connect. Needed for native USB port only ( arduino leonardo )
}
}
void loop() {
make_aline();
Serial.println(aline);
delay(wait);
}
*/
and make it more nice?
I didn’t ask about how to tokenize data.
Maybe i’m wrong, but in code You shown I don’t see anything about question i asked:
Is possible use different layer for the axes and scale lines on chart?
In other words i want to draw axes and horizontal and vertical scale lines (grid) only once.
Then in other process i want to draw animated line representing data.
yes and no,
actually i used a trick and put a kind of scale line on a running cursor
but the basic question is, do you use a static canvas ( no background() in draw )
like i did above? then you have to do the axis like:
a y1 axis left , a y2 axis right ( for a max 2 curve plot )
anyhow only one time, just not over draw it with cursor or data.
show us what chart you use now please?
++ i mean show your code , formatted in
</> code tag
I explained more editing post above when You wrote 
I have no code yet. I’m asking only about layers.
sorry, i can not give you any answer about layers
Yes. That is possible.
Technically layers are not necessary
Just put the code for axes etc. in a function and call it throughout. It’s not much processor load.
For layer write axes in a PGraphics - see reference
Use it as background