ESP32 Web page creating and updating

[@2.0-u3h]

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

[@amelliamendel2227]

I've been looking for weeks. None of the dronebot code works anymore

[@Mr0rris0]

Because the grocery puts what you need at the back so you gotta look at everything and up the chances the house wins when you impulse buy some oreos Oreos is like put me in rhe way we gotta be in it to win it. Meanwhile we can't afford nothing so it's a convicting consumer chorus ultimately Ya know everything is baked in. Industry is held up by their seeming inability to know I ain't got money but they advertise anyway. That's a waste and it's priced into valuations down stream Who benefits from me getting laxative ads on the can because I took too long. Nothing about my file should indicate I've ever bought a single thing advertised to me. They have wasted like billions probably I won't break though because I'm BROKE 😂

[@nelsonmartins8995]

say that again, but now slowey and you´ll get it

[@nicolaspillot5789]

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"

[@DennisWarner-n3t]

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.

[@KrisKasprzak]

Too funny….not about the time to find this vid, but the missile man comment . Glad I could help!

[@texasapps2595]

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 x1000!!!!!!!

[@KrisKasprzak]

Glad I could help

[@briankendall1978]

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

[@KrisKasprzak]

Glad it was helpful!

[@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.

[@KrisKasprzak]

Glad I could help post an update of what you’re doing I’m sure my subs would like to hear other stories

[@mattthewizard829]

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!

[@KrisKasprzak]

Glad I could help

[@dlveach]

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

[@KrisKasprzak]

I appreciate that!

[@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.

[@KrisKasprzak]

Thank you for your kind comments.

[@JohanDegraeveAanscharius]

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

[@KrisKasprzak]

Thanks for the compliment. Hopefully it will help you create some cool projects.

[@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.

[@larryd6801]

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

[@DailyCakeSlice]

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

[@KrisKasprzak]

You're very welcome!

[@haose5513]

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

[@KrisKasprzak]

Glad I could help, keep inventing

[@larryd6801]

Kris: Hi from Canada. I tried it, I love it ! This example is the best. Thank you for spending the time in putting this together. Thank you for sharing your skills with us. Fantastic. PS, the wife says you are good looking. 🙄

[@KrisKasprzak]

Glad I can help, and tell your wife thanks for me

[@thomasvieira]

Very well documented repository and code! Congratulations!! Very usefull and nice to understand. Thanks

[@KrisKasprzak]

Glad it was helpful!

[@mrpraphartRompruek]

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

[@KrisKasprzak]

Glad it was helpful!

[@hernanyretarino5336]

This is "VERY HELPFUL" Thanks a lot for posting video like this. ❤

[@gpTeacher]

This is an OUTSTANDING TUTORIAL! Thank you so much!

[@KrisKasprzak]

Thanks, keep inventing and keep teaching.

[@lone-eltemplodeltalento6196]

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.

[@TrillShatner]

Yeah, buddy mentioned that web socket is used more for monitoring and live debugging… Absolute easiest, and most lightweight method is just posting with Ajax. Laravel’s Request Model makes it stupid easy.

[@S--xc4rv]

can u provide me that videos of real time communication ?? please ?

[@djkatt9604]

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!

[@vaibhavbhardwaj8895]

1 min in and i already love the video

[@KrisKasprzak]

Thanks for the positive comment

[@gearscodeandfire]

How the heck did the algo only now introduce me to your channel? Great work.

[@KrisKasprzak]

Glad you liked it.

[@Секешфехервар]

Спасибо, ваша работа дала мне больше понимания для постройки web интерфейса 🤝

[@a-091-l2j]

Excellent, thanks chap, I've bookmarked this for my future self.

[@jakubmracek4483]

2:25 ive heard that it it bc when you use esp as a keyboard simulator and what to reprogram it after the esp works like a keyboard the computer will see the esp at a keyboard and you will not be able to reprogram it that is what i heard so when you press the boot button you are setting the esp to a programing mode where all functions should be off and the esp is waiting for program

[@LastChanceNow]

Hello! Very good video and it works! If you can explain one question, why is the slider not synchronized on windows and android? The button and switch do this without any problems.

[@thisoldjeepcj5]

Thank you for the tutorial and code sample.

[@marcsanchez7893]

Thank you for sharing the code!

[@KrisKasprzak]

No problem!

[@JeahBee66]

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?

[@EZtech]

Works Great! Awesome! And my favorite...lots of commenting in the Code. lol

[@KrisKasprzak]

Great to hear!

[@mrafayshams3089]

Brilliant manifestation of practical use of websockets and esp32. I have one question though. How can we send and recieve asynchronous data to an actual website that we create with html, css, and js rather than running it on the local host? Thanks and Best regards.

[@TimoBirnschein]

Wonderful tutorial! Thanks a lot for sharing! Also: Great voice!

[@KrisKasprzak]

Glad I could help!

[@murraymadness4674]

LOL, whenever I watch videos like this that show code I'm always trying to scroll down or up to see or re-see something. Always makes me lol

[@KrisKasprzak]

Don’t forget, there is a link to the source code in the description.

[@murraymadness4674]

@@KrisKasprzak Great, I will download it and probably use it as a base for my app. btw, I created one of the first commercial websites in the world, it was static html served by a ftp server. My last real job was hacking a massive web app for telemedicine video conferencing, scheduling, test results, etc. And I want nothing to do with that complexity anymore!

[@wes3428]

I was doing the same thing!

[@frankmayo1410]

Very fine video! Well explained and something I've been looking for to make my project. Thank you!

[@kworsfold]

Hi Kris, just wanted to say that your tutorial is awesome, do you know how this can be used using Captive Portal. Thanks

[@KrisKasprzak]

Unfortunately not

[@Jorge_AS_Fernandes]

This is a great project. Thanks for all the work! From Portugal

[@KrisKasprzak]

Obrigado!

[@samiobi]

Thank you Kris for the excellent work, my question is can i control two esp32 from a single web page, if so can you please elaborate on the required changes on the code , thank you

[@KrisKasprzak]

do you want the same instruction going to both ESP 32s or are you intending the webpage to send different instructions to different32s?

[@samiobi]

the instructions the can go any one esp, for example i can select from the same webpage to switch on led in esp number one or to switch on led in esp number two @@KrisKasprzak

[@kholmes4036]

Do you have an example for web page passing different instruction to 2 esp

[@evilkittyofdoom195]

This actually made sense to me, will try this weekend thank you.

[@rikilshah]

You made an amazing video with such a detailed explanation.

[@KrisKasprzak]

Glad it was helpful!

[@nightfall6040]

Hello Kris, first of all thank you very much for providing such tutorial!, can i ask you where you have learned it? are there any extended courses available?

[@KrisKasprzak]

A couple of basic vids and a bunch of hacking.

[@stephenreeves4898]

Great video and very well explained, I've started to study and go through and doing some playing around wit the code to learn and understand HTML coding. I have a question which part of the html code that makes the boxes and color's around the text as I would like to see about removing them to just show plain text or a border box around the text ?

[@KrisKasprzak]

the status bar boxes are classes inside the table, the java script controls the color and width. if you set the class properties to some fixed value and remove the java updated code, you should be able to get a border (or nothing) around the text. note HTML + CSS + JAVA script is a real pain to write in.

[@blatogh1277]

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

[@blatogh1277]

finally, my project works!

[@KrisKasprzak]

Glad to hear it.

[@sandryseibert]

Outstanding job. I'm just updating all my IoT toys here at home. Wish I can pay you a coffee!

[@lundebc]

Excellent video for me, as I can program all the sensor reading and such, but am lousy with the HTML/XML/Web Server. This helped me a lot!

[@KrisKasprzak]

Glad it helped!

[@kychemclass5850]

Hi Kris. You seem to like challenges.... so here's one: Get the ESP32 to dump live data into Libreoffice Calc whereby Calc charts the data coming against the time the data came in.

[@AllertonEPS]

Amazing thank you so much - as you say it is SO confusing - trying to chase things through - and your video takes a lot of the mystery out of the coding. And as you say at the start - most demostrations only show one aspect where as you have demonstrated multiple aspects of web page response systems. Have you come across ESPASyncWebServer ? - Think that is another way which might take care of website updating and avoiding rebooting of the device due to Timeout. Thank you so much for publishing this video - fantastic ...

[@KrisKasprzak]

Thanks, glad I could help.

[@oledodeck]

What a great tutorial! Thank you so much!

[@KrisKasprzak]

Thanks.

[@jamesmichaelcabrera9613]

Thanks Kris

[@harrylenon9594]

This has been extremely helpful! Do you know how to do the server.handleclient function without the arduino libraries? im trying to recreate in the esp-IDF and everything but the live update is working so far, but im pretty stumped on how to get that handleclient working EDIT: looks like the esp- idf version doesnt need the server.handleclient function. I believe it must have setup an interrupt that periodically does the same thing that the arduino handleclient function does

[@dlouhyjohnny6810]

Hi,this is honestly so awesome ! i have a question though, if i want to send more precise data to the site, like lets say instead of 2.6 volts i want to send 2.63 volts so its more precise how would i need to change the code ? thanks

[@KrisKasprzak]

look at the .ino around line 312, I do some math to get the whole number and the fractional part. I do this because of limited support for formatting floats in Arduino. You will need to adjust the *10 to get more digits.

[@peterfransham5792]

Hi Thanks for putting this information on the internet. It is saving me a huge amount of time. I am developing a process control for one of our bioenergy plants based on an esp32. The web page will be used to set parameters and monitor the process. ESP32s have dual processors and I am thinking I would use one processor for the web page and the other processor to do the data aquisition and control. I am in a steep learning curve and your video and code certainly helped me up that curve. I plan to marry the esp32 to this board: CANADUINO® ESP32 PLC-100 for Espressif ESP32-C6-DevKitC, Compatible with Arduino, available on Amazon and elsewhere. This is a side project for me as I normally use commercial PLCs and software. I will let you know if I get anywhere. All the best.

[@KrisKasprzak]

@@peterfransham5792 sounds like a fun project. If you’re just getting started out, you might consider using single core only. My production webpage is about 80 K in size in the XML size is around 2K. My page is filled with graphs zoom controls for the graph amongst other things. And it is very fast. For my purposes, I don’t see any need for dual core.

[@peterfransham5792]

@@KrisKasprzak Advice is well taken. I am my own worst enemy when it comes to projects. I will start slowly and use the CANADuino as my test rig to turn thins on and off and send out control voltages. My sampling intervals are measured in about a minute so I really don't need the speed. I picked up on your comments about refreshing the web page so it does not shut down and thought I might simply put the web page on the other processor and have it refreshed on a regular interval and keep it separate from the data aquisition.

[@attariazeddine6603]

Excellente présentation, bravo et MERCI

[@seanperez1210]

Nice👍🏼 much needed clear tutorial. I’ve seen dozens of tutorials but that refresh the page all the time. Instead of Ajax and xml, would this work with websockets ? That might take this to the ultimate level 🙂

[@KrisKasprzak]

Website is is definitely the ultimate I’m just not sure what kind of library support is out there

[@mohamedgendia4274]

Thank you very much for that great information... I want to know if i have my own website with domain and i want the webpage to be on my website and to start communicating with the esp . How to do that and how to let the website control different esp's based in something like id code as example for each esp i configure

[@rverm1000]

cool nice to see a different coding video

[@KrisKasprzak]

Glad you liked it!

[@digitaldaridesatv1545]

I love this tutorial!

[@KrisKasprzak]

Glad I could help!

[@urrick33333]

Awesome content! Thanks for the video!

[@KrisKasprzak]

Glad you liked it!

[@cyberphox1]

Nice, just starting out with ESP32 👍

[@KrisKasprzak]

Have fun!

[@MitzpatrickFitzsimmons]

This is excellent! Can't wait to try it out.

[@KrisKasprzak]

Hope you enjoy it!

[@JohnJCouture]

Great Video, Thank you.

[@KrisKasprzak]

Glad you liked it.

[@jocimarsilva9425]

Excelente aula, muito útil, parabéns!

[@HiLight7777]

Great video, I love it. Rare video with a lot of details :D tnQ

[@KrisKasprzak]

Glad you liked it!

[@Bliz0516]

Great video Inwas wondering what supermon does in this?

[@KrisKasprzak]

It is simply a .h file that lists the HTML and JavaScript code

[@bennguyen1313]

What would be involved in writing an ESP32 application, that takes data from the uart, but instead of displaying it from it's own webserver (TCP), it passes it wirelessly via bluetooth or via Wifi to another PC/Android? In terms of Wifi, maybe there's a UDP way that the ESP32 could send data to a PC on the same network? In terms of Bluetooth, I imagine if the ESP32 would need to bridge its uart connection with a bluetooth (SPP) connection? So the ESP32 could transmit an SSID and act as a hotspot.. and simultaneously the esp32 runs a webserver? If so, what kind of data thruput could you expect? Perhaps that's how the idea behind the dual-cores.. one does the AP, the other does the webserver? Regardless, if the ESP32 samples the ADC 2000 per second, and updates the web page with every new sample.. what will a client , connected to the hotspot/web-server, see as the sample rate? Or would it not be real-time, and instead the client must refresh the page manually to get fresh ADC samples? Perhaps the user could talk back to the ESP32 via the web page as well? BTW, very new to all this, just ordered an ESP32 8x8 RGB board, and an ESP-PROG JTAG programmer... hoping to use Visual Studio Code to code/debug on the esp32!

[@sid240179]

Great Video! Thank you!

[@PhG1961]

Omg, this is a really awesome video !

[@KrisKasprzak]

I'm glad you like it

[@RafaelSales55]

HI sir, thank you a lot for the video, I could not found WebServer can I follow the tutorial using esp 8266(nodeMcu)?

[@rekabuk]

Thanks for this, I was able to get my webpage up and running really quickly using this example. One thing I don't understand is what keeps it going? The ESP only sends XML in response to a request from the webpage, so is "process()" called continuously by the webpage java script? How can I slow down the frequency with which the page is updated?

[@KrisKasprzak]

It’s been a while since I looked at the code, but inside the ESP code there is a handleclient function that pings the server. I think you can slow that down, but you’ll have to adjust the time out inside your webpage.

[@rekabuk]

@@KrisKasprzak Thanks, as is normally the way, I found the answer a few hours after posting the question. Thanks for the response 🙂

[@gabrielalmeida5047]

Excelent video, thank you.

[@KrisKasprzak]

Glad you liked it!

[@kevin4119817]

Hi Kris, most of the tutorials are done with WiFiServer library, yours has been done with WebServer. I've also read about AsyncWebServer many times and it is pretty confusing. Do you know the differences between these and which one is better in your opinion?

[@KrisKasprzak]

I'm using a heavily modified example that came with the ESP32 install. A key reason is the "on" method that will listen to incoming traffic and if a keyword is encountered it will fire a function. For example if the web page button is pressed, the java script will send back a "BUTTON_1" keyword, the library i'm using sees that and can process accordingly. I'm not sure if what you are considering can do that--otherwise you will need to write your own code for listening and processing.

[@Tony-cf8re]

can you please tell me where i can initialise the value on the slider on startup? .. brilliant code btw

[@KrisKasprzak]

change the value property initial value here is 0 (%) This would be 50 (%)

[@Tony-cf8re]

@@KrisKasprzak Many thanks Kris .. Sorry I have not expained it properly . what I am after is this .. On startup the label above the slider does not show the value until the slider is operated . is there a way to update that ? Many thanks for your help .. I am a relative newbie to the web page stuff but find it fascinating

[@dcollop3543]

Hello, can you make a video to setup an EsP32 as a client and node is websocket server

[@chemamata]

Hi, great video. Very well explained. I've been looking for something like this for a while to adapt it to my project. But I have a problem when trying to compile with the Arduino IDE. I get this error: "fatal error: network_provisioning/network_config.h: No such file or directory" I've searched the internet but haven't found anything. Any help with this problem? Thank you all very much

[@KrisKasprzak]

I’m not familiar with this problem. Can you get any of the library examples working?

[@chemamata]

Thanks for your quick reply. I found the missing file online (it seems to support it). But now I get another error on line 117 "'ledcSetup' was not declared in this scope". I don't understand anything. I don't know what to do anymore. I don't know how this error can occur, I just downloaded (again) the .ino from your GitHub.

[@chemamata]

Hello, thanks for answering. I have managed to fix the library problem. I have finally found the file on the internet and it no longer gives an error. Now the error is given on line 119: 118 // configure the LED PWM functionalities 119 ledcSetup(0, 10000, 8); It shows the following error: Compilation error: 'ledcSetup' was not declared in this scope Thank you very much for your help

[@PabianPL]

This is great tutorial :)

[@cstanleyhns]

HI, thanks for this video - how do i upload these files into my ESP32-WROOM-32 using Arduino IDE?

[@KrisKasprzak]

you should be able to open the .ino in Arduino and select your board, then upload. make sure the .h file is in the same folder as the .ino

[@sridevipindi1547]

could u make a video how to do in espressif ide pls

[@kamaledirisinghe]

Very nice learning. When the web page is opened in two browsers, one browser's changes are not reflected in the other one. Is this normal behavior in this type of approach ?

[@KrisKasprzak]

Each instance of a web session is independent of others, fortunately. Imagine if changes made by one user were applied to others--meaning as you access your bank data, I can see it.

[@indianspacedefencestrength1892]

It worked! Tank you sir.

[@KrisKasprzak]

Glad it helped

[@edinetgrunhed6000]

this is a kind of video we need for esp323 project,any update for this video with added features

[@gabrielwedsonmendonca239]

Amazing! Thanks!

[@KrisKasprzak]

Thank you too!

[@dangeruss001]

Thanks, you saved me alot of time.

[@KrisKasprzak]

Glad I could help

[@gruneranfanger6947]

Thanks a lot for this video. I tried to get it run, but compiler reports errors: ledc... functions are not declared

[@KrisKasprzak]

Howdy, Unfortunately the latest ESP libs broke several things (it looks like their API's changed). Until I modify the code, you can make these changes in the .ino file just comment out these lines in setup around line 120 //ledcSetup(0, 10000, 8); //ledcAttachPin(PIN_FAN, 0); //ledcWrite(0, FanSpeed); // disableCore0WDT(); around line 223 // ledcWrite(0, FanSpeed);

[@vagnerzupo910]

Muito obrigado por compartilhar seus conhecimentos.

[@royhopkins974]

Hi. Great work. Can you show how to add a graph to this code. Maybe a whole new video 😂

[@Lunolux]

great video thx

[@KrisKasprzak]

Glad I could help

[@musix1581]

Can you please update/show how to draw the results in a chart?

[@JeahBee66]

Great Job, thanks a lot!

[@KrisKasprzak]

You're welcome!

[@Nothingbud]

Is there a circuit diagram ?

[@tdmanson]

Dude I owe you a beer.

[@KrisKasprzak]

You’re very welcome, and I hope it’s a really big beer

[@oussamabenilles5311]

Thank you a lot, This projct works just in local network ???

[@KrisKasprzak]

you can connect to an existing network or create an access point (no internet access though)

[@nektarioskoumantakis4987]

@@KrisKasprzak can you explain this more? How can I control the ESP32 from a different... country? 🙂

[@henry9361]

I get the network and can log into it but when I insert the page IP into a browser, there is no page found. Any Help??

better if can read dht + capacitive umidity analog and use 2 relay board

[@Mystical-TEDDY_]

How can I tell which library to install for the webserver. There's so many of them that have similar names. Or is webserver.h already preinstalled

[@KrisKasprzak]

I used the pre-installed one

[@surbhikathane]

Hello Can we do this type in ESP_IDF . and how ? anyone knows ?

[@sevenvll5955]

Hello sir 👋 Please I need an urgent help 🥺 So for my project I'm going to connect a load cell , hx711 amplifier to ab esp32 , to mesure thhe weight of gadgets in a storage bin, then send the result in a web page. I want to make a web page like this , can you provide some help

[@KrisKasprzak]

Do you have your load still working yet?

[@dr.m.sanaullahsahar9859]

any possibility to access esp's webpage over the internet?

[@KrisKasprzak]

You can, check out port forwarding on your router

[@mugi1530]

Can i make the same project using esp8266?

[@sarasarsora5385]

How can i put pictures please?

[@vattuiot8295]

thanks you !

[@KrisKasprzak]

You're welcome!