40. Chapter Control LED with Web (WiFi Board)
In this chapter, we will use control board to make a simple smart home. We will learn how to control LED lights through web pages.
40.1. Project Control the LED with Web
In this project, we need to build a Web Service and then use the control board to control the LED through the Web browser of the phone or PC. Through this example, you can remotely control the appliances in your home to achieve smart home.
40.1.1. Component List
Control board x1 |
USB cable x1 |
|
|
40.1.2. Component knowledge
40.1.2.1. HTML
HyperText Markup Language (HTML) is a standard Markup Language for creating web pages.It includes a set of tags that unify documents on the network and connect disparate Internet resources into a logical whole.HTML text is descriptive text composed of HTML commands that describe text, graphics, animations, sounds, tables, links, etc.The extension of the HTML file is HTM or HTML.Hyper Text is a way to organize information.It uses hyperlinks to associate words and charts in Text with other information media.These related information media may be in the same Text, other files, or files located on a remote computer.This way of organizing information connects the information resources distributed in different places, which is convenient for people to search and retrieve information.
The nature of the Web is hypertext Markup Language (HTML), which can be combined with other Web technologies (e.g., scripting languages, common gateway interfaces, components, etc.) to create powerful Web pages. Thus, HYPERtext Markup Language (HTML) is the foundation of World Wide Web (Web) programming, that is, the World Wide Web is based on hypertext. Hypertext Markup Language is called hypertext Markup language because the text contains so-called “hyperlink” points.
You can build your own WEB site using HTML, which runs on the browser and is parsed by the browser.
Example analysis is shown in the figure below:
<!DOCTYPE html>: Declare it as an HTML5 document
<html>: Is the root element of an HTML page
<head>: Contains meta data for the document, such as < meta charset=”utf-8”> Define the web page encoding format to UTF-8.
<title>: Notesthe title of the document
<body>: Contains visible page content
<h1>: Define a big heading
<p>: Define a paragraph
For more information, please visit: https://developer.mozilla.org/en-US/docs/Web/HTML
40.1.3. Circuit
Connect the board to the computer using the USB cable.
40.1.4. Sketch
40.1.4.1. Sketch_40.1.1
Upload the code to the control board, open the serial monitor and set the board rate to 115200. After the board connects to WiFi successfully, the IP address will be printed out, as shown below.
When Control Board successfully connects to “ssid_Router”, serial monitor will print out the IP address assigned to Control Board by the router. Access http://192.168.1.26 in a computer browser on the LAN. As shown in the following figure:
You can click the corresponding button to control the LED on and off.
The following is the program code:
1/**********************************************************************
2 Filename : Sketch_40.1.1_Control_the_LED_with_Web
3 Description : Control the LED with Web
4 Auther : www.freenove.com
5 Modification: 2024/08/05
6**********************************************************************/
7
8#include "WiFiS3.h"
9
10// Replace with your network credentials
11 char* ssid = "********";
12 char* password = "********";
13
14// Set web server port number to 80
15WiFiServer server(80);
16// Variable to store the HTTP request
17String header;
18// Auxiliar variables to store the current output state
19String PIN_LEDState = "OFF";
20
21// Current time
22unsigned long currentTime = millis();
23// Previous time
24unsigned long previousTime = 0;
25// Define timeout time in milliseconds (example: 2000ms = 2s)
26const long timeoutTime = 2000;
27
28void setup() {
29 Serial.begin(115200);
30 // Initialize the output variables as outputs
31 pinMode(LED_BUILTIN, OUTPUT);
32 digitalWrite(LED_BUILTIN, LOW);
33
34 // Connect to Wi-Fi network with SSID and password
35 Serial.print("Connecting to ");
36 Serial.println(ssid);
37 WiFi.begin(ssid, password);
38 while (WiFi.status() != WL_CONNECTED) {
39 delay(500);
40 Serial.print(".");
41 }
42 // Print local IP address and start web server
43 Serial.println("");
44 Serial.println("WiFi connected.");
45 Serial.println("IP address: ");
46 Serial.println(WiFi.localIP());
47 server.begin();
48}
49void loop() {
50 WiFiClient client = server.available(); // Listen for incoming clients
51 if (client) { // If a new client connects,
52 Serial.println("New Client."); // print a message out in the serial port
53 String currentLine = ""; // make a String to hold incoming data from the client
54 currentTime = millis();
55 previousTime = currentTime;
56 while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
57 currentTime = millis();
58 if (client.available()) { // if there's bytes to read from the client,
59 char c = client.read(); // read a byte, then
60 Serial.write(c); // print it out the serial monitor
61 header += c;
62 if (c == '\n') { // if the byte is a newline character
63 // if the current line is blank, you got two newline characters in a row.
64 // that's the end of the client HTTP request, so send a response:
65 if (currentLine.length() == 0) {
66 // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
67 // and a content-type so the client knows what's coming, then a blank line:
68 client.println("HTTP/1.1 200 OK");
69 client.println("Content-type:text/html");
70 client.println("Connection: close");
71 client.println();
72 // turns the GPIOs on and off
73 if (header.indexOf("GET /LED_BUILTIN/ON") >= 0) {
74 Serial.println("LED_BUILTIN ON");
75 PIN_LEDState = "ON";
76 digitalWrite(LED_BUILTIN, HIGH);
77 } else if (header.indexOf("GET /LED_BUILTIN/OFF") >= 0) {
78 Serial.println("LED_BUILTIN OFF");
79 PIN_LEDState = "OFF";
80 digitalWrite(LED_BUILTIN, LOW);
81 }
82 // Display the HTML web page
83 client.println("<!DOCTYPE html><html>");
84 client.println("<head> <title>Control Board Web Server</title> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
85 client.println("<link rel=\"icon\" href=\"data:,\">");
86 // CSS to style the on/off buttons
87 // Feel free to change the background-color and font-size attributes to fit your preferences
88 client.println("<style>html {font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}");
89 client.println(" h1{color: #0F3376; padding: 2vh;} p{font-size: 1.5rem;}");
90 client.println(".button{background-color: #4286f4; display: inline-block; border: none; border-radius: 4px; color: white; padding: 16px 40px;text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
91 client.println(".button2{background-color: #4286f4;display: inline-block; border: none; border-radius: 4px; color: white; padding: 16px 40px;text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}</style></head>");
92 // Web Page Heading
93 client.println("<body><h1>Control Board Web Server</h1>");
94 client.println("<p>GPIO state: " + PIN_LEDState + "</p>");
95 client.println("<p><a href=\"/LED_BUILTIN/ON\"><button class=\"button button2\">ON</button></a></p>");
96 client.println("<p><a href=\"/LED_BUILTIN/OFF\"><button class=\"button button2\">OFF</button></a></p>");
97 client.println("</body></html>");
98 // The HTTP response ends with another blank line
99 client.println();
100 // Break out of the while loop
101 break;
102 } else { // if you got a newline, then clear currentLine
103 currentLine = "";
104 }
105 } else if (c != '\r') { // if you got anything else but a carriage return character,
106 currentLine += c; // add it to the end of the currentLine
107 }
108 }
109 }
110 // Clear the header variable
111 header = "";
112 // Close the connection
113 client.stop();
114 Serial.println("Client disconnected.");
115 Serial.println("");
116 }
117}
Include the WiFi Library header file of Control Board.
1#include "WiFiS3.h"
Enter correct router name and password.
1// Replace with your network credentials
2 char* ssid = "********";
3 char* password = "********";
Set Control Board in Station mode and connect it to your router.
1WiFi.begin(ssid, password);
Check whether Control Board has connected to router successfully every 0.5s.
1while (WiFi.status() != WL_CONNECTED) {
2 delay(500);
3 Serial.print(".");
4}
Serial monitor prints out the IP address assigned to Control Board.
1Serial.println(WiFi.localIP());
Click the button on the web page to control the LED light on and off.
1// turns the GPIOs on and off
2if (header.indexOf("GET /LED_BUILTIN/ON") >= 0) {
3 Serial.println("LED_BUILTIN ON");
4 PIN_LEDState = "ON";
5 digitalWrite(LED_BUILTIN, HIGH);
6} else if (header.indexOf("GET /LED_BUILTIN/OFF") >= 0) {
7 Serial.println("LED_BUILTIN OFF");
8 PIN_LEDState = "OFF";
9 digitalWrite(LED_BUILTIN, LOW);
10}