IoT - real time temperature chart in Webbrowser with ESP32 and WiFi

День тому

In my series on ESP32 and Wifi I covered how to show live data in a web browser. As per request I provide a specific example in this video and show real time temperature readings from a DHT22 sensor in a webbrowser using an ESP32.
Github:
github.com/mo-thunderz
Direct link to code:
github.com/mo-thunderz/ESP32W...
The underlaying code for chart generation is described here:
• ESP32: Plot graphs thr...
If you want to follow the complete series on Wifi communication on an ESP32 I recommend starting here:
• ESP32: WIFI Basics and...
Chapters:
0:00 Introduction
0:40 Reading out temperature sensor
1:22 Download code basis for implementation from GitHub
1:48 Add temperature sensor code to code basis
3:00 Send temperature information to Web Client
5:35 Update Javascript to receive temperature information
8:45 Upload and test code
9:44 Adding labels to the chart

КОМЕНТАРІ: 14

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

You explain things very well and make it easy to understand. Can't wait for the next one! Thank you

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

Thank you very much!

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

This has been an informative series, well presented. I have been doing just this with your #4 code, converting it to read an AHT10 sensor for Temp and Humidity. I think my next step is to have sort of data storage and allow various spans of time to be displayed. Keeping the slider as the picker to vary the amount of time between readings is another usefull feature for my purpose. Thanks!

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

Thank you for your feedback, excellent usage of the slider!

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

I always love your videos ..very informative and helped me alot for my projects. keep it up

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

Thank you very much for your feedback, really appreciated!

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

Very good your videos, could implement the triggering of digital inputs and button triggers via websocket with a web interface

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

Yes, will do in my next video - stay tuned

@WikkidDJ 8 місяців тому

Hello and thank you for your vids. I'm new to coding and it makes me feel lost very easily. I see the same types of projects that do the exact same things, yet the code can be written several different ways. I tried plugging in parts from other sketches that have worked to get the sensor readout to be in Fahrenheit but it just exit's the upload before it flashes. Your coding is different that others, better I'd say cuz I can almost read the progression as the lines go on. But I'm still stuck at noob status unable to figure out this minor Fº conversion or formula. How can I get itto read out in Fahrenheit? Looking forward to future videos from you. You got my sub! Dan

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

Hi Dan, Great to hear that my code is working for you. The temperature is read in the main loop with the following comment: dht.temperature().getEvent(&event); if this is successful, the temperature is available as a float value in event.temperature As you already noticed this is in Celsius. To convert this to Fahrenheit, you can do: float fahrenheit = (event.temperature* 1.8) + 32; With this statement we defined a new float variable "fahrenheit" that contains the temperature in fahrenheit. We then use this new variable as sensor variable, so this: sens_vals[ARRAY_LENGTH - 1] = round(10*event.temperature); should be changed to sens_vals[ARRAY_LENGTH - 1] = round(10*fahrenheit); NOTE: I am traveling and dont have a setup here to test this. I am fairly confident it is correct though. Please let me know if this worked for you. Regards, Sander

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

MoThunderz, where do I download the updated Javascript data file for this sketch - ESP32WiFiTenp Sensor.ino??

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

Hi Paul, I am not sure I fully understand the question. The .ino sketch is on my github and it includes the javascript data files. The .ino file is here: github.com/mo-thunderz/ESP32WifiTempSensor/tree/main/Arduino/Esp32WifiSensor/ and the javascript files are in the data subfolder: github.com/mo-thunderz/ESP32WifiTempSensor/tree/main/Arduino/Esp32WifiSensor/data