Hey there,
since this is my first post here I’ll quickly introduce myself:
I am an material sciences engeneering student with a hobby level experience in some
coding matters (like arduinos, tinkering with physics engines etc.). So far i have used C++, Java and very recently Python. I usually get around any problem through googling or trying out things long enough, but since i use processing more and more recently, why not finally join a forum. I beg for your understanding right upfront: Don’t expect sleek, nice looking codes by me, since i am a self educator and it’s a hobby. But i always like to listen to advice by people who are pros in coding and like to share their knowledge. That’s why i am now here.
Now to the topic:
I’m trying to build a serial data grapher and i can already display data with it, so far, so good. GUI is not a thing yet, at the moment i’m trying out different approaches to scale/zoom into the canvas and the graph. For the graph itself i use PGraphics, since i’ve read it’s best for resetting shapes (or a very convenient way of doing it), the rest of the canvas is normal draw() code like “transform” etc.
It works as i expect it to, until i zoom in far enough, then i suddelny get only a half-drawn graph. My suggestion is, it has to do with transforming (“scaling”) the normal canvas and the PGraphics things (something is moving out of sight?), but i tinkered with different settings and operations and i think i do not well enough understand what is happening.
When you run the code, you should see a sine function developing. If you zoom in with mouse scroll/wheel, you can see the bottom half(ish) part of the graph not beeing drawn anymore. Can you spot what’s wrong? Thanks in advance.
import processing.serial.*;
PGraphics pg;
Serial myPort; // The serial port
int[] serialInArray = new int[1]; // Where we'll put what we receive
int ts, txtsz; // textsize dynamic, static
int serialCount = 0; // A count of how many bytes we receive
int scroll=0; // X-scroll counter
//int a; // new data
//int temp; // old data
float a; //debug only
float temp; //debug only
int scalX, scalY, maxdat; // dynamic scaling factors, maximum data size
void setup() {//SETUP-------------------------------------------------------------------------------------------------------
size(1900, 1100);
pg = createGraphics(width, height);
String portName = Serial.list()[0];
myPort = new Serial(this, portName, 115200);
//initial setup
scalX=1;
scalY=4;
scroll=width;
maxdat=255; //originated from 8 bit serial data
txtsz=5;
ts=txtsz*scalY;
textSize(ts);
}//SETUP END---------------------------------------------------------------------------------------------------------------
void draw() {//DRAW--------------------------------------------------------------------------------------------------------
//CANVAS-------------------------------------------------------------------------------------------------------------------
background(0);
//for dynamic changes:
ts=txtsz*scalY;
textSize(ts);
//offset to middle of window:
translate(0,(maxdat*2)-((scalY)*(maxdat/2)));
for(int i=0; i<(scalY*maxdat); i=i+(10*scalY)){ //line generator every 10 steps
stroke(100,50,50);
line(0,i,width,i);
}
for(int i=0; i<maxdat; i=i+10){ //text needs different steps, non scaled increment
text(i,0,(ts+(i*scalY)));
}
stroke(200,0,0);
line(0,0,width,0); //zero line
text(0,0,(ts));
line(0,scalY*(maxdat/2),width,scalY*(maxdat/2)); //middle line
text((maxdat/2),0,(ts+(scalY*(maxdat/2))));
line(0,scalY*(maxdat),width,scalY*(maxdat)); //max line
text((maxdat),0,(ts+(scalY*(maxdat))));
//DATA--------------------------------------------------------------------------------------------------------------------
int inByte = myPort.read();
// Add the latest byte from the serial port to array:
serialInArray[serialCount] = inByte;
serialCount++;
if (serialCount > 0 ) {
//real signal:
//a = -serialInArray[0];
//println(a);
//debug sine test signal:
a = -(60*sin(millis()/100.0)+127);
// Send something not -1 to request new sensor readings:
myPort.write(1);
// Reset serialCount:
serialCount = 0;
}
//LINE DRAW & SCROLLING---------------------------------------------------------------------------------------------------
pg.stroke(255);
if (scroll<((width)/scalX)){ //adapt scrolling to scaling
pg.beginDraw();
//pg.translate(0,maxdat*scalY);
pg.line(scalX*scroll,-scalY*temp,scalX*(scroll+1),-scalY*a); //first point old pos; second point 1 scroll ahead, new pos
pg.endDraw();
scroll++;
}
else{
pg.beginDraw();
pg.clear(); //clear canvas when graph reaches right window border
pg.endDraw();
scroll=0;
}
image(pg,0,0);
//make old pos out of current pos:
temp = a;
}//DRAW END----------------------------------------------------------------------------------------------------------------
void mouseWheel(MouseEvent event) { //ZOOM---------------------------------------------------------------------------------
float e = event.getCount();
if (e>0) {
scalY++;
scalX++;
pg.beginDraw();
pg.clear(); //reset graph after zooming operation
pg.endDraw();
scroll=0;
}
else if (e<0){
scalY--;
scalX--;
pg.beginDraw();
pg.clear();
pg.endDraw();
scroll=0;
}
//zoom range setting:
if (scalY<1){
scalY=1;
}
if (scalX<1){
scalX=1;
}
if (scalY>8){
scalY=8;
}
if (scalX>8){
scalX=8;
}
}//ZOOM END----------------------------------------------------------------------------------------------------------------
