# Displaying Arduino data but getting blurry, Need some help
**URL:** https://discourse.processing.org/t/displaying-arduino-data-but-getting-blurry-need-some-help/33669
**Category:** Electronics (Arduino, etc.)
**Tags:** homework
**Created:** [November 22, 2021, 4:24pm UTC](https://discourse.processing.org/t/displaying-arduino-data-but-getting-blurry-need-some-help/33669 "2021-11-22T16:24:53Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 22, 2021, 4:24pm UTC](https://discourse.processing.org/t/displaying-arduino-data-but-getting-blurry-need-some-help/33669/1 "2021-11-22T16:24:53Z")
Hello, beginners want to ask again…
I made a GUI and Display for the Arduino project and it was made using processing, where there are seven data that I will send to the display. Actually there is no error in the code that I made, but my problem is that the displayed value is blurry or looks like overwrite in the same location. Here’s a look at the problem I encountered
I actually encountered this problem because I put the background ( ), on the void setup block. But if I put the background on the void draw block, then the display of my speedometer and needle will be covered by the background. How can i fix this problem but not damage my display? thank you…
```auto
/*==== UI For EECL DYNOTEST ====*/
import processing.serial.*;
import controlP5.*;
//Declare Global Variable
//For control panel & Serial Communication
ControlP5 cp5;
Serial serial;
//Variable for timestamp
int d = day();
int m = month();
int y = year();
int h = hour();
int min = minute();
int s = second();
//Variable for .CSV File
Table table;
String filename = "contoh";
//Define baudrate, portName, value for serial
int speed = 9600;
String portName;
String val;
//Variable for tachometer display
PImage needle1;
PImage needle2;
PImage dualgauges;
//Variable for Roll RPM and Engine RPM
float rpm1;
float readRoll=0;
float rpm2;
float readEngine=0;
//Variable for analog data
float tinlet;
float texhaust;
float temp;
float hum;
float load;
//Variable for Torque & Horse Power
float torsi;
float daya;
//Variable length of dyno arm
float l = 0.152;
void setup() {
background(0);
size(1350, 800);
//make a display analog speedometer
needle1=loadImage("ndl1.png");
needle2=loadImage("ndl2.png");
dualgauges=loadImage("dualgauges.jpg");
imageMode(CENTER);
image(dualgauges, 500, 280);
needle1.resize(115, 115);
needle2.resize(115, 115);
//Make a control panel
cp5 = new ControlP5(this);
cp5.addScrollableList("comlist")
.setPosition(1000, 50)
.setSize(100, 150)
.setBarHeight(40)
.setItemHeight(40)
.close();
cp5.addButton("refresh")
.setPosition(1110, 50)
.setSize(50, 40);
cp5.addButton("openPort")
.setPosition(1170, 50)
.setSize(50, 40);
cp5.addButton("closePort")
.setPosition(1230, 50)
.setSize(60, 40);
cp5.addSlider("tinlet")
.setPosition(1000, 330)
.setSize(40, 200)
.setRange(0, 100)
;
cp5.addSlider("texhaust")
.setPosition(1070, 330)
.setSize(40, 200)
.setRange(0, 100)
;
PFont font = createFont("arial", 10);
cp5.addTextfield("Penguji")
.setPosition(1000, 120)
.setSize(200, 40)
.setFont(font)
.setAutoClear(false)
;
cp5.addTextfield("Jenis Kendaraan")
.setPosition(1000, 180)
.setSize(200, 40)
.setFont(createFont("arial", 10))
.setAutoClear(false)
;
cp5.addBang("clear1")
.setPosition(1220, 120)
.setSize(80, 40)
.getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
;
cp5.addBang("clear2")
.setPosition(1220, 180)
.setSize(80, 40)
.getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
;
//Make shape for Amb. Temp, Hum & load
textFont(font);
fill (0, 99, 220);
rect(1140, 350, 60, 60, 12);
rect(1260, 350, 60, 60, 12);
ellipse(1232, 470, 100, 100);
//Lable for Amb Temp, Hum & load
fill(255);
PFont f = createFont("Georgia", 70);
textFont(f);
textSize(13);
text("Ambient Temp(°C)", 1120, 338);
text("Humidity(%)", 1250, 338);
text("Load (Kg)", 1208, 535);
//Draw a table on excel
table = new Table();
table.addColumn("Date", Table.STRING);
table.addColumn("Nomor", Table.INT);
table.addColumn("Time", Table.STRING);
table.addColumn("RPM Roller", Table.FLOAT);
table.addColumn("RPM Engine", Table.FLOAT);
table.addColumn("Torsi (N.m)", Table.FLOAT);
table.addColumn("Daya (HP)", Table.FLOAT);
table.addColumn("Load (Kg)", Table.FLOAT);
table.addColumn("Tinlet (°C)", Table.FLOAT);
table.addColumn("Texhaust (°C)", Table.FLOAT);
table.addColumn("Temp (°C)", Table.FLOAT);
table.addColumn("Humidity (%)", Table.FLOAT);
TableRow newRow = table.addRow();
newRow.setString("Date", str(d) + "/" + str (m) + "/" + str(y));
}
void draw() {
imageMode(CENTER);
image(dualgauges, 500, 280);
//RPM Roll Gauge
pushMatrix();
imageMode(CORNER);
translate((width/2)-437.1, (height/2)-121);
rotate(((HALF_PI)-50.232)+readRoll);
image(needle1, 0, 0);
popMatrix();
//RPM Engine gauge
pushMatrix();
imageMode(CORNER);
translate((width/2)+ 100, (height/2)-121);
rotate(((HALF_PI)-50.209)+readEngine);
image(needle2, 0, 0);
popMatrix();
//Check Serial Communication
if (serial != null) {
if (serial.available() > 0)
{
String val = serial.readStringUntil('\n');
if (val != null)
{
val = val.trim();
String [] data = split(val, ',');
print("data : ");
if (data.length >= 7)
{
printArray (data);
}
//Pickup data
rpm1 = float (data[0]);
rpm2 = float (data[1]);
tinlet = float(data[2]);
texhaust = float(data[3]);
temp = float(data[4]);
hum = float(data[5]);
load = float(data[6]);
}
readRoll=map(rpm1, 0, 8000, 0, 4.362);
readEngine=map(rpm2, 0, 8000, 0, 4.614);
cp5.get(Slider.class, "tinlet").setValue(tinlet);
cp5.get(Slider.class, "texhaust").setValue(texhaust);
textSize(15);
fill(255, 255, 255);
text(temp, 1145, 382);
text(hum, 1267, 382);
text(load, 1212, 475);
//Make rows for each data
TableRow newRow = table.addRow();
newRow.setInt("Nomor", table.getRowCount());
newRow.setString("Time", str(h) + ":" + str(min) + ":" + str(s));
newRow.setFloat("RPM Roller", rpm1);
newRow.setFloat("RPM Engine", rpm2);
newRow.setFloat("Torsi (N.m)", torsi);
newRow.setFloat("Daya (HP)", daya);
newRow.setFloat("Load (Kg)", load);
newRow.setFloat("Tinlet (°C)", tinlet);
newRow.setFloat("Texhaust (°C)", texhaust);
newRow.setFloat("Temp (°C)", temp);
newRow.setFloat("Humidity (%)", hum);
// saveTable(table, "data/new2.csv");
}
}
}
//Function for Button Control Panel
void refresh() {
String list[] = Serial.list();
cp5.get(ScrollableList.class, "comlist").addItems(list);
}
void comlist(int n) {
portName = Serial.list()[n];
}
void openPort() {
serial = new Serial(this, portName, speed);
}
void closePort() {
serial.stop();
}
public void clear1() {
cp5.get(Textfield.class, "Nama Penguji").clear();
}
public void clear2() {
cp5.get(Textfield.class, "Tipe Kendaraan").clear();
}
public void clear3() {
cp5.get(Textfield.class, "Waktu Pengujian").clear();
}
```
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 22, 2021, 4:27pm UTC](https://discourse.processing.org/t/displaying-arduino-data-but-getting-blurry-need-some-help/33669/2 "2021-11-22T16:27:20Z")
I attach the speedometer and needle image data here, ndl1 = ndl2.
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 22, 2021, 5:36pm UTC](https://discourse.processing.org/t/displaying-arduino-data-but-getting-blurry-need-some-help/33669/3 "2021-11-22T17:36:19Z")
Hello,
this topic should help:
> [@How to print serial values above rect and not blur](https://discourse.processing.org/t/how-to-print-serial-values-above-rect-and-not-blur/33530/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(l…
`:)`
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 23, 2021, 4:37am UTC](https://discourse.processing.org/t/displaying-arduino-data-but-getting-blurry-need-some-help/33669/4 "2021-11-23T04:37:30Z")
hello @glv ,
Yes, that’s right, it’s clearly stated if we put the background in the void draw, it won’t be a blur problem. However the background will cover the image (analog meter and needle) that I uploaded in my window.
If I make a format like this on block void draw, the analog meter image is visible but the needle is not
```auto
void draw() {
background(0);
dualgauges=loadImage("dualgauges.jpg");
needle1=loadImage("ndl1.png");
needle2=loadImage("ndl2.png");
imageMode(CENTER);
image(dualgauges, 500, 280);
//RPM Roll Gauge
pushMatrix();
imageMode(CORNER);
translate((width/2)-437.1, (height/2)-121);
rotate(((HALF_PI)-50.232)+readRoll);
image(needle1, 0, 0);
popMatrix();
//RPM Engine gauge
pushMatrix();
imageMode(CORNER);
translate((width/2)+ 100, (height/2)-121);
rotate(((HALF_PI)-50.209)+readEngine);
image(needle2, 0, 0);
popMatrix();
```
So I’m at a loss for a more precise format, any more specific suggestions? Thank you for replying me
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 23, 2021, 6:36am UTC](https://discourse.processing.org/t/displaying-arduino-data-but-getting-blurry-need-some-help/33669/5 "2021-11-23T06:36:08Z")
hello @glv , I’ve cleared my problem. I just exploration the format of codes. Thank You…
