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....
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.
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!
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.
@@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!
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!
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
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?)
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..
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 "
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!
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!
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!
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 .
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.
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!
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.!!
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
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 .
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!
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!
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!
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.
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!
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)?
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!
Hello, can you show, how you work whith external interrupts like attuchinterrupt() and + websocket server like that video. I have crush and restart esp2866 ;(
@@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...
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!
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
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 :)
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
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/ :)
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
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.
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!
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!
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!
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!
@@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
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!
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 You can't now use AsyncWebServer's own implementation of websockets, which won't require additional WebSockets library and extra port creation.
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!
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
Yes. The easiest way is to save the data in comma-delimited format. You can download it, change the file extension to .csv, and open it with Excel. HTH!
@@datasith And can I ask you something else please ? How would I do it if I wanted to add another value form another analogue input even it is barometer or even a potentiometer? How should I amend the code ? Thank you
@@George-jg6ry fortunately, the modification is straight forward. You just need to add it to the measurement string: String json = "{\"temp\":"; json += bmp.readTemperature(); json +=\",pressure\":"; json += bmp.readPressure(); json += "}"; Then, to plot it you can add another dataset to the chart. Check out the examples on the Chart.js website. HTH!
@@datasith Hi Acrobotic , I am trying to insert a a second value to the json string which is an int , and the way you proposed to do it is not geting compiled by the arduino . I have search and tried many ways to do but it doesn't work. Do you know the proper way to do it in order to display on the console {temp : 456 ,temp2: 456} for example ? Please help me on that and I will become your patreon ! Have a nice day
Is it possible to know the IP address without the serial monitor? Or like can I specify what IP address I want the router to assign my device in sketch?
You have a few options: - Return the IP address by including it as part of the server.send(). The problem is that you need the IP address to begin with. - Use mDNS and access the device by a domain name like my-esp8266.local - Configure the router to assign a specific to the ESP8266 using its MAC address - Operate the ESP8266 in combined Station Mode and Access Point mode. It'll access the internet, and it can use its own IP address on a separate subnet than the router. The problem is that you'd need to connect your computer to the ESP8266 WiFi, and lose internet connectivity on the computer unless you have an additional wired connection. You can't specify in the sketch what IP address you want the router to assign. That process is controlled by the router. But, you can configure the router to assign a specific IP address to the ESP8266 using the router's configuration settings.
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....
This is what you call a brilliant tutorial with detailed explanation of each line. Well done.
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.
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!
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!
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!
Excellent video! Probably the best spend 18min for arduino on youtube.
Love that you can type in all that code and never have to debug it😜
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!
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!
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!
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...
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?)
Awesome video bro, thanks for coronating us with glory again.
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..
Excelentemente bien explicado te felicito y aguante Argentina !
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!
Great. Detailed explanation I'll try it with an async webserver
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 "
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!
ALL WORKING, THANKS!!!
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 :)
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!
Thank you for this great video, I still have a question : why did you chose port 81 instead of 80 ?
love the way he writing code.. part after part..
Congratulations!!!!! Your work is amazing ...
Thanks for the kind words, I'm glad you find it useful!
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!
compiled and run in my new york penthouse, doesnt work at my off grid cabin in the rockys.
Congratulations, how can i save the data or record the values for an especific time interval?
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 .
Awesome video. Great example of using websockets.
Thanks for the kind words, Michael. I'm glad you liked it!
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.
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!
is there a way to have multiple sensors humidity and such. i keep getting undefined when i add an extra string for humidity.
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!
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.
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. 👌🏻
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!
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.
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 .
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!
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!
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!
Wow, great content! Thanks for making it straightforward!
heya, bill! i'm very glad you found it useful. thanks for the kind comment!
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.
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!
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!
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)?
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!
Do you really need background music in your videos?
Yes.
@@datasith no you don't need, it's annoying and distracting.
“yeah, well, that’s just like your opinion”
🎵 now, go away, be a troll elsewhere 🎶
@@datasith sure i will, but I tell you this, viewers don't need you as much as you need them.
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!
This is the EXACTLY what I need
Amazing tutorial. this is exactly what i needed! congrats!
Glad you found it useful!
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...
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!
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
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
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.
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!
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!
If I send high frequency from a Function generator to Webserver, will it successfully send this?
Frequency 100-200kHz.
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?
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.
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!
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.
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!
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!
Is the source code going to be available for download?
It already is, check the video description :)
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!
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!
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!
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
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!
Awesome tutorial! You the best!
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!
very informative. Keep the vids coming.
Thank you! I'm glad you find the content useful.
could you share the circuit diagram ?
Is it possible with raspberry pi?
Does this codes work on Arduino Uno? Please I need this for my thesis.
Arduino Uno doesn't have a Wi-Fi connection which is essential for everything in the video. Best of luck with the thesis.
@@datasith I got the esp8266 wifi module to connect with my arduino uno that acts as my web server.
Can I have the codes sir for this tut? I want to study it for my thesis. Please
Thank you
@@reymartmilitante9390 c'mon make at least some effort. The code is linked in the video description.
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!
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.
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
Excellent! 👏👏
Thanks. This video is awesome. Love it.
Thank you for the kind comment! I'm glad you found it useful!
Brov, you're a life saver. 😉
No problem!
Como podría agregar un fondo?
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.
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.
exelente tutorial, excellent.
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
Can you send it to excel?
Yes. The easiest way is to save the data in comma-delimited format. You can download it, change the file extension to .csv, and open it with Excel. HTH!
Great video!
Thank you!
Thank you very much Sir........
you are a legend sir
Thanks for the kind comment, my friend. I'm glad you find the content useful!
Thx! Interesting! 🤔🫡
Impressive!
does anyone else has problem compiling timer.attach () ? personally I cant !
Hmm, weird. Double-check the code, it's working on my setup. Thanks for watching!
@@datasith And can I ask you something else please ? How would I do it if I wanted to add another value form another analogue input even it is barometer or even a potentiometer? How should I amend the code ? Thank you
@@George-jg6ry fortunately, the modification is straight forward. You just need to add it to the measurement string:
String json = "{\"temp\":";
json += bmp.readTemperature();
json +=\",pressure\":";
json += bmp.readPressure();
json += "}";
Then, to plot it you can add another dataset to the chart. Check out the examples on the Chart.js website. HTH!
@@datasith Hi Acrobotic , I am trying to insert a a second value to the json string which is an int , and the way you proposed to do it is not geting compiled by the arduino . I have search and tried many ways to do but it doesn't work. Do you know the proper way to do it in order to display on the console {temp : 456 ,temp2: 456} for example ? Please help me on that and I will become your patreon ! Have a nice day
Is it possible to know the IP address without the serial monitor? Or like can I specify what IP address I want the router to assign my device in sketch?
You have a few options:
- Return the IP address by including it as part of the server.send(). The problem is that you need the IP address to begin with.
- Use mDNS and access the device by a domain name like my-esp8266.local
- Configure the router to assign a specific to the ESP8266 using its MAC address
- Operate the ESP8266 in combined Station Mode and Access Point mode. It'll access the internet, and it can use its own IP address on a separate subnet than the router. The problem is that you'd need to connect your computer to the ESP8266 WiFi, and lose internet connectivity on the computer unless you have an additional wired connection.
You can't specify in the sketch what IP address you want the router to assign. That process is controlled by the router. But, you can configure the router to assign a specific IP address to the ESP8266 using the router's configuration settings.
@@datasith Thank you..