How to write text() in processing when plotting data from serial port?

Question

Recently I'm learning to use processing with my arduino UNO, I've checked arduino graph tutorial and it works like a charm, but I've been unable to refresh a simple text when you are drawing data, for example if I have a realtime source of data that comes via serial port.

I want to write a text with the value, but it seems like it gets overshadowed/overwritten somehow, and is impossible to display with the number.

Check the following image:

enter image description here

The source code to plot that data is the following :

/*
GreenLine Temperature Graph,
Modified from https://www.arduino.cc/en/Tutorial/Graph
c1b3r
*/

import processing.serial.*;    
Serial myPort;        
int xPos = 1; 
color eggshell = color(255, 253, 248);

int temperaturaActual;
float temperaturaPreviaAltura = 0 ;
String inDataArduino;
PFont font;

void setup () {
    size(600,600);
    //fullScreen();  
    frameRate(30);   
    println(Serial.list());
    myPort = new Serial(this, Serial.list()[0], 9600);
    myPort.bufferUntil('\n');
    background(0);
    font = createFont("Arial",32,true);

}


void draw () {
  int Xmaxgraph = int(width-(width/4));
  println(Xmaxgraph,width, height);
  temperaturaActual = int(inDataArduino);
  float alturaTemperatura = map(temperaturaActual, 0, 1023, 0, height);
  stroke(255,255,255);
  line(Xmaxgraph, 0, Xmaxgraph, height);
  textSize(40);
  fill(255, 0, 0);
  textFont(font,16);                 
  text("Temp°", width - 150, 40);
  text(temperaturaActual, width - 150, 90);
  fill(255,255,0);
  text("Estado", width - 150, height-100);
  stroke(0,255,0);
  line(xPos-1, height - temperaturaPreviaAltura, xPos, height- alturaTemperatura);
  temperaturaPreviaAltura = alturaTemperatura;  
  if (xPos >= Xmaxgraph) {
    xPos = 0;
    background(0);
} else {
    xPos++;
 }

}
void serialEvent (Serial myPort) {
  inDataArduino = myPort.readStringUntil('\n');
  if (inDataArduino != null) {
    inDataArduino = trim(inDataArduino);

    }
}

Here is the syntax highlighted code.

Why is this behaviour happening? What can I do to fix this situation and see the text clearly while plotting the data?

I appreciate your help with this, Thank you, H.

I edited your post to include syntax highlighting, so you probably don't need the link anymore. — Kevin Workman

Kevin Workman Kevin Workman · Accepted Answer · 2018-11-21T17:29:21

Most Processing sketches will call the background() function at the top of every call to draw() to clear out old frames. You're only calling the background() function when the graph goes off the right edge of the screen. So for most frames, you're drawing directly on top of previous frames. This is why you see your text stack on top of itself.

To fix this, you either need to call the background() function every frame (this would require refactoring your code to redraw the whole graph every time), or you could probably get away with just drawing a rectangle over the previous text.

How to write text() in processing when plotting data from serial port?

1 Answers