Week 11: Networking and Communications

Individual assignment:

  • design, build, and connect wired or wireless node(s) with network or bus addresses and local input &/or output device(s)

Group assignment:

  • send a message between two projects

Learning outcomes:

  • Understand how nodes communicate over wired or wireless networks
  • Understand how addressing works (network/bus addresses) to identify devices
  • Know how to connect input and/or output devices to a node
  • Understand how different projects/systems can talk to each other by exchanging messages

This is the timetable for this week:

Schedule

Group assignment:

For the group assignment, we sent a message between two XIAO ESP32-C3 boards using ESP-NOW, which lets boards communicate wirelessly without needing Wi-Fi. We first learned about wired (SPI, I2C) and wireless (Wi-Fi, Bluetooth) communication, then built a setup where one board used an ultrasonic sensor to measure distance and sent the data to another board. The second board showed the distance on an OLED screen. It displayed “connected” when data was coming in and “disconnected” if no signal was received for two seconds. This helped us understand how to set up simple wireless communication between two boards.

Schedule Schedule

You can access our group assignment here for more details.

Individual assignment:

For the individual assignment, we had to create a device that is part of a network, basically connecting a device to a node.A node is any device connected to a network that can send, receive, or process data. Examples: Arduino, Raspberry Pi etc.

Key cmponents for building a node:

Microcontroller:

This is the brain of our node. I used the Xaio ESP 32 C3 board I deisgned for Output week for this week. These are the schematics and pcb design of the baord in kicad:

Schedule Schedule

This is the board after soldering it:

Schedule

Communication Methods:

When two devices communicate, they need some kind of medium to send and receive data. With wired communication, devices are physically connected using cables. It's generally more reliable because there's less interference from the environment. You might also need extra equipment like switches or repeaters depending on how far apart the devices are.

With wireless communication, the air is the medium. How well it works depends on the protocol being used, since different protocols have different ranges. WiFi and Bluetooth are short range while LoRa and GSM can reach much longer distances.

Wireless Communication:

Bluetooth vs WiFi

Bluetooth and Wi-Fi are wireless technologies using radio waves to transmit data but they differ in a lot of ways.

How Bluetooth Works
  • Uses short range radio waves to connect devices directly to each other
  • Devices pair together and then exchange data between them, like your airpods or when you connect your phone to the audio of your car.
  • Range is about 10 meters / 30 feet
  • Low power which means better battery life and smaller devices
  • No password needed to connect.
How WiFi Works
  • Uses radio waves to connect devices to the internet through a router
  • The router broadcasts a signal that nearby devices connect to
  • The range is around 100-300 feet depending on the environment
  • Faster and longer range than bluetooth but uses more power
Whats the Difference?
  Bluetooth WiFi
Purpose Device to device Device to internet
Range ~10m ~100-300ft
Speed Slower
Power Low Higher

The XIAO ESP32-C3 has both WiFi and Bluetooth built directly into the chip, so there's no need for any external modules.

Wired communication

What is Serial Communication?

Serial communication is just a way for devices to talk to each other by sending data one bit at a time, through a single line, one after another..

It only needs very few wires to work, sometimes just 2, which makes it simple and easy to set up compared to parallel communication , which sends multiple bits at once but requires way more wires..

The speed of serial communication is measured in baud rate, which is basically how many bits are being sent per second. Both devices need to be set to the same baud rate, otherwise the communication breaks down and you get garbage data. Common baud rates include 9600, 115200, and 250000.

There are two types of serial communication:

Synchronous communication

Synchronous communication (like I2C and SPI) is when data is sent in a continuous stream alongside a timing signal that keeps both devices in sync. Basically both devices are working together at the same time, in the same rhythm.

Asynchronous communication

Asynchronous communication (like UART) is when data is sent without a timing signal, instead it uses start and stop bits to control the flow of data between devices. Unlike synchronous, the two devices don't need to be in sync, they just need to agree on the same baud rate beforehand.

UART (Universal Asynchronous Receiver Transmitter)
Simple and widely used which uses just two wires (TX for transmit and RX for receive). No clock signal needed meaning both devices just agree on the baud rate beforehand. It's perfect for simple device to device communication like GPS modules or debugging with a Serial Monitor.

Schedule Image source

I2C (Inter Integrated Circuit)
Uses only two wires (SDA for data, SCL for clock) but can connect multiple devices at once. Each device has a unique address so the main device knows exactly who it is talking to. Great for sensors and displays, you can connect dozens of devices using just the same two wires!

SPI (Serial Peripheral Interface)
Faster than UART and I2C, uses more wires (typically 4: MOSI, MISO, SCLK, CS), but is ideal when you need to transfer data quickly. Commonly used for SD cards, high speed sensors, and displays that need fast refresh rates. The extra wires allow it to send and receive data simultaneously.

USB (Universal Serial Bus)
Technically also serial communication,it's just a more advanced and faster version that most people are already familiar with. USB handles addressing, power delivery, and data transfer all through the same cable, making it incredibly convenient for connecting to computers.

Now for the actual assignment, I first went through the official page for the XIAO ESP32 C3 microcontroller.And then I attached the Bluetooth/WiFi antenna with the board.

antenna

And then I scanned for wifi connections to test if the connection was working. I asked deepseek to generate the code with the prompt "Generate a code to scan the local wifi in the area to test the connection of my Xaio esp32 c3 board" and opened Arduino IDE and paste this code.

#include <WiFi.h>

void setup() {
    Serial.begin(115200);
    WiFi.mode(WIFI_STA);
    WiFi.disconnect();
    delay(100);
    Serial.println("Setup done");
}

void loop() {
    Serial.println("scan start");
    int n = WiFi.scanNetworks();
    Serial.println("scan done");
    if (n == 0) {
        Serial.println("no networks found");
    } else {
        Serial.print(n);
        Serial.println(" networks found");
        for (int i = 0; i < n; ++i) {
            Serial.print(i + 1);
            Serial.print(": ");
            Serial.print(WiFi.SSID(i));
            Serial.print(" (");
            Serial.print(WiFi.RSSI(i));
            Serial.println(")");
            delay(10);
        }
    }
    delay(5000);
}

Explaination for the code:

Library & Setup

#include <WiFi.h>

WiFi.h is the library that provides all the WiFi functions needed to scan and connect to networks

Setup Function

Serial.begin(115200);

Starts serial communication at 115200 baud rate so we can see outputs in the serial monitor

WiFi.mode(WIFI_STA);

Sets the ESP32 to station mode, meaning it acts as a client that connects to existing networks rather than creating its own

WiFi.disconnect();

Clears any previous WiFi connections to start fresh

Loop Function

int n = WiFi.scanNetworks();

Scans for available WiFi networks nearby and stores the number of networks found in n

if (n == 0)

Checks if no networks were found and prints a message to the serial monitor

for (int i = 0; i < n; ++i)

Loops through each network found and prints out its details including:

  • WiFi.SSID(i) — the network name
  • WiFi.RSSI(i) — the signal strength

delay(5000);

Waits 5 seconds before scanning again

antenna

Then I settup the led and connected it to D10 on my board since the led on my board wasn't bright enough. And yes, I used a breadboard 🤦‍♀️

antenna

After testing the connetcion, I asked deepseek to generate a code to set up my web server using the prompt: can you give me an arduino code for my XIAO ESP32-C3 that controls an LED connected to D10 through a web server? I want the webpage to be light blue color scheme and no boxy buttons, just clean simple ones, the page should have a turn on and turn off option"

This was the code it generated:

#include <WiFi.h>
#include <WebServer.h>

const char* ssid = "YOUR-WIFI-NAME";
const char* password = "YOUR-WIFI-PASSWORD";

WebServer server(80);
const int ledPin = D10;

void setup() {
    pinMode(ledPin, OUTPUT);
    Serial.begin(115200);
    
    WiFi.begin(ssid, password);
    Serial.print("Connecting");
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    Serial.println("");
    Serial.println("WiFi connected! IP address: ");
    Serial.println(WiFi.localIP());

    String html = "<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width, initial-scale=1'><style>";
    html += "* { margin: 0; padding: 0; box-sizing: border-box; }";
    html += "body { font-family: 'Helvetica Neue', sans-serif; background: #ddeeff; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }";
    html += "h1 { font-size: 1.4rem; font-weight: 300; letter-spacing: 0.2em; color: #4a7fa5; text-transform: uppercase; margin-bottom: 8px; }";
    html += "p { font-size: 0.85rem; color: #88aac0; letter-spacing: 0.1em; margin-bottom: 60px; }";
    html += ".btn { display: block; background: none; border: none; font-size: 1rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 14px 40px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; margin: 10px; }";
    html += ".btn-on { color: #4a7fa5; border-bottom: 1px solid #4a7fa5; }";
    html += ".btn-on:hover { color: #2a5f85; border-bottom-color: #2a5f85; letter-spacing: 0.25em; }";
    html += ".btn-off { color: #a0b8c8; border-bottom: 1px solid #a0b8c8; }";
    html += ".btn-off:hover { color: #7a9aaa; border-bottom-color: #7a9aaa; letter-spacing: 0.25em; }";
    html += ".dot { width: 8px; height: 8px; border-radius: 50%; background: #b0d0e8; margin: 40px auto 0; transition: background 0.3s; }";
    html += "</style></head><body>";
    html += "<h1>LED Control</h1>";
    html += "<p>esp32 web server</p>";
    html += "<a href='/on' class='btn btn-on'>Turn On</a>";
    html += "<a href='/off' class='btn btn-off'>Turn Off</a>";
    html += "<div class='dot' id='dot'></div>";
    html += "</body></html>";

    server.on("/", HTTP_GET, [html]() {
        server.send(200, "text/html", html);
    });
    server.on("/on", HTTP_GET, []() {
        digitalWrite(ledPin, HIGH);
        server.send(200, "text/plain", "on");
    });
    server.on("/off", HTTP_GET, []() {
        digitalWrite(ledPin, LOW);
        server.send(200, "text/plain", "off");
    });

    server.begin();
    Serial.println("Server started!");
}

void loop() {
    server.handleClient();
}

Explaination of the code:

This code turns the XIAO ESP32 C3 into a mini web server that lets you control an LED connected to D10 through a webpage on your phone or laptop.

Library Includes

#include <WiFi.h>
#include <WebServer.h>

  • WiFi.h handles the WiFi connection
  • WebServer.h allows the ESP32 to host a web server that can receive requests from a browser

WiFi Credentials

const char* ssid & const char* password

  • Stores your WiFi name and password so the ESP32 knows which network to connect to

I added the wifi I wanted to connect to and it's password:

antenna

Web Server Setup

WebServer server(80);

  • Creates a web server running on port 80, which is the standard port for web browsers

LED Pin Definition

const int ledPin = D10;

  • Defines pin D10 as the pin connected to the LED

Setup Function

WiFi.begin(ssid, password);

  • Connects the ESP32 to your WiFi network using the credentials provided

while (WiFi.status() != WL_CONNECTED)

  • Keeps waiting and printing dots in the serial monitor until the WiFi connection is established

Serial.println(WiFi.localIP());

  • Prints the IP address assigned to the ESP32 so you know what address to visit in your browser

String html = ...

  • Builds the full HTML webpage with styling that will be displayed in the browser, including two buttons to turn the LED on and off

Server Routes

server.on("/", HTTP_GET, ...)

  • When someone visits the main page, it sends the HTML webpage to their browser

server.on("/on", HTTP_GET, ...)

  • When the Turn On button is clicked, it sets the LED pin HIGH turning the LED on

server.on("/off", HTTP_GET, ...)

  • When the Turn Off button is clicked, it sets the LED pin LOW turning the LED off

server.begin();

  • Starts the web server so it can begin listening for incoming requests

Loop Function

server.handleClient();

  • Constantly listens for incoming connections from browsers and handles any button clicks

I uploaded the code and then my IP adress showed up in the serial monitor. I copied the IP address and then pasted the address in a browser:

antenna

This was my webserver:

antenna

Then I tried clicking on the on button and the led turned on! The led turned off when I pressed the off button.

antenna

Reflection:

This week was really stressfull for me esecially because we had to do our reviews and couldn't work on my assignments like I planned to so I ahd to rush everyhting not to mention I had to do the group assignment as well 😵. But at the end everything turned out okay I guess. So this week wasn't that bad. I rate it a solid 8.5/10 👍

That's all for this week. Thank You! (*/ω\*)