16. interface and application programming

Week 16 · 2023.05.03-2023.05.10
During this week I wandered around different technologies, and found out that processing was probably one of the easiest to deploy from the serial monitor from Arduino IDE. I had to comment out almost all of my serial printed code except for the value of the length in centimeters measured by the ultrasonic sensor.

• [x] Linked to the group assignment page and reflected on your individual page what you have learned
• [x] Documented your process.
• [x] Explained the GUI that you made and how you did it.
• [x] Explained how your application communicates with your MCU board.
• [x] Explained any problems you encountered and how you fixed them.
• [x] Included original source code (or a screenshot of the app code if that’s not possible).
• [x] Included a ‘hero shot’ of your application running & communicating with your board.

Flattening the learning curve

Since it has being quite a while since I started with processing and I haven’t really kept up with it and taking in account that I’m not really familiar on how to connect it to Arduino, I decided to go throught some tutorials.

You need to upload the following code through the Arduino IDE (I changed the input pins accordingly for ESP32C3; 0 becomes D0; 1 becomes D1…)

unsigned int ADCValue;
void setup(){
    Serial.begin(9600);
}

void loop(){

 int val = analogRead(0);
   val = map(val, 0, 300, 0, 255);
    Serial.println(val);
delay(50);
}

Then close the Arduino IDE and start Processing (in my case I used version 4.2)

Then run the following code:

import processing.serial.*;

Serial myPort;  // Create object from Serial class
static String val;    // Data received from the serial port
int sensorVal = 0;

void setup()
{
   size(720, 480);
   noStroke();
  noFill();
  String portName = "COM5";// Change the number (in this case ) to match the corresponding port number connected to your Arduino. 

  myPort = new Serial(this, portName, 9600);
}

void draw()
{
  if ( myPort.available() > 0) {  // If data is available,
  val = myPort.readStringUntil('\n'); 
  try {
   sensorVal = Integer.valueOf(val.trim());
  }
  catch(Exception e) {
  ;
  }
  println(sensorVal); // read it and store it in vals!
  }  
 background(0);
  // Scale the mouseX value from 0 to 640 to a range between 0 and 175
  float c = map(sensorVal, 0, width, 0, 400);
  // Scale the mouseX value from 0 to 640 to a range between 40 and 300
  float d = map(sensorVal, 0, width, 40,500);
  fill(255, c, 0);
  ellipse(width/2, height/2, d, d);   

}

I came up with the following output

Visualizing data and adding a threshold

I based the following code in that from Adrián Torres, and included a threshold. So when it went over 26 the color turned green.

//Fab Academy 2023
//Ultrasonic
//Ronan Bolanos 

import processing.serial.*;

float sensorValue; //variable for the serial data
Serial myPort; 

void setup() {  //as dynamic/setup function called initially, only once
  size(600, 200);// is the window (1024=sensor max. value)
  //replace the port String with the port where your Arduino is connected
  //myPort = new Serial(this, "/dev/tty.wchusbserial1450", 115200);
  myPort = new Serial(this, "COM5", 115200); // serial port
  background(255);  //set background white

}

void draw() {  //draw function loops 

  noStroke(); // outline
  if (sensorValue <= 25) {  // When 'i' is less or equal to 25...
  fill(255,0,0);
  }
  if (sensorValue > 25) {  // When 'i' is larger than 25...
  fill(0,255,0,20);  //...set the color to green
  }
  rect(0, 0, sensorValue, height); //position and size

  fill(255,70);
  rect(sensorValue, 0, width-sensorValue, height);

  println(sensorValue);
  fill(0,0,0);// these are the colors inside
  text(sensorValue + " " + "cm" , sensorValue, height/2);
2   } 

void serialEvent(Serial myPort) { // sketch read the serial data
  String inString = myPort.readStringUntil('\n');
  if (inString != null) {
    inString = trim(inString);
    float[] values = float(split(inString, ","));
    if (values.length >=1) {
      sensorValue = values[0]; //first value in the list
    }
  }
}

---

Last update: June 21, 2023