Creating a Home Automation Project Using MIT App Inventor
Creating a Home Automation Project Using MIT App Inventor
You must've read one of my previous blogs where I used a Xiao ESP32C3 board to control an LED using Arduino IoT Cloud's dashboards using the integrated wi-fi of the board.
Instead of using the Arduino Cloud, I am now creating an app with MIT App Inventor. This app will include the board's IP address to connect our phone to its own small Wi-Fi network. But, we'll not only do this, we're going to practically implement this in our house using a real light bulb.
To do that, we will need:
- A XIAO ESP32C3 board and its cable
- A single-channel relay
- A light bulb holder
- 7-8 electrical wires
- Some wires
- A 10x10x5 cm box with screw connecting pillars
- Screw driver
- Computer/PC/Laptop
- Soldering gun and its accessories
Instructions:
1. Take your Xiao board and upload the code provided below. Before doing that, you can change the *ssid of your Wi-Fi name to whatever you want and also modify its *password according to your preference in these lines: const char *ssid = "My-ESP32-AP";
Here code below
#include <WiFi.h>
#include <WebServer.h>
// Set your desired access point name (SSID) and password
const char *ssid = "My-ESP32-AP";
const char *password = "123456789";
// Create a WebServer object that listens on HTTP port 80
WebServer server(80);
void handleRoot() {
String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>XIAO ESP32C3 Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial; text-align: center; }
.container { padding: 20px; }
h1 { color: #333; }
.info { color: #555; }
</style>
</head>
<body>
<div class="container">
<h1>Hello from XIAO ESP32C3!</h1>
<p class="info">You are connected to the access point: %s</p>
<p class="info">This is a simple web server running on your board.</p>
</div>
</body>
</html>
)rawliteral";
// Safely replace the placeholder with the SSID using String's replace method
html.replace("%s", ssid);
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
delay(10);
Serial.println("\nConfiguring access point...");
// Set the ESP32 to Access Point (AP) mode
WiFi.softAP(ssid, password);
IPAddress ip = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(ip);
// Set up the web server route for the root page
server.on("/", handleRoot);
// Start the web server
server.begin();
Serial.println("Web server started.");
}
void loop() {
server.handleClient(); // Handle incoming client requests
}
2. After uploading the code, open the serial monitor and check the IP address of your Wi-Fi and then
test it by connecting to the Wi-Fi and putting the address in your browser. You'll get a message that
says, Hello from your XIAO!. If the code isn't uploading, your board must not be in ''Boot mode". For
that, do the following steps:
Press the boot button on your board and continue to hold it down. Then, while holding the boot
button, press the Reset button and release it right after. Then, keep pressing it down and upload
the code.
3. After doing it, upload the next code for our main project from the sketch option. This code will
control our light bulb.
Before uploading, change the Wi-Fi and password and upload the code.
Here code below
#include <WiFi.h>
const char WiFiPassword[] = "123456789";
const char AP_NameChar[] = "My-ESP32-AP" ;
WiFiServer server(80);
String header = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
String html_1 = "<!DOCTYPE html><html><head><title>LED Control</title></head><body><div id='main'><h2>LED Control</h2>";
String html_2 = "<form id='F1' action='LEDON'><input class='button' type='submit' value='LED ON' ></form><br>";
String html_3 = "<form id='F2' action='LEDOFF'><input class='button' type='submit' value='LED OFF' ></form><br>";
String html_4 = "</div></body></html>";
String request = "";
int LED_Pin = D8;
void setup()
{
pinMode(LED_Pin, OUTPUT);
digitalWrite(LED_Pin, LOW);
boolean conn = WiFi.softAP(AP_NameChar, WiFiPassword);
server.begin();
} // void setup()
void loop()
{
// Check if a client has connected
WiFiClient client = server.available();
if (!client) { return; }
// Read the first line of the request
request = client.readStringUntil('\r');
if ( request.indexOf("LEDON") > 0 ) { digitalWrite(LED_Pin, LOW); }
else if ( request.indexOf("LEDOFF") > 0 ) { digitalWrite(LED_Pin, HIGH); }
client.flush();
client.print( header );
client.print( html_1 );
client.print( html_2 );
client.print( html_3 );
client.print( html_4);
delay(5);
// The client will actually be disconnected when the function returns and 'client' object is detroyed
} // void loop()
4. After uploading the code, it's time to make the circuit.
5. After making the circuit, it is time to make the app. Refer to the following steps:
Open the MIT App Inventor and create a new project
Add the components as given below:
Add the components as given below:
alignment to the centre.
Change the height of text box 3 to 15%. Then, change the height to 20% and the width to Fill Parent
and font size to 30 in text box 1. Change the height to 10% and the width to Fill parent of Horizontal
Arrangement 1. Change the colour of button 1 to blue, its height to 10%, its width to 50%, its
shape to a rounded shape, its text to ON and its alignment to the centre. Do the same for button 2
but with the colour red and text as OFF. Place both buttons side by side. Don't add the TextBox2.
After that, change the height of HorizontalArrangement3 below HorizontalArrangement1 and set
its colour to default. Then, change the height and width to Fill Parent and add an image, whichever
you like, for ex.
After that, your design should probably look like this
After that, it is time to add the code blocks. Add the code just as given below and change the web
URL to what appeared in the serial monitor.
After that, your app is ready!!!
Here's the working model:
Comments
Post a Comment