Esp32 - Using websocket to control three LED - PlatformIO

hi this is YouTube channel this video we will see about how to connect to esp32 through websocket and then we will try to turn on the three lights here this is what we are going to see in this particular tutorial here esp32 is the server the client can be anything here I am using my mobile phone as the client and through this client I am trying to connect through the ESP server and then here I am trying to turn on red light or green light or blue light here all the communication happens through the websocket here first we will start with what this websocket websocket is a computer communication protocol providing full duplex communication channels over a single TCP connection the websockets works like this first the client here in this case the client can be our laptop or our mobile phone here the server is esp32 and here in this case we are sending the client sends the request to the server and once the request is valid it it sends back the handshake now the communication is established between the client and server this communication is more like a bi-directional communication so the client can send the data to the server and the server can send the data to the client so the server will send the data whenever the data is available it will start sending the information to clean similarly the client will send the information whenever there is even triggered so this is the websocket and here we are going to connect three different alerts to esp32 so first we will see about how to connect to the lid the lid has two terminals one is positive or negative longer terminal is a positive one and the shorter one is the negative terminal so here in this case we are connecting through the esp32 here I am using three different GPI opens that is one two and three here I am connecting red to the gpio open one green to the gpio open 2 and then blue to the GPA open 3. for this particular project I am going to use Dot platform IO IDE the platform IO ID is a plugin in Visual Studio code so if you are not familiar with platform IO IDE or route setup platform IO ID in the visual studio code refer my video tutorial the link of which I have given in the description here I have opened empty project to create a new platform IO project click the platform IO and then click the home and then click open in the home click new project and then project name websocket and then board in my case I am using esp32 iPhone S3 hyphen dev kit C iPhone 1 here we need to select the Frameworks Arduino I'm just giving the default location you can specify your own location if you want and click finish once you click finished it will create a buyer plate project and it will have everything starting from the platform IO ini and Source directory lib directory and then include direct for this we have five different the dependencies the dependencies are Wi-Fi for Wi-Fi connectivity and Fs and then spiffs and then we have ESP asynchronous TCP and then ESP asynchronous web server we will add the library dependencies here I will add the library dependency for TFT so I already have this project in my GitHub repository you can copy and paste the TFT underscore e SPI from a GitHub project to the library here I have copied and pasted the TFT underscore espa now we are done with our basic setup now we have added all the dependencies and this is only optional if you are not going to use any T display monitor you can use the serial to print all the console logs first we will start with HTML files and CSS files and JavaScript files we need this HTML files under the CSS files and JavaScript files because this files are the one which will be supplied from our web server here our web server is nothing but the esp32 so the VSP 32 Whenever there is a client which connects to the server and when it goes through the route so he will get the HTML page where it has the three check boxes and this will be provided by your web server so you need to make sure you are creating the HTML file so first I will start with a new folder so this fold is a data folder and here we will create a new file named index.html index.html and here in this index.html we will create three different check boxes so I have already created a index.html I will just try to copy and paste this index.html here I also created a CSS file so we will copy and paste the CSS file as well so for the CSS file I will create a new folder named CSS so new file style dot CSS and then I will create another folder named script where I will paste all the JavaScript files so in this case I will create a a new file named socket dot Js we'll go to the index.html so in this case first we have our title the title is the one which will be displayed in the tab so here we have also added the dependencies style.css so here in this case in the folder name is CSS I am giving it a CSS if you are creating a different folder name you need to make sure you are changing this folder name here and then the file name here and then I have created a container and this container holds all the three check boxes we will see why we are adding this three state later in the video so for now I will just try to remove this three states and then here we have created input and the input is check box type and then here in the script we will add the circuit.js we will copy and paste the socket and I will try to explain what is going on in the circuit.js yeah first we are using the window.location.hostname window.location.hostname is the current URL whatever the website is loading on the top Target URL as a websocket WS protocol and then we have our host name which we are getting from the browser so here we are trying to invoke the on load function so the onload function it initializes the socket connection and it has three methods on open on close and on message so this is send message so whenever we want to send message through the websocket so this is how we will send we will try to add three different event listener one for red one for blue and one for green here we are trying to get the red by the ID red here we have three different ID one for red one for green and one for blue this depicts the three lid LEDs and we will add a event listener which is a change event listener so whenever there is a change in the element red we can able to see the Red Data check this on if the Red Dot check this on then we will send the message right on so here we are using this particular function which sends message in the websocket if the red is checked that means we are sending the message read on if the red is unchecked then you are sending the message read off so here also we are sending blue on or blue off whenever the blue is checked or unchecked so here we are sending green on whenever the green is checked and green off whenever the green is unchecked so now we will go to the main.cpp this is the place where we will put all the web server code so first we will add some dependencies so already we have Arduino dot hatch we will add this dependencies we need pin.config.h so this pin dot config.h is used by the LCD so here in this case I am using T display S3 in your case if you are not using esp32 which has an inbuilt display you don't need this particular file you can ignore this file but in my case I need this so I'm adding this pin config.h first we need to initialize the TFT underscore espi so I have created a new object EFT I need to define the constant the two constant is constant care and here we need to give our SSID so SSID is Wi-Fi name you need to give your own Wi-Fi connection so you need to create another constant constant care and this is password star password equal to I'm just giving my password here and then first you need to initialize a sync web server and I am opening this in the port 80 and rsync websocket this I am giving it as WS we have given this slash WS in our socket.js next we will create a function to get the Y coordinates for our TFT for this function we will initialize a new integer variable y equal to 0 so this function returns integer value and then get y-axis value and here the Y value is lesser than 140 then increment the Y value and return the Y y equal to Y plus 16 is y equal to 60. if the Y value is greater than 140 then we will start from the first line so we will give it as file to 16 and then return wide turn late on off and this takes a single parameter this single parameter is KR Star Command so you will use the stink compile function if the string compare command comma red underscore on equal to equal to 0 if the command matches to Red on so this is what we have given in the circuit.js so if there is on we are giving this particular string red on if the red is off we are giving this particle string red off so if red is on then we need to call the digital write function I will create constant here constant int said in equal to 1 Green in blue in equal to 3. copy the red pin comma hi no the copy this again and here we need to make sure we are giving it as else if and here instead of on it must be off and here instead of high it must be low now copy this command again now copy this complete if else block again here change this to S and here this is green on and here this is green off and here instead of red pin this is green pin copy this green pin here and then paste it again copy this green paste it here now instead of green on this must be blue on and then here instead of green pin this must be blue pin and this must be blue pin as well so far so good we have defined our main function so this main function takes the command and it sets the PIN to high or low based on the incoming command and we will Define our main function which is uh on F socket even function and this takes server client type and then arguments and also data and length as the parameters so here we have different types which can be incoming so first we will create a switch type case WS underscore event the score connect so in this case you can just print something in the serial connection or you can use the TFT so I am going to use the TFT here TFT dot drawstring which takes four different attributes one is the string so here this is Step socket event connect and then the next one is the x-axis the x axis I am giving it as 0 and then the y-axis case I will give the function gate Y which we have created and then the text size as two so if you are not using any TFT board if you want to print everything in the serial you can use the serial command write the command suggests serial Dot printf and here you can print your string so in my case since I have the TFT board I am printing everything in the DFT so I will copy and paste this again so this is Ws event instead of connect this is disconnect and then I will add another case which is event data this is the important function so a WS frame in info star E4 is equal to AWS frame info star argument and then if in 4 9 and here we will go and info is index is equal into 0 and info Lin equal to equal to length then if info upgrade equal to equal to WS underscore text data equal to 0 the car start command Star Command equal to here star data and then we need to call our turn light on our function here we also can Define another two different cases I will keep this as dummy we don't want to do anything here in this event you can just add some logs information here just if you want to debug and I will create another function which is a not found function so this will be invoked if there is a route which is called and if there is any route which is not supported by this web server is getting called so wide not found I think Clips server request or request interest s in four or four so we are sending it as four or four and uh text plane and then the string is not found now we will start with our setup function so first you need to make sure you are defining the pin so here the one is the red and then the two is green and the three is the blue if you are using the serial communication you need to make sure you're opening the serial Bond 115200 and then I will add some particular code to the TFT I will begin the TFT and then I will set the rotation so here this converts from portrait to landscape so it will start printing everything as a landscape and then I'm filling the screen with black color and then the text is a gold and then I'm just giving the first string as connecting two and then the SSID so here we have already defined this SSID now we will add this code first we will connect the Wi-Fi if I Wi-fi mode equal to Wi-Fi underscore STA and then Wi-Fi begin so here in this case SSID and the password so here you are supplying the SSID in the password and then next you are waiting for the connection to establish once the connection is established we are validating here so if the connection is established then we are printing out it's connected if there is some failure we are trying to print the result I will show how to debug this with a code which you are getting here and then we are printing over the IP address this is the IP address of the web server nothing but the esp32 so this is web address you need to connect and then we are checking the spaffs if the begin is true then we are not doing anything if the begin is false then we are if there is any problem we are printing out a error message to our DFT board setting an error has occurred while mounting this PA ffs and then we need to invoke the websocket and then we need to add the Handler and we are adding the Callback function to the websocket server so in this case we have this here so this is the function which we have already created and this is at WS so this is the Ws which we have created now we will try to supply the HTML and the CSS and the JavaScript server.r here this is the empty route if the route doesn't have any value we are trying to render the index.html so this will send the index.html printing out requesting index page in our TFT and then if you are trying to get the CSS the route is CSS slash style.css and here we are printing our requesting style CSS and then we are giving out the style.css and then we are checking the socket JS and if the socket JS is the one which you are requesting for then we are getting it from the data and we are giving it back to the client and then we need to add server dot not phone foreign so this we have already created this is a function and then server dot begin so since everything is happening asynchronously we don't want to keep anything in the loop function just I have restarted the visual studio code then it will get all the necessary dependencies now we can able to see all the necessary dependencies and then here you can go to the integral functions if you click this WS even connect and then if you click this on or if you click the send function you can able to see it goes to the async web server request so far so good now we will try to build to build this code I'll click the stick button here if you click the stick button it will just try to build your application if there is not typo then I believe this code will run perfect there is some error here again it's written the value of y if I got to return the value of y here so we will just re-range it again so now the build is success we can able to see the build success command here now uh we will try to upload this so to upload just go to the platform IO and here expand this one and here click upload file system eBay image once you are clicking the upload file system image make sure you are clicking the boot Button so if you click upload file system image then only the data folder will go inside esp32 now everything looks perfectly fine so we got connected successfully the first line gives the connecting two and then the second line is rssd and the third line is the connector successfully and the fourth line is the IP address now we can able to see the IP address the IP address is 192.168.0.179 no I have already opened so now we'll refresh this connection it is requesting the index page now everything's loaded fine now we can able to see the requesting index page requesting size style.css request strings socket JS and then WS event connect and here also we can able to see everything loaded fine in our mobile browser now I can able to click the red it turns on the red light and I can turn on the green and I can turn on the blue now everything looks fine and here we will try to turn on the green light so to turn on the green light click the green so now we will try to open this in the browser 192.168.0.178 from the browser now we can even see the green whichever is reflecting here in the mobile phone is not reflected correctly in the browser it doesn't look for the initial state of each and every pin to mitigate this so we can create a processor function so here in the processor function we can get the digital wire pin input and then we will supply this on load so we will create a function named processor here first we will create a function named get pin State string get print State int output if digital read is output return checked and yes written I will go to index.html and in the index.html we will add three state so for this I will add the red State here to add a red State percentage percentage here inside that I need to add Red State and then similarly percentage percentage green underscore State and then percentage percentage low underscore State this red State Green State and blue state will be supplied to our main CBP and then in return it will get whether it is checked or unchecked so here if it is checked here we will this value will be replaced with checked which in turns turns on this light and if the value is empty then it won't turn on the light now we will create a function processor I have already created this processor function I will just copy and paste this this takes the input wire and then it initializes the status as empty and then here we are just trying to print the value on the TFT if it is Red State then we are calling the get pin state with one so here instead of one we will give it as the red pin and here instead of 2 we will give it as green pin and here instead of 3 we will give it as blue pin now we have a red pin green pin and then blue pin and there is a value Red State Green State and blue State and if the value is Red State then we are calling the get pin with the pin one so if it will check what is the value of the gpio pin one if the value of the gpio open is set then it will give checked if the value of GPU pin 1 is not set that means the light is not turned on then it will give the empty string so the that means it will be not checked now we need to give this processor function here so this files is a flag to show whether this is a downloadable file or not so this is not downloadable so here we are giving it as false given the processor function will build platform of your project now we will upload the file system image click upload file system image because we have changed the index.html now we'll try to refresh this page again we can able to see here a red State Green State and then Blue State also coming in and then here we will try to turn on the green light so now we have turned on the green light and then go back to the browser now if you refresh this browser you can able to see by default whenever the page loads the green is turned on that is because we have defined the processor function while this index.html loads we will try to get the state of each and every pin if the green pin is turned on then we are checking this checkbox green check box now we will see how to debug if there is some issues so let's take let's take now we have a empty password so now what I am trying to do is I am trying to build with the empty password if I try to upload this to the click the boot button and then click upload now the code is uploaded to the esp32 no there is no valid password so we won't be able to connect to our Wi-Fi so now we got connecting to and then involve Innovation 2. can't connect to the Wi-Fi because we didn't give any password here in this case in the Excel section we can able to see the code associated with the error in the setup function we have defined WL connected so here the WL connector if you click the double L connected we can able to see the enum so here 0 stands for ideal State no SSD available if there is one there is no valid SSD where two then the disk scan completed and then if this is a three then mean that is a successful connection Wi-Fi connection and then four not success connection failed here we got the six that means it is disconnected because that is no valid password so we got 6 here by this way we can able to debug something with related to the username and password now if there is SSD it is not even showing up in the connection in the esp32 so now we will build this code now what we are trying to do is when there is a failure we are trying to disconnect the Wi-Fi after that we are trying to scan the Wi-Fi networks if there is zero then that means there is no Wi-Fi available if there is networks found what are the networks here we can able to see we need to make sure you are calling this wi-fi.disconnect before trying to print the available WiFi connections now we will try to upload this code now is try to connect to the invaluation too obviously it will fail because the password is empty it will wait for some time now the result is six we have like 19 networks found and we can able to see each and every Network in this case I have added 10 000 a delay after it goes through 5 it will try to start printing on top of connecting two so I have added a lag by this way you can debug and see whether your SSD is really present or whether that SSD is identifiable by the esp32 thanks for watching this video for more technical video subscribe to this Channel and if you find this video helpful share it with your friends

Channel: InvolveInInnovation

Views: 5,308

Keywords: esp32, s3, iot, platformio, arduino, raspberrypi, easy, tutorial, setup, complete, Beginner, visual, studio, code, vscode, websocket, webserver, ESPAsyncTCP, ESPAsyncWebServer

Id: mki_8RXLmxU

Length: 26min 27sec (1587 seconds)

Published: Sat Jan 14 2023