ESP32 Tutorial 54 - Set WS2812 LED Strip Color over Wifi | SunFounder's ESP32 IoT Learning kit

hi welcome to esp32 tutorial from Robojax in  this video we are going to learn how to control   the color of this RGB red STP with esp32 over the  Wi-Fi we can touch select the color and set the color maybe green or select the color from your  desktop by using the Color Picker and then set   the color let's get started with this esp32  starter kit from SunFounder this is the best   esp32 learning kit from SunFounder it has this  esp32 microcontroller which has built in Wi-Fi   and Bluetooth this board can do everything  Arduino Uno can do or many other Arduinos   can do plus extra more features because we  have Wi-Fi and Bluetooth the possibilities   are endless you can get connected to  the cloud or do the control or read   information or values via your mobile device  or your desktop or over the cloud from a far location it comes with a camera extension  kit where you can stream the video over   Wi-Fi either through the cloud or to your  network and also it comes with micro SD   card where you can save images on the micro  SD card or you can write from the device any   information log the information on the device  and read it back you can power the board using   this included 18650 lithium battery and it has  built-in charger where you can connect micro USB   and charge the battery the kit comes with 320  pieces of component that you can learn tons of   projects we have introduced W8 2812 uh LED strip  in previous lessons and we use it multiple times   in other lessons so we are not going to spend  time but briefly I could say that we can select   or you can select color for each individual  pixel this is 8 pixel uh RGB there are longer   version of it and you can address them and each  individual could be selected but for this video   we are just Ling the same color to all over the  Wi-Fi this esp32 must be connected to the same   router or to the same SSID as the phone or as  the uh tablet or computer or desktop that you   have and as you can see this is now connected to  the battery and you can move it around because   the SunFounder board is amazing with a built-in  charger and it comes with a battery that's very cool come to this page docs.sunFounder.com  scroll down until you see esp32 then click on   esp32 starter kit main on the left side click on  Arduino user RGB LED strip 2.7 the documentation   is here and there is very good explanation  and for this device there is a separate page   so there is explanation specs and how it works  and where on the other documentation it has been used now I'm on the Bing search engine  just type RGB Color Picker with slider   and the first one that comes click on  it to understand the color of RGB we   have to first know that all colors can be  created or any color can be created from   combination of r g and B this area shows  the actual color that we have created and   because there is no color the red is zero  the value is red is zero green is zero and   blue is zero so we see black uh color  now for I move this you see some red here and this is maximum value why 255  because it's 2 to the^ 8 so we have 8bit   color resolution which means from here to  here we have 255 steps to add or adjust the   color of course there are higher bit rates  the that can be done for our purpose we are   using eight bits so this is red now if I  slide it back the value you just read it   here pay attention and this is green maximum  green light green and then dark and then this   is blue so we got these three colors now the  value could be shown also in HEX pay attention   this is the he x value but those are RGB we  are paying attention to this now let's have   red and let's put green so this is red this  is green and if you combine it you get yellow color and if if we have red and if you put blue   then we get pink color so this  is the combination of red and blue now I'm bringing that down this  is green now green is the maximum now   if I bring red you know it it was yellow but  blue and green will create the sepia uh this color and if I bring all the colors it will  be white this is interesting if you combine   the right proportion of r g and B red green  and blue you will create a white color and   now if we pay attention this is 255 255 255  now this color is red is zero and then we   have green and blue 255 255 that's why you are  getting and if you want pink so red is maximum   255 and then 255 is a blue if we put them at the  middle you will create um a darker pink because   we are moving these two together 82 82 or 83  so they will be the same now the fun starts   when you play with these values and you create  like different color orange you see somewhere   here if we have full red and blue is zero green  green is at the middle that's uh you see we are   creating orange if I bring that here and this we  have different kind of blue so we with all this   we can create different color that we want and  we are going to practically test it and see it here when you use esp32 with sunf Founders  esp32 camera extension module like this it   comes also with a battery on the package and it  comes a built-in charger so you can connect it   and charge it and disconnect and later on  you can use it with a lot of power so you   can power up your application very easily the  wiring is very simple we are connecting out of   this three wires the 5 volts is connected to  the last pin this is 5 volts when the USB is   facing this way and then ground is a second pin  and I've connected it to pin 14 pin 13 which is   the third pin so they are connected in the  same order uh VCC ground and data pin like this let me explain the code I've started the  code from file examples and if you scroll down   under this esp32 scroll down until you see web  server and then Advanced web server I selected   this and heavily modified it so the the portion  that I've added is the library for new pixel if   you have not watched that video just I'm selecting  and copying it going to the library right click   and paste and wait until you see new pixel by  Adafruit new pixel 8 it has been installed you   will see the install button in here click and  install it so this is pin 13 for Led pin eight   is number of this pixels that we have or LEDs and  then this line is creating the pixel I'm not going   to talk about it so these are the default initial  colors value for r value for G and B these numbers   could be from 0 to 255 and I saw I showed you how  the RNG G and B colors are selected and this line   data show serial data this is if you selected to  true it will show in the serial monitor uh set   it false if you don't want to see it these are  variables that are you used ex internally and   this is also internally when the color changes  the actual the color is applied in here this is   now red and this is for Wi-Fi Wi-Fi client and  web server and then ESP mdns and set your SSID   for your router for example if the router is Dar  uh with lower D if you lower case D if you put   capital D it will not work so respect that and  also type your password for your router and this   is initializing web server at Port 880 this  page is displaying that Color Picker that you saw this page this is coming if I press control U   it will show you the page this is  the page that is generated by this code that have been generated by the so we  have created a string called page and this   is initial value for the page and then we  have added other elements to the page this   is called concatenate so we are concatenating  more elements and this portion is getting the   color the color is a global variable um this  variable and when we change the color the the   Chang is applied to this and it's displayed  on the screen so the page is built and then   server. send with 200 200 is okay code and  text type is text and HTML and the page is   sent so this line is sending the page important  part is that get color is getting the color when   we touch it comes as a server argument  actually the initialization starts from here in here when when you have forward flash  color when you touch or click it will create   forward FL color and the type is get HTTP get and  this is a function get color so this function will   run if you don't touch anything it will be forward  slash the URL it show it goes to show color page   which I just showed you at the top of the page  that generates the page but when you touch it   and click set color it comes to this page to the  uh color for/ color comes to the server and this   when the server detects this it goes to get  color and here this get color gets the server   argument the first argument and it checks if it  is color favcolor is value in here so this is   the Color Picker value if the value is there then  we know it's the actual value then we get the the value the actual value server argument zero and  convert it to string and set it to this variable   called new color and this from new color we  remove this number line actually the color   will will be like this it will have this hash  hashtag and then hexadecimal value two the two   values is for red the other two is for green the  other two is for uh blue so we remove the hashtag   and we call it the color uh that is set but we  need to get the value for red green and blue so   this line gets the variable called new color  new color substring we say start from one to   three so uh it gets that two color from one to  three which is two so the two color if it was   for example B2 will be stored in R and then  from 3 to 5 and 5 to 7 we are getting green   and blue and this variable now this variable is  string where we need to convert it and we use the color get the color r g and B and we convert it  to hex which goes to this function and this will   return it back as a hex ML and it stores then  this value and then the same way for green for   blue and this is at the top of the code if you  set to show the values this will print on the   serial Monitor and that is and and after that we  run the Color Picker page again and set function   set color then we have a for Loop that goes from  zero to number of LEDs and it runs I equal z i   is z and become 1 2 3 4 every time it changes  we set the value of R green and blue and set   the color for the LED strip and then strip. show  we show it with 10 millisecond delay and it will   continue to run immediately all the colors if  there is no connection of Internet we run the   same thing exact same thing here with some values  and then 200 millisecond delay and then we go in   reverse here I is zero it goes up but here I  is 8 minus one this is number of LEDs and it   goes until it zero goes zero and as a result  the color will move like this and it will go   back so this is sending it to the right if  if you're looking at my location and this is   sending them turning them on back with this  random color that I picked and no not found   is a function that if you type some URL on the  browser and here for example if you type forward book it will say the for/ book of type get with  zero argument not found if you have some kind of   argument like book uh question mark a is equal  something like this it's busy so yeah it says   argument is one a is equal this it not found  so this function is taken care of that and then   Wi-Fi setup is a function when you call it it sets  the wifi uh using SS ID and password and if it's   it checks if Wi-Fi status is not equal connected  it will run the new connection which is the the   top which will turn on the LEDs on uh run the LEDs  for us after 500 millisecond it will just type the   dots on the serial monitor to show that it's busy  if the internet connection happens if the Wi-Fi   is connected it just goes to the next line and it  will print this text with this S ID and will tell   you the IP address that you are connected you can  also check with using uh mdns for example I set it   to RGB Robojax RGB if I copy it I press contrl  C should put HTTP column uh SL slash and then   Robojax RGB and without IP address we can just  access it but this doesn't work in all networks   it works in my uh Network environment and that's  done inside the setup we initialize the serial   monitor with 11 15,900 we initialize the strip.  begin strip. show and set up Wi-Fi which was in   here and then server on forward slash if the for  slash request comes forward slash mean nothing   just request the IP address or the mdns it runs  the show Color Picker page which I just explained   at the top of the code and if it's forward SL  color it will go to uh get color which I explained   it and if you this is just an example if you do  for/ inline it will print this text and and then   server on not found it goes to handle not found  which I just showed you and demonstrated that it   will show error server. begin is initializing the  server and this will print the text on the screen   inside the loop I have added this while Wi-Fi  is not connected then go and run setup Wi-Fi   and server. handle client is handling all the  request continuously and also we set the color   continuously when we change it and there is 300  millisecond that the loop will run this portion continuously now let's see how we can select the  esp32 board we can click here under the select   board and type here esp32 D as soon as you type  Dev you see Dev board you can select it and click   okay so the board have been selected now now we  have to select the port the other way to select   the board is Click On Tools board esp32 and select  the esp32 dev module now we have to select the   port if I click here it shows two port and I don't  know which one belongs to my device sometimes you   will see you will not see the number properly  so the best way to be sure the right click on   the start menu go to the device manager and you  will see here the ports if I click on this Arrow   it will show me the ports one is USB serial  ch340 one the other is USB serial device and   here now it's connected if I disconnect this one  of them disappear the one that disappeared is my board so six stays and it disappeared if I connect it so it is my comport ch340 now it is my  comport and I can select it or I can click   on tool port and here you will see it you can  select whichever you want ours is com8 now we   have successfully selected the board and the  port and this is very important it must be done first and at the moment it is connected over  the Wi-Fi and make sure that your desktop or   laptop whatever you have it must be connected to  the same SSID or router as the esp32 otherwise   you will not be able to see it so while  when this is connected using USB you can   check the IP address just press this [Music]  button and as it gets connected you will see   the IP address here 192168 0100 that is my IP  address for this network so so we go to that IP address 1 2 and 68 and you'll see some default color so let's select the color this was the  default color that we have if I select like I turned the light off so let's click to  set the color and the color is changed you   can use a Color Picker to pick a color  from the screen for example and turn it   on like that or whichever way you like  this is now like that let's set it to red so from the left we can select uh the range  of colors and once you select for example blue   all the blue will be available in here red  this is the all variation of red or green   and then once you select the color then this  is the dark the darker area and the brightest   is here the darkest is on this corner so  you can select the color and set it like that and here my mobile device is also connected  to the same IP address as the router let's select   a color in iPhone it shows like this with h this  is Microsoft Edge that I'm running let's select blue and the color is changed and let's select yellow and the color changed perfectly it's  responding now when I disconnect the router   for example right now I disconnected the  router it checks the connectivity and it   will blink and you can disable it if there  is no connection so this what this is what   happens it this is now telling you that  there is no connection and once I connect it as soon as it gets connected it will   go to the default color or the  previous color that it was just wait so this was the last color but if I reset  it again it will blank the the blank c color is   default but it will go to the default color  I believe it is red I will show you in the code so it's blinking and this is the  default color that we have there when   you touch the Color Picker from here there  is a slider where you can go and select the   exact color that you want or even sometimes  maybe you can touch for example 255 full red   this way you can do that and then apply  the color this is Android device and as   you can see the screen is totally different  Color Picker is also different here select   color we have only selected colors here set  and change so this was not connected let's see no connection let's get connected so the connection was established  let's let's see here is the word more and   then in the more we can have a slider  so you can select the different color   and click set and touch to set that  color let's see if we have RGB more   select color no that's it so the color  pickle uh looks like this on Android device

Channel: Robojax

Views: 1,002

Keywords: robojax, sun, founder, sunfounder, course, tutorial, kit, learn, learning, step by step, esp32, arduino, iot, wifi, strip, RGB, LED, control, color, change, over wifi, library, adafruit, neopixel, HTML, slider, color picker

Id: J_UFHk_T9aE

Length: 27min 21sec (1641 seconds)

Published: Tue Jan 02 2024