How to Control an RGB LED Lamp With Your Browser Using Arduino UNO R4 WiFi

by dziubym in Circuits > Arduino

66 Views, 0 Favorites, 0 Comments

How to Control an RGB LED Lamp With Your Browser Using Arduino UNO R4 WiFi

gree.png

After four years and 100+ videos without a single IoT project, I finally dove into the Internet of Things (IoT) world! This guide is perfect for beginners — especially fellow Boomers — who might not even know what IoT stands for (it's Internet of Things, by the way).

In this project, we'll:

  1. Connect an Arduino UNO R4 WiFi to the internet
  2. Create a simple web server
  3. Control a single LED or a WS2812 RGB matrix using your browser
  4. Even 3D print a custom lamp enclosure!

📺 Prefer video tutorials?

You can follow this project step-by-step on YouTube:

  1. ▶️ From Arduino to Web-Controlled IoT Lamp: Learn Internet Connectivity with Arduino Uno R4 WIFI!: https://youtu.be/JUgAKao-3bc


Supplies

gree.png
matrix.png
  1. Arduino UNO R4 WiFi
  2. LilyPad LED or WS2812 LED Matrix
  3. Jumper wires
  4. Breadboard (optional)
  5. USB cable
  6. Access to WiFi
  7. 3D printer (optional)
  8. Double-sided tape
  9. Computer with Arduino IDE installed
  10. FastLED library (for WS2812)

Understanding How Arduino Connects to WiFi (with UNO R4 WiFi)

conne.png

Before diving into the code, it's important to understand how the Arduino UNO R4 WiFi fits into your local network environment. The diagram below illustrates the topology we'll be working with.

📡 Network Architecture Overview:


Your Arduino UNO R4 WiFi connects to your home WiFi router, just like your smartphone and laptop. This puts all the devices on the same local subnet — in this case, 192.168.68.0/24.

🔍 What This Diagram Shows:

  1. Router (Gateway)
  2. IP: 192.168.68.1
  3. Connects all local devices wirelessly and provides internet access (if needed)
  4. Arduino UNO R4 WiFi
  5. IP: 192.168.68.128 (example, dynamic via DHCP)
  6. Will run a web server for LED control or data display
  7. Smartphone
  8. IP: 192.168.68.130
  9. Can access the Arduino's web interface via a browser
  10. Laptop
  11. IP: 192.168.68.120
  12. Also capable of accessing the Arduino over WiFi via the browser or tools like ping and serial monitor
  13. Subnet: 192.168.68.0/24
  14. All devices share the same subnet, meaning they can talk to each other directly without routing through the internet

🧠 Why This Matters:

By ensuring all devices are on the same subnet:

  1. You can easily communicate with the Arduino using just its local IP address (e.g., http://192.168.68.128)
  2. You avoid needing any port forwarding, cloud services, or external servers


Display WiFi Connection Info in Serial Monitor

serial.png

In this step, we connect your Arduino UNO R4 WiFi to your wireless network and display critical connection information using the Serial Monitor.

🔧 What This Code Does:

  1. Connects to your WiFi network using SSID and password
  2. Waits until the connection is successful
  3. Prints network info: SSID, IP address, signal strength (RSSI), encryption type
  4. Shows MAC addresses for both the Arduino and your router

🧠 Arduino Code:

#include <WiFiS3.h>

char ssid[] = "*******"; // your network SSID (name)
char pass[] = "*******"; // your network password

void printMacAddress(byte mac[]) {
for (int i = 0; i < 6; i++) {
if (i > 0) {
Serial.print(":");
}
if (mac[i] < 16) {
Serial.print("0");
}
Serial.print(mac[i], HEX);
}
Serial.println();
}

void setup() {
Serial.begin(9600);

Serial.println("Connecting to WiFi...");
while (WiFi.begin(ssid, pass) != WL_CONNECTED) {
Serial.print(".");
delay(1000);
}

// SSID of the network
Serial.print("SSID: ");
Serial.println(WiFi.SSID());

// Board's IP address
IPAddress ip = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ip);

// Signal strength (RSSI)
long rssi = WiFi.RSSI();
Serial.print("Signal strength (RSSI): ");
Serial.println(rssi);

// Encryption type
byte encryption = WiFi.encryptionType();
Serial.print("Encryption Type: ");
Serial.println(encryption, HEX);
Serial.println();

// Arduino MAC address
byte mac[6];
WiFi.macAddress(mac);
Serial.print("MAC address: ");
printMacAddress(mac);

// MAC address of the router (BSSID)
byte bssid[6];
WiFi.BSSID(bssid);
Serial.print("BSSID: ");
printMacAddress(bssid);
}

void loop() {
// Empty loop
}

🧪 Testing:

  1. Upload the sketch to your Arduino UNO R4 WiFi.
  2. Open the Serial Monitor at 9600 baud.
  3. Watch for the WiFi connection progress and detailed network info.


Control a Single LED From Your Web Browser

H.png
HOK.png
L.png
LOK.png
HON.png
HON_status.png

Let’s raise the stakes: now that the Arduino is connected to WiFi, we’ll set up a basic web server on it and use it to remotely toggle an LED — no extra software or apps, just your web browser!

This is a great first step into IoT: transforming your microcontroller into a responsive device on your local network.


🛠️ Hardware Setup

To keep things simple and elegant, we’ll use a LilyPad LED, which plugs directly into the female header pins on the UNO R4:

  1. Anode (+) → Digital Pin 10
  2. Cathode (–) → GND

No breadboard, no mess!


🧠 What You'll Achieve

You’ll be able to:

  1. Turn the LED on using: http://<your-arduino-ip>/H
  2. Turn the LED off using: http://<your-arduino-ip>/L

This is done using standard HTTP GET requests, and the Arduino replies with a basic HTML page confirming the LED state.

💻 Complete Arduino Code


#include <WiFiS3.h>

char ssid[] = "*******"; // your network SSID
char pass[] = "*******"; // your network password

WiFiServer server(80); // Create a web server on port 80

int led = 10; // LED connected to digital pin 10
String ledStatus = "OFF";

void setup() {
Serial.begin(9600);
pinMode(led, OUTPUT);

// Connect to WiFi
Serial.println("Connecting to WiFi...");
while (WiFi.begin(ssid, pass) != WL_CONNECTED) {
Serial.print(".");
delay(1000);
}

// Print connection info
Serial.println();
Serial.print("Connected to: "); Serial.println(WiFi.SSID());
Serial.print("IP Address: "); Serial.println(WiFi.localIP());

server.begin(); // Start the server
}

void loop() {
WiFiClient client = server.available(); // Wait for a client
if (client) {
Serial.println("New client connected");
String request = client.readStringUntil('\r');
Serial.println("Request: " + request);

// Handle the request
if (request.indexOf("/H") != -1) {
digitalWrite(led, HIGH);
ledStatus = "ON";
} else if (request.indexOf("/L") != -1) {
digitalWrite(led, LOW);
ledStatus = "OFF";
}

// Send HTTP response
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.println("<html><body>");
client.println("<h1>LED is " + ledStatus + "</h1>");
client.println("</body></html>");
client.println();

client.stop();
Serial.println("Client disconnected");
}
}

📌Code Highlights

  1. #include <WiFiS3.h>

Loads the library that enables WiFi functionality on the Arduino UNO R4 WiFi (based on the ESP32-S3 chip).

  1. WiFiServer server(80);

Sets up a basic HTTP server on port 80 (standard for web traffic).

  1. WiFi.begin(ssid, pass);

Connects to your WiFi using the provided SSID and password.

  1. server.available();

Checks if a device (browser) is trying to connect to the Arduino.

  1. client.readStringUntil('\r');

Reads the HTTP request from the client (browser). For example, /H or /L.

  1. request.indexOf("/H") != -1

If the request contains /H, the LED is turned ON.

  1. request.indexOf("/L") != -1

If the request contains /L, the LED is turned OFF.

  1. client.println("HTTP/1.1 200 OK");

Sends back an HTTP success response and basic HTML content showing the LED's status.


🌐 How to Use It

  1. Upload the sketch to the Arduino UNO R4 WiFi.
  2. Open Serial Monitor to find the assigned IP address.
  3. Open a browser on any device connected to the same WiFi and enter:
  4. http://<arduino-ip>/H → LED turns ON
  5. http://<arduino-ip>/L → LED turns OFF

🧪 Pro Tip: Some browsers (like Safari) might pre-fetch URLs for autocomplete. If the LED turns on before pressing Enter, it’s likely due to this preview behavior.

Design and Print a Custom LED Lamp

lamp.png
dez1.png
Dez2.png
dez3.png

Created in Tinkercad, the lamp has:

  1. A base for mounting the matrix
  2. A shade to diffuse light
  3. Cable management holes


Upgrade to a Color Matrix Lamp With FastLED

Red1.png
Red.png
White.png
Green.png

After successfully controlling a single LED, let’s level up this project by using a WS2812 LED matrix. These individually addressable RGB LEDs allow us to set dynamic colors and build a lamp with serious visual appeal.

We'll also replace the basic /H and /L commands with color-specific URLs like /RED, /WHITE, /BLACK, and more — giving your project a richer, more customizable interface.

What You'll Achieve

  1. Replace the single LED with a 64-pixel WS2812 matrix
  2. Control the color of the whole matrix via your browser
  3. Create a proper web-controlled RGB lamp

🛠️ Hardware Setup

  1. Connect Data IN on the WS2812 matrix to digital pin 5 on the Arduino UNO R4 WiFi
  2. Connect 5V and GND to the matrix (ensure enough current if powering many LEDs)
  3. Use double-sided tape or a 3D-printed base to mount the matrix neatly
⚠️ Important: WS2812 strips/matrices can draw a lot of power. Power them with care—either from Arduino for small setups or an external 5V supply for larger ones.

💻 Arduino Code (WS2812 Matrix Web Control)


#include <WiFiS3.h>
#include <FastLED.h>

#define LED_PIN 5
#define NUM_LEDS 64
#define BRIGHTNESS 64
#define LED_TYPE WS2811

CRGB leds[NUM_LEDS];
CRGB CurrentColor = CRGB::Black;
CRGB NewColor = CRGB::Black;

char ssid[] = "*******"; // your network SSID
char pass[] = "*******"; // your network password

WiFiServer server(80); // Create a web server

String selectedColor = "BLACK";

void setup() {
Serial.begin(9600);

FastLED.addLeds<LED_TYPE, LED_PIN, GRB>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
FastLED.setBrightness(BRIGHTNESS);

Serial.println("Connecting to WiFi...");
while (WiFi.begin(ssid, pass) != WL_CONNECTED) {
Serial.print(".");
delay(1000);
}

Serial.println();
Serial.print("SSID: "); Serial.println(WiFi.SSID());
Serial.print("IP Address: "); Serial.println(WiFi.localIP());

server.begin();

// Initialize all LEDs to black
for (int i = 0; i < NUM_LEDS; i++) leds[i] = CurrentColor;
FastLED.show();
}

void loop() {
WiFiClient client = server.available();
if (client) {
Serial.println("New client connected");
String request = client.readStringUntil('\r');
Serial.println(request);

if (request.indexOf("/RED") != -1) {
NewColor = CRGB::Red;
selectedColor = "RED";
}
if (request.indexOf("/GREEN") != -1) {
NewColor = CRGB::Green;
selectedColor = "GREEN";
}
if (request.indexOf("/WHITE") != -1) {
NewColor = CRGB::White;
selectedColor = "WHITE";
}
if (request.indexOf("/BLACK") != -1) {
NewColor = CRGB::Black;
selectedColor = "BLACK";
}

// Update all LEDs
for (int i = 0; i < NUM_LEDS; i++) leds[i] = NewColor;
FastLED.show();

// Send HTTP response
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.println("<html><body>");
client.println("<h1>LED status is " + selectedColor + "</h1>");
client.println("</body></html>");
client.stop();
Serial.println("Client disconnected");
}
}

📌 Code Highlights

  1. FastLED Library: Controls the WS2812 matrix. Include it with #include <FastLED.h>.
  2. addLeds<>() Setup: Specifies LED type, pin, and color order.
  3. New Commands: Instead of /H and /L, now use:
  4. /RED
  5. /GREEN
  6. /WHITE
  7. /BLACK
  8. Loop Logic: Each browser request changes the NewColor, updates all 64 LEDs, and sends an HTML status response.
  9. Brightness Control: Adjustable via #define BRIGHTNESS.

🖥️ How to Use

  1. Upload the code.
  2. Power on the Arduino.
  3. Open the Serial Monitor to note the IP address.
  4. In any browser, visit:
  5. http://<arduino-ip>/RED
  6. http://<arduino-ip>/GREEN
  7. http://<arduino-ip>/WHITE
  8. http://<arduino-ip>/BLACK (turns off lamp)


🔧 Extra Notes for WS2812 Setup

  1. Install the FastLED library via Arduino Library Manager or manually if compatibility issues arise with the UNO R4 WiFi.
  2. Ensure GRB is the correct color order for your matrix. Some use RGB instead.
  3. If brightness appears low or flickery, check power supply capacity and ground continuity.


What's Next?

This project is just the beginning!

Future Improvements:

  1. Replace UNO R4 with WEMOS D1 for a smaller build
  2. Add support for the Blynk app
  3. Integrate with Alexa voice commands
  4. Configure port forwarding to allow global access
  5. Run a YouTube live session where viewers change lamp colors in real time!

🧠 Pro Tip: Use a static IP address to avoid having to recheck your Arduino’s IP every time.

Conclusion

You’ve now built an Internet-connected RGB lamp controlled entirely from your browser! While it starts simple, this project opens up the world of IoT, home automation, and interactive web-based controls.

👋 Follow me for more IoT adventures and 3D printing hacks!


Enjoyed this project? Consider buying me a coffee on Ko-fi!