Это видео недоступно.
Сожалеем об этом.
Tech Note 113 - 'Pushing' data to a client's webpage from an ESP Webserver using AJAX
HTML-код
- Опубликовано: 12 авг 2024
- Now you can create a webpage that shows sensor readings without having to refresh the clients screen. Using AJAX enables this to be implemented relatively easily. I have included some 'no sensor' required examples so you can try it out and of course an example for the BME280 too.
Code link: github.com/G6EJD/ESP-Webserve...
Parts: www.banggood.com/Wholesale-Ar...
Great and useful as always. Thanks Dave for the simplicity. As mheys said there are more "pro" approaches but this one is very handable and the majority of makers are hobbyist. Perfect fit to star Ajax embedded in an mcu .
Thanks for a great real-life example of using asynchronous JavaScript with a microcontroller!
Exactly what I needed! Excellent Video - Thank Dave.
Great video please keep them coming.
Thank you so much David! This is a treasure video!
Excellent!
I always want to do exactly this.
This is awesome. Thank you for sharinng..
Very useful. - Thanks for sharing!
Very useful. - Thanks for sharing.
Wow this is great! In my application I have to save in the permament memory of the ESP32 (I'm using virtual EEPROM) the hysteresis value of a termostat +/- 5°C, the value is sent to the ESP32 with a POST and then I need to display the same new value on the webpage and in addition I need to display the temperature changing form a sensor on the webpage. Thank you for your great example. Now I have to understand hot to send not just one data but an JSON through AJAX because I have quite a lot of data to send.
Many thanks, very useful.
I was trying to do this last night without much success. I woke up this morning and you have a solution for me.
Your blood is worth bottling!
Good to hear your finding it of value. Good luck in your projects.
Dave, you might not want to encourage his 'blood bottling' urges. ;-)
Thanks for sharing knowledge. For me you make very helpful tutorials. Hope you will make much more.
Thank you for your support as always it’s not easy or cheap to make these videos and yet I still get negative emails, but I don’t know why, I shall keep going for people like you who give me encouragement- the world is strange.
Hello, I am sad to hear that there are people who write negative emails on your toutorials. I hope that this does not prevent you from publishing many more such Toutorials. For me these are very helpful and I am sure that I am only one of many. Please continue....
@@G6EJDSorry to hear that I visited your channel. It contains very good tutorials and helpfull.
A good start, you can return all the sensor data in a single request using xml or json. It's still a pull from the web server though, you can use Websockets to create a true push from the webserver when a value changes, it's very efficient but a bit harder to develop.
It’s all a compromise when trying to make the example easy enough and relevant for most people who don’t really know where or how to start. I looked at various methods and in the chose this one.
A gem
Hello Dave, great video! but i have a little doubt: You talk about handle read function, but where do you define it? Thanks in advance.
Which read function do you mean the sensor? String temp = String(bme.readTemperature(),2);
Great. Would bè cool to push thé ntp time in the footer of thé Web page.. :)
cool video , how to do the reverse process : having a website loaded in the esp32 from which you would have an entry field where we could set a numeric value that could be used in the esp process. I ask that because all video that I have seen are about setting on/off led but never setting a dac (analog value) thx
Jean-Luc, you would need an html input field to get the user entered value like in the examples I’ve provided then having got the ‘text’ value in the c+ convert it to eg an integer, like this int parameter = value.toint();
Then dacwrite(DAC1, parameter);
@@G6EJD would you be intérested to create a vidéo for that because presently I did not succeed to do it thank you
There is only two lines to add to one of my example sketches to do this, I’ll see if I can produce a video
I afraid pure ajax may not work with latest browser due to security concern, suggest to code with jquery ajax such as
$.get("/TEMPread",function(data,status){
if (status=="success"){
$("#TEMPvalue").text(data);
}else{
alert(status);
}
});
Hello Dave. Is it possible to update let's say after 30 secs without AJAX with regular WEbServer ?
Thanks.
Marc.
Marc Paradis hello Marc, yes just make this html one of your first entries after the opening html statements:
@@G6EJD and can we send a text/plain every 30 secs by example?
Thanks.
Marc :)
Have a nice day! :)
You don’t have to send fully formatted HTML but your browser needs it, you could cut the page down to just the text ‘hello world’ for example it depends on whats going to read the text.
Great project. But I am trying to figure out why the vast majority (but not all) calls to update the humidity and pressure values fail, returning ERR_CONNECTION_RESET when xhttp.send() is sent to update those two variables. Commenting out all but one of the xhttp variable updates works perfectly. Excellent learning experience - thanks!
Had high hopes of using visual studio code(vsc) with the arduino plugin instead of the arduino ide - a work in progress with the esp32 -as vsc has a hard time finding all the needed include files. 73 K6CCA
Is your update rate to high as the sensor takes a finite time to read and realistically a minimum refresh of every 15-secs is required and in real practice about once per minute or even hour as the environment does not change that quickly. Also try a different browser to see if the problem continues, any versions of IE will not work or work spasmodically. 73 Dave
@@G6EJD Solved by combining all sensor data into one JSON string and sent as one xhttp.send(). Updates all fields every second without error. Thanks - great project!
Elysium, good to hear all is ok now.
Muchas gracias. Es justo lo que necesitaba.
Tengo un esp32 captando datos de climatología por LoRa lo envío a un Gateway por medio de un string y lo envío a una pagina web en la que lo extraigo dato a dato y lo pongo e la vista. Ahora me falta solo meterlo en una base de datos y poderlos visualizar con gráficos y ….
Eres genial.
NB. Espero que entiendas español. Un saludo.
Gracias, espero que haga funcionar su proyecto según lo necesite con estas técnicas.
Hi Dave. My apologies for the simple question, but if you or one of your viewers can guide me in the right direction. I have a Wemos ESP 32s board. I am finding it near impossible to get it to accept a sketch. Even the simplest of sketch examples. I get ERROR Uploading 288400 bytes from C:\Users\Main\AppData\Local\Temp\arduino_build_263517/Blink.ino.bin to flash at 0x00000000
warning: espcomm_send_command: didn't receive command response
warning: espcomm_send_command(FLASH_DOWNLOAD_BEGIN) failed
error: espcomm_upload_mem failed
error: espcomm_upload_mem failed
I have Installed what i believe is the correct Driver, by typing WEMOS into the board manager. I have selected com3, and reduced the upload speed to 115200
Any recomendations? Kind regards. Craig
Craig, the Wemos ESP32s is likely to be a copy board of questionable design quality. Some boards such as the Firebeetle I find to be highly unreliable and it exhibits very similar problems to yours and I’ve never found a reliable solution. Things you can try are 1, always programme at 115200 baud, try selecting the ESP32 Dev Board, 3 reset the board just before the programming starts, takes some judgement to get the timing just right. On my board it usually takes about two or three goes, on the true Wemos D32 boards they work first time every time at 900k. Try a different cable short as possible
@@G6EJD I can't thank you enough for taking the time to help me out. I will definitely try that out as soon as the electrical storm passes over and I can switch my pc back on :) If you were to suggest a comparable board, what would you recommend?
Craig, without doubt the Lolin D32 it’s near perfect and very low power. It costs more but really only from the AliExpress Wemos or Lolin store to ensure no fakes!
@@G6EJD Once again, thank you for the feedback. I have ordered 3 of those boards from Ali, and will give those suggestions a go anyways on the 32s board :)
You can use unique attribute name, like io='D1' in the span. This way you can get element by attribute name, and ask the D1 variable from arduino. If you think you can link script libraries from google. This way, if you think, you can use ajax with jQuery, like:
www.w3schools.com/jquery/ajax_get.asp
Less character, less data! ^_^
Isn’t the client pulling the required data rather then the server pushing it? :(
Yes
@@G6EJD why did you call the video "'pushing' data to a client..." then?
As a learning exercise, to promote thought and analysis.