how to create scrolling charts reading values from serial port?

Programming Questions

secondsky

how to create scrolling charts reading values from serial port?

in Programming Questions • 2 years ago

Hi all, i would like to create a kind of scrolling chart, woth the data coming from my arduino.

Something like this...

Thank you all...

Replies(6)

PhiLho

Re: how to create scrolling charts reading values from serial port?

2 years ago

Well, you just draw the boxes, and when getting new data, you shift the boxes, dropping the last one, and adding one at the opposite end.

secondsky

Re: how to create scrolling charts reading values from serial port?

2 years ago

I had imagined something like that, implemented by a line whose vertices have a variable y given by the flow of datas.
But I'm unable to write it, is there any example of a script or some specific function that I should use?
thanks

PhiLho

Re: how to create scrolling charts reading values from serial port?

2 years ago

Ah, I thought you were mentioning the upper data boxes...
Well, the idea remains the same.
Here is a quick sketch showing the idea, you can replace the noise with data from your device.

int DATA_SIZE = 100;
float[] data = new float[DATA_SIZE];
int counter;
void setup()
{
size(500, 200);
smooth();
frameRate(5);
noiseDetail(2);
noiseSeed(System.currentTimeMillis());
for (int i = 0; i < DATA_SIZE; i++)
{
data[i] = getValue();
}
}
void draw()
{
background(255);
fill(#005599);
text(data[0], 10, 20);
for (int i = 1; i < data.length; i++)
{
line(i * 5, data[i -1], (i + 1) * 5, data[i]);
data[i - 1] = data[i];
}
data[DATA_SIZE - 1] = getValue();
}
float getValue()
{
return map(noise(counter++ * 0.1), 0.0, 1.0, 10.0, height - 10.0);
}

cedrickie..

Re: how to create scrolling charts reading values from serial port?

2 years ago

i remembered that i answered the same question in 2009. so maybe this example helps :
http://processing.org/discourse/yabb2/YaBB.pl?num=1258658941

secondsky

Re: how to create scrolling charts reading values from serial port?

2 years ago

Thank you, is what i was searching for.

And if I would like to close the poligon for use a fill, you thick could be possible to add some static vertex?

and a second thing:

i tried to add some markup to display the time... but there is a problem because are not each different but static, they appear all the same and in constant change:

int[] numbers = new int[400];
//String [] moment = new String [400];
int[] moment = new int [400];
void setup(){
size(400,400);
}
void draw(){
background(255);
PFont font;
font = loadFont("Helvetica-10.vlw");
textFont(font);
//GraphPaper
for(int i = 0 ;i<=width/10;i++){
int moment = second();
stroke(200);
line((-frameCount%10)+i*10,0,(-frameCount%10)+i*10,height);
fill(0);
line(0, i*10,width,i*10);
text (""+moment,(-frameCount%20)+i*20,30,(-frameCount%20)+i*20,height);
}
noFill();
stroke(0);
beginShape();
for(int i = 0; i<numbers.length;i++){
vertex(i,350-numbers[i]);
}
endShape();
for(int i = 1; i<numbers.length;i++){
numbers[i-1] = numbers[i];
}
numbers[numbers.length-1]=mouseY/2;
}

PhiLho

Re: how to create scrolling charts reading values from serial port?

2 years ago

Don't load the font on each frame!
And I am not sure to fully understand your problem with text. But perhaps you want to do a second, different loop to display it.

Top Reply