2d graph of signals of arduino

import processing.serial.Serial;
import grafica.*;
public GPlot plot2 ;
static final int PORT_INDEX = 0, BAUDS = 9600;
int i=0; 
int[] vals = {};
//float[] vals = {};
void setup() {
  vals=new int[5];
  size(850, 660);
  noLoop();
  final String[] ports = Serial.list();
  printArray(ports);
  new Serial(this, ports[PORT_INDEX], BAUDS).bufferUntil(ENTER);

  plot2 = new GPlot(this);
  plot2.setPos(460, 0);
  plot2.setDim(250, 250);
  plot2.getTitle().setText("position");
  plot2.getXAxis().getAxisLabel().setText("X");
  plot2.getYAxis().getAxisLabel().setText("Y");
}

void draw() {
  println(vals);

  // Draw the second plot  
  plot2.beginDraw();
  plot2.drawBackground();
  plot2.drawBox();
  plot2.drawXAxis();
  plot2.drawYAxis();
  plot2.drawTitle();
  plot2.drawGridLines(GPlot.BOTH);
  plot2.drawLines();
 // plot2.drawPoints(star);
  plot2.endDraw();
  plot2.addPoint(i, vals[1]); // Error <---
 
}

void serialEvent(final Serial s) {
  vals = int(splitTokens(s.readString()));
  //vals = float(splitTokens(s.readString()));
  i++;
  redraw = true;
}

hi I am a student and i a new in this world of processing. My proyect consists of graph eight signals coming from arduino. I started with only one but in the line " plot2.addPoint(i, vals[1]);" mark [ArrayIndexOutOfBoundsException: 0] so if someone may help me please Ty…

Hi,

Welcome to the forum! :wink:

Your error is :

This means that you are trying to access an element from an array at in index that is too high or too low.

Consider this simple example :

int vals[] = {0, 5, 2, 1};

println(vals[0]); // -> 0
println(vals[3]); // -> 1

println(vals[-1]); // -> ArrayIndexOutOfBoundsException: -1
println(vals[5]); // -> ArrayIndexOutOfBoundsException: 5

So the first two statements work but the next ones try to access an element that is not in the array therefore it throws an Exception of type ArrayIndexOutOfBoundsException.

Your error is caused by the fact that you say :

vals = int(splitTokens(s.readString()));

Which gets the string from the Serial buffer, split it by space or delimiter then convert it to an array of ints. But what if the serial buffer is empty?

Then your vals array is going to be empty therefore you can’t access the element at index 1.

I think that you changed your code because the error message should be :

ArrayIndexOutOfBoundsException: 1 // not 0

You can check if the array is not empty by saying :

if (!vals.length == 0) {
  plot2.addPoint(i, vals[1]);
}

Have fun! :wink:

1 Like

Thanks josephh for the help and the welcome. but i change this one, the other generates me a Error

if (vals.length != 0) {
  plot2.addPoint(i, vals[1]);
}

the code is good
A last Question you have any idea if can i draw a other graph in the same plot with this library if you have other forums can be help me.

import grafica.*;
1 Like

Yeah sure, you can check this example on the GitHub repo :

It uses the GPlot.addLayer(...) to add a second layer on top of the graph :

plot1.addLayer("layer 1", points1b);
1 Like

Hello, i don’t know what’s wrong this not mark an error, but the second layer no draw. can you check please.

import processing.serial.Serial;
import grafica.*;
import java.util.Random;

public GPlot plot2 ;

static final int PORT_INDEX = 0, BAUDS = 9600;
int i=0; 
int[] vals = {};
//float[] vals = {};

GPointsArray points1a = new GPointsArray(500);

void setup() {
  //vals=new int[6];
  size(850, 660);
  noLoop();
  final String[] ports = Serial.list();
  printArray(ports);
  new Serial(this, ports[PORT_INDEX], BAUDS).bufferUntil(ENTER);
  


  plot2 = new GPlot(this);
  plot2.setPos(5, 5);
  plot2.setDim(550, 550);
  plot2.getTitle().setText("Posicion");
  plot2.getXAxis().getAxisLabel().setText("X");
  plot2.getYAxis().getAxisLabel().setText("Y");
  plot2.addLayer("layer 2", points1a);
  plot2.getLayer("layer 2").setLineColor(color(150, 150, 255));
}

void draw() {
  println(vals);

  // Draw the second plot  
  plot2.beginDraw();
  plot2.drawBackground();
  plot2.drawBox();
  plot2.drawXAxis();
  plot2.drawYAxis();
  plot2.drawTitle();
  plot2.drawGridLines(GPlot.BOTH);
  plot2.drawLines();

  // plot2.drawPoints(star);

  if (vals.length == 6) {
    plot2.addPoint(i, vals[0]);
    points1a.add(i, vals[1]*2);
  }
  plot2.endDraw();
}

void serialEvent(final Serial s) {
  vals = int(splitTokens(s.readString()));
  //vals = float(splitTokens(s.readString()));
  i++;

  redraw = true;
}

i check the serial and is ok

Here I can only see one instance of GPlot is that right?

2 Likes

yes it is right, i try use this but it mark a error

 if (vals.length == 6) {
    plot2.addPoint(i, vals[0]);
    points1a.add(i, vals[1]*2);
    plot2.addPoint(points1a,"layer 2" );
  }

Error is

The method addPoint(GPoint, String) in the type GPlot is not applicable for the arguments (GPointsArray, String)

Hello there, i can make a “solution”

import processing.serial.Serial;
import grafica.*;
import java.util.Random;

public GPlot plot2 ;

static final int PORT_INDEX = 0, BAUDS = 9600;
int i=0; 
int[] vals = {};
//float[] vals = {};

GPointsArray points1a = new GPointsArray(2);

void setup() {
  //vals=new int[6];
  size(850, 660);
  noLoop();
  final String[] ports = Serial.list();
  printArray(ports);
  new Serial(this, ports[PORT_INDEX], BAUDS).bufferUntil(ENTER);



  plot2 = new GPlot(this);
  plot2.setPos(5, 5);
  plot2.setDim(550, 550);
  plot2.getTitle().setText("Posicion");
  plot2.getXAxis().getAxisLabel().setText("X");
  plot2.getYAxis().getAxisLabel().setText("Y");
  plot2.addLayer("layer 2", points1a);
  plot2.getLayer("layer 2").setLineColor(color(150, 150, 255));
}

void draw() {
  println(vals);

  // Draw the second plot  
  plot2.beginDraw();
  plot2.drawBackground();
  plot2.drawBox();
  plot2.drawXAxis();
  plot2.drawYAxis();
  plot2.drawTitle();
  plot2.drawGridLines(GPlot.BOTH);
  plot2.drawLines();

  

  if (vals.length == 6) {
    plot2.addPoint(i, vals[0]);
    points1a.add(i, vals[1]*2);
    plot2.addPoints(points1a,"layer 2");
  }
  plot2.endDraw();
}

void serialEvent(final Serial s) {
  vals = int(splitTokens(s.readString()));
  //vals = float(splitTokens(s.readString()));
  i++;

  redraw = true;
}

But it’s not working right. it make a line from the staring point. i don´t know why.


pd; i sholud make a new post?

xD_echicero_xD

where is your arduino code ??

here. i know only red a sensor but it is only for the test.

int sensorPin = 0; // Select input pin
int val = 0;
void setup() {
  Serial.begin(9600); // Open serial port
}
void loop() {
  val = analogRead(sensorPin) / 4; // Read value from sensor
  Serial.println("");
  for (int i = 0; i <= 5; i++) {
    
    Serial.print(val);
    Serial.write('\t');
  }
  delay(1000); // Wait 100 milliseconds

}
1 Like

The next code ca be 8 graph signals of arduino (voltaje, temperatura etc), Ty for all participates in this forum

import processing.serial.Serial;
import grafica.*;
import java.util.Random;

public GPlot plot2 ;

static final int PORT_INDEX = 0, BAUDS = 9600;
int i=0; 
int[] vals = {};
//float[] vals = {};

GPointsArray points2 = new GPointsArray();
GPointsArray points3 = new GPointsArray();
GPointsArray points4 = new GPointsArray();
GPointsArray points5 = new GPointsArray();
GPointsArray points6 = new GPointsArray();
GPointsArray points7 = new GPointsArray();
GPointsArray points8 = new GPointsArray();

void setup() {
  //vals=new int[6];
  size(850, 660);
  noLoop();
  final String[] ports = Serial.list();
  printArray(ports);
  new Serial(this, ports[PORT_INDEX], BAUDS).bufferUntil(ENTER);



  plot2 = new GPlot(this);
  plot2.setPos(5, 5);
  plot2.setDim(550, 550);
  plot2.getTitle().setText("Posicion");
  plot2.getXAxis().getAxisLabel().setText("X");
  plot2.getYAxis().getAxisLabel().setText("Y");
  plot2.setLineWidth(1.5);
  //
  plot2.addLayer("layer 2", points2);
  plot2.getLayer("layer 2").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 2").setLineWidth(1.5);
  //
  plot2.addLayer("layer 3", points3);
  plot2.getLayer("layer 3").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 3").setLineWidth(1.5);
  //
  plot2.addLayer("layer 4", points4);
  plot2.getLayer("layer 4").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 4").setLineWidth(1.5);
  //
  plot2.addLayer("layer 5", points5);
  plot2.getLayer("layer 5").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 5").setLineWidth(1.5);
  //
  plot2.addLayer("layer 6", points6);
  plot2.getLayer("layer 6").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 6").setLineWidth(1.5);
  //
  plot2.addLayer("layer 7", points7);
  plot2.getLayer("layer 7").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 7").setLineWidth(1.5);
  //
  plot2.addLayer("layer 8", points8);
  plot2.getLayer("layer 8").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 8").setLineWidth(1.5);
  
  //
  plot2.activatePanning();
  plot2.activateZooming(1.2, CENTER, CENTER);
  plot2.activateReset();



}

void draw() {
  // println(points1a);

  // Draw the  plot  
  plot2.beginDraw();
  plot2.drawBackground();
  plot2.drawBox();
  plot2.drawXAxis();
  plot2.drawYAxis();
  plot2.drawTitle();
  plot2.drawGridLines(GPlot.CTRLMOD );
  plot2.drawLines();



  if (vals.length >= 1) {
    i++;
    plot2.addPoint(i, vals[0]);

    if (vals.length >= 2) {
      plot2.addPoint(Point(i, vals[1]), "layer 2");
      if (vals.length >= 3) { 
        plot2.addPoint(Point(i, vals[2]), "layer 3");
        if (vals.length >= 4) {
          plot2.addPoint(Point(i, vals[3]), "layer 4");
          if (vals.length >= 5) {
            plot2.addPoint(Point(i, vals[4]), "layer 5");
            if (vals.length >= 6) {
              plot2.addPoint(Point(i, vals[5]), "layer 6");
              if (vals.length >= 7) {
                plot2.addPoint(Point(i, vals[6]), "layer 7");
                if (vals.length >= 8) {
                  plot2.addPoint(Point(i, vals[7]), "layer 8");
                }
              }
            }
          }
        }
      }
    }
  }
  plot2.endDraw();
}

void serialEvent(final Serial s) {
  vals = int(splitTokens(s.readString()));
  //vals = float(splitTokens(s.readString()));


  redraw = true;
}

GPoint Point(float i, float n) {
  return new GPoint(i, n);
}
1 Like