Is possible use different layer for the axes on chart?

#1

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?

#2

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?

#3

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.

#4

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 
#5

I explained more editing post above when You wrote :slight_smile:

#6

I have no code yet. I’m asking only about layers.

#7

sorry, i can not give you any answer about layers

#8

Yes. That is possible.

#9

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