ESP8266 Plot Sensor Data With Websockets/Chart.js In Arduino IDE (Mac OSX & Windows) | WeMos BMP180
Vložit
- čas přidán 6. 08. 2024
- • Your support helps me post videos more frequently:
/ acrobotic
www.paypal.me/acrobotic
buymeacoff.ee/acrobotic
BTC: 1ZpLvgETofMuzCaKoq5XJZKSwe5UNkwLM
==========
• Find me on:
/ acrobotic
/ acrobotic
/ acrobotic
==========
• My shops:
acrobotic.com/shop
amazon.com/shops/acrobotic
==========
• Description:
Collecting sensor data is one of the most popular applications of microcontrollers. Although we typically visualize it after it's collected, sometimes it's helpful to have a graphical view of the data while it's being measured.
In this video, I show you how to use the ESP8266 to visualize data as it's collected using a BMP180 temperature and barometric pressure sensor. I go over the steps needed to collect the data, run a web server, and serve a web page that includes a plot of the data using Graph.js-a JavaScript library-and Websockets.
==========
• Related vids:
Getting started with the ESP32 using Arduino: • Getting Started | ESP3...
Getting started with Websockets: • ESP8266 Web Server and...
==========
• Project parts:
ACROBOTIC WeMos Development Kit for ESP8266:
acrobotic.com/products/acr-00027
amzn.to/2PBK2KE (affiliate)
ACROBOTIC WeMos D1 Mini V2 Development Board for ESP8266:
acrobotic.com/products/acr-00017
amzn.to/2D3KiA6 (affiliate)
ACROBOTIC WeMos D1 Mini BMP180 Shield for ESP8266:
acrobotic.com/products/acr-00013
amzn.to/2EMnyWL (affiliate)
==========
• Project code:
Firmware for the Arduino IDE:
github.com/acrobotic/Ai_Demos...
==========
• Tutorials:
Detailed guide for getting started with the WeMos ESP8266 Development Board:
learn.acrobotic.com/tutorials...
• Getting Started | ESP8...
==========
• Music:
Epidemic Sound (epidemicsound.com). Standard CZcams License.
==========
#ESP8266 #Arduino #Tutorial - Věda a technologie
This is what you call a brilliant tutorial with detailed explanation of each line. Well done.
Very educational! I like this format! Keep up the great work.
I'm very glad, Stephen. I've been meaning to change the previous 'classroom-style' format, so it's nice to hear that it's working out okay!
I have spent weeks to find your tutorial. Logic clean and easy to follow. You are really an example to make tutorial videos. I really appreciate your job....
Excellent video! Probably the best spend 18min for arduino on youtube.
Great video, just what I was looking for and very well presented!
Thank you for the kind comment, Chris. I'm happy that you found it useful!
cool this is so helpful. i know electronics but i'm just learning how to code in js. its good that put it all together. most of us just dont know how to get a good chart because we don't code for a living. thanks again.
First time i have come across these videos, great way that you do them, time to subscribe :-
Thanks for the kind words and the subscription! I'm very glad you like them, it's been a learning process :)
Your tutorials are awesome. Just found your channel while searching for ESP/Websocket stuff and you have the best videos with the best explanations of the code. Nice work!
Small nitpick: At 10:16, the ESP doesn't need to be connected to the Internet (only to LAN) since the ESP isn't the one fetching the Cloudflare-hosted library -- its your browser on whatever computer/phone you're viewing the webpage on that needs to have internet access so it can fetch from Cloudflare/CDN/Internet sites. :)
Glad you like them! Also thanks for stopping by the stream earlier today :)
You're absolutely right. I was doing things slightly differently, and fetching the library server-side, but switched at some point to just serve the link and ended up with a tangled mess in my head. Thanks for keeping me honest!
Your videos are really good. Helped me a lot with my projects. Thanks. :)
Thank you for taking the time to let me know. It makes me really happy to know that you found them useful!
Excelentemente bien explicado te felicito y aguante Argentina !
Congratulations!!!!! Your work is amazing ...
Thanks for the kind words, I'm glad you find it useful!
Very neat. I’m going for a somewhat different concept with logging to a remote linux server, but I was gonna use Charts.js. This video is very useful, thanks!
Awesome video. Great example of using websockets.
Thanks for the kind words, Michael. I'm glad you liked it!
Wow, great content! Thanks for making it straightforward!
heya, bill! i'm very glad you found it useful. thanks for the kind comment!
Amazing tutorial. this is exactly what i needed! congrats!
Glad you found it useful!
ALL WORKING, THANKS!!!
This channel is the best on topic. Well explained and practical
Thanks so much. It makes me happy that you find the content useful!
Sos argentino?
@@17colosal si, pero vivo acá con los yankees desde el 2003...
I'm attempting to use an ESP8266 to easily display telemetry from a uni project as a webpage. This tutorial has *tons* of valuable information and also solved the mystery of "how do I get live data to display on my webpage?" for me! :D
Big thanks for this smooth and easy to follow intro.
i'm sooooo glad to hear that it helped. thanks so much for letting me know!
@@datasith I've got it up and running in a very early beta stage, not using graphs for now, as the ESP will be an AP, sitting inside a model boat. I'm sure there are ways to incorporate simple js graphs into the ESP as well, there are tons of memory for code and data, and then there's also the SPIFFS. I'm using a derivative of your js code for changing the inner HTML of pre-defined paragraphs with an assigned id. Learning new things that produce meaningful results is fun!
Awesome tutorial! You the best!
This is the EXACTLY what I need
very informative. Keep the vids coming.
Thank you! I'm glad you find the content useful.
Well done amigo. Just what the doctor ordered. Now, you can even show us how to log all those data into excel for manipulation and reporting?
Great job, keep doing what you are doing... you are a great teacher.
Bests
Will do, boss. Thanks for watching, and for the suggestion!
Great. Detailed explanation I'll try it with an async webserver
Awesome video bro, thanks for coronating us with glory again.
Thanks. This video is awesome. Love it.
Thank you for the kind comment! I'm glad you found it useful!
Excellent! 👏👏
Impressive!
The Best Tutorial I Got Uptill Now For ESP8266 & webSockets. Will Encourage To Make More Videos ✨✨
Abhishek Patel thanks so much! I’m glad you liked it!
Love that you can type in all that code and never have to debug it😜
exelente tutorial, excellent.
First of all! Amazing video, you ara making some nice content and also you have such great knowledge, I really appreciate your work. I was wondering if you can discribe wich will be the main changes in the code (specifically in the htlm section) for deploying different varibles at the same time. Thank you!
Brov, you're a life saver. 😉
No problem!
Thank you very much Sir........
Great video!
Thank you!
you are a legend sir
Thanks for the kind comment, my friend. I'm glad you find the content useful!
Very nice!
Thank you, I'm glad you liked it!
Thx! Interesting! 🤔🫡
I use Node Red great stuff. Like your methode gives more control and is les bulky
Ro nald, thanks! It’s great to use different methods for different projects, if nothing else, as a learning exercise. Node Red is definitely on my video queue!
very nice
thank you!
Wow Cisco, it's great to hear from you. Could you please keep in touch with me.. This video is close to what I need to get worked out. I may(might) have a job for you. We will see..
Thank you for this great video, I still have a question : why did you chose port 81 instead of 80 ?
Great lesson and it's very helpful for me! Thank a lot man! (Veo que tenes la camiseta de Argentina, sos argentino? Yo soy argentino, abrazo!)
Aguante Argentina, un abrazo muy fuerte! Tengo casi 16 años viviendo fuera y no sabes lo que se extraña!
Cierto, apesar de todo el bolonqui...se extraña. Charlas con amigos en cafe o buen mate. Yo vivi mucho tiempo en Los Angeles. Abrazo gigante y ya me suscribi a tu canal que esta de P.M.!!
@@EDGARDOUX1701 gracias capo! Si totalmente la juntada alla es lo mas, un gran abrazo!
Awesome
THANK YOU!
Thanks Bro
No worries!
Thanks for making those great videos, right to the point and easy to follow but still pretty advanced, I really love them. I have one idea of topic you may want to cover. I have yet found any videos showing how to use OTA in AP mod(Acces Point, not regular wifi connected to your home router, that part is clear to me), is it possible? if so, a code that let you update OTA for let say 5 minutes and then turn OTA and perhaps wifi off all together to preserve energy. Im building a GPS logger with ESP32 as processor that I want to be able to use OTA on in AT mode and I have another project(out in the woods for a Geocache) where I have a solar cell driven ESP8266 that keeps wifi open during the day and then goes to sleep all night. This one is also in AP mode and its built in to a box that is hard to reach and it would be really helpful to just get within wifi reach and upload the new firmware, either by uploading binary file from my cell over a webpage or using the Arduino gui (but for that my laptop need to be carried out there, into the woods). I could add a reset button to restart in to OTA mode if needed.
Oooooh, I like this one! I haven't tried OTA in AP mode, so I'll give it a try and if it works I'll fit it into a project to make a video. Thanks for the suggestion! I very much appreciate the kind words, I'm happy you like the vids!
Hellos. First of all, great video! Very well explained for a newbie like me in the world of microcontrollers. My question is..Is it possible to add one DHT11 and get only the humidity data? If so, how would you add that on the code? Thank you so much, best regards from Azores Islands - Portugal.
PS: You got my sub
Excellent work, I'm getting an error which affects displaying the chart on the browser " Uncaught TypeError: Cannot set property 'onmessage' of undefined
at line 46 "
love the way he writing code.. part after part..
Can the WebSockets library serve the HTML? I was wondering if you need both WebServer and WebSocketsServer? Also this is hands down the best video tutorial for this. THANK YOU!
how to make it so smooth and dense ?
like to plot a sin or cos wave without sharp lines with reading every 100 millisec (10 reading/sec for one or two minutes?)
Congratulations, how can i save the data or record the values for an especific time interval?
Nice and educational tutorial. Can you please post a similar tutorial using Highcharts and Highstock?
Thanks so much, I'm glad you found it useful. I'll add the requests to the queue!
AWESOME AS USUAL , THANKS BRO.
no prob! thanks for watching!
Hey thanks for the great video! Subscribed and liked! I managed it to code the graph with your tutorial. Now I am able to visualize my data from a selfmade smart pH-Meter. But I got one question: how to set up a button, to stop the datamesurement, to behold on the graph?
Thanks for the sub! I'm glad you found the info useful. To set up a button you need to add HTML code. Then, to make it start/stop the measurement you need to add JavaScript. JavaScript can tell both the ESP8266 and the Graph to start/stop the measurement. I'll try to make another video in the near future including these additional settings!
is there a way to have multiple sensors humidity and such. i keep getting undefined when i add an extra string for humidity.
how would you change the code if your were using the analog reading from pin A0? ah 2hours later got it working with the analog value.
Wow, 'twas a great tutorial. i love this but my nose is bleeding. i will just go back to this later. For nowI will just be contented with blynk and espwebserver for now :)
Haha, thanks for the compliment. It takes a little time to get used to everything that's involved but it'll 'click' before you know it!
nice one!
i wonder when your gonna start setting up a project of integrated iot programming like using restful/mqtt/ws
o btw dont you have an email address?
Always one step ahead, Ali. I like it! The next video will show how to deploy a web app on Heroku for precisely this topic! Contact info on acrobotic.com/ :)
@@datasith just inquiring on this, has this video been relseased yet?
compiled and run in my new york penthouse, doesnt work at my off grid cabin in the rockys.
What is the best humidity sensor? I saw many of them like SHT30, DHT, BMP and I got confused. Also can the SHT30 Shield work together with OLED Shield (For D1 mini) from wemos, as both of them connect to D1 D2 pins (if I change the pins manually)? Another question please, if I want to use a physical button, do I just connect the gpio with gnd(or 3.3v) directly or I need a resistor?
Thanks for watching my vids.
1) SHT30 or BME680 are the most accurate. The best way to compare all of them though is by looking at their datasheets.
2) Yes they can work together as they'll have different I2C addresses (I2C is a parallel bus so it's okay to share pins as long as the devices have different addresses).
3) You do need a resistor othewise you'd connect 3.3V directly to ground when actuating the button, however, you don't need a resistor as you can use the internal resistor (e.g., using mode INPUT_PULLUP) on the GPIO.
Great Video. I wonder if its gonna work on DHT11 sensor. Thank you
yup, this should work with the dht11 or any other sensor, with the only difference being how to obtain the measurements. hth!
Great job! Could you show how to set x axis min/max values and datapoints should fill chart from left to right side. Thanks!
Heya, thanks! I'm not an expert on Chart.js, but their documentation is great:
www.chartjs.org/docs/latest/
HTH!
Ok so now i have another query . What if on a webpage i have 2 values , and i want both of the values to get updated at a different rate . How do i do that . Do i create 2 json and 2 getData() functions or like what is going to be the procedure?
interesting. i would do it with one file and identify each value (e.g., "sensor1: ____", "sensor2: ____"). and i would pass a parameter to getData(which_data_to_get) to indicate what device to get data from. hth!
Could the esp8266 serve the webpage using data that it gets from a master uart or spi device ?
And Is it possible for the Esp8266 to serve NuxtJs or ElectronJs style webpages.. or would it require other server-side support packages making it virtually impossible?
Finally, any thoughts on using VsCode/PlatformIO instead of the ArduinoIDE?
yup, in your handler function(s), you can first get the uart/spi data, and then create the html on the fly with it. a little more involved is to serve the data from a dedicated route, and use javascript on the client-side to fetch the data as needed using AJAX or websockets.
sorry boss, i'm not familiar with nuxtjs/electronjs. client-side you can do anything, and as you point out, server-side is complicated as you need to have a version that runs on the SoC. even the web server capabilities themselves are very limited. i'm also unfamiliar with VsCode/PlatformIO. i've never needed more than the Arduino IDE, tho i see the benefits of some alternatives!
Hi! It is a great video! I am working on a power monitor with chart.js, but I will use it as a softAP so I can't use the link for the script. Do you have another tutorial with chartjs without internet? Thank you for your time, producing this video and help people is amazing!
I am also trying code as AP couldn't found any tutorial. Did you get any idea further.
I have a question if I do not open the crhome browser to run the client and the ESP8266 is running, as I do so that the page that is inside the memory of the ESP8266 is executed without it being in the browser?... thanks
No, the page only "executes" when a client (like the browser) requests it.
Excellent presentation. however, there might be scenarios where we don't want internet connection. in that case, offline charting library would be helpful. an example, esp in wifi ap mode without requiring external accesspoint.
Good point. It gives me a good topic for a future video on storing the charting library in flash memory. Thanks for watching!
Yes, please make that video, that would be very educational! Thanks!
Thanks for this super useful tutorials, could you show us how to access our esp8266 or esp32 anywhere in world? I mean how do I get the public IP of my esp32 to then get access to it wherever I am?
Lol, this is certainly a highly requested topic. I'll start posting projects that show this, starting this week. Stay tuned! Also, thank you for the kind words, I'm happy that you like the vids!
Great Work Cisco Keep up .. the url for the project code isnt working
Sorry about that, Chahid! The repository is now updated, and the code is available. Thanks for the kind words!
great job and love your videos :)! I am trying to do the same but in this case the ESP8266 will not have internet. How do you add the library directly in the board instead? Thank you! P.D. maybe you could lower a bit your background music ;) but is nice!
Hi, Victor. Thanks for the kind comment. I messed up the audio on this one and the background music is a bit loud. Newer ones are better, but let me know what you think.
I'm planning on doing a video to give out the code for doing this. You need to store the library in flash memory (see my videos on SPIFFS) and add a route "/chart.js" that uses filestream to serve the file when the route is accessed. Then, in your HTML you can load it from "/chart.js" instead of the CDN's URL. Hope this helps!
Hi, I saw this comment and tried it! works perfectly @@datasith
How to include javascript library without link? Without internet connection it wont work, so how to make js script work in both cases (online and offline)?
If I send high frequency from a Function generator to Webserver, will it successfully send this?
Frequency 100-200kHz.
thank you so much. may i know which library to include for esp32 + dht11?
Heya, Jagathes. Most libraries made for the DHT11 should support both the ESP8266 and the ESP32. Let me know if you have any troubles!
@@datasith thank you so much. I've made it working. 👌🏻
Sorry to ask, what should I do if i want to create more lines to display more data?
No worries, thanks for watching my video! The examples for using the graphs from Chart.js are here: www.chartjs.org/samples/latest/
Try to modify the JavaScript in the HTML to get another line that displays the same data. Once you've done that, try to generate on the ESP8266 a separate data source in a different route. Lastly, modify the JavaScript once again to use the new data source.
HTH!
Hi. I did this, and also added a digital output to turn on an led. But I get a bad analog sensor reading when I activate that dig output, can you help me?
Hmm, that's strange. Unfortunately I don't have the time to look at the code in detail. Remember to add a small delay in between analog sensor reads. HTH!
Any thoughts on using WebGL for the GUI and webUSB to interface to the hardware? For example, I don't have a webserver/websockets running on the microcontroller but I'd still like to control it via the browser!
Not sure all the differences, but would another tool SVG, Canvas, etc, be more appropriate than WebGL to implement the GUI?
medium.com/front-end-weekly/websocket-and-data-visualization-be3613c880db
Hey, Ben. I haven't tinkered with WebGL myself. You can use pretty much anything to build the GUI as that piece of code runs on the client's computer. I'm assuming you're loading them dynamically of course, but you could also have static versions on flash memory (you'd have to worry about size, but you can always add an SD card).
As for webUSB, I'll add to my list of things to learn about. If you have a good reference, please let me know!
Hello, please help me with the following. What is the websockets url? i need to send this data to labview for post processing and i am using an example .vi file which asks me for websocket url. please helpp
The ip address of the ESP8266 (including the websocket port) is the URL. I haven't used it with LabVIEW so not sure if it'll work. Let me know if it does!
How should I change the label color of the chart
www.chartjs.org/docs/latest/general/colors.html
Won't this wear out the flash with all the continuous writes?
Good catch. Yes it will! If you want to use this yourself, it would be better to store some data before doing each write.
Did anyone know how can i get around 6Ksps speed on the esp32 within the arduino frame?
Either write your own functions within the Arduino environment or use the SDK.
Is it possible with raspberry pi?
I tried accessing the webserver in AP mode . If i access it from 1 device it works fine . The moment i try to take data on more than 1 device the value updation stops . Like it does not show the same value on all the devices i connect to
it might be a timing issue to to the update frequency. i made some changes to the code, let me know if this works:
github.com/acrobotic/Ai_Demos_ESP8266/blob/master/bmp180_gui/bmp180_gui.ino
@@datasith Ok so i tested the code and i found something interesting, you're actually right . If you need to use a faster update rate you cant access the values on more than 1 device efficiently unless you run the cpu at 160mhz. When i did that higher update rate did not gave me any problems with more than 1 device. So basically the libraries are not that efficient to handle more clients with high update rate at low clock speed . It simply goes into restart . Also another reason which i understood for that is the ticker library. The ticker library uses one of the timers which hinders the wifi layer of the esp . I hope my findings will help you .
16:00 What given point does the browser get slower? Can I show thousands of points? What is the limitations?
Depends on RAM (mostly) and general capabilities of the client machine. That's why I start popping off old data. I encourage you to give it a try, you don't need any hardware, just generate random data with JavaScript on a script running on your computer, and use your browser to run it. HTH!
If i simply want to see the analog values on the webpage using this . So how do i modify the code to do that ?
you can just change how you get the sensor reading in the code, and you're good to go. so instead of `bmp.getTemperature()` you would have `analogRead(your_pin)`. HTH!
@@datasith That i did but the data is coming in the console.log not in the webpage. i dont want any fancy graph or anything . A simple webpage which shows changing values .
Hello, when i try to use this websocket. it is printing 10 values at the same timestamp. this event causes a crash of the esp. can you help me ?
Follow the code exactly as shown in the video, thanks for watching!
Does it also work with esp32, or should I make major changes?
Haven't tried it, but the libraries run just the same on ESP32 (with minor changes to the function names) so I don't see any problems!
Is it possible to do this in multiple sensor and plot then in one graph? Great video anyway :D
Yes it is! I'm planning to work on a video to demo the BME-680 (temperature, humidity, pressure, and VOC sensor). I will use this websockets codebase as a starting point, and plot all four measurements in a single graph. Stay tuned!
@@datasith YAAAY! thanks! can't wait for your next video
@@datasith You can't now use AsyncWebServer's own implementation of websockets, which won't require additional WebSockets library and extra port creation.
Hi, can I use this code to receive data from an adc external to esp ?
Greetings from Argentina.
Un gran Saludo! Sorry for the late reply. Yes the code is similar with the exception of using the corresponding library to get the data from the external ADC. HTH!
could you share the circuit diagram ?
Master, ¿cómo se podría acceder al servidor embebido en el ESP8266 desde un browser que se encuentre fuera de la red wifi?. Es decir, hacer que el websocket se envie hacia cualquier cliente (browser) en internet?. ¿Tienes algún video relacionado?. Saludos.
sir, you are best ! Can you send me the links of library for ethernet enc28j60 with arduino mega to send sensor data with websocket
Use the library manager.
Is the source code going to be available for download?
It already is, check the video description :)
I am using a bmp180 sensor connected to an ESP8266. I see noise on the chart. I do not understand why so, are there any ideas? electronics.inf.ua/bmp180.png
Double-check your wiring and power supply. Next, make sure you give the sensor enough time between samples.
Hello, can you show, how you work whith external interrupts like attuchinterrupt() and + websocket server like that video. I have crush and restart esp2866 ;(
I will add this to my list of videos, it's a great recommendation, thank you!
@@datasith Thanks, bicouse i found some troble in http.handleclient() (ESP8266WebServer. h) i dettachinterrupts before this function and attachinterrupts after, on esp2866. But in this time i loss my interrupts...
How do I read websockets data from sensor in python?
I'll try to make a video about it in the future, thanks for watching the vid!
Como podría agregar un fondo?
Cisco, me ayudas: al compilar y pasar este codigo a wemos d1 mini, genera un error de memoria y la pagina no funciona. El problema se produce con Ticker. Como lo solucionaste, que libreria usaste?
Este es el error:
18:41:15.525 -> Exception (0):
18:41:15.525 -> epc1=0x4000dce5 epc2=0x00000000 epc3=0x00000000 excvaddr=0x00000000 depc=0x00000000
18:41:15.525 ->
Aqui otro error al subir el codigo....
18:59:58.208 -> Panic C:\Users\isond\Documents\ArduinoData\packages\esp8266\hardware\esp8266\2.5.0\cores\esp8266\core_esp8266_main.cpp:103 __yield
Che, Manuel. Apenas veo este comentario. Creo que ya te lo mencione, pero cualquier duda mandame un correo. Saludos!
I can not access the Web Page with the certain code , while with other codes I can , does anybody encountered any problems?
What codes aren't working?
@@datasith Hi ACROBOTIC and thank you very much for the immediate response . The program you are making on that video it doesn't work in my wemos (even with the first test you are doing in the video) . I have put a println( IP) in the void loop as well and I see that the IP doesn't remain the same. After a while it becomes 0.0.0.0.But successfully connects at the network . In a few words I can not access the website with the given IP address. While with other programs I can , I wondered if using mdns class would would help things. But I will check again if I am doing anything wrong. Thanks a lot again
@@datasith Actually I am trying to do the same but with an analog input with a potentiometer. I placed the analogRead(A0) at the void loop and the connection fails. Do you have a specific idea on how to do that simple thing ( to display the analog input instead). Thank you
how to fix packages\esp8266\hardware\esp8266\2.6.0\cores\esp8266/core_esp8266_features.h:88:1: error: unknown type name 'uint32_t'
this is a known Arduino bug. for a solution see for example: github.com/Links2004/arduinoWebSockets/issues/495
hello brilliant
i wish u answer me please... i downloaded the Chart.min.js and uploaded to esp12e via esp8266 sketch data upload from tool menu ... etc , my prob is i do not know how to change the source code like