Assignments

Group Assignment
  • Compare as many tool options as possible
Individual Assignment
  • Write an application that interfaces a user with an input &/or output device that you made

Summary - Group Assignment

In the group assignment, we explored different communication technologies using the Seeeduino ESP32-C3 platform. The objective was to understand how wireless communication protocols can be implemented for real-time data transmission and visualization.

We worked with WebSocket communication, Wi-Fi connectivity, and browser-based interfaces to transmit sensor information between the ESP32-C3 and a web application. During the process, we tested real-time communication, serial monitoring, and wireless data visualization.

Through these experiments, we were able to analyze communication stability, response speed, debugging methods, and the integration between hardware and modern web technologies such as JavaScript and Shadcn UI.

🔗 If you want to explore the Group Assignment in more detail, you can visit the official Fab Academy page:

Visit Fab Academy ULima →
Technology Evaluation

During the development of the ESP32-C3 radar system, different communication and visualization technologies were explored in order to achieve real-time monitoring and interactive visualization. The project mainly used WebSocket communication with a JavaScript interface, while Python serial monitoring was used during debugging and testing stages.

WebSocket Communication and JavaScript Interface

WebSocket communication was implemented to establish a real-time connection between the Seeeduino ESP32-C3 and the browser-based radar interface. This technology enabled continuous transmission of ultrasonic sensor values while updating the radar visualization dynamically through JavaScript and Shadcn UI components.

Advantages:
  • Real-time communication: WebSocket technology allows bidirectional communication between the ESP32-C3 and the web application. Sensor values are transmitted instantly without requiring constant page refreshes, making the radar visualization smoother and more interactive.
  • Wireless monitoring: Since the ESP32-C3 contains integrated Wi-Fi capabilities, the radar system can be monitored wirelessly from any device connected to the same network. This eliminates the dependency on physical serial connections.
  • Dynamic visualization: JavaScript made it possible to create animated radar graphics capable of displaying angle movement and distance detection in real time. The interface updates continuously according to incoming sensor data.
  • Modern user interface: Shadcn UI components improved the organization and visual appearance of the project interface, allowing a cleaner and more professional dashboard presentation.
  • Scalability: WebSocket communication can support multiple connected clients simultaneously, allowing future expansion for additional devices or monitoring systems.
Disadvantages:
  • Wi-Fi dependency: The radar system depends completely on a stable 2.4 GHz Wi-Fi connection. Communication interruptions may occur if the network signal becomes unstable.
  • Complex debugging process: Troubleshooting WebSocket communication required verifying IP addresses, ports, Wi-Fi credentials, and browser connections simultaneously, increasing debugging complexity.
  • Library compatibility issues: Some ESP32 libraries generated compatibility conflicts during implementation, especially when combining WebSocket communication with servo control libraries.
  • Higher implementation complexity: Combining ESP32 programming, WebSocket servers, JavaScript visualization, and UI frameworks introduced additional layers of configuration and development complexity.
  • Browser dependency: The radar visualization requires a compatible browser environment to properly display animations and real-time updates.
Python Serial Monitoring

Python was explored as an alternative method for serial communication and debugging during the development process. It allowed direct reading of sensor values from the ESP32-C3 through the serial port and simplified initial testing procedures before implementing the WebSocket interface.

Advantages:
  • Simple implementation: Python serial communication is relatively straightforward and requires fewer configuration steps compared to WebSocket communication systems.
  • Efficient debugging: Using Python and the serial monitor helped identify hardware and communication problems quickly during the testing phase of the radar system.
  • Fast data monitoring: Sensor values can be visualized directly in real time through the serial port without requiring web servers or browser interfaces.
  • Extensive documentation: Python provides large amounts of tutorials, libraries, and online resources, making troubleshooting and development easier.
  • Flexible data processing: Python enables additional possibilities for future data analysis, storage, and processing applications.
Disadvantages:
  • Wired communication: Python serial monitoring depends on a physical USB connection between the ESP32-C3 and the computer, limiting portability and wireless operation.
  • Limited graphical visualization: Compared to JavaScript web interfaces, serial monitoring provides less interactive and less visually attractive visualization methods.
  • Lower scalability: Serial communication is generally limited to one direct device connection, making it less scalable for multi-device systems.
  • Reduced accessibility: Monitoring through Python usually requires the development environment to remain open, unlike browser-based interfaces that can be accessed more easily.
  • Additional software installation: Python environments and libraries must be installed and configured before communication can be established successfully.

In conclusion, both technologies provided important contributions during the development of the ESP32-C3 radar system. Python serial communication simplified early debugging and testing processes, while WebSocket communication combined with JavaScript and Shadcn UI enabled a more advanced and interactive real-time radar visualization platform. Although WebSocket implementation introduced greater complexity, it ultimately provided a more scalable and professional solution for wireless monitoring applications.

Individual Assignment

For the assignment of Week 11: Networking and Communications, I developed a real-time wireless radar system using the Seeeduino XIAO ESP32-C3, an HC-SR04 ultrasonic sensor, and a continuous rotation servo motor.

The project combines wireless communication, WebSocket technology, real-time sensor monitoring, and browser-based visualization to create an interactive radar interface capable of detecting nearby objects dynamically.

Communication

The main objective of this assignment was to establish real-time communication between the ESP32-C3 and a browser interface using WebSocket communication over Wi-Fi.

Communication Components
SEEEDUINO ESP32-C3

Main microcontroller used for wireless communication and data processing.

COMMUNICATION

Transfers data between devices using serial or wireless protocols.

SHADCN UI

Modern JavaScript UI library used to create the application interface.

DATA

Sensor information transmitted in real time to the application.

The ESP32-C3 continuously reads distance measurements from the ultrasonic sensor while transmitting the information wirelessly to the browser interface.

The communication system works as follows:

  • The ESP32-C3 connects to a Wi-Fi network.
  • A WebSocket server is initialized on port 81.
  • The ultrasonic sensor measures distances.
  • The servo motor rotates continuously.
  • The ESP32-C3 transmits angle and distance values.
  • The browser interface updates the radar visualization in real time.
Board

For this assignment, I used the Seeeduino XIAO ESP32-C3 because it provides integrated Wi-Fi communication and supports real-time wireless applications.

The hardware setup included:

ESP32-C3 radar hardware
  • Seeeduino XIAO ESP32-C3
  • HC-SR04 Ultrasonic Sensor
  • Continuous Rotation Servo Motor
  • WebSocket Communication System

The ultrasonic sensor measures object distances while the servo motor generates the radar scanning movement.

Programming

For the programming stage, I used the Arduino IDE together with JavaScript and WebSocket communication technologies.

The ESP32-C3 code was responsible for:

  • Connecting to Wi-Fi
  • Creating a WebSocket server
  • Reading ultrasonic sensor data
  • Controlling the servo motor
  • Transmitting JSON radar data in real time

The following libraries were used: 


#include <WiFi.h>
#include <WebSocketsServer.h>
#include <ArduinoJson.h>
#include <ESP32Servo.h>

The Wi-Fi credentials were configured directly inside the code: 


const char* WIFI_SSID = "NICOLAS";
const char* WIFI_PASS = "80009646xd";

The GPIO pins were configured as follows: 


#define PIN_TRIG 7
#define PIN_ECHO 8
#define PIN_SERVO 10
Complete ESP32-C3 Arduino Code


#include <WiFi.h>
#include <WebSocketsServer.h>
#include <ArduinoJson.h>
#include <ESP32Servo.h>

// =============================================
//  CONFIGURACIÓN
// =============================================
const char* WIFI_SSID = "NICOLAS";
const char* WIFI_PASS = "80009646xd";

// Pines para HC-SR04 (ESP32-C3)
#define PIN_TRIG 7
#define PIN_ECHO 8

// Pin del servo
#define PIN_SERVO 10

// Rango de distancia válido
#define DIST_MIN  2.0
#define DIST_MAX  400.0

// Velocidad de barrido
#define SWEEP_STEP_DEG   1.0
#define SWEEP_DELAY_MS   100

// Servo de rotación continua
#define SERVO_STOP        90
#define SERVO_CW_SPEED    95
#define SERVO_CCW_SPEED   85

// =============================================
//  VARIABLES GLOBALES
// =============================================
WebSocketsServer webSocket(81);
Servo radarServo;

float currentAngle = 0.0;
float sweepDirection = 1.0;
bool sweeping = false;

unsigned long lastStepTime = 0;

// =============================================
//  SETUP
// =============================================
void setup() {

  Serial.begin(115200);
  delay(1000);

  // HC-SR04
  pinMode(PIN_TRIG, OUTPUT);
  pinMode(PIN_ECHO, INPUT);

  // Servo
  radarServo.setPeriodHertz(50);
  radarServo.attach(PIN_SERVO, 500, 2500);
  radarServo.write(SERVO_STOP);

  // WiFi
  Serial.print("Conectando a WiFi");

  WiFi.begin(WIFI_SSID, WIFI_PASS);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWiFi conectado!");
  Serial.print("IP del ESP32-C3: ");
  Serial.println(WiFi.localIP());

  Serial.println(
    "WebSocket → ws://" +
    WiFi.localIP().toString() +
    ":81"
  );

  // WebSocket
  webSocket.begin();
  webSocket.onEvent(onWebSocketEvent);

  sweeping = true;

  Serial.println("Radar iniciado");
}

// =============================================
//  LOOP
// =============================================
void loop() {

  webSocket.loop();

  unsigned long now = millis();

  if (sweeping && (now - lastStepTime >= SWEEP_DELAY_MS)) {

    lastStepTime = now;

    doSweepStep();
  }
}

// =============================================
//  BARRIDO
// =============================================
void doSweepStep() {

  float dist = measureDistance();

  if (dist >= DIST_MIN && dist <= DIST_MAX) {
    sendRadarData(currentAngle, dist);
  }

  Serial.printf(
    "Ángulo: %.1f° | Distancia: %.1f cm\n",
    currentAngle,
    dist
  );

  currentAngle += sweepDirection * SWEEP_STEP_DEG;

  radarServo.write(
    sweepDirection > 0 ?
    SERVO_CW_SPEED :
    SERVO_CCW_SPEED
  );

  if (currentAngle >= 360.0) {

    currentAngle = 360.0;
    sweepDirection = -1.0;

    radarServo.write(SERVO_STOP);

    delay(200);

  } else if (currentAngle <= 0.0) {

    currentAngle = 0.0;
    sweepDirection = 1.0;

    radarServo.write(SERVO_STOP);

    delay(200);
  }
}

// =============================================
//  MEDICIÓN HC-SR04
// =============================================
float measureDistance() {

  digitalWrite(PIN_TRIG, LOW);
  delayMicroseconds(2);

  digitalWrite(PIN_TRIG, HIGH);
  delayMicroseconds(10);

  digitalWrite(PIN_TRIG, LOW);

  long duration = pulseIn(
    PIN_ECHO,
    HIGH,
    30000
  );

  if (duration == 0)
    return DIST_MAX + 1;

  return (duration * 0.0343f) / 2.0f;
}

// =============================================
//  ENVÍO WEBSOCKET
// =============================================
void sendRadarData(
  float angle,
  float distance
) {

  StaticJsonDocument<64> doc;

  doc["angle"] = round(angle * 10) / 10.0;
  doc["distance"] = round(distance * 10) / 10.0;

  String output;

  serializeJson(doc, output);

  webSocket.broadcastTXT(output);
}

// =============================================
//  EVENTOS WEBSOCKET
// =============================================
void onWebSocketEvent(
  uint8_t num,
  WStype_t type,
  uint8_t* payload,
  size_t length
) {

  switch (type) {

    case WStype_CONNECTED:

      Serial.printf(
        "Cliente [%u] conectado: %s\n",
        num,
        webSocket.remoteIP(num)
        .toString()
        .c_str()
      );

      sendRadarData(0, 0);

      break;

    case WStype_DISCONNECTED:

      Serial.printf(
        "Cliente [%u] desconectado\n",
        num
      );

      break;

    case WStype_TEXT: {

      String msg = String((char*)payload);

      if (msg == "start") {

        sweeping = true;

        Serial.println(
          "Barrido iniciado"
        );

      } else if (msg == "stop") {

        sweeping = false;

        radarServo.write(SERVO_STOP);

        Serial.println(
          "Barrido detenido"
        );
      }

      break;
    }

    default:
      break;
  }
}
Web Interface

The radar visualization interface was developed using JavaScript and modern browser technologies.

The interface connects directly to the ESP32-C3 through WebSocket communication using the local IP address generated after the Wi-Fi connection.

The browser interface displays:

ESP32-C3 radar hardware
  • Radar sweep animation
  • Detected object points
  • Current angle values
  • Distance measurements
  • Radar sample counters
  • Wireless communication status

The radar visualization updates dynamically according to the JSON data received from the ESP32-C3.

Final Result

The final result was a complete wireless radar platform capable of:

  • Scanning the surrounding area continuously
  • Measuring object distances in real time
  • Transmitting radar data wirelessly
  • Visualizing radar information dynamically in the browser
  • Displaying detected object points in real time

This project successfully integrated hardware programming, wireless communication, sensor monitoring, WebSocket communication, and browser-based visualization into a complete interactive radar system using the Seeeduino XIAO ESP32-C3.

Images
Setup Test