On the Wednesday of thirteenth week, Mr. Neil sir conducted our thirteenth global session. He took the random generator in first 90 minutes. He gave us overall explaination about week-13 which includes Networking and Communications.
In this assignment, I have made documentation on-
Group Assignment
1. Send a message between two projects.
Individual Assignment
1. Design, build, and connect wired or wireless node(s) with network or bus addresses and local input &/or output device(s).
Group Assignment
Click here to read more about group assignment.
Individual Assignment
In the individual assignment, I documented on Design, build, and connect wired or wireless node(s) with network or bus addresses and local input &/or output device(s). So, here I have used ESP32 to turn On/Off of in-built LED from Webpage by generating the IP address of it.
Firstly, open the Arduinno IDE for the programming. Go to sketch > include library > manage libraries.
Now, add the wifimanager library by tzapu.
Select the version as per your convinience.
Now, go to file > Examples > Wifimanager > Basic to add default code file.
Open default code file.
Comment down the unnecessary program.
Now, Select the board from tools tab.
Now, again go to examples > wifi > simplewifiserver.
Open default code file.
Enter the Hotspot name and password which is conneccted with the laptop.
Make changes in the code as per the required output.
Now, go to the serial monitor to check the output.
Here, I got the generated IP addreess of my webpage.
Just by clicking on "here", I opeerated the LED On/Off.
Here is the final output. Here, firstly I used ESP32 micrcontroller to control the in-built LED from webpage through generated IP address. Now, I used XIAO-ESP32-C3 microcontroller to read the input values of MQ135 Gas sensor through webpage. Following are the steps-
Firstly, I uploaded the code in the XIAO-ESP32-C3 board that I already made in the assignment of Input Devices. Here, I inserted ssid and password of my mobile wifi which is already connected with the laptop.
After uploading the code in the microcontroller using Arduino IDE, here I got the IP address of the webpage.
Then, I inserted generated IP address in the search bar of Chrome to open the webpage.
Here, I got the output that shows the realtime values of input sensed by MQ135 Gas sensor.
Code:-
#include < WiFi.h>
#include < WebServer.h>
// Include MQ135 library if needed
/*Put your SSID & Password*/
const char* ssid = "Nothing phone 1"; // Enter SSID here
const char* password = "129129129"; // Enter Password here
WebServer server(80);
// MQ135 Sensor
const int sensorPin = A0; // Analog input pin connected to MQ-135 sensor
void setup() {
Serial.begin(115200);
delay(100);
// Initialize Wi-Fi
Serial.println("Connecting to WiFi...");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected!");
Serial.print("Got IP: ");
Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
float airQuality = analogRead(sensorPin); // Read analog value from MQ-135 sensor
server.send(200, "text/html", SendHTML(airQuality));
}
void handle_NotFound() {
server.send(404, "text/plain", "Not found");
}
String SendHTML(float airQuality) {
String ptr = "< !DOCTYPE html>\n< html>\n";
ptr += "< head>\n";
ptr += "< meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr += "< title>XIAO-ESP32-C3 Webserver< /title>\n";
ptr += "< style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr += "p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr += "< /style>\n";
ptr += "< /head>\n";
ptr += "< body>\n";
ptr += "< div id=\"webpage\">\n";
ptr += "< h1>XIAO-ESP32-C3 Webserver< /h1>\n";
ptr += "< p>Air Quality: ";
ptr += airQuality;
ptr += "< /p>\n";
ptr += "< /div>\n";
ptr += "< /body>\n";
ptr += "< /html>\n";
return ptr;
}
Code Explaination:-
This code sets up a simple web server on a XIAO-ESP32-C3 microcontroller to display air quality readings from an MQ-135 gas sensor. It includes the necessary libraries for Wi-Fi and web server functionalities. I have defined the Wi-Fi credentials and created an instance of the WebServer class to handle requests. Specifically, I inserted the SSID and password of the Wi-Fi network to which the XIAO-ESP32-C3 will connect in the code. In the setup() function, I initialize the serial communication for debugging and connect the XIAO-ESP32-C3 to the specified Wi-Fi network. Once connected, I register two routes: the root URL ("/"), which triggers the handle_OnConnect function, and a handler for 404 errors (handle_NotFound). The loop() function continuously listens for incoming client requests using server.handleClient(). The handle_OnConnect() function reads the air quality value from the MQ-135 sensor and sends an HTML response containing this value. If a client requests a URL that does not exist, the handle_NotFound() function sends a 404 error message. The SendHTML(float airQuality) function generates an HTML string that displays the air quality reading, which is then sent to the client.
The protocol used in this code is HTTP (Hypertext Transfer Protocol). HTTP is a protocol used for transmitting hypertext requests and information on the internet. In this setup, the XIAO-ESP32-C3 microcontroller acts as a web server, listening for incoming HTTP requests on port 80. When a client, such as a web browser, sends an HTTP request to the microcontroller, the web server processes the request and sends back an HTTP response. This response includes HTML content that displays the air quality reading from the MQ-135 sensor. The use of HTTP allows any device with a web browser to access the air quality data by simply connecting to the XIAO-ESP32-C3's IP address.
Output:-