55## WiFi
66
77```
8-
98// Load Wi-Fi library
109#include <WiFi.h>
1110
@@ -19,13 +18,13 @@ WiFiServer server(80);
1918// Variable to store the HTTP request
2019String header;
2120
22- // Auxiliar variables to store the current output state
23- String output26State = "off";
24- String output27State = "off";
21+ // Variables to store the current output state
22+ String output33State = "off";
23+ String output04State = "off";
2524
2625// Assign output variables to GPIO pins
27- const int output26 = 33;
28- const int output27 = 04;
26+ const int output33 = 33;
27+ const int output04 = 04;
2928
3029// Current time
3130unsigned long currentTime = millis();
@@ -40,12 +39,12 @@ void setup() {
4039 Serial.begin(115200);
4140
4241 // Initialize the output variables as outputs
43- pinMode(output26 , OUTPUT);
44- pinMode(output27 , OUTPUT);
42+ pinMode(output33 , OUTPUT);
43+ pinMode(output04 , OUTPUT);
4544
4645 // Set outputs to LOW
47- digitalWrite(output26 , LOW);
48- digitalWrite(output27 , LOW);
46+ digitalWrite(output33 , LOW);
47+ digitalWrite(output04 , LOW);
4948
5049 // Connect to Wi-Fi network with SSID and password
5150 Serial.print("Connecting to ");
@@ -58,7 +57,7 @@ void setup() {
5857
5958 // Print local IP address and start web server
6059 Serial.println("");
61- Serial.println("WiFi connected .");
60+ Serial.println("WiFi Connected .");
6261 Serial.println("IP address: ");
6362 Serial.println(WiFi.localIP());
6463 server.begin();
@@ -90,22 +89,34 @@ void loop(){
9089 client.println();
9190
9291 // turns the GPIOs on and off
93- if (header.indexOf("GET /26/on") >= 0) {
94- Serial.println("GPIO 26 on");
95- output26State = "on";
96- digitalWrite(output26, HIGH);
97- } else if (header.indexOf("GET /26/off") >= 0) {
98- Serial.println("GPIO 26 off");
99- output26State = "off";
100- digitalWrite(output26, LOW);
101- } else if (header.indexOf("GET /27/on") >= 0) {
102- Serial.println("GPIO 27 on");
103- output27State = "on";
104- digitalWrite(output27, HIGH);
105- } else if (header.indexOf("GET /27/off") >= 0) {
106- Serial.println("GPIO 27 off");
107- output27State = "off";
108- digitalWrite(output27, LOW);
92+ if (header.indexOf("GET /33/on") >= 0) {
93+ Serial.println("GPIO 33 on");
94+ output33State = "on";
95+ digitalWrite(output33, HIGH);
96+ } else if (header.indexOf("GET /33/off") >= 0) {
97+ Serial.println("GPIO 33 off");
98+ output33State = "off";
99+ digitalWrite(output33, LOW);
100+ } else if (header.indexOf("GET /04/on") >= 0) {
101+ Serial.println("GPIO 04 on");
102+ output04State = "on";
103+ digitalWrite(output04, HIGH);
104+ } else if (header.indexOf("GET /04/off") >= 0) {
105+ Serial.println("GPIO 04 off");
106+ output04State = "off";
107+ digitalWrite(output04, LOW);
108+ } else if (header.indexOf("GET /both/on") >= 0) {
109+ Serial.println("GPIO 04 & 33 on");
110+ output33State = "on";
111+ output04State = "on";
112+ digitalWrite(output33, HIGH);
113+ digitalWrite(output04, HIGH);
114+ } else if (header.indexOf("GET /both/off") >= 0) {
115+ Serial.println("GPIO 04 & 33 off");
116+ output33State = "off";
117+ output04State = "off";
118+ digitalWrite(output33, LOW);
119+ digitalWrite(output04, LOW);
109120 }
110121
111122 // Display the HTML web page
@@ -114,32 +125,42 @@ void loop(){
114125 client.println("<link rel=\"icon\" href=\"data:,\">");
115126 // CSS to style the on/off buttons
116127 // Feel free to change the background-color and font-size attributes to fit your preferences
117- client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
128+ client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;} footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: green; color: white; text-align: center; } ");
118129 client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
119130 client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
120131 client.println(".button2 {background-color: #555555;}</style></head>");
121132
122133 // Web Page Heading
123- client.println("<body><h1>ESP32 Web Server</h1>");
134+ client.println("<body><h1>Ramaguru's Web Server</h1>");
135+
136+ // Display current state, and ON/OFF buttons for GPIO 04
137+ client.println("<p>GPIO 04 - State " + output04State + "</p>");
138+ // If the output04State is off, it displays the ON button
139+ if (output04State=="off") {
140+ client.println("<p><a href=\"/04/on\"><button class=\"button\">ON</button></a></p>");
141+ } else {
142+ client.println("<p><a href=\"/04/off\"><button class=\"button button2\">OFF</button></a></p>");
143+ }
124144
125- // Display current state, and ON/OFF buttons for GPIO 26
126- client.println("<p>GPIO 26 - State " + output26State + "</p>");
127- // If the output26State is off, it displays the ON button
128- if (output26State =="off") {
129- client.println("<p><a href=\"/26 /on\"><button class=\"button\">ON</button></a></p>");
145+ // Display current state, and ON/OFF buttons for GPIO 33
146+ client.println("<p>GPIO 33 - State " + output33State + "</p>");
147+ // If the output33State is off, it displays the ON button
148+ if (output33State =="off") {
149+ client.println("<p><a href=\"/33 /on\"><button class=\"button\">ON</button></a></p>");
130150 } else {
131- client.println("<p><a href=\"/26 /off\"><button class=\"button button2\">OFF</button></a></p>");
151+ client.println("<p><a href=\"/33 /off\"><button class=\"button button2\">OFF</button></a></p>");
132152 }
133153
154+
134155 // Display current state, and ON/OFF buttons for GPIO 27
135- client.println("<p>GPIO 27 - State " + output27State + " </p>");
136- // If the output27State is off, it displays the ON button
137- if (output27State =="off") {
138- client.println("<p><a href=\"/27 /on\"><button class=\"button\">ON</button></a></p>");
156+ client.println("<p>GPIO - State </p>");
157+ // If the output04State is off, it displays the ON button
158+ if (output04State=="off" || output04State =="off") {
159+ client.println("<p><a href=\"/both /on\"><button class=\"button\">ON</button></a></p>");
139160 } else {
140- client.println("<p><a href=\"/27 /off\"><button class=\"button button2\">OFF</button></a></p>");
161+ client.println("<p><a href=\"/both /off\"><button class=\"button button2\">OFF</button></a></p>");
141162 }
142- client.println("</body></html>");
163+ client.println("</body><footer>Demo with ♥ for 24CYS333 - Internet of Things Course</footer>< /html>");
143164
144165 // The HTTP response ends with another blank line
145166 client.println();
@@ -155,10 +176,16 @@ void loop(){
155176 }
156177 // Clear the header variable
157178 header = "";
179+
158180 // Close the connection
159181 client.stop();
160- Serial.println("Client disconnected .");
182+ Serial.println("Client Disconnected .");
161183 Serial.println("");
162184 }
163185}
164- ```
186+ ```
187+
188+ ### Screenshot
189+ <p align =" center " >
190+ <img src =" ../../images/client_ui.png " alt = " client ui " width =" 600 " />
191+ </p >
0 commit comments