×
HOME ABOUT ME FINAL PROJECT STUDENT AGREEMENT

Networking and Communications

This is the eleventh week in FabAcademy, here you can find my assigments for this week.

Group assignment: Networking & Communications

For the Networking week, we established communication between multiple microcontrollers. Our objective was to verify the reliability and speed of different standard protocols using a modular test rig.

Protocols verified:

  • Local & Wireless: We implemented BLE (Server/Client), ESP-NOW for peer-to-peer mesh networking, and I2C for master/slave wired communication.
  • Cloud & Web: We configured an MQTT broker to push data to the cloud and set up a local HTTP Web Server with auto-refreshing HTML for real-time monitoring.
  • Payload Optimization: We practiced packaging complex sensor data into comma-separated strings and JSON payloads for efficient transmission.

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

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.

System Networking Architecture

To provide a clear overview of the communication flow, the following table and diagram break down the interaction between the nodes in the system:

Device Network Role Protocol Stack Interface / ID
Smartphone Client / UI HTTP over Wi-Fi Dynamic (DHCP)
XIAO ESP32-C6 Access Point & Web Server TCP/IP & DNS Server Static IP: 192.168.4.1
SH1106 OLED Peripheral Output I2C Interface Address: 0x3C

Logical Data Flow:

  • Connection: The smartphone joins the "Xiao-Control" SSID hosted by the ESP32-C6.
  • Redirection: The DNSServer intercepts traffic and forces the browser to the root page via a Captive Portal.
  • Request: The user submits text through the HTML form, sending a GET /msg?t=[text] request.
  • Execution: The microcontroller parses the string and pushes it to the display buffer using the I2C protocol.

Communication Protocol Analysis

In this assignment, I implemented an HTTP Web Server using the ESP32-C6. I chose the RESTful HTTP protocol over MQTT for this specific application because it allows for a direct, browser-based interface without the need for an external broker. The microcontroller acts as an Access Point (AP), serving a dedicated UI to any connected client, which demonstrates a robust decentralized network node.

Troubleshooting & Challenges

To provide documentary value to this process, I am documenting the two main technical hurdles I faced:

  • Problem 1: Captive Portal Redirection. Initially, connected devices had to manually type the IP address.
    Solution: I integrated the DNSServer.h library to intercept all port 53 requests, forcing any connected device to automatically open my local configuration page, effectively creating a Captive Portal.
  • Problem 2: I2C Display Lag. The OLED screen was flickering or failing to update when multiple HTTP requests were sent.
    Solution: I identified that the server.handleClient() loop was blocking the I2C bus. I refactored the code to use a non-blocking refresh rate, ensuring the networking stack and the display buffer operate on separate timing intervals.