ESP32: Plot graphs through a webserver/webportal (WiFi Part 4) - Arduino
HTML-код
- Опубликовано: 4 окт 2024
- 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-...
Final code can be downloaded from:
github.com/mo-...
Libraries required for ESPAsyncWebServer:
github.com/me-...
github.com/me-...
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-...
Favicon downloaded from:
icons8.com/ico...
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.
You are great teacher!
You made this issue "soft & easy" to understanding
Thank you for your help
You are welcome. Great to hear the vids worked out for you!
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)
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
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.
Glad it helped!
Thank you for the clear explanation as you work through the code. Your videos are very much helpful. Thank you for sharing.
Great to hear. Thank you for your feedback!
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.
Thank you very much for the reference in the Math-O-Mat magazine! Well appreciated :-)
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
Thank you very much for your feedback, well appreciated!
Super Tutorial! Note that ESP32FS for now only works in Arduino IDE 1.X, in 2.x it will not show :) Thanks!
Brilliant! And thanks for the homework!
Thanks! Good luck!
Outstanding! XXL Thanks!
Thank you very much!
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.😊
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!
@@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. 😊
Again, very good explanation!!! 😀👍
You are welcome. By the way, here another video on the topic I recently uploaded:
ruclips.net/video/DEFPSfLRObk/видео.html
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.
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
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.
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
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.
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.
bro, i didnt understood the ipadress stuff. do I need to create a adress ?
Pls see this video for additional explanations on the IP stuff: ruclips.net/video/PGt_5xQo2_0/видео.html
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?
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.
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.
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.
Unfortunately I do not have a Sim800A to investigate how this works. Good luck with your project!
Hello. I correctly understood that your code is able to work without an Internet connection? Thank you
Yes, that is correct. Good luck with your project!
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
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!
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.
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!
Mothunderz where can I download the final Arduino sketch passing DHT22 data via an access point to a client?
For the video see:
ruclips.net/video/DEFPSfLRObk/видео.html
For the code:
github.com/mo-thunderz/ESP32WifiTempSensor
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?
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
@@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.....
still Waiting you makes can save pdf to reporting 😊
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.
Feel free to reach out to me on email. This is my channel name and then gmail.com.
I need to send the data with 1ms delay and didn't work
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/
@@mothunderz I want to contact you privately if possible
I have a gmail account that is the same as the name of my channel. Feel free to contact me there.
promosm