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.

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 allows bidirectional communication between the ESP32-C3 and the web application. Sensor values are transmitted instantly without requiring constant page refreshes.
• Wireless monitoring: Since the ESP32-C3 contains integrated Wi-Fi, the radar system can be monitored wirelessly from any device on the same network.
• Dynamic visualization: JavaScript made it possible to create animated radar graphics capable of displaying angle movement and distance detection in real time.
• Modern user interface: Shadcn UI components improved the organization and visual appearance of the project interface.
• Scalability: WebSocket communication can support multiple connected clients simultaneously.

Disadvantages:

• Wi-Fi dependency: The radar system depends on a stable 2.4 GHz Wi-Fi connection. Communication interruptions may occur if the network signal becomes unstable.
• Complex debugging process: Troubleshooting WebSocket required verifying IP addresses, ports, Wi-Fi credentials, and browser connections simultaneously.
• Library compatibility issues: Some ESP32 libraries generated compatibility conflicts, especially when combining WebSocket with servo control libraries.
• Higher implementation complexity: Combining ESP32 programming, WebSocket servers, JavaScript visualization, and UI frameworks introduced additional configuration layers.
• Browser dependency: The radar visualization requires a compatible browser environment to properly display animations.

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 before implementing the WebSocket interface.

Advantages:

• Simple implementation: Python serial communication requires fewer configuration steps compared to WebSocket systems.
• Efficient debugging: Using Python and the serial monitor helped identify hardware and communication problems quickly during testing.
• Fast data monitoring: Sensor values can be visualized directly in real time through the serial port without requiring web servers.
• Extensive documentation: Python provides large amounts of tutorials, libraries, and online resources.
• Flexible data processing: Python enables additional possibilities for future data analysis and storage.

Disadvantages:

• Wired communication: Python serial monitoring depends on a physical USB connection, limiting portability and wireless operation.
• Limited graphical visualization: Compared to JavaScript web interfaces, serial monitoring provides less interactive visualization methods.
• Lower scalability: Serial communication is generally limited to one direct device connection.
• Reduced accessibility: Monitoring through Python usually requires the development environment to remain open.
• Additional software installation: Python environments and libraries must be installed and configured before communication can be established.

In conclusion, both technologies provided important contributions. Python serial communication simplified early debugging, while WebSocket combined with JavaScript enabled a more advanced and interactive real-time radar visualization platform.

Individual Assignment

For Week 14, 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 simulates a submarine sonar by scanning the surroundings and detecting nearby objects wirelessly.

Communication

The main objective was to establish real-time communication between the ESP32-C3 and a browser interface using WebSocket over Wi-Fi. The ESP32-C3 continuously reads distance measurements from the ultrasonic sensor and transmits them 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, sweeping 0°–180°.
• The ESP32-C3 transmits angle and distance values as JSON.
• The browser interface updates the radar visualization in real time.

Components

Hardware Setup

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

Programming

The Arduino IDE was used together with JavaScript and WebSocket communication. The ESP32-C3 code handles Wi-Fi connection, WebSocket server, ultrasonic sensor reading, servo control, and JSON data transmission.

Libraries used:

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

Wi-Fi credentials:

const char* WIFI_SSID = "YOUR_SSID";
const char* WIFI_PASS = "YOUR_PASSWORD";

GPIO pin configuration:

#define PIN_TRIG  7
#define PIN_ECHO  8
#define PIN_SERVO 10

Complete ESP32-C3 Code

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

const char* WIFI_SSID = "YOUR_SSID";
const char* WIFI_PASS = "YOUR_PASSWORD";

#define PIN_TRIG  7
#define PIN_ECHO  8
#define PIN_SERVO 10

WebSocketsServer webSocket = WebSocketsServer(81);
Servo radarServo;

int currentAngle   = 0;
int stepDirection  = 1;

long readDistance() {
  digitalWrite(PIN_TRIG, LOW);
  delayMicroseconds(2);
  digitalWrite(PIN_TRIG, HIGH);
  delayMicroseconds(10);
  digitalWrite(PIN_TRIG, LOW);
  long duration = pulseIn(PIN_ECHO, HIGH, 30000);
  long distance = duration * 0.034 / 2;
  return (distance == 0) ? 400 : distance;
}

void broadcastRadarData(int angle, long distance) {
  StaticJsonDocument<128> doc;
  doc["angle"]    = angle;
  doc["distance"] = distance;
  String json;
  serializeJson(doc, json);
  webSocket.broadcastTXT(json);
}

void setup() {
  Serial.begin(115200);
  pinMode(PIN_TRIG, OUTPUT);
  pinMode(PIN_ECHO, INPUT);
  radarServo.attach(PIN_SERVO);

  WiFi.begin(WIFI_SSID, WIFI_PASS);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWi-Fi Connected!");
  Serial.println(WiFi.localIP());

  webSocket.begin();
}

void loop() {
  webSocket.loop();
  radarServo.write(currentAngle);
  delay(30);

  long distance = readDistance();
  broadcastRadarData(currentAngle, distance);

  currentAngle += stepDirection;
  if (currentAngle >= 180 || currentAngle <= 0) {
    stepDirection = -stepDirection;
  }
}

Web Interface

The radar visualization was developed using JavaScript. The interface connects directly to the ESP32-C3 through WebSocket using the local IP address generated after the Wi-Fi connection.

The browser interface displays:

• Radar sweep animation
• Detected object points
• Current angle values
• Distance measurements
• Radar sample counters
• Wireless communication status

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 via WebSocket
• 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, and browser-based visualization into a complete interactive radar system using the Seeeduino XIAO ESP32-C3.