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.

Components Used

Component Connections

DHT11 Sensor (Input Device)

The DHT11 sensor was used as an input device to capture environmental temperature and humidity data.

The sensor sends digital environmental data directly to the XIAO ESP32-C3 for processing.

LDR Sensor (Input Device)

The LDR sensor was implemented to detect changes in ambient light intensity through analog readings.

The microcontroller uses the analogRead() function to interpret variations in light intensity detected by the sensor.

OLED SSD1306 Display (Output Device)

The OLED SSD1306 display was integrated as the main output device to visualize environmental information and system states in real time.

Communication between the OLED display and the microcontroller was established using the I2C communication protocol.

RGB LED (Output Device)

The RGB LED was used as a visual actuator to represent different system states according to environmental conditions and control modes.

The RGB LED changes color automatically according to temperature values or through commands sent from the Processing interface.

General System Operation

1. The DHT11 sensor measures environmental temperature and humidity.
2. The LDR sensor detects ambient light intensity.
3. The XIAO ESP32-C3 processes the sensor data.
4. The OLED display visualizes the information in real time.
5. The sensor data is transmitted to Processing through serial communication.
6. Processing dynamically visualizes the data and interacts with the system.
7. The RGB LED responds according to the selected control mode.

Output Device Functionality

The OLED display and the RGB LED function as the main output devices of the interactive system.

The OLED display provides immediate visual feedback by showing temperature, humidity, and system messages in real time. At the same time, the RGB LED visually represents different system states through color changes according to environmental values or user actions.

The interface developed in Processing complements the system by enabling dynamic visualization of the sensor data and remote control of the RGB LED behavior.

This integration demonstrates an effective bidirectional communication between hardware and software, combining environmental monitoring, interactive visualization, and real-time control.

Control Modes

Automatic Mode

The RGB LED changes automatically according to the detected temperature:

• Blue → Low temperature
• Green → Medium temperature
• Red → High temperature

Manual ON Mode

The RGB LED remains turned on regardless of the sensor values.

OFF Mode

The RGB LED turns off completely, overriding automatic behavior.

System Validation

The complete system was tested to validate communication between the ESP32-C3, sensors, OLED display, RGB LED, and the Processing interface.

During testing:

• The Serial Monitor displayed stable temperature and humidity readings.
• The OLED display correctly visualized the data in real time.
• Processing successfully received serial communication data.
• The interactive buttons controlled the RGB LED correctly.
• The system maintained stable communication between hardware and software.

Serial Monitor Output

25.4,72.0
25.5,71.0
25.6,70.0
26.0,69.0

These tests validated the correct operation of the interactive system and confirmed the successful integration of sensors, output devices, serial communication, and the graphical interface developed in Processing.

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.