ESP32/ESP8266 Plot Sensor Readings in Real Time Charts - Web Server
Вставка
- Опубліковано 25 гру 2024
- For complete project details (schematics + source code), visit ► RandomNerdTuto...
Learn how to plot sensor readings (temperature, humidity, and pressure) on a web server using the ESP32 or ESP8266 with Arduino IDE. The ESP will host a web page with three real time charts that have new readings added every 30 seconds.
** Preparing Your Arduino IDE for ESP32 ***
1) Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux): randomnerdtuto...
2) ESP32: Install FileSystem Uploader Plugin in Arduino IDE: randomnerdtuto...
3) Libraries that you need to install: ESPAsyncWebServer, AsyncTCP, Adafruit BME280, and Adafruit Unified Sensor
** Preparing Your Arduino IDE for ESP8266 ***
1) Installing ESP8266 Board in Arduino IDE (Windows, Mac OS X, Linux): randomnerdtuto...
2) ESP8266: Install FileSystem Uploader Plugin in Arduino IDE: randomnerdtuto...
3) Libraries that you need to install: ESPAsyncWebServer, ESPAsyncTCP, Adafruit BME280, and Adafruit Unified Sensor
Like my page on Facebook:
/ randomnerdtutorials
Follow me on twitter:
/ ruisantosdotme
Subscribe for more projects like this!
bit.ly/subscrib...
You can find the complete project details (schematics + source code) on my blog ► RandomNerdTutorials.com/esp32-esp8266-plot-chart-web-server/
How to load data plot with sd card to chart webserver?
Yeah please add write to sd card as csv file
i tried with dht22 but server not found how to make it work . Any tutorial ? i have done with displaying humidity n temperature value using ur web server tutorial, it work fine.When i wan to display it in chart it not showing.. Any solutions?
You all probably dont give a damn but does anyone know a trick to get back into an Instagram account..?
I was stupid lost the password. I appreciate any assistance you can give me.
@Jason Frank Instablaster =)
I am a regular viewer of your homepage, but did not realize, that you also have this youtube channel, so I subscribed! Nice work!
Thanks! I've been focusing mainly on my blog, but I'll try to focus more on UA-cam this year.
@@RuiSantosdotme For me you are the REFERENCE for ESP uC. I love the ESPs and use them a lot!
ditto
Same here! Thanks for your great work, Rui!
Finally don't have to insert clunky HTML into the arduino code itself....wow this is a lifesaver. Really cool and useful tutorial thank you for pushing 32/8266 to the limits
Exactly, just store your CSS or HTML in the ESP SPIFFS. Here's another example randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/
I'm so glad that out of luck i found out about you! I've been watching a few of your videos now and i think you're doing a fantastic job explaining everything! I just purchased your course on ESP8266 and ESP32 and i can't wait to learn everything about it! I was wondering if you would happen to be interrested into making tutorial videos (or maybe a complete course) with using an IoT dashboard platform such as Thingsboard? Keep up the great work!
Everything including description crystal clear...and work fine..thank you very much
Thanks! I'm glad it was easy to follow
A very interesting sketch as it uses a graphics library that's available on internet. That library can be configured to yr needs and used in other projects. This sketch is a very good introduction to its use. Well done
Thank you, I'm glad you found it helpful!
Thank you ! everything from your website is so detailed and yet can be followed by a beginner like me.
Thank you Rui. Found this guide most helpful.
A good idea to make a graph dynamically! Super project! Thank you!
Just awesome brief tutorial!
Very interesting projects. Congrats!!
Thanks!
Wow this is simply perfect! Thank you so much for your hard work
wowwwwww, thankyou, wonderfull tutorial !, I was looking for
Thank you for this perfect Video Tutorial 👍
Thanks! I'm glad it was helpful!
Thank you verry much this is exactly what i needed !!!
This project is awesome! I test it and works like a dream. But I would like to know if I could take time from a rtc component attach to esp32? I will use the ESP32 with an RTC and an SD card to datalogger the sensors. This device will not connect to internet, but I will use ESP softAP to make an access point, so I could use any device to connect with ESP32 network and see the readings. Thank you for share this project!
Can this be done on a web server that is configured as an access point? Let's say for example you want the arduino to host the server, but have the arduino not connected to Wifi, is it possible to implement Highcharts without Including the JavaScript files in the section of your web page, but storing the JS files on the arduino?
Great project! Thank you for sharing!
You're welcome! Thanks for watching!
Hi I would the same think but monitoring an on cnc using serial rs232. Could you have any idea to do this? Thanks
Thank you for your video!
Excellent project ! Thanks for sharing ! What is the minimum delay that we can set between two values ?
I've used it extensively with 1 minute updates and it was very reliable with 1 connected client. I haven't tested with lower time frames...
@@RuiSantosdotme
Thanks for your response ! I'm looking for a way to send data in real time from an Arduino to another wirelessly, but I didn't find the perfect solution yet...
The idea is to create a musical instrument (MIDI) with several homemade wireless controllers (different types of sensors)...
Your channel helped me a lot for working with the ESP32 the past 5 month ! I can't thank you enough!
@@BertrandL I would recommend just using 2 ESP32 to exchange data with each other. I would probably use MQTT. I'm glad it helped! Thanks
Can we export this data as an excel or txt file?
this is not nice , this is perfect !!!
I am suscribing directly to your channel
Hi Rui! very cool project. I know nothing about coding, I followed your instructions and made one for monitoring my wood inventory. It will be great to have the deta sync with my local time zone. Please let me know how i can achieve this. many thanks!
well done i can use this in the futur thanks
Thanks! I'm glad it was helpful
Obrigado por compartilhar, projeto top demais, obtive sucesso por aqui. Parabéns.
Boa Rui, gostei muito!
Hello! Is it possible to make realtime plotting via WiFi with ESP in the interval of 10 microseconds to build a graph? Or it's impossible for this technology?
Hi Rui! How can I change the X Axis time to my local timezone?
Excellent project ! Thanks for sharing !
Can NTC sensors be used if the appropriate library is added?
Sure, it will work with any sensor or value. You just need to modify the code to read your sensor instead
Inspiring !
Hello !!
I am trying to do a similar project, but with the difference that I have the temperature sensor, and the pressure sensor has it my friend who is located in another part of my city, the problem I have is that I want to show in The same web page, the values of the two sensors, but I don't know how to link.
Could you tell me how to do it?
+
I have already built my own weather station. Iam using it for quit a while now and I wonderd if it is possible to store the sensor data an the ESP for the last week and display it on a nice chart, so i don't have to wait until new sensor data cums in. It would be nice if you could make a video about that.
Thanks
can you make a project with ESP32 + BME280+PMS7003+MQ135 and the same webpage with a graph like this? I really like the project but I am not good at coding.
simply, Can you please explain how to make this project with multiple sensors that are analog or I2C.
Nice tutorial but I have 1 problem, in my Arduino IDE i cant finde the button "ESP8266 Sketch Data Upload" and if I upload the sketch with the normal "arrow" i cant get onto the website with the given IP from the serial monitor
Nice explanation sir, but I have a question. Could we set the webserver that has ability to auto-add the plot chart when there's a new sensor readings installed? (For example, I wanna visualize sensor readings from every node in my mesh network created by painlessmesh)
Here is a method to show dynamic data from google sheet database ua-cam.com/video/CACsMxHalaI/v-deo.html
Good day,
Would that also work with a NodeMCU Amica module V2 ESP8266?
I have built a small weather station with a 1.3 OLED display but would like to show the sensor data on a diagram or something if that were possible. I just can't find anything on the internet.
Hi there, thanks for the wonderful tutorial. One problem I am having is, the sensor reading once in a while gets too high, not sure why. I tried the sensor with different code it works fine, another question I have is how do I add one more graph to display another sensor reading? Thanks
Hello!
Excellent work, thinking of doing something similar like you did but unfortunately do not understand where to start, I can only use PIC chips for the moment and really don't know that I know enough of it to do something like you did, I liked your project, cheers....
Unfortunately I don't have any PIC tutorials...
Hello! Okay my friend, thanks for your humble reply.
The Arduino IDE is a free download
programming in in C++
ESP32 is commonly available from on-line suppliers.
BME280 (not BMP280) is available from same supplies
You can cut and paste to get this to work.
I would say there are a lot of steps, but Rui has on all the hard work and
given a step-by-step tutorial for you to follow.
but, you have to follow from the very beginning to add the ESP32 to the IDE
@@dave-in-nj9393 Hello! Dave
Thanks for your quick reply, yes indeed, even I appreciate the efforts taken by Rui.
Regarding programming, I am zero in C++ that's the reason I use FlowCode to program the PIC chips.
I am trying to understand you and what Rui did, hope to do so quickly, probably ordering those parts you mentioned and start the action.😊
Once again thanks for your kind words.
Abhi
@@abhijitrashinkar : see the link to the website tutorial.
this is specific to the ESP32 or to the ESP8266. the ESP32 has more I/O pins and a few other benefits.
the steps are explained.
you have to get the Arduino IDE, free from the Arduino Website
take some steps to load the specific chip (32 or 8266 one and then the other)
down load libraries
download the program
assemble the board with the BME280 (I think pull up resistors might be needed, more data on the web)
he goes pretty fast on this video, but the tutorial is step-by-step with links.
since FlowCode has a C++ as part of the options, you should be able to port this into FlowCode, then add what you need.
if you wanted to port this from C++ to a PIC, then I would hope FlowCode can do the heavy work for you.
how hard is it to make a graph from a microphone? i'd love to use the esp32 with a microphone as a babymonitor
Very cool, thank you
Thanks for watching!
Great project. I'm trying to modify this for use with a AD8232 heart rate monitor, but I'm only getting a single value (4095) when I should be getting a constant stream of changing values (from 0 - 4095 using the built in ADC). The AD8232 works with just the serial monitor and plotter, so I know it's hooked up correctly. Any suggestions?
Kind of late but did you find a solution?
@@Screcy Sorry, but it's been so long, I don't remember. I hope you can find the solution.
Thanks for video! :) is it possible to make the esp8266 an access point and log data so one can view the data plots on a desktop/mobile by conencting staright to esp8266 and no need for wifi?
hi coolvideos man :! any ideas what i could google if i want to safe these charts on the webserver. so whenever i come to the webpage i can also read past messurements? in ur verison i can only see present and past messurements
Great project ...can i use a Wemos D1 mini for this and what do i have to modify?
Thank you
You can, it should work without any modifications just check that you are connecting the sensor to the SCL/SDA I2C pins of the Wemos D1 Mini: randomnerdtutorials.com/esp8266-pinout-reference-gpios/
Thanks a lot sir 🍀🍃☘️👍
hello, is it possible to save the recorded data to a database. Thank you for the response
Hi, beautiful project !
What happens once the 40 points are reached ?
Thank you in advance for your answer !
once 40 points are reached, the graph just removes the first point as it adds every new point.
If I close the browser and look at the data tomorrow, will it show yesterday's data?
How do I do with dht11 or 22 ?
did you use python language in your web ?
is it possible to use ESP32-C3 Mini?
You are a genius. Do you know how to change the time zone?
is there a way to get access to the esp server/Time Chart if i am not in local network? For example i want to make an ecg sensor with an esp and show the results like this time chart but from every place not just local. Thanks
Thank you, so much!
You're welcome! Regards,
Rui
Dear.
Can you guide to plot analog gauge. Thanks.
Hello Rui! Amazing project, can I know, if the data file is inside the arduino project?
Hi, can I use this to diplay data from a i2s mic?. And, you know how to read that data and turn it to sound?
Can we change timezone ?
Thank you!
Hello, Santos I'm currently working on ESP32 800l project . I need help from you .How can I contact you?
Thanks a lot!
That is good thank you
Is there a reason why it only displays 40 data points? Can this be extended to more than 40 or are we restricted to the limits of the Esp8266 / esp32?
It was just an arbitrary number that I decided... I found it was a good amount of values to see either in a mobile or laptop browser. You can modify the HTML page to let you see hundreds of points per chart. Just open my index.html file. Then, search for "40" and modify those values to 100, 500 or any limit that you want
as you try to display more, the points run together and become almost un-readable.
I think the next version should have a button on your Android that says 40 200 and 1000
that would be a day and a half, one week and one month if you take readings every hour.
that way, you could press the value on your phone, and the chart would fill to that.
I think it would be great to have a way to see the last 200/1000 stored readings and not have to wait for it it fill
@@dave-in-nj9393 Thanks for the suggestion. You can definitely all those features to this project
@@dave-in-nj9393 I have been digging in that library a little bit and hat you mention is certainly possible.
As example, paste this in an html file and open it in your browser: (I hope the code wont be garbled by youtube)
$.getJSON('www.highcharts.com/samples/data/aapl-c.json', function (data) {
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'Stock price'
},
series: [{
name: 'AAP',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
@@Ed19601 Hey, thanks for the code!
Se puede actualizar la grafica cada 10 milisegundos?
Does anyone know how to add a simple text display for the same values at the top? Like just a box that displays the latest value in bigger text, above the chart. I have been trying for days to figure this out but I don't understand Javascript or HTML as well as C.
is this with mqtt protocol?
How long can it store information? I want to open the webpage and see temperature for the last 24 hours. It can update every 2 minutes for example. Is this possible?
How can I send continuous data to esp such as make the led on while I am pressing the forward arrow at keyboard ?
Hi . I like your project very much but I have some trouble. Every time when I close the website(accessed by smartphone or PC) , the data is all disappear . And I open the new window of the website . The data is blank . Only the latest data is written on it . Are there any steps of your instruction that I missed ? I appreciate that you can help me
That also happens in this video.
sir do you have the code with tof sensor for measuring distance
how i can configured BH1750 sensor to web server with esp32 devkitv1? Thank you advance for your support.
Thank you very much, but h have problem, when i copy IP and past it on the internet is not founded
Is it possible to do it with a DS18B20
Lets say if you have this sensor and a heart rate sensor attached . Will the same system work , as both of the sensors will produce data at their own rate . And what i think is that as the whole page is getting refreshed it might need all of the data at the same time from all the sensors
You can adjust the different polling rates for each sensor in the HTML file.
Is it possible to create a local webserver with mysql data?
Is there a way to locally host the chart js code?
To add download chart data into pfg or image file
Can we do this with Arduino UNO?
Can i change the sensor using dht11?
Hi, how can I make it faster? as in more data per second, I lowered the value to 10 and its not enough
what value?
Goodnight friend.
Gonzalo Rojas from Venezuela writes to you.
I am working with the ESP32CAM development card, specifically with the example of CameraWebServer, it compiles and records well on the card but when I click MonitorSerie it generates the IP of my WiFi, however it does not connect with that IP on the internet, also on The Serial Monitor generates the error: E (321) esp_core_dump_flashz ɕ dump partition found!
E (321) esp_core_dump_flash: No core dump partition found!
COULD YOU HELP ME WITH YOUR ENOUGH EXPERIENCE?
Gracias
I have an esp8266 user exception (panic/abort/assert)!! how do I fix that?
Hey man, thanks for the tutorial. I've followed it step by step but when I go to upload the code, in the serial monitor it reports that no sensor is found, check wiring. I checked the wiring and its exactly how you have it. Im using an esp8266 with the same bme280 sensor as you. I've used an IC2 scanner and it can't discover the sensor. Any ideas whats wrong?
same happend to me.. any ideas on how to correct the error
thanks ? how can I record this curve?
I want to plot second sensor data on x axis... Instate of time... Like voltage vs current graph..... Please help me to modify html file...
Is there a way to export the data to a .csv?
hi bro its great can you make it with stme32cubemx and mysql?
Web server are local ?
Thanks!
You're welcome!
Thank you
You're welcome!
hi, can this be logged into csv file?
How do we save these data in our PC
sir can u help me, i got problem like this when running program on website
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///pressure. (Reason: CORS request not http).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///temperature. (Reason: CORS request not http).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///humidity. (Reason: CORS request not http).
The data update speed is nearly per 30 seconds. How to increase the speed?
Hello, I will reset the time zone. thanyou
@Rui Santos , I need help ... how can I change the clock ? It's with 3 hours back . The date it is correct. Please answer me . We can talk on email if you want
good night daniel, did you manage to change the date to gm -3? I have the same problem
@@claudineymoratony hi.I found the solution myself. I just had to add 3 hours in minutes to the function that displayed the time.
@@claudineymoratony var x = (new Date()).getTime() - 1000 * 60 * 60 * 3
Try this. 1000* 60* 60*3 is 3 hours in miliseconds. That function displays the time in milliseconds since 1970. In the code you specified the time format, that's why the normal time is displayed, in hours, minutes and seconds . So, for GMT -3, you just have to subtract the 3 hours, exactly as I showed you.For GMT plus, you do the opposite, that is, you add up those hours
@@danielbob7769
It worked perfectly! Thanks!
@@claudineymoratony you're welcome!
thanks.
You're welcome!
You can save the data after?
You could, but I don't have any tutorials on that exact subject. This might help though: Visualize Your Sensor Readings from Anywhere in the World (ESP32/ESP8266 + MySQL + PHP)
randomnerdtutorials.com/visualize-esp32-esp8266-sensor-readings-from-anywhere/
Can I put the HTML in a tab in the IDE ?
No... You can only open .ino files in Arduino IDE, I recommend using a proper IDE for HTML (like atom.io )
how can i do it in android please help me
Nice tutorial, even if sharts made me laugh. Google what a shart it.