LIVE: ESP8266 & Virtual Buttons & RGB LEDs

hello magicians welcome and good morning to i am edge iot meeting hub let me quickly see if i am live yes i am live now so we can get started magicians hope you will enjoy today's session uh let me first quickly share my screen and uh let me show you what all i have uh for you for the day today hope you are able to see the screen here and let me share the screen first okay okay magician so now you are seeing the screen here where today we are going to understand how do we control rgb led using virtual buttons so first of all with a very good morning and warm welcome all iot magicians to uh internet of things meeting her yes it is image iot meeting hub and here we are understanding we are learning new things and wonderful things that will be helpful for you for your projects and i am going through with my super easy documents in each and every session where these documents are very helpful and step-by-step guides with full of screenshots which you can use in your future projects if you need these documents or if you need any of the code that i have used you can ask me under the comment section of this video or you can ask me in my whatsapp or you can ask me in my facebook group my whatsapp number and the facebook group details all are mentioned in the description of this video many uh many of you are asking where will i get the code or whether this code is uh coding of this uh is paid or is it free so again i'm saying you if you need this document and if you need the code behind that you just come and ping me my whatsapp and i will provide it to you so okay magician so our today's aim and our today is learning is esp32 esp8266 controlling rgb led using virtual buttons so before we get started let's just see how will be the outcome for this project okay so let me first open my camera here i think you are able to see my camera screen where you can see i have one esp8266 here and i have one rgb led over here first let me quickly switch off the lights of my room so that it will be easier for us to see the led glowing and let me now open the let me now execute the code okay so i'm executing this code okay magician so now you can see i have two screens here so in left hand side you are seeing some color boxes at the top black color blue color green color and the red color and on the right hand side you are seeing that i have esp8266 and the rgb led so our aim is whenever we will touch any of those color boxes those color virtual buttons our uh led red rgb and d should grow with the corresponding color so you are seeing that as soon as i will put my finger on the screen you are seeing a white dot is appearing and when i take my white finger to the red side you are seeing that right now led is going to the red color similarly if i go for the green side you are seeing that led is glowing on the green similarly if i go for the blue you are seeing that lb is going to the blue color let me quickly switch off the lights rest of the light so that it will be easier and little bit more easier for you to see and this black color is switch off the led so again let me show you red led on green on blue on and fall off let me all off so you are seeing that using those virtual buttons we can easily control our esp8266 so this is blue on green red red green blue off so this is what we are going to understand we are going to learn today's session so magicians stay tuned with me till the end so that you will have a detailed understanding of how we create this project okay magician so let me first quickly switch on my life so yes i will now uh close this window and i will open the document which i am going to share this with you today so you can uh you can work along with me but make sure that you have already done uh a hand gesture control that i had taught you in the previous session which is very much mandatory over here so let's get started with this so our aim is using virtual buttons we need to grow our rgb led again i am saying the prerequisite for this is you have already installed python and pycharm in your laptop as explained in the previous session so this is one of the main prerequisite for today's project or today's session i in my earlier session where i went through how we can do the hand control gesture movement hand control detection using our esp and in that session i had informed you about python pycharm so make sure that you have already gone through that if you have not please go to that go to that section first i i have already given the link of that section under the description of this video so please go to that section where you will get to know how do we install python how to install pycharm and all and the second prerequisite is you have already created a project folder yes we projects as explained in the previous lesson again in the previous session i have informed you how do we create a project inside our pycharm and finally you have already installed the necessary modules so in our last session i showed you how we install cv zone serial device and media pipe all these modules inside our by charm so let me first quickly show you what do i mean by this so if you will open your pie chart so this is our pie charm and here if you will see the esp project which we had created during our last session so we'll be using the same folder this is just a folder and in future also all the python programs or all the uh cd two programs whatever we will create we will create inside this project so make sure that you have already created this project so that it will be easier for you to follow the same structure that i am having okay and if you will click on this esp project then you can see that we had created hand detection esp32 hand detection esp8266 pi in our previous session so this is how your environment also should look like you should have a pycharm you should already have python installed and you should already have a virtual python installed and this esp project should be created and uh finally all the modules which are required see zone module all the serial device module media pipe module whatever whichever we had installed in our last session all these things have already done so if you are done with all these things then you are pretty much okay to go ahead from here but if you have not installed pycharm still so i suggest again go to that session read that session and then first you install that create that project and then directly jump into this okay so now let's uh move ahead in this document again magicians i am saying this document is really very straightforward document all the steps i have mentioned here very clearly with enough screenshots this is just a step-by-step document you need to just follow it if you're in this document or you need whatever code i have used for this project let me know i will provide you this document i will provide the entire code uh inform me in my whatsapp or my facebook group or under the comment section of this video i will give you all those details over here okay so first of all we will develop the ionophob as you know that these kind of projects what we are doing uh hand movement or hand detection or our finger detection all in all these modules we are creating two two programs one is the python program another is our ino code so both of these two programs how do we develop this is what we are going to see today the first one is let's try to develop the ino code so this will be our uh c program or i know program which will be upload to our esp8266 okay so since we are using rgb led over here so you need to make the connection this connection is pretty much straight forward the rgb module you are seeing on this picture it is ah it is having four pins and all the pins are clearly uh written on the pins uh so the r g and the b pins and the one is the ground beam so you have to connect the r pin of the module to d3 of esp8266 so d3 is nothing but gpio zero similarly the g pin the green pin of your module should go to gpio4 the bluepin of your module should go to gpio 5 which is d1 and the negative pin of rgb module it should go to ground of esp8266 so you are seeing that the diagram or the fridging diagram is pretty straightforward and there is no confusion or there should not be any difficulty connecting our rgb module with to our esp8266 hope so far we are clear this is the only connection that we have to do ah for this project okay and here you are seeing my physical connection so once you you are done with above connections let's follow the below stacks and create the ino code the step number one is first you need to open arduino ide you need to connect your esp8266 to the laptop and you need to identify the com port in my case the com port is com4 okay so i will open the arduino ide as you are seeing here and i have already connected my esp to my laptop and the com port is com4 the step number two is you need to select the board as generic esp8266 module and the port has control so these two steps are regular steps that we do in order to install or in order to upload any code to our esp as we already know so from here from tools you will select your board as esp8266 generic esp8266 or whatever esp board you have and you need to select the com port whatever comport you have for me it's com4 so yes i have selected step number three is now you need to open a new file and you need to copy the code esp8266 virtual button underscore rgb underscore led dot io so this is the code that you have to copy and paste in your new file okay so again i'm saying where you will get this code yes i will provide you this code ask me about this code ask me for this document i will give you this code ask me in my whatsapp group or in the facebook group or ask me another comment section of this video once you have copied the course and code and pasted it it will look something like this as you're seeing in the screen so this code is pretty straightforward this code is taking some uh string on the serial monitor and based on the string it close our rgb so this is the uh this is the essence of behind this code so the string format which it accepts like it starts with dollar and after dollar it accepts five uh digits in the form of zero or one so the first digit represents the red color the second digit represents the green color the third digit represents the blue color the last digit represents the black color and the last digit which you are seeing here it is not representing any of the color you can make it either zero or you can make it into one it does not in effect okay so uh let's now go to the step number four the step number four says before writing the python code let's test it if it is working without virtual buttons so that's that is the only code that you have to copy and paste on your esp8266 and after after that you need to upload it so you will click here to upload this code to your esp8266 once this code has been uploaded on your esp8266 we want to verify we want to check it whether this code is working as expected or not we will provide this string on the serial monitor and based on this string our rgb led should uh glow accordingly if this is what you find then we can go ahead and write our python program to give input instead of giving the input from serial monitor now we can give input from our virtual buttons okay but before writing the python code let's try to test it uh manually providing from serial monitor okay so what do we do here you need to open the serial monitor once you have uploaded the code on esp you need to open the serial monitor choose the proper baud rate whatever we have mentioned in our code 11520 and then you need to provide this string in the serial monitor the string is dollar one double zero double zero so you are seeing that the first number is one and rest all other are zero so it means it should glow the red because first digit represents the red if it is one means it is on if zero means it is off so here you are seeing the first digit is one and all the other other digits are zero so means our red color led should be on so let's try to check that so you will open the serial monitor from here and from here let me open the camera also so that you can see what's going on uh with with the rgb so you are seeing that rgb led is already here and let me provide the input as dollar one so r means the first letter is the r so it is one means r on and green blue and black all are zero and last digit is zero so this is what i provide as a serial monitor input so whenever you will click on send so it should glow the red so you are seeing that now my led is glowing in the red color maybe because of this light you are not able to see that let me switch off the light so that you can see it better so if you are seeing here so you can see that it is going on red okay so means it's working uh fine similarly if you provide input as dollar so now this time i want to make red as zero and only i want to go in the green color so green is one and then blue is zero black is zero again the last digit is zero so this string will represent the uh green color so let me provide this as a send this well you you see that as soon as i give this input you are seeing that it is flowing in the green color means my code esp code is working as expected let's try it for blue color also so i hope now you can guess what should be the input string for the blue yes r should be zero green should be zero and blue should be one and black should be zero and the last digit it should always be zero so when you will give this a string let me send this string send this string so you are seeing that as soon as i give this string and it is now glowing on this blue color here so let's try for black also one more time so here again you can guess r is 0 g 0 blue is 0 and black should be 1 and then it is 0. so it means now it should turn on it should turn off the energy so you are seeing that my led is turned off now it means when i am giving this uh string from the serial monitor esp is working as expected okay magicians so so far so good let me now again uh come to the uh our document here so you are seeing that uh all these results are working perfectly fine for us so great magicians our code is working with manual inputs in this case i have provided the information or the string or the rgb information manually from the serial monitor but this is not what our aim is our aim is to provide this information when i will touch the virtual buttons so now it should be easy for us uh to write a python code which in which we will try to identify whenever i am pressing the blue button as soon as i touch the blue virtual button it should send a signal uh or a string uh dollar zero one zero zero zero which is equivalent to green blue uh yeah sorry green yeah so whenever i will touch the green virtual button it should send the green equivalent string to the esp so magicians our code is working with the manual input we are seeing here and now we will provide these inputs from our python code using virtual buttons okay so let's get ready for that but note i have put a note over here you need to you need to be careful for that before starting the python code make sure your serial monitor is closed otherwise the python code won't be able to access your esp make sure that you have closed your serial monitor before you are writing your python code because in our python code i will be interacting with esp8266 we will connect uh with our esp8266 from our python code so in this case our com port should be free so i should uh switch off or i should close the serial monitor so i am closing the cpu monitor so now you can see that i only have arduino ide open and i have closed my serial monitor okay once i have closed the series monitor i am okay to write the python code for that so how do we do that let's follow below steps to create the python code for that the step number one is open the pie chart ide as explained in our previous sessions this should take you to the project path psp projects see below so you are seeing that as soon as you will open the pycharm ide it will open it will take you to the esp projects folder which we had created in our last session so whenever you will open so i have opened this pie charm in front of you and here you are seeing that i am already inside my project directory esp projects all our projects all our python codes python programming we will write under this project so if you have not done that again i am informing you if you have not installed pycharm python then i recommend that that you do that and create this project because in our all future sessions wherever i will go for this python series or i will go for these kind of artificial intelligence intelligence programs or ai programs i will use this project directory and make sure to install all the modules which i had discussed in the last session okay magician so this is how our pyjama looks like the step number two will be you need to right click on the project esp projects and then you need to click on new and then you need to click on python file because now we are going to write a new python program new python file so you have to right click on esp projects and then new and then python and the python file let me show you so here on esp projects you will right click here it will open a menu here from the new you will create a python file here so when you will click on this python file it will open uh a dialog box and asking what is the new python file that you want to create okay let's follow the document so now you need to choose the python file here okay it should be your python file should be checked and then you need to provide the python file name as virtual button for curl color bulb esp8266 dot pi so this is the name of our python program okay so let me copy this first this name and i will create it here make sure that you have selected the python here from python file from here and then you will give the name as virtual button for color bulb esp8266 dot pi and then you will press enter so it will open a blank file for you and now you have to write the corresponding python code here okay let's follow the document how do we write that now what you have to do you have to copy our entire code virtual button for color bulb esp8266.5 and paste here again this code this python code from where you will get it yes magicians i will provide you with this code ask me for this code ask me for about this document i will provide you you can ask me in my whatsapp or in the facebook group or you can ask under the comments section of this video and i will provide you this code many of you are asking me this code is not paid i am charging for the codes or blah blah blah where you will find the code this is now we are unable to find the code so again i am telling you i i will provide you this code this code for free but for that you need to come to me and ask for this ask for the document and the code i i believe at least this much effort you can you can do in order to get this project right because i don't want to give you just like that i want to really understand whether you really need it or you are really serious or how much is your progress going on whenever you are implementing it so just i want to do i want to just kind of follow up so that i make sure that you are really going to the right track in your iot journey and really you are trying to implement this and if you face any difficulty any issues any problems and i should be there for your help so because of all that i want you to come to my whatsapp or facebook and get this code and the document okay so enough of this uh talking let's go to the next step here okay so you need to copy my entire code and paste here okay let me first get the code okay so this is the entire code so which i will give you so you need to just control c you need to copy this entire code and you need to paste the code uh in your python like this so once you have pasted it so you can see your code should look like something like this okay okay next follow the again follow the steps so you are seeing that i am i'm blindly following all the steps whatever mentioned in this document i have created this document in in a detailed fashion so that if you will follow all those steps you will be able to implement this project very easily similarly i have just created the detailed document for all the es the entire esp many uh projects yes about on esp32 esp8266 similarly i have this detailed document for raspberry pi also created if you need these documents for those also you can contact me and i can provide i can provide you the complete document esp document complete our raspberry pi document at a very reasonable price okay but here let's get to the second step what do we have to do once you have pasted the code you need to just change the capture device and the com code as per your settings and save the code see below so below you are seeing that at line number five around you are seeing that i have a capture device where i have mentioned zero so in your case it could be one or it could be two it is it depends on where uh your camera is located on what port you can you can imagine it's it's a kind of port for me um video capture 0 works if it does not work for you if it does not open the camera then you can change it to one try with the one or change it with the two so this is the place where you have to make the change and another change you have to do at your serial object where you have to provide the com port where your esp is uh listening to okay so our com port is com4 for esp8266 that's why i have provided the serial object port number at this this line here so here although you if you want to change the baud rate here also you can change the baud rate but yeah now we are using the baud rate as 5200 in our esp code also so that let me may have the same okay let me show you the uh code here so this is the code this is the line where you have you might have to change um with zero it could be one for you or two for you and at the line number 11 here you can change the com port whatever comport is assigned for your esp so these are the two only changes that you have to do in this program let me quickly explain you about this program what i am doing this program the details uh the detail of this program if you still want to understand you can ask me i can go through uh in the offline mode not here in this live session but yeah definitely let me go to the high level of this what i have done here so in this line i am just creating four uh virtual buttons as you are seeing here one color is this the red color this is the green color this is the blue color and this is the black color remember that here rgb starts from right to left this is r this is g this is b this is r this is g this is b this is r this is g this is b so rgb is starting from right to left okay so after creating those four circles four sorry those four in square boxes then i am getting the location of my inder my index fingertip so as soon as i get the x and y coordinates of my index finger then i check where my index finger coordinates lies if it lies between the first square then here you are seeing that i am sending uh data or you are seeing here i am sending the same information 1 zero zero zero zero which is corresponding to our red uh message right so it means the first square is touched means the red square is test as soon as you will touch the red and that square i am sending uh the serial data as one double zero double zero similarly if we are touching the second square which is the green square in this case you are seeing that i am sending uh the green data here zero one zero zero view here you may be wondering that why i am not appending the dollar sign in front of that because you saw in our code we are giving the serial data or the input string where we provide dollar in front of that right so but here in this code we are not sending dollar because this function my serial.senddata function it itself appends dollar in front of that if i will show you this detail of that you come to see that so this is the definition of the send data function if you see here my string is already dollar here and you are seeing that uh this function already appends dollar in front of the data whichever i am going to send okay so hope this is clear to you now similarly if your finger finger coordinates are within your third square then i am sending the blue information if your fingertip is within the last square the fourth square then you are seeing that i am sending the black information to our esp so this is the this is the only thing which i am doing over here so this is very small code i think not less than not more than 79 also yes this is 65 lines code so in within this code i am sending the information whether i have touched the red box or the green box or the blue box or the black box so all this information whenever i touch any of the box corresponding string message i am sending to esp8266 and then my esp8266 will take care of the rest because it is already reading the serial information and taking action based on the serial information okay magicians let's follow the document what do we need to do next so now once we have done that again step number five is you need to make sure now it is time to execute the project but before that make sure your cl monitor is closed again i am informing you that your serial monitor should be closed otherwise your python code will not be able to access esp8266 okay fine so now step number six it is the time to run the code now so you will need to right click on the tab the program tab virtual button for color bulb esp8266 dot pi this tab you have to right click and then you will have to click on the green run icon as shown below so here you are seeing that when you will right click here when you will right click on this it will open a menu like this and under that you need to click run virtual button for colorable esp8266.5 so you need to click on this run button so as soon as you will click on this run button it will step number seven it will open the camera window and you will see four virtual buttons at the top like this so let's try to do that so here you will right click on this and then you can click on the run button and let's see what do we see here voila him initials now you are seeing that i have uh four virtual buttons in at top of the screen and you can see that it is tracking my index finger so you can see that a white circle is there uh it can identify my second index finger also so it you can use either of the hand i have designed it in the way that it will recognize only one hand so at a time you can use either of the hand either this hand or this hand right so now you are seeing that uh the screen has come in front of us we have we are seeing four virtual buttons are already there in front of me and it is able to track my index finger so wherever i will move my index finger you are seeing that little white circle is also coming along with my index finger so sorry about that i got a cut for my index finger that's why you are seeing that handy glass is there yeah okay magicians so let's get started for the next step so what do we have to do yes we have to now put our finger in any of the virtual button and then we will see corresponding results on our uh rgb led so let's try to do that let me minimize everything let me open on this and let me open the camera also so here you will see our esp rgb led so let me first restart press the restart reset button of my esp so that it will start again and here i will try for the green now okay so uh let me first quickly quit this and as soon as i quit this so that it will reset my program and i will run the program again from here so let me run the program again okay so i am running the program here again and then you can see that oh sorry i did not put the camera so now here's the camera and then i will take my finger to the blue you are seeing that rgb led is glowing in the blue now it is going in the green now it is glowing in the red so let me switch off the bulb okay so that it will be a little bit more visible but i am not sure whether it is enough to get the attention so yeah so i am able to see this blue its green you're saying that it's going on the red now let's go to the black so yeah so when i'm going to the black it is sending the code as dollar zero zero zero one zero like that's why my black color is going on now so now black means completely off the black color i am saying because all the rgb components are zero that's why i'm calling black it means my led will be off so again rgb whenever i will put my finger on the right uh virtual button now this time it is sending dollar one and rest of the components are zero zero zero zero right similarly when i am taking my finger to the green this time it is sending a signal dollar zero one and the rest of the things are zero similarly when i am taking my finger to the blue box blue virtual button it is sending the information dollar zero zero and rest of the digits are 0 right so this is the magician this is how we can create uh virtual buttons and using those virtual buttons we can control our rgb led let me quickly quit this first and let me switch on the lights and open the document one more time okay magician so this is wow

Channel: IMH Videos

Views: 53

Keywords: IOT, Raspberry Pi, IOT Course, Online IOT projects, Amazon AWS IOT, MQTT IOT, Wireless IOT, XBEE, Home Automation, Learn IOT Online, firebase, Realtime database, ESP8266, ESP32, Micropython, IoT Core, Webserver, ESP Webserver, Telegram, BOT, Telegram Bot, Amazon Voice Service, Smart Home Skill, Amazon Alexa, SPIFFS, ESP Filesystem, ESP FileSystem Uploader, ESP32FS, Interrupts, PIR Sensor Motion, PIR, ESP NOW, ESP 2 Way communication, CloudWatch, IoT Rule Engine, WiFiManager

Id: vdnsOFDlcqI

Length: 36min 16sec (2176 seconds)

Published: Wed Nov 24 2021