# How to print serial values above rect and not blur

**URL:** <https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530>\
**Category:** Electronics (Arduino, etc.)\
**Tags:** homework\
**Created:** [November 15, 2021, 3:04pm UTC](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530 "2021-11-15T15:04:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![anwar05](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@anwar05](https://discourse.processing.org/u/anwar05)\
**Post date:** [November 15, 2021, 3:04pm UTC](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530/1 "2021-11-15T15:04:40Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/96d6365033ce22a6895eb800905b246b312a687b.png)

```auto
// 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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 15, 2021, 5:03pm UTC](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530/2 "2021-11-15T17:03:49Z")

</div>

Hello,

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

Lots of resources here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts…

`:)`

---

<div class="post-metadata">

**Author:** ![anwar05](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@anwar05](https://discourse.processing.org/u/anwar05)\
**Post date:** [November 16, 2021, 5:54am UTC](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530/3 "2021-11-16T05:54:14Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 16, 2021, 11:14am UTC](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530/4 "2021-11-16T11:14:40Z")

</div>

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:

> **[Variable Scope / Examples](https://processing.org/examples/variablescope.html)**
>
> Variables have a global or local "scope". For example, variables declared within either the setup() or draw() functions may be only used in these functions. Global variables, variables declared outsid…

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

`:)`

---

<div class="post-metadata">

**Author:** ![anwar05](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@anwar05](https://discourse.processing.org/u/anwar05)\
**Post date:** [November 16, 2021, 2:17pm UTC](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530/5 "2021-11-16T14:17:01Z")

</div>

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.

```auto
// 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);
  }
}

```

😀

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 16, 2021, 9:11pm UTC](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530/6 "2021-11-16T21:11:14Z")

</div>

Hello,

Try this:

```auto
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.

`:)`

---

<div class="post-metadata">

**Author:** ![anwar05](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@anwar05](https://discourse.processing.org/u/anwar05)\
**Post date:** [November 17, 2021, 3:27am UTC](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530/7 "2021-11-17T03:27:16Z")

</div>

hello @glv , i 've learned what u sent for me. i’ve just tried on my own program, and it’s working bro.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/52062fc73e0fa17c423e11894a40ed5c9fb78f9f.png)

```auto
// 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);

}

```