Week 15

Interactive System with ESP32-C3 and Processing

This project focuses on the development of an interactive monitoring and control system using the XIAO ESP32-C3 microcontroller. The system integrates multiple sensors and output devices, combined with a graphical interface developed in Processing, allowing real-time visualization and user interaction.

The main objective was to establish a bidirectional communication system between hardware and software, enabling both data acquisition and remote control through a custom interface.

Components and Hardware Integration

The system incorporates several electronic components to perform sensing, visualization, and actuation tasks. A DHT11 sensor was used to measure environmental temperature and humidity, while a light-dependent resistor (LDR) was included to detect ambient light levels. Additionally, an OLED display based on the SSD1306 controller was used to provide local feedback directly on the device.

An RGB LED was integrated as a visual actuator, allowing the system to represent different states through color changes. All components were connected and controlled by the ESP32-C3, which handled both data processing and communication.

Data Acquisition and Serial Communication

The ESP32-C3 continuously reads sensor data and processes it locally. The values obtained from the DHT11 sensor are transmitted to Processing through serial communication. To ensure proper parsing and synchronization, the data is sent in a structured format containing only numerical values separated by a comma.

temperature,humidity

This format allows Processing to efficiently interpret incoming data and update the graphical interface in real time.

Local Visualization with OLED Display

The OLED display provides immediate feedback without requiring a computer interface. It shows temperature and humidity values, updating continuously as new data is read from the sensors. In addition, the display is capable of presenting system messages, such as sensor reading errors, ensuring basic diagnostic capability at the hardware level.

Graphical Interface in Processing

A custom graphical interface was developed using Processing to enhance user interaction and data visualization. This interface displays temperature and humidity values dynamically and includes a visual representation of the system state through a color indicator.

The interface also incorporates interactive buttons that allow the user to control the behavior of the RGB LED remotely, demonstrating a real-time connection between the software interface and the physical system.

Control Modes

Three operational modes were implemented to control the RGB LED:

In automatic mode, the LED color changes according to the measured temperature ranges. Lower temperatures activate a blue color, medium values produce green, and higher temperatures trigger red. This provides an intuitive visual representation of environmental conditions.

In manual ON mode, the LED remains fully turned on regardless of sensor values, providing a constant visual output. In OFF mode, the LED is completely turned off, overriding any automatic behavior.

System Integration

The system demonstrates a complete integration of sensing, visualization, and control. The ESP32-C3 collects data from the environment, displays it locally on the OLED, and transmits it to Processing. At the same time, Processing allows the user to send commands back to the microcontroller, enabling real-time control of the RGB LED.

This bidirectional communication establishes a dynamic interaction loop between the user and the physical system, making the interface both informative and interactive.

Conclusion

This project highlights the potential of combining embedded systems with graphical programming environments to create responsive and interactive applications. The integration of sensors, displays, and user controls demonstrates how real-time data can be effectively visualized and manipulated, resulting in a functional and adaptable system.

Processing Code – Improved Version

• Improved Code

import processing.serial.*;

Serial myPort;

float temp = 0;
float hum = 0;

color ledColor;
boolean ledON = true;

void setup() {
  size(600, 400);

  println(Serial.list());
  myPort = new Serial(this, Serial.list()[0], 115200);
  myPort.bufferUntil('\n');
}

void draw() {
  background(20);

  calcularColor();
  dibujarUI();
}

// -------- LÓGICA --------
void calcularColor() {

  if (!ledON) {
    ledColor = color(50);
    myPort.write('0'); // apagar
    return;
  }

  myPort.write('1'); // encender

  if (temp < 20) {
    ledColor = color(0,0,255);
    myPort.write('B');
  } 
  else if (temp <= 28) {
    ledColor = color(0,255,0);
    myPort.write('G');
  } 
  else {
    ledColor = color(255,0,0);
    myPort.write('R');
  }
}

// -------- INTERFAZ --------
void dibujarUI() {

  fill(255);
  textAlign(CENTER);
  textSize(24);
  text("CONTROL TEMPERATURA", width/2, 40);

  textSize(18);
  text("Temp: " + nf(temp,1,1) + " °C", width/2, 100);
  text("Hum: " + nf(hum,1,1) + " %", width/2, 130);

  // LED visual
  fill(ledColor);
  ellipse(width/2, 250, 120, 120);

  // BOTÓN
  if (ledON) fill(0,200,0);
  else fill(200,0,0);

  rect(width/2 - 50, 320, 100, 40, 10);

  fill(255);
  text(ledON ? "ON" : "OFF", width/2, 345);
}

// -------- CLICK --------
void mousePressed() {
  if (mouseX > width/2 - 50 && mouseX < width/2 + 50 &&
      mouseY > 320 && mouseY < 360) {
    ledON = !ledON;
  }
}

// -------- SERIAL --------
void serialEvent(Serial myPort) {
  String data = myPort.readStringUntil('\n');

  if (data != null) {
    data = trim(data);
    String[] values = split(data, ',');

    if (values.length == 2) {
      temp = float(values[0]);
      hum = float(values[1]);
    }
  }
}

        

Reflection and Final Conclusion

Working with Processing as part of this project was a highly valuable experience, as it allowed the transition from a purely hardware-based system to a more interactive and user-centered approach. Initially, the project focused on reading sensor data and displaying it locally on the OLED screen. However, integrating Processing introduced a new dimension by enabling real-time visualization and control through a graphical interface.

One of the most interesting aspects was observing how data from the ESP32-C3 could be translated into dynamic visual elements. The interface not only displayed temperature and humidity values but also represented system states through color changes and interactive components such as buttons. This made the system more intuitive and easier to understand, especially when monitoring environmental conditions.

The implementation of control modes, including automatic behavior based on temperature and manual ON/OFF states, demonstrated the potential of bidirectional communication. Processing was not only receiving data but also sending commands back to the microcontroller, creating a complete interaction loop between the user and the physical system.

Overall, this experience showed how powerful it is to combine embedded electronics with visual programming tools. Processing transformed the project from a simple sensor-reading setup into a more engaging and functional system, where information is not only displayed but also actively controlled. This integration highlights the importance of interface design in making technological systems more accessible, interactive, and meaningful.