ESP32 Web page creating and updating

This video will show how to use your ESP32 for creating and updating web pages. Learn how to 1) create an access point for client connection, 2) serve a web page using HTML, 3) make fast updates of changed data on the page using AJAX and XML, and 4) receive user interactions like buttons and sliders for making settings and changes from the web page.

This video is fairly detailed and long, but hopefully with the included sample code, you will be able to create fancy web pages that let you update data quickly and allow users to makes setting changes from the web page.

Use this technique for home automation systems, control systems, remote monitoring systems, telemetry etc. Send and get data from your web page made easy.

This tutorial uses a standard ESP32 micocontroller and the Arduino IDE. The web page is written HTML, uses CSS styling to make the web page look better, and java script to update portions of the web page from XML sent from the ESP.

code at:

[.-uh]

YouTube.... Why the hell i need to search for hours, when there is such a good video

[nicolaspillot]

at 14:06 the 200 is *NOT* a timout/timer/delay, it is the http réponse status code, which tells the client if his request succeeded (200) or not (4xx) or if the server had an error (5xx)... look up "http status codes"

[briankendall]

Kris, Thanks for taking the time share this information. So much better than the typical "lets turn on and off an led" video.

[DennisWarner-nt]

Wow, Took me minutes to get your code working on my ESP32, -- took a week to find your video. You sir are a steely eyed missile man. I learned a great deal, many thanks.

[texasapps]

YOU MAN! YOU ARE THE BEST!!!! I've been looking for months how to update my variables without refresh the page! and you take your time to explain in a very clean way! ThankYou from Ecuador

[your_utube]

Amazing what you had to go through to just come to grips with the web stuff. Those of us who have been at it since the early 90's can tell you that the learning curve is steep, especially now that there are so many options out there. JSON is pretty easy to use, because XML is not that popular anymore as it used to be decades ago (am I really getting that old?).
Your system is just superb and I started this week with ESP32 and I am amazed at it. Never really worked with an MCU before. I knew waht ti was and what it was sued for, but nice to do it hands on. Your type of videos are so invaluable in inspiring and showing those of us with big ideas that our ideas are not silly, because it has been done already. Thanks again.

[mattthewizard]

hi Kris, just wanted to say that your tutorial is amazing! so much context, and guidance. It's so awesome that you take the time to explain the "what could go wrong" scenarios, and give tips on how to debug. I feel these are the most important subjects when learning to program, shit will break, and how do you resolve that. Thanks man!

[stevesopenrocket]

For the first time some of this makes sense, thank you. The only thing I need now is how to get the video off a esp32 cam.

[lone-eltemplodeltalento]

Thanks for the video. Never used XML in webpages. I used json along with "fetch()" function to request data from server and it works quite well. And yes, there are also videos on youtube where people use websockets when real time communication is needed. Its doesnt seem too hard to do.

[haose]

Great code man Thank You so Much. The code & explanation is very intuitive & concise. I never code other than C (beginner level) language before, so I was very happy my logic was aligned with the code. Other tutorials just feel so incomplete

[dlveach]

Great tutorial. Lot of content but you cover it well with a nice fast pace. Wish many other YouTubers would do that!

[mrpraphartRompruek]

Kris, Thank you, this tutorial is so useful for me and every one.

[larryd]

Every time I recommend this video, the person says you should have blown the dust off the fan blades 😉 . Thanks again for sharing this ! ! 👍

[rarenu]

All your videos are great assets to learners like me.
You stand apart from others in your uniqueness and it is really a god's gift.
Bring out your ideas to the world, let the present and future generation learn, benefit and cherish. With Great Regards and Best Wishes.

[djkatt]

Hello, first, thanks a lot for your video and your time to explain this, very usefull, but i have a problem, i have ESP8266 and, in this example you use ledcWrite and others mehods for ESP32 ONLY, you can make a modified version of this proyect to work with ESP8266? plz thanks so much!

[JohanDegraeveAanscharius]

FINALLY, I found someone who makes it simple!! Thank you so much!!

[gpTeacher]

This is an OUTSTANDING TUTORIAL! Thank you so much!

[JeahBee]

Unfortunately, I'm a loser at website programming.
Would it be possible to get an example with a 2nd page and fields for entering numbers?

[DailyCakeSlice]

Wow. You absolutely rock. The video and code are incredibly helpful and super clear. Seriously, I cannot thank you enough!!!

[blatogh]

amazing, got to monitor the robot arm swings using this tutorial