Vložit
- čas přidán 23. 02. 2023
- Adding a temperature sensor reading onto a web page, two methods.
► PCBWay $5 for 10 pieces www.pcbway.com
Don't start with this video!
PART 1 shows how to create a landing page on the ESP32 along with OTA (Over The Air, wireless) updates and can be found here • #258 ESP32 Web Pages A... with the code you need too! 😉
And whilst we're on the subject, Part 3 will be available soon which brings it all together and shows the full (and final, improved) ESP32 webpage. But that's for another time. Keep tuned (and subscribed).
All the code and more in my GitHub: bit.ly/GitHub_for_Part2
Still here? OK, let's get some values on screen, whether that be an integer value or a string, both of which I use in my projects. There are, of course, many routes to Rome and I show two of them here. Quick and dirty? Or slick and maintainable? Your choice!
We'll get a value onto the screen (from a pseudo-variable in our ESP32 code) and discuss two ways on how to do that. Finally we'll consider whether what we're doing, that is putting the HTML code into our C++ code is the best way of doing this - or is there another way we could explore (in part 3 perhaps)? Oops, spoiler alert! Too late!
Software
► Rob Tillaart's simple DS18b20 library (for a single DS18b20 per μController pin)
github.com/RobTillaart/DS18B2...
► Pi Hit Waterproof DS18b20
thepihut.com/products/waterpr...
► 5 x DS18b20 eBay Seller umtmedia
www.ebay.co.uk/itm/265498296922
► Pointers in C++
www.cpp.edu/~elab/ECE114/Poin...
► StackOverflow clarification (by others) into pointers & references used in my code
bit.ly/pointerToString
HTML
► W3Schools HTML tutorials
www.w3schools.com/tags/tag_bu...
► Location of Arduino Partition descriptions (.csv files)
C:\Users[Your Name]\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.5\tools\partitions
NOTE: the ESP32 version (here: 2.0.5) name might be different. Just choose the highest number you have.
Other Stuff
► List of all my videos (Special thanks to Michael Kurt Vogel for compiling this)
bit.ly/CZcamsVideoList-RalphB...
► If you like this video please give it a thumbs up, share it and if you're not already subscribed please consider doing so and joining me on my Arduinite (and other μControllers) journey
My channel, GitHub and blog are here:
------------------------------------------------------------------
• / ralphbacon
• ralphbacon.blog
• github.com/RalphBacon
• buymeacoffee.com/ralphbacon
------------------------------------------------------------------
My ABOUT page with email address: / ralphbacon - Věda a technologie
I finally learned why some of my projects don't work at first try....they didn't have the proper diggity boo @3:15. Have a great week!
Glad I could help! I find many other things help to make it tickety boo (en.wiktionary.org/wiki/tickety-boo ) too!
Great video! Looking forward to part 3 👍🏻
Coming soon!
I've just started using web pages as a way to transfer info to and from my esp(32 & 8266), You have a unique way of teaching these principles and I cannot wait until you get Part 3 out. Thanks for all your video, I've been watching you for several years and enjoy and appreciate each video.
Wow, thank you! Nice to see long-time subscribers get value from my videos.
Great intro to Web related pages on the ESP32, looking forward to your future tutorials on this subject.
More to come!
Enjoyed! Informative and a great way to understanding when everything in one place and a simple view of all the things that get split off later when it's no longer simple, but a full blown site or app. When what you are making is a '1 off' this does it succinctly.
Glad you enjoyed it, Scott. Part 3 makes it easier to maintain (as the expense of more development effort, I guess). And more! Stay tuned (and subscribed).
Really great videos, looking forward to the third part. Thank you Sir!
I'm very happy you're finding the topic interesting.
Thanks for the useful guide, though i did get a bit lost in the depths of the strings & pointers. I need to re-watch whilst awake.
I've rewritten and simplified that function so it no longer uses a pointer, just passes by reference, as we should be doing with C++. Using pointers is deffo a C language thing.
The meaning of life and everything🙂
Squeak!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
As always, Barney, as always.
Great content Ralph. I'm looking forward to more OTA tutorials!
More to come!
Looking forward to the next video, I'm pushing the storage space on my ESP air pollution sensor project with a few simple web pages.
If SPIFFS isn't enough, add an SD or TF Card.
@@johntoe6127 Yep, that's my next plan.
Part 3 will cover how to put the HTML into LittleFS, but you can also switch to SD card without any (real) code changes.
If you have a ESP32 WROVER module (ie with PSRAM) you can copy the SD card files into PSRAM for speed, if you need it. Not something I've done (yet) but an option, for sure.
I will buy an esp32 and follow the videos to learn more!
Thank you for this series :-)
Great to hear! Get one that follows the official DEVKITC-V4 (38-pin) or DEVKITC-V1 (30-pin) format to make life easier.
A few months ago I asked you about having temperature broadcast on a WIFI page and you kindly replied with a suggestion to do this very thing so I'm really looking forward to future videos.
Having multiple temperatures displayed at the same time is something I need for a couple of projects I have on the go so please please be sure to cover this.
Thanks again. 🙂
I'm glad you're finding these videos pertinent to your requirements, Ali.
However, do remember I'm not showing the code on how to actually read the temperature from the DS18b20 (or whatever it is that you are using) as that is not relevant to HTML pages. I've assumed you can do that bit already (and I briefly described how to do it with the DS18b20).
Next video in this series shows how we can change the target temperature by reading a value from the screen. Keep tuned!
You are always amazing.
Yup
Thank you so much 😀
Welcome BACK mr. Bacon :)
Thank YOU, Mr Ivarsson! 😂
Again, very good content. That helps me a lot on my way to create better code for my ESP32 projects. Hoping to see more in future. Maybe some graphics?
Graphics? You mean animations? Or just pictures? Diagrams? Anyway, don't miss part 3 in a future video!
@@RalphBacon For example, I would like to use a picture of a nice old gauge (artificially created) on a webpage and its moving hand is realized with html. I did something similar with EXCEL. In case you are interested, see episode "Heat energy savings predicted ..".
Cheers Ralph. :)
No worries, thanks for dropping by!
Easy way to seal stuff is to use glue filled heat shrink. Works just like the regular stuff, but has a thin layer of hot glue between the rubber and whatever you shrunk it onto. It makes the connection effectively weather proof. The only drawback is that the heatshrink is stiff after shrinking. And of course, it is more difficult to remove if you need to. It works excellent for outdoor stuff, or even as tougher protection than regular heatshrink provides.
Yes, pretty much as I described it in this recent video: czcams.com/video/AFbciSsWr_M/video.html
But it's good that great minds think alike!
@@RalphBacon You have so many excellent videos, I hadn't seen that one yet since I only came across your stuff yesterday. Keep up the excellent work!
Don't worry, you only have about 250 videos to watch! 😲
I did the same for my nixie tube clock, where I’m doing the whole coding thing in ESP8266 IDF just for fun. So building the web server so you can enter the wifi credentials was a bit of a pain as i had to parse the page each time it was called to add all the wi-fi's it could see.
One day when I’ve completed the code I will do a video on it, as there are not that many videos that avoid using the Arduino IDE for wi-fi etc.
Also i found that i had to parse the returned password as the output from the web server did not seem to match the characters’ entered by the user. They had to be tweaked, letters and numbers seemed to be ok but the others seemed to have different encoding to plain asscii.
I think simple videos that show alternatives to the Arduino will do well.......cheese !
"...I’m doing the whole coding thing in ESP8266 IDF _just for fun_ ." I bet your nights out are a real blast!
Odd about the returned characters; they should be standard ASCII characters unless you are using a strange character set (which I bet you are not). I may check this out.
@@RalphBacon Hi Ralph, it's more fun. I always been one to want to look behind the scenes. it's not so much what it can do but how it does it.
I think this comes from working on uP before computers became a real thing. we were writing code on a vax before moving on to a microVax, before the first PC came common in our RD.
these are the char's that i had to parse
' ', //0 space is 32 dec 20 hex
'!', //1 exclamation mark
'\"', //2double quote
'#', //3 number
'$', //4 dollar
'%', //5 percent
'&', //6 ampersand
'\'', //7 single quote
'(', //8 left parenthesis
')', //9 right parenthesis
'*', //10 asterisk
'+', //11 plus
',', //12 comma
'-', //13 minus
'.', //14 period
'/', //15 slash 47 dec 2F hex
':', //16 colon 58 dec 3A hex
';', //17 semicolon
'', //20 greater than
'?', //21 question mark
'@', //22 at sign 64 dec 40 hex
'[', //23 left square bracket 91 dec 5B hex
'\\', //24 backslash
']', //25 right square bracket
'^', //26 caret / circumflex
'_', //27 underscore
'`', //28 grave / accent 96 dec 60 hex
'{', //29 left curly bracket 123 dec 7B hex
'|', //30 vertical bar
'}', //31 right curly bracket
'~' //32 tilde 126 dec 7E hex
Not sure why yet. but a lookup table worked so i went with that. i may have to look deeper in what HTTP_GET method is doing.
The idf is much better documented than the arduino core.
Thank you sir .
Most welcome!
I've bought those pre-wired temp sensors. They are waterproof as the actual sensor and wires to it are encapsulated in the metal tube with epoxy.
I've used them in chlorinated pool water with no issues.
There has been talk that the cheap ones aren't well calibrated.
Good to know, Daniel. Not all sensors are equal it would seem. I had one that was most definitely not sealed (the sensor came right out of the tube) but maybe I really did buy cheaply that day.
Yes, calibration can be an issue. The discrepancy is not linear so it's not just a matter of deducting, for example, 0.5 degrees off the reading. Perhaps the more expensive versions are better calibrated.
@Ralph S Bacon I believe the calibrated ones are significantly expensive.
If the actual sensor is in a metal tube and not encapsulated in epoxy or similar, that could cause inaccuracies or delays to accurate readings after a temperature change since you're then insulating the sensor.
Really enjoy your videos and your detailed explanations. The ESP32's are great and I'm just getting into them, I've bought a couple of ebay to have a go at creating parameter tables for a generic controller rather than using displays, is this something you might have done or plan to do?
Glad you like them! But what do you mean by "...creating parameter tables for a generic controller..."?
@@RalphBacon Nothing specific, just speaking in general terms if you were to create a table that held PID parameters for a temperature controller for example.
Just use esp websockets, client loads html once, then receive only one (or many) variable from ESP, both ways, JS in html grabs variable from ESP and puts in propriete box in WWW, when user tap some button JS send this action back to ESP. When ESP websocket server has couple client connected (four is about max in ESP) from PC/smartfon/tablet they interact betwen ech other too, when user one tap button ON and see change state on web, rest see that too, immidiently.
Yes, I'll be using that on my next web-based project; it is simple enough to set up, but the amount of coding on both webpage and device can overwhelm an inexperienced user.
Enjoying this series Ralph. I have a question and a request please.
First what is the ESP32 dev board you have there with the external antenna socket?
But second, could you do a video on setting up VS Code to program the ESP32 please? I know there are some out there but I think your style might be more helpful
Hmm. Lots of requests on how to set up PlatformIO on VSC. I will (re-)consider. 🤦
The board I am using (more on this in a future video, when it is important) is an ESP32-DEVKITC-V4. Now this has 38 pins (6 of which you must not touch, as they being used to access the on-board flash) and comes in two formats: with and without that IPEX connector external antenna.
Unless you need the range, go with the antenna-less format. It's a good board and I have several. You can even solder the ESP32 module onto preassembled boards, which I also have. More of this later, too.
I'm currently considering the 30-pin version (DEVKITC-V1) which loses only one GPIO (D0) compared to the V4, but is shorter (no unusable pins) so more compact. But that's for another time.
Well explained, and I used to code it this way...but possibly a micropython and microdot (mini-version of python flask) approach is easier and more flexible on the esp32 or pico W using Thonny or VScode?? Great content, and not to detract from your excellent explanation. Different strokes for different folks? Thanks!
Horses🏇 for courses, is what I say! I've demoed Thonny use, and whilst quite capable it's not my preferred development platform (and don't get me started on the way Python indents code for actual syntactic _meaning_ 😲)
Good video, thanks.
If the next video in this series covers the esp32 serving a web page from a sd card, there is one problem you might cover that I have not been able to solve. When displaying the page from the sd card and having the cpp program add a variable to the page it always goes to the top of the page. I am using a mega with an ethernet library and therefore transferring data with client.print
I have an esp32 serving up my home automation web pages very nicely (from sd card), but alas it probably does not have enough program or dynamic memory to run the cpp program..
"It always goes to the top of the page". Hmm.
I'm not 100% clear on what the issue is. When you (re-)display an html page, it will always display it from the top.
The display will not start (scroll to) half way down the page unless you put an anchor there (page anchor, not a link, although you can use that too) and then, in the page output, tell the browser to navigate to that link. Is that what you mean?
@@RalphBacon Thanks Ralph. I use a href to switch between pages, but had not considered it for use in the cpp program to inset something into a certain point in the page.
Ralph, so glad I (actual name Mark Bussey) found your CZcams videos a few weeks ago. Great job on them all! I have a question relating to a comment you made in a previous video, but wanted to add my question here so you would see it for sure. You mentioned that several people have said that the String library possibly has memory leaks, and we should stick with std:string instead. What do we do if we're using someone else's library but it uses the String class?
Hey, Mark (or should I call you Angus?) welcome!
Now, regarding the use of String (with a capital S) vs using string (lower case, part of the std namespace), let's not get too hung up on this.
Yes, the Arduino implementation of the String function does certainly fragment the heap memory space, turning it eventually into Swiss Cheese that does not allow the runtime allocation of a suitable contiguous block of memory for variables. Kaboom!
But you would have to be doing some serious String manipulation for this to happen, particularly increasing the size (length) of the String as a _new_ variable is created in memory for this, leaving the old memory available for reuse.
But even Espressif use String on occasion (rather than the more usual std::string), much to my surprise, so maybe their implementation works better than the standard one. Or perhaps their hardware (ESP32s) tolerates the heap memory fragmentation better because it is larger.
TL;DR the takeaway is that you can't really control what is in other (3rd party) libraries and will have to live with the consequences. But manipulating strings is something _you_ as a developer should be wary of and consider alternative ways of achieving your goal, such as allocating a buffer large enough up front for the largest size you will (ever) create - that way you can just fill the buffer (with a terminating null char \0) time and time again, and the variable will never be recreated.
I could go on (what do you mean, I already have 😲) but you get the drift?
@@RalphBacon Thanks for the deeper explanation. I'm not currently doing anything other than sending fixed length text strings via WiFi. So, I'm not going to worry about it in my current project.
@@RalphBacon Thanks for this!
Why not use sprintf() with the HTML code being in a C style string rather than that clumsy function to find and replace Strings ?
Yes, why not? Many ways to achieve the desired output, I'm sure. If that works for you...
But my "clumsy" function is, IMHO, a rather clean (black box) method of injecting values into a static page and works nicely when the page is in filestore. As you will see in Part 3.😉
BTW I've cleaned up that function now and it just looks so much better, no copying of strings involved!
Please repeat all after "Aaaaand welcome back !"........cheers.
Aaaand welcome BACK! Did I get it right, Andy? 😂😅🤣
🥰🥰🥰🥰😍😍😍
Quick off the mark or what? Wow!
Hello again. Nice code but in my IDE 2.0.3 I got this: D:\Documents\Arduino\260_esp32WebPagesOTA\260_esp32WebPagesOTA.ino:104:62: error: 'to_string' was not declared in this scope
updateParm1(&htmlOutput, "@parm1", to_string(specialValue)); I've tried many declarations but it doesn't help
You might have to
#include
Or
#include
I'll check it out later today when I'm back in the workshop and update this comment.
@@RalphBacon Did you find out any solution?
I have much the same error 'to_string' is not a member of 'std'
I've updated my Arduino IDE to 2.2.1 and still get
Compilation error: could not convert 'String(specialValue, 10)' from 'String' to 'std::__cxx11::string' {aka 'std::__cxx11::basic_string'}
Other people must also have this error? How do we fix it?
I need to grab the code and use it with the Arduino IDE (I'm using Visual Studio Code/PlatformIO which might make a difference). Stand by!
The disadvantage of this version is that the complete web page must always be transferred, even if the values have not changed. Wouldn't a javascript solution be better, which only reads the current values and updates them in the browser?
In the Real World we would use AJAX, I guess. The smaller the unit of transfer the quicker it loads.
But this is an Arduino-style (OK, ESP32) channel, for beginners, so we're doing it 1990's style. And we only have one user. Yourself.😲
Has Espressif EVER fixed their TCP libraries? I stopped bothering with them a long time ago because they were so incredibly badly broken, and plainly known to be broken. For smallish things they were OK, but if you tried to use them to serve larger content (like a large log of sensor data), they would hang/block/drop constantly.
I don't know. I've not had a problem but then again I've never served larger content of the type you describe. If you get an error it's worth logging with them as they do (eventually) respond and sometimes even fix things!
If the wi-fi isn't available, how would it send an error message saying "wi-fi not available"? :-D
When Wi-Fi is not available it automatically switches over to ESP-Telepathy. Obvs.
@@RalphBacon Oh yea. Sorry, my bad.
exit status 1
'to_string' is not a member of 'std'
As all developers say, "Works on my machine" 😁. Anyway, see here for more details: cplusplus.com/reference/string/to_string/
Lesson 4? How to click a button on the web page to trigger a function.
There's a part 3, for sure. With a button 😉. I'll add in how to trigger a function. That's if my memory/notes serve me well.
Big issue these values will only change by refreshing the page.
True, but I felt going down the route of websockets a bit too much for my viewers.
On some of my devices I put in an auto refresh after X seconds, which works well enough to monitor a particular sensor.
Perhaps I'll do a websockets video... one day.