Week 11 - Rafael Lee Documentation

Networking and Communications - Assignment:

Wireless Communication: WiFi Web Server Interface

For this week's documentation, I developed a communication system leveraging the XIAO ESP32C6 to create a bridge between a mobile device and a physical OLED display. The core objective was to enable real-time text transmission without physical tethering, utilizing the microcontroller's integrated Wi-Fi stack to host a local network interface.

The system architecture operates on a Client-Server model. The ESP32C6 is configured as an Access Point (or connected to a local network), hosting a lightweight web server with a dedicated IP address. By accessing this IP from a mobile browser, a user can interact with a custom-built interface designed to send strings of data. This approach demonstrates the versatility of the ESP32C6 in handling asynchronous wireless requests while maintaining a stable connection with the hardware peripherals.

Once a message is submitted from the mobile interface, the microcontroller parses the incoming HTTP request, extracts the text string, and prepares it for the I2C communication protocol. This workflow involves managing data buffers and ensuring that the visual representation on the SH1106 OLED display is refreshed accurately. This implementation serves as a practical example of how embedded systems can act as interactive gateways between digital user inputs and physical visual outputs.

Code

Technical Breakdown

Libraries

WiFi.h – Manages the ESP32C6 radio for Access Point initialization.

WebServer.h – Handles incoming HTTP requests and serves the HTML interface.

DNSServer.h – Forces a redirection to the local IP, creating the Captive Portal.

U8g2lib.h – Low-level driver for the SH1106 OLED screen via I2C.

Core Logic

WiFi.softAP() – Sets up the wireless hotspot with a specific SSID and gateway.

handleRoot() – Function that defines the HTML structure and CSS styles for the mobile UI.

handleMsg() – Logic to extract the string parameter "t" from the URL and update the display buffer.


#include <WiFi.h>
#include <WebServer.h>
#include <DNSServer.h>
#include <U8g2lib.h>
#include <Wire.h>

U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
WebServer server(80);
DNSServer dnsServer;

const char* ssid = "Xiao-Control";
String mensajeActual = "Waiting...";
bool nuevoMensaje = true;

void handleRoot() {
  String html = "<html><head><meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<style>body{text-align:center;font-family:sans-serif;padding-top:50px;background:#fafafa;}";
  html += "input{padding:15px;width:85%;font-size:18px;border:1px solid #ccc;border-radius:10px;}</style></head>";
  html += "<body><h2>Control OLED</h2><form action='/msg'><input type='text' name='t' autocomplete='off'>";
  html += "<br><br><input type='submit' value='SEND' style='background:#333;color:white;padding:15px 30px;border:none;border-radius:10px;'></form></body></html>";
  server.send(200, "text/html", html);
}

void handleMsg() {
  if (server.hasArg("t")) {
    mensajeActual = server.arg("t");
    nuevoMensaje = true;
  }
  server.sendHeader("Location", "/");
  server.send(303);
}

void setup() {
  Wire.begin(D4, D5);
  u8g2.begin();
  
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(IPAddress(192, 168, 4, 1), IPAddress(192, 168, 4, 1), IPAddress(255, 255, 255, 0));
  WiFi.softAP(ssid);

  dnsServer.start(53, "*", IPAddress(192, 168, 4, 1));

  server.on("/", handleRoot);
  server.on("/msg", handleMsg);
  server.onNotFound(handleRoot);
  server.begin();
}

void loop() {
  dnsServer.processNextRequest();
  server.handleClient();

  if (nuevoMensaje) {
    u8g2.clearBuffer();
    u8g2.setFont(u8g2_font_ncenB12_tr); 
    u8g2.drawStr(0, 35, mensajeActual.c_str()); 
    u8g2.sendBuffer();
    nuevoMensaje = false;
  }
}

The final integration demonstrates wireless data transmission between a mobile device and the embedded system. By hosting a Captive Portal on the XIAO ESP32C6, any smartphone connected to the "Xiao-Control" network is automatically redirected to a custom HTML interface. This setup allows for real-time text input, which the microcontroller parses and sends to the OLED display via the I2C protocol.

In the following video, you can see the seamless interaction: as soon as a message is submitted through the mobile browser, the SH1106 display updates to show the new string. This bidirectional flow—from user touch to wireless packet, and finally to physical pixels—perfectly illustrates the principles of modern network-enabled embedded systems.

During this week, I worked on implementing communication between devices using networking protocols, specifically focusing on MQTT to send and receive data between systems. I configured the connection between devices, set up a server, and tested message exchange in real time, allowing me to understand how information can be transmitted reliably across a network.

Additionally, I integrated this communication with a microcontroller and an OLED display to visualize the received data. Throughout the process, I faced challenges related to connectivity and configuration, which I solved by debugging both hardware and software. Overall, this week helped me understand how to connect multiple devices and enable them to communicate, which is essential for developing more complex and interactive systems.

Networking and Communications - Assignment:

Wireless Communication: WiFi Web Server Interface

Code

Group assignment