Ads by ArduinoGetStarted.com
Arduino Uno R4 WiFi control Relay via Web
In this tutorial, we'll learn how to control a relay using a web interface accessible through a browser on a PC or smartphone. We'll be using the Arduino Uno R4 WiFi board, which will be programmed to function as a web server. Let's assume that the IP address of the Arduino Uno R4 WiFi is 192.168.0.2. Here's how it works:
- To access the web interface, simply enter 192.168.0.2 in the address bar of your web browser. This will send a request to the Arduino, and in response, the Arduino will provide a web page containing an on/off button for controlling the relay.
- Similarly, if you click the RELAY ON button on the web page or enter 192.168.0.2/relay1/on in the web browser, the Arduino will activate the relay and respond with the updated web page.
- Likewise, if you click the RELAY OFF button on the web page or enter 192.168.0.2/relay1/off in the web browser, the Arduino will deactivate the relay and respond with the updated web page.
By connecting a relay to devices like a solenoid lock, light bulb, LED strip, motor, or actuator, we can control them through a web interface.
The tutorial provides a foundation that you can easily and creatively customize to accomplish the following:
- Control multiple relays through a web interface.
- Redesign the web user interface (UI) to suit your preferences.
Hardware Required
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some links in this section are Amazon affiliate links. If you make a purchase through these links, we may earn a commission at no extra cost to you.
Additionally, some links direct to products from our own brand, DIYables.
Additionally, some links direct to products from our own brand, DIYables.
About Relay and Arduino Uno R4
If you do not know about Arduino Uno R4 and relay (pinout, how it works, how to program ...), learn about them in the following tutorials:
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-relay-via-web
*/
#include <WiFiS3.h>
#define RELAY_PIN 7 // Arduino pin connected to relay'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(RELAY_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 relay1/on
// - GET relay1/off
if (HTTP_req.indexOf("relay1/on") > -1) { // check the path
digitalWrite(RELAY_PIN, HIGH); // turn on relay
Serial.println("Turned relay on");
} else if (HTTP_req.indexOf("relay1/off") > -1) { // check the path
digitalWrite(RELAY_PIN, LOW); // turn off relay
Serial.println("Turned relay 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=\"/relay1/on\">RELAY ON</a>");
client.println("<br><br>");
client.println("<a href=\"/relay1/off\">RELAY 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
- Check out the result on Serial Monitor.
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-39 dBm
Autoscroll
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/relay1/on
192.168.0.2/relay1/off
- Please note that the IP address may be different. Make sure to check the current value on the Serial Monitor.
- Additionally, you will observe the following output on the Serial Monitor.
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-41 dBm
New HTTP Request
<< GET /relay1/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 relay on
Autoscroll
Clear output
9600 baud
Newline
- Check the relay state
- You will see the web page of Arduino board on the web browser as below:
Now, you have the capability to control the relay's on/off state through the web interface. You can also easily and creatively customize the code to accomplish the following:
- Control multiple relays through a web interface.
- Redesign the web user interface (UI) to suit your preferences.
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.