How to print serial values above rect and not blur

Processing Electronics (Arduino, etc.)
1

Hello, I’m trying to print the serial value of my Arduino just above the rect and circle, but when the value changes there is a buildup of values so it looks blurry. any suggestions for me? Sorry, I’m just learning to use processing.
image

// test print angka dan rectangle

import processing.serial.*;

//float num= random(0, 50);
//float num1= random(0, 100);

Serial port;

void setup() {
  background(0);
  size(400, 400);
  port = new Serial(this, "COM8", 9600);
  rect(80, 80, 60, 60, 12);
  rect(220, 80, 60, 60, 12);
  ellipse(180, 200, 100, 100);
  
  fill(0, 120, 255);
  PFont f = createFont("Georgia", 70);
  textFont(f);
  textSize(15);
  text("Ambient Temp(°C)", 60, 70);
  text("Humidity(%)", 210, 70);
  text("Load (Kg)", 150, 270);

}

void draw() {
 // noStroke();
  

  if (port.available() > 0) {
    String val = port.readString();
    String [] list = split(val, ',');
    float temp = float(list[0]);
    float hum = float(list[1]);
    float load = float(list[2]);
    fill(0, 120, 255);
    textSize(15);
    text(temp, 90, 115);
    text(hum, 225, 115);
    text(load, 150, 205);
  }
}
2

Hello,

Look up the reference for background() and you will find your answer.

Lots of resources here:

:)

3

I’ve read the background() references, according to what I read there only explains how the background is set in the draw or in the setup. And also explains how to set a photo as a background. Besides that I have also tried the background on setup side and draw side. when I set it in the setup section the results are like the photo I sent before, when I set it to draw it looks like a blinking background.
is there any suggestion @glv ?
Btw thank you so much brother…

4

Hello,

Read the references for setup() and draw() to understand how they work.

Do you want to keep writing “text on top of text” or “text on an ellipse”?

If it is blinking it is because it is only updated during the if (port.available() > 0) with background() in draw() and this may not be every draw() cycle depending on how often you are sending data.

Take a look at this:

And consider the scope of temp, hum and load and where in draw() you want to display these.

:)

5

I want to display temp data, hum on top of primitive shapes like rect and ellipses, as rect and ellipses become “isolated” boxes for temp data, hums etc.
@glv, so you mean i must be define each data as a variable that i want to print on window? . Thank You…

i’ve declared temp, hum, and load as a global variabel but the result still same as before.

// test print angka dan rectangle

import processing.serial.*;

float temp;
float hum;
float load;

Serial port;

void setup() {
  background(0);
  size(400, 400);
  port = new Serial(this, "COM8", 9600);
  rect(80, 80, 60, 60, 12);
  rect(220, 80, 60, 60, 12);
  ellipse(180, 200, 100, 100);

  fill(0, 120, 255);
  PFont f = createFont("Georgia", 70);
  textFont(f);
  textSize(15);
  text("Ambient Temp(°C)", 60, 70);
  text("Humidity(%)", 210, 70);
  text("Load (Kg)", 150, 270);
}

void draw() {
  //stroke(255);


  if (port.available() > 0) {
    String val = port.readString();
    String [] list = split(val, ',');
     temp = float(list[0]);
     hum = float(list[1]);
     load = float(list[2]);
    fill(0, 120, 255);
    textSize(15);
    text(temp, 90, 115);
    text(hum, 225, 115);
    text(load, 150, 205);
  }
}

:grinning:

6

Hello,

Try this:

int blur;
int count;

//Runs once
void setup()
  {
  size(200, 200);
  textSize(48);
  fill(0);
  }
  
//Repeats  
void draw()
  {
  //background(255);
  if (frameCount%20 == 0) //Every 20 frames == 0
    {
    count = count+1;
    //text(count, width/2, height/2);
    }
    //text(count, width/2, height/2);  
  }

Think about what will happen first and try uncommenting different combination’s of the lines that are commented.

I used frameCount and updated count every 10 frames to behave as if the Arduino was sending data with pauses.

:)

1 Like
7

hello @glv , i 've learned what u sent for me. i’ve just tried on my own program, and it’s working bro.
image

// test print data on top of rect and ellips

import processing.serial.*;


float temp;
float hum;
float load;


Serial port;

void setup() {

  size(400, 400);
  port = new Serial(this, "COM5", 9600);

}

void draw() {
  background(0);

  if (port.available() > 0) {
    String val = port.readString();
    String [] list = split(val, ',');
    temp = float(list[0]);
    hum = float(list[1]);
    load = float(list[2]);

   }
  stroke(255);
  fill(255);
  rect(80, 80, 60, 60, 12);
  rect(220, 80, 60, 60, 12);
  ellipse(180, 200, 100, 100);

  //fill(0, 120, 255);
  PFont f = createFont("Georgia", 70);
  textFont(f);
  textSize(15);
  text("Ambient Temp(°C)", 60, 70);
  text("Humidity(%)", 210, 70);
  text("Load (Kg)", 150, 270);

  //fill(255, 1, 2);
  textSize(15);
  fill(0, 0, 255);
  text(temp, 90, 115);
  fill(255, 0, 0);
  text(hum, 225, 115);
  fill(0, 255, 0);
  text(load, 150, 205);

}
1 Like