ESP32: Control LEDs through a webserver/webportal (WiFi Part 3) - Arduino

In part 3 of the ESP32&WiFi series I show how to control LEDs connected to an ESP32 through a webserver/webportal. Programming is done through the Arduino IDE.

This video expands on the webserver code explained in part 2:

Starting point for coding along is:

Final code can be downloaded from:

Here the explanation on how to setup the ESP32 as Access Point:

If you have problems connecting the ESP32 to your router, see part 1:

Might you have problems programming the ESP32, pls refer to:

[HuslevesM]

from now on you are my go-to person for useful stuff on ESP, thank you!!!

[hagatronic]

Hey, I have followed your example and mixed part 3 and 4 (used SPIFFS, AsyncWebserver, uploaded separate html, js and stylesheet to SPIFFS) which works great. I noted though that the slider value were only updated once you released the mouse button after moving the slider. if you use this event listener method instead, the slider value and the LED intensity updates real time as you drag the slider: "slider.addEventListener('input', slider_changed);" Great tutorial. Thanks Jens.

[christopheracob]

Once again, this video showed by far the best to show websocket application in practical way! Thanks Mo, you sound down to earth in your video but talks sensibly! God bless you more!

[thebeast]

You are so awesome. i was going insane wondering why it wasnt working, and it was due to the comments in the html, lol. I used raw string literals and it worked thankfully.

[DickDavidse]

There are videos and there are excellent videos. This is more than an excellent video! Thanks Mo for your very clear and step by step explaination.

[congamba]

Thank you so much! I have been struggling with websockets integration with my projects, and now I think I really understand how to do it.

[virendrapawar]

Absolutely Great, Simple and Clear Explanation.

[alaingoyette]

Huge thx for the video, very well explained and the pace is easy to follow.

[noweare]

If you keep acting this way your channels gonna blow up : ) For development, instead of using an esp32, setting up apache on a pc and using php. I have never used php but I think it would save a bunch of time not have to down load to the esp32 every code change.

[thebaconbreadful]

Hey! I can only agree to previous commenters, your videos are amazing! A great additional information would be how to send nested data/objects and serialize/deserialize them. I'm currently searching for this information and am sure I'll find it sooner or later. Maybe you could still provide it for anybody coming across this later? Thank you for your content.

[gerhardvandernest]

Thank you very much for the thorough explanation of the code, it is of a great help.

[mothunderz]

@Klaus Geiger: Thank you for your comment. Some way or the other your comment was not published online, but I did get a notification it was posted. Your question was: "Unfortunately, after uploading, I can't find the ESP32 Dev module as a wifi server anywhere. What am I doing wrong or what do I have to do so that I can find the ESP32 Dev module on my smartphone under the available wifi networks?"

[narbigogul]

Just what I was looking for, thank you so much for sharing

[MeisterQ]

Thank you very much for this video. What kind of plugins do you use for notepad++ ?

[ralfw]

Really good video. Learned a lot.

I guess its beyond the scope of the video but applying sanity checks on user input is a good habit.

Eg. since you do not check the LEDindex a user might send a 3 to the ESP32 which will result in a buffer overflow / access violation on the channel array.

Document.getElementsByName will return an array with all elements with that name this can be used to itterate over radio-buttons.

[MO-drzg]

Hi, Nice detailed video, would you be able to show me a basic direction of how to substitute the radio buttons with a drop-down menu?
Thank you for the informative videos.

[severinelmecker]

I have a question about your if queries below
"// JSON string was received correctly, so information can be retrieved:"
what would an integer query on "0" look like?
.... or asked differently how can you query whether a JSON object was received at all.
I only want to react in my code when a JSON object declared as INT has been received at all.

my problem is when I query an INT that is never sent, it is "0" and that's how my code reacts, but it should only happen if the object with the int was received at all.

THX!!

[huy_ute]

May I ask how to synchronize the button state on the web and the mechanical button? Do you have any video tutorials? help meee

[joebotics]

Excellent!.. now.. I am curious if WIFI could be used for bidirectional communication between a smartphone a ESP32.. but not using a webserver but rather direct bidirectional communication like you did with Bluetooth and MIT companion.. Thanks!

[TOGAMANYAMA-jtkr]

Sir, I tried to do but when I decrease intensity in the webserver the led increase light intensity, also when I move turn on each led at a time in a webserver, only one led turn off and others 2 remain light on, when I change polarity all led's turn off, no led turn on. I don't know where I wrong.