In this topic, we will look into how to convert our Arduino connected PowerSwitch Tail into a simple web server to handle client requests, such as the following:
And other useful information such as:
A web server is a piece of software which serves to connected clients. An Arduino web server uses HTTP on top of TCP and UDP. But remember, the Arduino web server can't be used as a replacement for any web server software running on a computer because of the lack of processing power and limited number of multiple client connectivity.
In this section ,you will learn how to build a web-based control panel for controlling the PowerSwitch Tail through the Internet.
We will use the Arduino programming language and HTML that's running on the Arduino web server. Later, we will add HTML radio button controls to control the power switch.
Using the HTTP GET method, you can send a query string to the server along with the URL.
The query string consists of a name/value pair. The query string is appended to the end of the URL and the syntax is http://example.com?name1=value1
.
Also, you can add more name/value pairs to the URL by separating them with the &
character, as shown in the following example:
http://example.com?name1=value1&name2=value2
.
So, our Arduino web server can actuate the PowerSwitch Tail using the following URLs:
http://192.168.1.177/?switch=1
http://192.168.1.177/?switch=0
The following sketch can be used by the web server to read the incoming client requests, process them, and actuate the relay inside the PowerSwitch Tail:
B04844_01_02.ino
sketch.byte mac[] = { 0x90, 0xA2, 0xDA, 0x0B, 0x00 and 0xDD };
IPAddress ip(192,168,1,177);
//IPAddress ip(192,168,1,177);
//Ethernet.begin(mac, ip);
Ethernet.begin(mac);
EthernetClient
class's read()
method and store it in a string variable http_Request
:char c = client.read(); http_Request += c;
The indexOf()
function can be used to search for the string within another string. If it finds the string switch=1
inside the HTTP request string, the Arduino board will turn digital pin 5 to the HIGH state and turn on the PowerSwitch Tail. If it finds the text switch=0
, the Arduino board will turn the digital pin 5 to the LOW state and turn off the PowerSwitch Tail.
if (httpRequest.indexOf("GET /?switch=0 HTTP/1.1") > -1) { relayStatus = 0; digitalWrite(5, LOW); Serial.println("Switch is Off"); } else if (httpRequest.indexOf("GET /?switch=1 HTTP/1.1") > -1) { relayStatus = 1; digitalWrite(5, HIGH); Serial.println("Switch is On"); }
http://192.168.1.177
. Then hit the Enter key on your keyboard.http://192.168.1.177/?switch=1
and hit the Enter key. The lamp will turn on.http://192.168.1.177/?switch=0
and hit the Enter key. The lamp will turn off.You can sense the availability of mains electricity in your home and read the status before actuating the PowerSwitch Tail.
You will need the following hardware to build the sensor:
Follow the next steps to attach the sensor to the Arduino Ethernet Shield:
The previous sketch is modified to check the availability of the mains electricity and operate PowerSwitch Tail accordingly. The 5V DC wall adapter power supply plugged into the wall keeps the Arduino digital pin 2 in the HIGH state if mains electricity is available. If mains electricity is not available, the digital pin 2 switches to the LOW state.
B04844_01_03.ino
from the code folder of this chapter.hasElectricity
boolean variable holds the state of availability of the electricity.The following Arduino sketch adds two radio buttons to the web page so the user can easily control the switch without typing the URL with the query string into the address bar of the web browser. The radio buttons will dynamically build the URL with the query string depending on the user selection and send it to the Arduino web server with the HTTP request.
B04844_01_04.ino
from the code folder of this chapter.IPAddress ip(192,168,1,177);
<form method="get"></form>
tags.client.println("<form method="get">"); if (httpRequest.indexOf("GET /?switch=0 HTTP/1.1") > -1) { relayStatus = 0; digitalWrite(9, LOW); Serial.println("Off Clicked"); } else if (httpRequest.indexOf("GET /?switch=1 HTTP/1.1") > -1) { relayStatus = 1; digitalWrite(9, HIGH); Serial.println("On Clicked"); } if (relayStatus) { client.println("<input type="radio" name="switch" value="1" checked>ON"); client.println("<input type="radio" name="switch" value="0" onclick="submit();" >OFF"); } else { client.println("<input type="radio" name="switch" value="1" onclick="submit();" >ON"); client.println("<input type="radio" name="switch" value="0" checked>OFF"); } client.println("</form>");
Also, depending on the radio button selection, the browser will re-render the radio buttons using the server response to reflect the current status of the PowerSwitch Tail.
3.133.159.223