Displaying Arduino data but getting blurry, Need some help

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…

/*==== 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();
}

I attach the speedometer and needle image data here, ndl1 = ndl2.


ndl1

Hello,

this topic should help:

:)

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

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

hello @glv , I’ve cleared my problem. I just exploration the format of codes. Thank You…

1 Like