ESP32 LED Control via Web App | Complete Tutorial with PlatformIO & VSCode

hello everyone welcome to my Channel today I am excited to show you how to control an LED using an esp32 and a simple web app let's dive in here are the materials you will need for this project an esp32 development board an LED a 220 Ohm resistor a breadboard and some jumbo wi first thing first let's set up the hardware connect the anode the longer leg of the led to a GPO pin on the esp32 through a 220 ohm resistant I chose GPO pin 13 as the output pin finally connect the Cod the shorter leg of the led to the ground pin on the esp32 the hardware setup is complete now let's move on to the code I'll be using platform IO in Visual Studio code for this project let's create a new project name your project something like esp32 web LED control next choose your board I'm using do esp32 dukit V1 and set the framework to R Doo once that all set click finish all right after creating the project open the platform io. file and set the monitor speed next open the SRC folder and find the main. CPP file the complete code is available on my GitHub and the link is in the description below here is the code control the LED VI web app let's copy the code delete the sample code and paste it here all right let's break down the code we started by including the necessary libraries wi-fi. for Wi-Fi connectivity and web server. for running a web server on the esp32 next Wi-Fi credentials replace your SS ID and your password with your Wi-Fi network credentials to connect the esp32 to your Wi-Fi we create an instance of the web server on Port 80 which is the default port for HTTP we Define a boan variable LED state to keep track of the LED's current state that is on or off following we Define the HTML cont content to our web page using a raw literal string this content include a button to toggle the LED and a script to handle the button click the handle root function serves the HTML content when the root path is accessed next the handle tole function toles the LED State and update the web page with the new state when the tole path is accessed it inverts the LED State and set the LED accordingly in the setup function we initialize serial communication set the LED pin mode and connect to Wi-Fi we also Define the roots for the web server and start the server finally in the loop function we handle incoming client request this function continuously listens for the HTTP request now let's upload the code to our es sp32 connect your esp32 board to your computer using a USB cable and and click the check button at the bottom to build the code if everything goes well click the right arrow to upload the code once the upload is complete open the serial monitor to get the IP address of your esp32 okay my esp32 has successfully connected to Wi-Fi and here is its IP address enter the IP address in your web browser and you should see our web app click the button to toggle the LED and you will see the LED State change on the web page and here you have it you have successfully created a web controlled LED using an esp32 if you enjoyed this video please give it a thumbs up and subscribe to my channel for more Tech projects thanks for watching bye-bye

Channel: Magic Bullet Pro

Views: 531

Keywords: #ESP32, #LEDControl, #WebApp, #IoT, #PlatformIO, #VSCode, #Arduino, #Electronics, #Programming, #Coding, #TechTutorial, #DIYProjects, #SmartHome, #HomeAutomation, #WiFiProjects, #IoTProjects, #ESP32Projects, #TechProjects, #BeginnerTutorial, #DIYElectronics

Id: DPQ0_msXoMU

Length: 4min 46sec (286 seconds)

Published: Sun Jul 07 2024