week-13

public/week-03.html

@@ -319,8 +319,11 @@ This assignment showed me how parametric design combines creativity with systema
     <p><FONT COLOR="black"> Here, I have inserted my design which I have saved as ".eps" file into "FlexSIGN-PRO" software which is basically used to import file into vinyl cutter. Also, I set all the required parameters including size.
     </FONT></p>  
     <div>
-        <img  width="700" height="450"src="img/week-03/.png">
-    </div><br>
+        <center>
+        <video width="900" height="550" controls>
+            <source src="video/week-03/01.mp4" type="video/mp4">
+          </video></center>
+     </div>
     <p><FONT COLOR="black">Here is the video of how vinyl cutter cuts any design.
     </FONT></p> 
     <div>

public/week-13.html

@@ -289,8 +289,141 @@ Just by clicking on "here", I opeerated the LED On/Off.
     </div><br>
     <p><FONT COLOR="black">
 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-  
     </FONT></p>
+    <div>
+        <img  width="900" height="650"src="img/week-13/18.png">
+    </div><br>
+    <p><FONT COLOR="black">
+Firstly, I uploaded the code in the XIAO-ESP32-C3 board that I already made in the assignment of <a href="week-11.html">Input Devices.</a> Here, I inserted ssid and password of my mobile wifi which is already connected with the laptop.
+    </FONT></p>
+    <div>
+        <img  width="900" height="650"src="img/week-13/19.png">
+    </div><br>
+    <p><FONT COLOR="black">
 
+    </FONT></p>
+    <div>
+        <img  width="900" height="650"src="img/week-13/20.png">
+    </div><br>
+    <p><FONT COLOR="black">
+
+    </FONT></p>
+    <div>
+        <img  width="900" height="650"src="img/week-13/21.png">
+    </div><br>
+    <p><FONT COLOR="black">
+After uploading the code in the microcontroller using Arduino IDE, here I got the IP address of the webpage.
+    </FONT></p>
+    <div>
+        <img  width="900" height="650"src="img/week-13/22.png">
+    </div><br>
+    <p><FONT COLOR="black">
+Then, I inserted generated IP address in the search bar of Chrome to open the webpage.
+    </FONT></p>
+    <div>
+        <img  width="900" height="650"src="img/week-13/23.png">
+    </div><br>
+    <p><FONT COLOR="black">
+Here, I got the output that shows the realtime values of input sensed by MQ135 Gas sensor. <br>
+<br>
+<b>Code:-</b><br>
+<code>
+
+    #include < WiFi.h><br>
+        #include < WebServer.h><br>
+        <br>
+        // Include MQ135 library if needed<br>
+        <br>
+        /*Put your SSID & Password*/<br>
+        const char* ssid = "Nothing phone 1"; // Enter SSID here<br>
+        const char* password = "129129129"; // Enter Password here<br>
+        <br>
+        WebServer server(80);<br>
+        <br>
+        // MQ135 Sensor<br>
+        const int sensorPin = A0; // Analog input pin connected to MQ-135 sensor<br>
+        <br>
+        void setup() {<br>
+          Serial.begin(115200);<br>
+          delay(100);<br>
+          <br>
+          // Initialize Wi-Fi<br>
+          Serial.println("Connecting to WiFi...");<br>
+          WiFi.begin(ssid, password);<br>
+          while (WiFi.status() != WL_CONNECTED) {<br>
+            delay(1000);<br>
+            Serial.print(".");<br>
+          }<br>
+          Serial.println("");<br>
+          Serial.println("WiFi connected!");<br>
+          Serial.print("Got IP: "); <br>
+          Serial.println(WiFi.localIP());<br>
+          <br>
+          server.on("/", handle_OnConnect);<br>
+          server.onNotFound(handle_NotFound);<br>
+          <br>
+          server.begin();<br>
+          Serial.println("HTTP server started");<br>
+        }<br>
+        <br>
+        void loop() {<br>
+          server.handleClient();<br>
+        }<br>
+        <br>
+        void handle_OnConnect() {<br>
+          float airQuality = analogRead(sensorPin); // Read analog value from MQ-135 sensor<br>
+          server.send(200, "text/html", SendHTML(airQuality));<br>
+        }<br>
+        <br>
+        void handle_NotFound() {<br>
+          server.send(404, "text/plain", "Not found");<br>
+        }<br>
+        <br>
+        String SendHTML(float airQuality) {<br>
+          String ptr = "< !DOCTYPE html>\n< html>\n";<br>
+          ptr += "< head>\n";<br>
+          ptr += "< meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";<br>
+          ptr += "< title>XIAO-ESP32-C3 Webserver< /title>\n";<br>
+          ptr += "< style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";   <br>
+          ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";<br>
+          ptr += "p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";<br>
+          ptr += "< /style>\n";<br>
+          ptr += "< /head>\n";<br>
+          ptr += "< body>\n";<br>
+          ptr += "< div id=\"webpage\">\n";<br>
+          ptr += "< h1>XIAO-ESP32-C3 Webserver< /h1>\n";<br>
+          <br>
+          ptr += "< p>Air Quality: ";<br>
+          ptr += airQuality;<br>
+          ptr += "< /p>\n";<br>
+          <br>
+          ptr += "< /div>\n";<br>
+          ptr += "< /body>\n";<br>
+          ptr += "< /html>\n";<br>
+          <br>
+          return ptr;<br>
+        }<br>
+
+    </code>
+    <br>
+    <br>
+    <b>Code Explaination:-</b><br><br>
+    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 <b>Wi-Fi</b> and <b>web server</b> functionalities. I have defined the Wi-Fi credentials and created an instance of the WebServer class to handle requests. Specifically, I inserted the <b>SSID</b> and <b>password</b> of the Wi-Fi network to which the XIAO-ESP32-C3 will connect in the code. In the <b>setup()</b> 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 <b>handle_OnConnect</b> function, and a handler for 404 errors (<b>handle_NotFound</b>). The <b>loop()</b> function continuously listens for incoming client requests using <b>server.handleClient()</b>. The <b>handle_OnConnect()</b> 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 <b>handle_NotFound()</b> function sends a 404 error message. The <b>SendHTML(float airQuality)</b> function generates an HTML string that displays the air quality reading, which is then sent to the client.<br>
+    The protocol used in this code is <b>HTTP (Hypertext Transfer Protocol).</b> 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.
+<br>
+<br>    
+<b>Output:-</b><br>
+</FONT></p>
+<div>
+    <img  width="900" height="650"src="img/week-13/24.png">
+</div><br>
+<div>
+    <center>
+    <video width="900" height="550" controls>
+        <source src="video/week-13/01.mp4" type="video/mp4">
+      </video></center>
+ </div>