Arduino Uno R4 WiFi control LED via Web

In this tutorial, we are going to learn how to control an LED through a web interface using a browser on a PC or smartphone, utilizing the Arduino Uno R4 WiFi. In detail, , the Arduino Uno R4 WiFi will be programmed to work as a web server. Let's assume that the IP address of the Arduino Uno R4 WiFi is 192.168.0.2. Here are the details of how it works:

Arduino Uno R4 LED web browser

The tutorial offers the fundamentals that you can readily and innovatively customize to achieve the following:

Hardware Required

1×Arduino UNO R4 WiFi
1×USB Cable Type-C
1×LED
1×220 ohm resistor
1×Breadboard
1×Jumper Wires
1×(Optional) 9V Power Adapter for Arduino
1×(Recommended) Screw Terminal Block Shield for Arduino Uno
1×(Optional) Transparent Acrylic Enclosure For Arduino Uno

Or you can buy the following sensor kit:

1×DIYables Sensor Kit 30 types, 69 units
Please note: These are Amazon affiliate links. If you buy the components through these links, We will get a commission at no extra cost to you. We appreciate it.

About LED and Arduino Uno R4

If you do not know about LED and Arduino Uno R4 (pinout, how it works, how to program ...), learn about them in the following tutorials:

Wiring Diagram

Arduino Uno R4 WiFi LED Wiring Diagram

This image is created using Fritzing. Click to enlarge image

Arduino Code

/* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-uno-r4-wifi-controls-led-via-web */ #include <WiFiS3.h> const int LED_PIN = 9; // Arduino pin connected to LED's pin const char ssid[] = "YOUR_WIFI"; // change your network SSID (name) const char pass[] = "YOUR_WIFI_PASSWORD"; // change your network password (use for WPA, or use as key for WEP) int status = WL_IDLE_STATUS; WiFiServer server(80); void setup() { //Initialize serial and wait for port to open: Serial.begin(9600); pinMode(LED_PIN, OUTPUT); // set arduino pin to output mode String fv = WiFi.firmwareVersion(); if (fv < WIFI_FIRMWARE_LATEST_VERSION) { Serial.println("Please upgrade the firmware"); } // attempt to connect to WiFi network: while (status != WL_CONNECTED) { Serial.print("Attempting to connect to SSID: "); Serial.println(ssid); // Connect to WPA/WPA2 network. Change this line if using open or WEP network: status = WiFi.begin(ssid, pass); // wait 10 seconds for connection: delay(10000); } server.begin(); // you're connected now, so print out the status: printWifiStatus(); } void loop() { // listen for incoming clients WiFiClient client = server.available(); if (client) { // read the first line of HTTP request header String HTTP_req = ""; while (client.connected()) { if (client.available()) { Serial.println("New HTTP Request"); HTTP_req = client.readStringUntil('\n'); // read the first line of HTTP request Serial.print("<< "); Serial.println(HTTP_req); // print HTTP request to Serial Monitor break; } } // read the remaining lines of HTTP request header while (client.connected()) { if (client.available()) { String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request if (HTTP_header.equals("\r")) // the end of HTTP request break; Serial.print("<< "); Serial.println(HTTP_header); // print HTTP request to Serial Monitor } } if (HTTP_req.indexOf("GET") == 0) { // check if request method is GET // expected header is one of the following: // - GET led1/on // - GET led1/off if (HTTP_req.indexOf("led1/on") > -1) { // check the path digitalWrite(LED_PIN, HIGH); // turn on LED Serial.println("Turned LED on"); } else if (HTTP_req.indexOf("led1/off") > -1) { // check the path digitalWrite(LED_PIN, LOW); // turn off LED Serial.println("Turned LED off"); } else { Serial.println("No command"); } } // send the HTTP response // send the HTTP response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); // the connection will be closed after completion of the response client.println(); // the separator between HTTP header and body // send the HTTP response body client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<head>"); client.println("<link rel=\"icon\" href=\"data:,\">"); client.println("</head>"); client.println("<a href=\"/led1/on\">LED ON</a>"); client.println("<br><br>"); client.println("<a href=\"/led1/off\">LED OFF</a>"); client.println("</html>"); client.flush(); // give the web browser time to receive the data delay(10); // close the connection: client.stop(); } } void printWifiStatus() { // print your board's IP address: Serial.print("IP Address: "); Serial.println(WiFi.localIP()); // print the received signal strength: Serial.print("signal strength (RSSI):"); Serial.print(WiFi.RSSI()); Serial.println(" dBm"); }

Quick Steps

  • If this is the first time you use Arduino Uno R4, see how to setup environment for Arduino Uno R4 on Arduino IDE.
  • Copy the above code and open with Arduino IDE
  • Change the wifi information (SSID and password) in the code to yours
  • Click Upload button on Arduino IDE to upload code to Arduino
  • Open the Serial Monitor
  • See the result on Serial Monitor.
COM6
Send
Attempting to connect to SSID: YOUR_WIFI IP Address: 192.168.0.2 signal strength (RSSI):-39 dBm
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • You will see an IP address, for example: 192.168.0.2. This is the IP address of the Arduino Web Server
  • Open a web browser and enter one of the three formats below into the address bar:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
  • Kindly be aware that the IP address might vary. Please verify the current value on the Serial Monitor.
  • You will also see the below output on Serial Monitor
COM6
Send
Attempting to connect to SSID: YOUR_WIFI IP Address: 192.168.0.2 signal strength (RSSI):-41 dBm New HTTP Request << GET /led1/on HTTP/1.1 << Host: 192.168.0.2 << Connection: keep-alive << Cache-Control: max-age=0 << Upgrade-Insecure-Requests: 1 << User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) << Accept: text/html,application/xhtml+xml,application/xml << Accept-Encoding: gzip, deflate << Accept-Language: en-US,en;q=0.9 Turned LED on
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Check LED state
  • You will see the web page of Arduino board on the web browser as below
Arduino Uno R4 LED web browser
  • You are now able to control the LED on/off via the web interface

You can readily and innovatively customize the above ocde to achieve the following:

  • Controlling multiple LEDs through the web
  • Redesigning the web user interface (UI)

If you desire to enhance the web page's appearance with an impressive graphic user interface (UI), you can refer to the Arduino - Web Server tutorial for inspiration and guidance.

The Best Arduino Starter Kit

※ OUR MESSAGES