Skip to content
Snippets Groups Projects
Commit 0bc09114 authored by Siddhi Bodhe's avatar Siddhi Bodhe
Browse files

week-13

parent fef6075f
No related branches found
No related tags found
No related merge requests found
Pipeline #476225 passed
Showing with 138 additions and 2 deletions
public/img/week-13/04.png

72.8 KiB | W: | H:

public/img/week-13/04.png

65.5 KiB | W: | H:

public/img/week-13/04.png
public/img/week-13/04.png
public/img/week-13/04.png
public/img/week-13/04.png
  • 2-up
  • Swipe
  • Onion skin
public/img/week-13/06.png

55.7 KiB | W: | H:

public/img/week-13/06.png

50 KiB | W: | H:

public/img/week-13/06.png
public/img/week-13/06.png
public/img/week-13/06.png
public/img/week-13/06.png
  • 2-up
  • Swipe
  • Onion skin
public/img/week-13/13.png

61.5 KiB | W: | H:

public/img/week-13/13.png

56.8 KiB | W: | H:

public/img/week-13/13.png
public/img/week-13/13.png
public/img/week-13/13.png
public/img/week-13/13.png
  • 2-up
  • Swipe
  • Onion skin
public/img/week-13/15.png

55.4 KiB | W: | H:

public/img/week-13/15.png

49.6 KiB | W: | H:

public/img/week-13/15.png
public/img/week-13/15.png
public/img/week-13/15.png
public/img/week-13/15.png
  • 2-up
  • Swipe
  • Onion skin
public/img/week-13/16.png

19.8 KiB | W: | H:

public/img/week-13/16.png

16.7 KiB | W: | H:

public/img/week-13/16.png
public/img/week-13/16.png
public/img/week-13/16.png
public/img/week-13/16.png
  • 2-up
  • Swipe
  • Onion skin
public/img/week-13/17.png

663 KiB | W: | H:

public/img/week-13/17.png

617 KiB | W: | H:

public/img/week-13/17.png
public/img/week-13/17.png
public/img/week-13/17.png
public/img/week-13/17.png
  • 2-up
  • Swipe
  • Onion skin
public/img/week-13/18.png

47.9 KiB

public/img/week-13/19.png

51.2 KiB

public/img/week-13/20.png

53.2 KiB

public/img/week-13/21.png

41.4 KiB

public/img/week-13/22.png

553 KiB

public/img/week-13/23.png

11.7 KiB

public/img/week-13/24.png

322 KiB

File added
File added
...@@ -319,8 +319,11 @@ This assignment showed me how parametric design combines creativity with systema ...@@ -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. <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> </FONT></p>
<div> <div>
<img width="700" height="450"src="img/week-03/.png"> <center>
</div><br> <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. <p><FONT COLOR="black">Here is the video of how vinyl cutter cuts any design.
</FONT></p> </FONT></p>
<div> <div>
......
...@@ -289,8 +289,141 @@ Just by clicking on "here", I opeerated the LED On/Off. ...@@ -289,8 +289,141 @@ Just by clicking on "here", I opeerated the LED On/Off.
</div><br> </div><br>
<p><FONT COLOR="black"> <p><FONT COLOR="black">
Here is the final output. 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> </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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment