ESP32: Plot graphs through a webserver/webportal (WiFi Part 4)

ESP32: Plot graphs through a webserver/webportal (WiFi Part 4) - Arduino

Рік тому

This video shows how to plot graphs / charts in real-time with the ESP32 webserver/webportal. This will allow you for instance to plot sensor values over time when using the ESP32 as IoT gateway.
This video expands on the webserver code explained in part 3:
• ESP32: Control LEDs th...
Starting point for coding along is:
github.com/mo-thunderz/Esp32W...
Final code can be downloaded from:
github.com/mo-thunderz/Esp32W...
Libraries required for ESPAsyncWebServer:
github.com/me-no-dev/ESPAsync...
github.com/me-no-dev/AsyncTCP
Libraries required to make SPIFFS.h work:
||-- Please use Arduino IDE 1.x -- the SPIFFS.h library is not supported under IDE 2.x --||
github.com/me-no-dev/arduino-...
Favicon downloaded from:
icons8.com/icons/set/favicon
Here the explanation on how to setup the ESP32 as Access Point:
• ESP32 Access Point and...
If you have problems connecting the ESP32 to your router, see part 1:
• ESP32: WIFI Basics and...
Might you have problems programming the ESP32, pls refer to:
• Programming ESP32: how...
Correction:
09:00 Note that the SPIFFS library only works under Arduino IDE 1.x. To date no support of IDE 2.x is available.

КОМЕНТАРІ: 55

@epiendless1128 Рік тому

Exactly what I wanted, thank you. I already had asynchronous webserver working, created a basic chartjs, but had no idea how to link them together.

@mothunderz Рік тому

Glad it helped!

@greensunenergiesservice8891 Рік тому

You are great teacher! You made this issue "soft & easy" to understanding Thank you for your help

@mothunderz Рік тому

You are welcome. Great to hear the vids worked out for you!

@gerhardvandernest435 Рік тому

Thank you for the clear explanation as you work through the code. Your videos are very much helpful. Thank you for sharing.

@mothunderz Рік тому

Great to hear. Thank you for your feedback!

@Toni0704 Рік тому

Ok, it took 2 comments to understand that entries with an URL-link get deleted automatically 🙂 Thanks for the new video, I like the entire series. I used code-base for one of my recent projects, the Math-O-Mat (s.a. newest version of the german make magazin) and referenced your videos, 'hope it brings many new subscribers.

@mothunderz Рік тому

Thank you very much for the reference in the Math-O-Mat magazine! Well appreciated :-)

@amancandream Рік тому

Brilliant! And thanks for the homework!

@mothunderz Рік тому

Thanks! Good luck!

@marcosgiovanni9682 Рік тому

very good the project is to be congratulated, it makes a websocket project showing data from digital inputs, and also see the status of the button

@mothunderz Рік тому

Thank you very much for your feedback, well appreciated!

@raymondmichael4987 5 місяців тому

I have finally completed this series; This is what I call hands-on teaching, because from start to end feels like we're heading somewhere. Thanks buddy; Do have a video or plan to create one about ESPmDNS, because for some reasons mine does not pick the name I gave it so I keep using ipAddress in the url to access the device (AP mode)

@mothunderz 3 місяці тому

Thank you very much for my feedback. Unfortunately I am completely swamped with work at the moment (hence my late response). As such I can unfortunately not create any content at the moment. I hope I will be able to pick it up again in the mid-term. Hope you understand. Thank you

@ragohy 11 місяців тому

Again, very good explanation!!! 😀👍

@mothunderz 11 місяців тому

You are welcome. By the way, here another video on the topic I recently uploaded: ukposts.info/have/v-deo/fHV3hImdg4iAw58.html

@Vulcanalia-sk5sw Місяць тому

Super Tutorial! Note that ESP32FS for now only works in Arduino IDE 1.X, in 2.x it will not show :) Thanks!

@thierrybranca7221 Рік тому

Outstanding! XXL Thanks!

@mothunderz Рік тому

Thank you very much!

@scienceofcambridge Рік тому

Really good tutorials that go at just the right pace. Do you have any ideas for a data-logger type sketch/web-page? (i.e. the arduino logs data that can be uploaded and dynamically monitored in real time - could that be a large initial JSON upload of the logged data?) Thanks again - Simon.

@mothunderz Рік тому

Hi Simon, I have not looked into sending large amounts of data, but intuitively I would not do this through Websockets. Instead I would write the data in a log file on the SPIFFS of the Arduino and whenever you need the data send it as a file. This can be done with the same webserver code. I briefly googled and think you can use this: techtutorialsx.com/2019/03/29/esp32-arduino-serving-file-as-attachment/ (disclaimer: did not try myself yet) All the best with you project! Sander

@michelroyer5804 4 місяці тому

Hi Mo, thank you for all your videos, it helps a lot. I would like to ask you for another video to complete this one, I would love to have 2 more pages on this example, one for a password page and one for parameters pages where the password and the numbers of sensors or adjust the sensors accuracy. I will not use this for sensors so, I'm just interested in password and multiple pages webserver but I think this can be a really nice new video to complete this amazing series. Thank you for sharing your uncredible knowledge.😊

@mothunderz 3 місяці тому

Dear Michel, thank you for your feedback and suggestion. Yes, it is a great suggestion and would be a good new video. However, unfortunately I am completely swamped with work at the moment and dont get to record any content. I hope this changes in the mid-term so that I can pick this up again. I hope you understand. Thank you!

@michelroyer5804 3 місяці тому

@@mothunderz thank you for this nice answer. We all understand your situation and, if we all hope to get some new content in your channel but, we now understand that we will need to be patient. Take good care of you. We are all waiting for you. 😊

@noweare1 Рік тому

Quite excellent series. Lots of stuff to learn about. One question, If you are plotting a large amount of data would it make sense for the the javascript to do the data shifting and the esp32 send a data point each second ? I don't know if that is asking a lot of the browser or not.

@mothunderz Рік тому

Yes, it does make sense to reduce the amount of data that is sent over the BLE channel, but only go this way if your dataset is really large as you will be adding complexity to your Javascript. In my example it did not really matter as these are just a handful of data points. As such I have not looked yet into how Javascript could do the data shifting required to add a new data point.

@colinclews6473 Рік тому

I enjoyed this series and plan to use it in my current project. My question is when is the Java side of the socket executed relative to the arduino. Is it immediate like an interrupt, or only when it loops through the WStype case switch. My code uses WHILE loop delays with interrupts to process user input, and I would need the socket response to get into the appropriate ISR. Thanks.

@mothunderz Рік тому

Hi Colin, We have setup the code such that "processCommand" is run in the Javascript every time a message is received from the Arduino. This part of the code is where we set this up: Socket.onmessage = function(event) { processCommand(event); }; So, whenever the Arduino sends something through the websocket, the processCommand function is run like an interrupt. Cheers, Sander

@johanjeques Рік тому

Great tutorial just like I wanted, now I have seen all of your series about websocket. Thank you. Do you have any idea how to create websocket into hosting server with code you have explained? or could you make tutorial video about it?

@mothunderz Рік тому

Hi Johan, I have not looked into that. In fact, I am not sure I understand what exactly you are looking for. In general I only use the Webinterface of the ESP behind firewalls or on private networks. I am not sure how hacker-proof such a platform really is.

@harith3518 Рік тому

Hi really great video. do you think it is possible to start / stop a loop with 2 html button ? I am trying to do it but I can only start it and when it started I can't stop it. I use an ESP32

@mothunderz Рік тому

There are many ways to implement this. A very straightforward method would be to introduce a bool in the INO file which you could call something like "runCode". You initialize the parameter as "runCode = true". Then in the main loop you add an if statement before the code where the graph is updated: if(runCode) { if ((unsigned long)(now - previousMillis) > interval) { } } Then you just define two buttons in HTML and switch runCode to false/true dependent on which button is pressed. Good luck with your code!

@paulwilkie5350 10 місяців тому

Mothunderz where can I download the final Arduino sketch passing DHT22 data via an access point to a client?

@mothunderz 10 місяців тому

For the video see: ukposts.info/have/v-deo/fHV3hImdg4iAw58.html For the code: github.com/mo-thunderz/ESP32WifiTempSensor

@phamvu5066 Рік тому

Thank you for sharing. If can we do the same thing with Sim800A ? in case we do not have wifi signal. Can you make new vedio for using Sim800A ? Thanks in advance.

@mothunderz Рік тому

Unfortunately I do not have a Sim800A to investigate how this works. Good luck with your project!

@ERNesto9688 Місяць тому

Hey, thanks for the tutorial. I ran into a problem with SPIFFS. The first upload worked fine without any problems, but now i cannot upload any modified version of the jasonscript.js or add a new file. Uploading new sketches works fine, it is just the SPIFFS part with the js. Edit: Renaming the .js file worked fine. I do not know why, maybe someone has an explanation, as renaming was not necessary for me with the .html.

@MrAnd361 Рік тому

Hello. I correctly understood that your code is able to work without an Internet connection? Thank you

@mothunderz Рік тому

Yes, that is correct. Good luck with your project!

@epiendless1128 Рік тому

Just want to note that at time of writing, "ESP32 Sketch Data Upload" apparently only works with the original Ardiuno IDE, not the version 2 IDE. Unless someone knows a way to make it work?

@mothunderz Рік тому

At the time of writing there is no support for upload sketch on version 2 IDE. You have to either revert to 1.8 or use another IDE (like visual Studio). Pls see this link for more info: forum.arduino.cc/t/ide-2-0-and-esp32-sketch-data-upload/904160/4

@frankiorio7143 Рік тому

@@mothunderz So I went to the trouble of downgrading to the 1.8.x IDE and now the issue is that I have an ESP32-S3 (Heltec WiFi 32 v3 dev board). The current SPIFF tool does not support S3. Is there another file upload tool/library I can use? LittleFS, etc.....

@averycox1429 Рік тому

I'm trying to use a esp8266 node mcu to do this exact thing and I've tried chopping up so many other codes to get it to work. I'm lost. The closest thing I can come up with is a web page that refreshes every half a second.

@mothunderz Рік тому

I dont have an ESP8266 myself, so have not coded for that platform yet. However, pls see the site here where they do something similar for the ESP8266. It should be straightforward to combine that code with mine: randomnerdtutorials.com/esp8266-nodemcu-async-web-server-espasyncwebserver-library/ Good luck with your project!

@pedrinhodopiru1171 6 місяців тому

bro, i didnt understood the ipadress stuff. do I need to create a adress ?

@mothunderz 5 місяців тому

Pls see this video for additional explanations on the IP stuff: ukposts.info/have/v-deo/iHelk2uviKVjwGQ.html

@rudovanaswegen6441 Рік тому

Hi. Im currently working on a project that I believe is not very difficult to complete for someone who is familiar with microcontroller coding like you. I would like to make contact privately if that is possible.

@mothunderz Рік тому

Feel free to reach out to me on email. This is my channel name and then gmail.com.

@rooy598 Рік тому

I need to send the data with 1ms delay and didn't work

@mothunderz Рік тому

Sorry to hear you could not make the 1ms delay work. There are actually many ways to implement this. I would like to recommend the use of millis() as a time reference in the Arduino. Please do not use "delay()". With delay you basically hold up all processes on the Arduino and that cannot work. Please see this page as reference: www.norwegiancreations.com/2017/09/arduino-tutorial-using-millis-instead-of-delay/

@rooy598 Рік тому

@@mothunderz I want to contact you privately if possible

@mothunderz Рік тому

I have a gmail account that is the same as the name of my channel. Feel free to contact me there.