Easy IOT – Remotely Controlling ESP32 Using an Android App

Relay Module (Generic)

FireBeetle ESP32 IOT Microcontroller (Supports Wi-Fi & Bluetooth)

DroidScript

Arduino IDE

Also available here:<a href="https://www.instructables.com/id/Easy-IOT-Remotely-Controlling-ESP32-Using-an-Andro/">https://www.instructables.com/id/Easy-IOT-Remotely-Controlling-ESP32-Using-an-Andro/</a>In this tutorial, we will write a DroidScript app to control a relay module using the ESP32 board over WiFi.You will need:· ESP32 board (we used ESP32_core_board_v2)· An Android device· The DroidScript app· Arduino IDE· Relay module· Micro USB Cable· Female to Female Jumper (Dupont) Connectors x3· WiFi<h3 >Step 1: Setting Up the Arduino IDE</h3>The first thing we will need to do is add the ESP32board to the Arduino IDE. To do this, follow this guide:<a href="https://randomnerdtutorials.com/installing-the-esp32-board-in-arduino-ide-windows-instructions/">https://randomnerdtutorials.com/installing-the-esp...</a>We then need to add the library we are going to use to run a webserver we can communicate with on the ESP32.To add the ESPAsyncWebServer library to the IDE go to: <a href="https://github.com/me-no-dev/ESPAsyncWebServer">https://github.com/me-no-dev/ESPAsyncWebServer</a>and download the library as a zip file. Go back to the Arduino IDE and to Sketch, Include Library, Add.ZIP Library then find the zip file you just downloaded and click open.This library starts an asynchronous web server on the Arduino that we can connect to over the WIFI network to tell the ESP32 to do things or read data back from the device.<figure><img src=https://projects.arduinocontent.cc/d7f9596e-563b-427a-a8b5-0f75954b3c6f.jpg /><figcaption> </figcaption></figure><h3 >Step 2: Arduino Webserver Code</h3>Add the following code in the Arduino IDE and fill in yourown WIFI SSID and Password. Once complete, go to Tools, Board, and select ESP32 Dev Module (or whichever your board is). You can now plug your board into your PC using the micro USB cable and you should see it appear under Tools, Port. Select your board and port here and then upload the code.<pre ><code >#include &#34;WiFi.h&#34; #include &#34;ESPAsyncWebServer.h&#34; const char* ssid = &#34;myRouter&#34;; //replace const char* password = &#34;myPassword&#34;; //replace AsyncWebServer server(80); int relayPin = 23; void setup() { pinMode(relayPin, OUTPUT); digitalWrite(relayPin, HIGH); Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println(&#34;Connecting to WiFi..&#34;); } Serial.println(WiFi.localIP()); server.on(&#34;/hello&#34;, HTTP_GET, [](AsyncWebServerRequest *request){ request-&gt;send(200, &#34;text/plain&#34;, &#34;Hello World&#34;); }); server.on(&#34;/relay/off&#34;, HTTP_GET , [](AsyncWebServerRequest *request){ request-&gt;send(200, &#34;text/plain&#34;, &#34;ok&#34;); digitalWrite(relayPin, HIGH); }); server.on(&#34;/relay/on&#34;, HTTP_GET, [](AsyncWebServerRequest *request){ request-&gt;send(200, &#34;text/plain&#34;,&#34;ok&#34;); digitalWrite(relayPin, LOW); }); server.on(&#34;/relay/toggle&#34;, HTTP_GET, [](AsyncWebServerRequest *request){ request-&gt;send(200, &#34;text/plain&#34;,&#34;ok&#34;); digitalWrite(relayPin, !digitalRead(relayPin)); }); server.on(&#34;/relay&#34;, HTTP_GET, [](AsyncWebServerRequest *request){ request-&gt;send(200, &#34;text/plain&#34;, String(digitalRead(relayPin))); }); server.begin(); } void loop(){} </code></pre><figure><img src=https://projects.arduinocontent.cc/238f3058-a806-4309-83cb-f9ec07739ac5.jpg /><figcaption> </figcaption></figure><h3 >Step 3: Find the ESP32 IP Address</h3>In the Arduino IDE, open the serial monitor and you shouldsee something like this:Take note of the IP address at the bottom, you will need this later. If you don’t see anything in the serial monitor, try pressing the reset button on the ESP32.<figure><img src=https://projects.arduinocontent.cc/5a6efca1-f3e2-47a9-bcb5-11b649fc17e8.jpg /><figcaption> </figcaption></figure><h3 >Step 4: The DroidScript App</h3>Open Droidscript on your mobile device and create a new app. Copy the following code into the app and fill in the IP Address from the previous step.The easiest way to do this is to open the web editor - press the WiFi symbol in the app then type the IP address it gives you into your browser. To create a new app:From the app - go to the three dots button and click New, give your app a name and leave the types as Native and Simple.From the web editor: Click the grid symbol (Apps button) Then select 'New JavaScript App'. Give it a name and leave the type as simple. Click Ok. The app will then open and you can then replace the Hello World sample code with the code below. Don't forget to replace the IP Address with your ESP32's IP found in the previous step.<pre ><code >var url = &#34;http://192.168.1.154&#34;; //Called when application is started. function OnStart() { //Create a layout with objects vertically centered. lay = app.CreateLayout( &#34;linear&#34;, &#34;VCenter,FillXY&#34; ); app.AddLayout( lay ); //Create a button to send request. btn = app.CreateButton( &#34;State&#34;, 0.3, 0.1 ); btn.SetMargins( 0, 0.05, 0, 0 ); btn.SetOnTouch( btn_OnTouch ); lay.AddChild( btn ); //Create a button to send request. btnON = app.CreateButton( &#34;Relay ON&#34;, 0.3, 0.1 ); btnON.SetMargins( 0, 0.05, 0, 0 ); btnON.SetOnTouch( btnON_OnTouch ); lay.AddChild( btnON ); //Create a button to send request. btnOFF = app.CreateButton( &#34;Relay OFF&#34;, 0.3, 0.1 ); btnOFF.SetMargins( 0, 0.05, 0, 0 ); btnOFF.SetOnTouch( btnOFF_OnTouch ); lay.AddChild( btnOFF ); } function btn_OnTouch() { //Send request to remote server. var path = &#34;/relay&#34;; //var params = &#34;data=&#34; + data.replace(&#34;\\r&#34;,&#34;&#34;); app.HttpRequest( &#34;get&#34;, url, path, &#34;&#34;, HandleReply ); } function btnON_OnTouch() { //Send request to remote server. var path = &#34;/relay/on&#34;; //var params = &#34;data=&#34; + data.replace(&#34;\\r&#34;,&#34;&#34;); app.HttpRequest( &#34;get&#34;, url, path, &#34;&#34;, HandleReply ); } function btnOFF_OnTouch() { //Send request to remote server. var path = &#34;/relay/off&#34;; //var params = &#34;data=&#34; + data.replace(&#34;\\r&#34;,&#34;&#34;); app.HttpRequest( &#34;get&#34;, url, path, &#34;&#34;, HandleReply ); } //Handle the servers reply. function HandleReply( error, response ) { console.log(error); app.ShowPopup(response); } </code></pre><figure><img src=https://projects.arduinocontent.cc/0a41f40c-6f2e-40f1-8e0b-6120dcd7ea7e.jpg /><figcaption> </figcaption></figure><h3 >Step 5: Connect the Relay Module</h3>Connect the relay module to the ESP32 as follows:GND---GNDVCC---5VIN1---IO23You can also unplug the ESP32 from your computer now and power from a battery if you would like.<figure><img src=https://projects.arduinocontent.cc/58ba7db9-fb08-4627-91f1-57b3acfeaf9d.jpg /><figcaption> </figcaption></figure><h3 >Step 6: Test!</h3>Run the app by pressing the play button and test by pressing the buttons. If everythinghas been done correctly you will be able to turn the relay on and off using the buttons and detect the state of the relay by pressing the state button. If the communication is successful, the app will show a popup saying “ok” or with the relay state (The number returned is a 1 for pin high and 0 for pin low, the relay is switched on when the control pin is pulled low).<div id="gallery"><img id="gallery" src=https://projects.arduinocontent.cc/b22e29ed-9150-465c-b508-e9d2acc9500a.jpg /><figcaption> </figcaption><img id="gallery" src=https://projects.arduinocontent.cc/605a2316-e0dc-4cfc-9422-8e5855ca9896.jpg /><figcaption> </figcaption><img id="gallery" src=https://projects.arduinocontent.cc/2e027327-5212-4e02-accc-f4128ecaf20e.jpg /><figcaption> </figcaption></div><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/8FaikMSHhEo" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div>