Yves BOURDON asked 5 years ago
Hello,
I am looking for a script that will refresh the home page once when the HTML web page is launched.
<meta http-equiv=”refresh” content=”5; /”> refresh the page every 5 seconds, but I would like to execute it only once.
Any idea ?
Thanks for the reply
Yves
Steph answered 5 years ago
Salut Yves 😉
Try something like that:
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('load', onLoad);
function onLoad(event) {
setTimeout(refresh, 5000);
}
function refresh() {
let target = document.getElementById('toRefresh');
target.innerHTML = '<strong>refreshed!</strong>';
}
</script>
</head>
<body>
<p>Refresh Test: please wait 5 seconds...</p>
<p id="toRefresh" style="color:#a00;">this gonna be refreshed...</p>
</body>
</html>
This is a very basic way of doing things, but it is simple to implement, and does not require a strong knowledge of JavaScript.
Nevertheless, if you’re still a bit patient, I plan to write a tutorial on how to use WebSockets with ESP32. And this is the Rolls-Royce to do this kind of thing. So keep an eye on the forum, it should come out one of these days 😉
Amicalement,
Steph
Yves BOURDON answered 5 years ago
Bonjour Stéphane,
I have tried your solution, but it is not exactly what I want.
I want to refresh the home page once when the HTML web page is launched for the first time (after the ESP32 re-start).
With your solution it is refresh 5 second after each <submit> I make !
Thank you if you can help me.
I can send you my code and if you have an ESP32 board you can better understand what I mean.
Best Regards.
Yves
Yves BOURDON answered 5 years ago
Hello again:
I imagine a very simple script, but with a flag.
<script>
window.addEventListener(‘load’, onLoad);
function onLoad(event) {
if (flag == 1);}
 flag=0;
location.reload(true)
}
}
</script>
The problem:
Do we have the right to do such a test in a java script?
How can I initialize my flag = 1 variable, so that my page refreshes only once?
Thank you for your help !
Cordialement,
Yves
Steph answered 5 years ago
Well of course, you didn’t specify all the details of the problem !
Okay… I’m having trouble understanding the finality of what you’re trying to do…
1. When ESP32 starts, it connects to WiFi and creates a web server to expose an HTML page with a form.
2. You connect your web browser to ESP32 to load this HTML page… I don’t understand the need here to refresh the page???
3. You interact with ESP32 via the form, right? So, when you validate the data entered in the form, you post this data via a Submit button?
4. The data is sent to ESP32, which processes it.
5. Are you expecting response data from ESP32?
6. Would you like to be able to use the new data to refresh the HTML interface, but without reloading the whole page? Would you?
Tell me what project you’re working on and what you would like to do that hasn’t already been dealt with by Rui and Sara in the initial project.
It’ll make it easier for me to help you in a focused way.
Yves BOURDON answered 5 years ago
First of all thank you so much for your reply !
My English is not very good and I hope you will understand my problem !
I built a Wifi thermostat starting from Rui and Sara initial project:
https://randomnerdtutorials.com/esp32-esp8266-thermostat-web-server/#more-93918
 I have an html page in which I can validate variables thanks to a submit button.
 But I also have buttons like “Defaults” which directly call A Java script with no use of validation by submit.
(for exemple Defaults writes default values in an EEPROM, then restart the ESP).
When the processor restarts it reads EEPROM values and launches the HTML page.
Unfortunately the “old” page is displayed with the “old values” until I refresh the page.
To avoid this I would like to launch a refresh of my page at startup so as to properly visualize the new values.
If I add the command <meta http-equiv = “refresh” content = “5000; /”> in the <head> of my HTML page it works well, but this refresh is repeated .
I would like this refresh occurs only one time at startup then no more.
I hope you understand what I want to do.
Thank you for your reply if you take time to understand my question !
Amicalement.
Yves
Yves BOURDON answered 5 years ago
<img src="https://i.imgur.com/QiDBWiN.jpg" width="208" height="337" />
Steph answered 5 years ago
Okay, I figured out what you wanted to do, I guess.
And for your image, fix the URL with this so that it appears correctly:
<img src="https://i.imgur.com/QiDBWiN.jpg" width="208" height="337" />
I’ll help you 🙂
The idea is to systematically go through AJAX requests in order to interact with ESP32, but without ever refreshing the page. You can of course update some areas of the interface if needed, but without reloading the page. Submit buttons have drawbacks when used as is.
Small preliminary question… are you comfortable using SPIFFS? Because it would make the C++ code much lighter and clearer so that you can find your way around more easily. If you haven’t explored this chapter yet, too bad, we’ll do without it 😉
As far as saving the default values in the EEPROM, and taking them into account on reboot so that they appear in the form on first loading, no problem, you’ll see it’s very simple.
I’m not sure I’ll be able to tackle that tonight, because it’s already late on my side of the globe (Reunion Island)… and I’m expected in the next room… I spent all day teleworking intensely… But I’ll try to get started anyway.
Is it okay if you have the whole project tomorrow?
Yves BOURDON answered 5 years ago
Of course it is ! Thank you so much.
I already use SPIFFS in this project (I have the files index.html script.js and style.css (empty I will take time for this later).
Time , Temperature and Clim’status are updated every second using Javascript.
I think you are right : If I use javascript for all my inputs my problem will be solved !
Thank you so much for your help !
Regards.
Yves
Steph answered 5 years ago
Hi Yves,
Another busy day with work from home…
Well, I started working on your project! I don’t have a DS18B20 on hand unfortunately… but as far as we’re concerned here, it’s not a big deal. So I’ve decided to go for a simple DHT11. I made a very simple little circuit for demonstration purposes. And I also tackled the HTML & CSS graphical interfaces. I hope you’ll like it… at least you’ll have some material to dive into CSS. That way we kill two birds with one stone 🙂
I deliberately blew up the authentication form for WiFi network access, because it doesn’t bring anything more for the demonstration… and personally, I would put it on a different page.
Well, now I can get to work on the code. I doubt I’ll be able to finish it tonight (I’m a bit of a perfectionist on the edges). It’s already 22:45 here… and tomorrow I’ll have to work from home again.
So, I’m moving as fast as I can, despite my daily professional constraints.
Au plaisir d’avoir de tes nouvelles,
Steph
Steph answered 5 years ago
Hi, Yves,
Some news about the progress of the “project”… I hope you’re not too impatient… I’ll get back to it right away!
I took advantage of some quiet moments to study the doc of the ESPAsyncWebServer library. This lib is really awesome and powerfull! This is also what I like when I try to help people on projects or problems that I haven’t explored yet, or that I’ve only just touched. It gives me a boost to dig deeper and find better ways of doing things. It’s 100% pure nitro! So thanks to you for participating in my learning process 🙂
As a result, I think I’m going to be able to prepare you something quite nice and slightly different from what you’ll find in Rui and Sara’s tutos. The interest here is also to learn more, isn’t it? I’ll start by giving you the keys to asynchronous queries with JavaScript, a little more optimized than what you’ve read so far. And, once you’re familiar with the process, you can take a look at the tutorial, which I’ll start writing next, on the use of WebSockets with ESP32.
I had already done a small project, to give a hand to another member of the community, involving WebSockets :
ESP32 Web Apps with WebSockets & OTA Web Updates
It was already a first experiment on the subject with the ESP32. I had found a library (arduinoWebSockets) that seemed to me not bad to implement this protocol… But while reading the doc of the ESPAsyncWebServer lib, I realized that it also provided all the necessary elements to implement WebSockets! So it’s perfect! I’m going to do some tests and then I’ll write the tutorial.
Well, in the meantime, I’m finalizing for you the project we’re working on at the moment, trying to do it as quickly as possible so that you can move forward on your side.
J’te tiens au jus 😉
Très bon week-end à toi,
Steph
Yves BOURDON answered 5 years ago
Cher Steph !
I can't believe what I see! To tell the truth, I never imagined that we could do this with a "small" ESP32!
I can't wait to see your code for inspiration.
Très amicalement,
Yves
Yves BOURDON answered 5 years ago
Hi Steph,
From your exemple I was able to display a real time Clock !
Next step will be the capability to input data .
Best Regards.
Yves
Steph answered 5 years ago
Congrats!
But wait… if you work on the project I mentioned earlier… Don’t you want to learn directly how to work with WebSockets?… It’s much better and more efficient than HTTP streams generated by AJAX requests!
If you like, I can redirect things right away to integrate WebSockets into your project, and forget about AJAX. Trust me, it’s really better!
Yves BOURDON answered 5 years ago
Hi Steph,
I just wanted to understand.
Just choose the best to your mind.
WebSockets sounds very good to me. The code is very clear.
I am an electronic engineer not a software one !
But I know that from a good exemple, I can learn a lot … so if the exemple is the best way I will also learn the best !
Congratulation for the quality and the clarity of what you make.
You would be the ideal teacher !!!
Amicalement.
Yves
Steph answered 5 years ago
Well in that case, you certainly have a lot of things to teach me in electronics! I really started in November (at least that’s when I received my Arduino kit for beginners to start my initiation).
And now that I see a little bit more clearly, I’m having a great time !!! I have some experience in development, so it makes my life a lot easier. And I don’t hesitate to spend all my free time to learn and progress. So it goes very fast with motivation. I still have a lot of things to explore, on the software level of course, because on these little beasts, it’s quite special. But especially in electronics! I would dream of learning how to make a PCB to customize and immortalize my experiments. But well… first things first… I haven’t explored that part yet.
Coming back to your project, I’m going to keep the trajectory I had planned to follow in order to answer your initial question. We’ll do this with AJAX. And then you’ll be able to appreciate the difference with the WebSockets.
Do you use Discord? It might make it easier for us to talk to each other… and in French… if you wish. It won’t prevent us from continuing to exchange on RNT Lab, of course, to give the community the opportunity to share interesting exchanges on our respective problems or projects we are working on. I particularly appreciate Rui and Sara, who are doing a crazy job and so useful for all of us learners! I really want to give them a hand (to my modest extent). I’ve learned so much from their knowledge base that I want to return the favour.
Anyway, I’m going to get back to work on your project. I was quite disturbed again this afternoon and didn’t make much progress. And trial-and-error takes time, between compiling the C++ code, partially rewriting the HTML / CSS / JavaScript codes that you have to upload to Flash memory… well, a bit laborious, but we’re almost there 😉
Best regards,
Steph
Steph answered 5 years ago
I don’t know if you’ve seen it happen, but I’ve also written a little notebook of experiments on ESP32 sleep modes, detailing a lot of other things about good programming practices with microcontrollers:
Experimenting with ESP32 sleep modes
You never know… maybe you’ll be interested?
Yves BOURDON answered 5 years ago
Hi Steph,
Like you, I spend most of my free time designing and manufacturing small electronic devices. I have a real electronic lab very well equipped at home (I will send you some photos).
It’s been a real passion for me since I was 8 years old (at that time I made a radio in 1964!).
Unfortunately, most of my devices do not include a web server for setting up or updating via OTA. Thanks to you, Rui and Sarah, I was able to add an OTA update! Thank you.
I want to use my new project (Wifi Thermostat for my cellar which contains more than 2000 bottles!) as the basis for all my other projects and to be able to update existing devices by adding a web server!
Of course, I will put the details of this project (hard and soft) online for everyone on the RNT Lab site.
Regarding AJAX, look at the answer Sara had given me about this and this is what I use to trigger an action with a button.
I will be delighted to exchange with you on Discord (which my 14 year old son knows well!).
It is obvious to me that everything we share together is useful for all those who want it!
Amicalement.
Yves
https://imgur.com/DrFRI5C
https://imgur.com/oWvkbG1
https://imgur.com/WDKnXKl
https://imgur.com/8UkktXj
Steph answered 5 years ago
Hi Yves,
Wow, you’re making me dream about your lab! Do you organize electronics master classes during the holidays? I’ll sign up right now! I’ll get a plane ticket and I’ll be right there! And it will be a Château Ausone preferably, when I arrive 😀
That’s it, I finished the project!
And it’s working fine! Without reloading the page… I think you’ll be happy. 😉
I even implemented 2 AJAX methods for you to discover one that’s different from the one Rui and Sara are using.
I also added an LED indicator that flashes when the ESP32 receives an AJAX request to read the temperature sensor. And I use several colors for the temperature display which is dynimically updated according to the temperature in relation to the control range.
I’m cleaning up a bit my code, adding some comments and I’ll publish it on GitHub soon. Just a little bit more patience…
For Discord, it’s fine, I got your ID.
So, you can delete your it from your post.
I’ll contact you very soon (I really want to finish this project before).
Next step: WebSockets with the ESPAsyncWebServer library. But you already have a lot of fun with what I’ve prepared for you 😉
All the best,
Steph
Yves BOURDON answered 5 years ago
Dear Steph,
I wait for you and you will be welcome at home !
Congratulations on what you did, I can't wait to see the code!
I already have another project in progress and which is soon finished, it is an indicator of fuel consumption.
The local hardware and firmware are finished, and I will have to integrate a web server!
See you soon.
Yves
https://imgur.com/qW6Y8f7
Steph answered 5 years ago
Hi Yves,
I can’t wait to finish my projects like this too!… But I still have so much to learn for that:
- I have to learn how to design a PCB…
- I need to learn how to model objects to be printed in 3D or cut with a laser engraver (especially for cases).
Everything in its time… I must not try try to go faster than the music 🙂
Well… until you can finally read my code, here is a short video demonstration of the project. I guess it’s a good answer to what you wanted to do:
ESP32 Asynchronous Web Controlled Thermostat
Watch it full screen, otherwise you might not be able to read much… And don’t hesitate to pause and go back to follow the details (the annotations are sometimes very furtive).
I promise I’ll do everything I can to release the code by tomorrow.
I told you… I’m a bit of a perfectionist around the edges… and that’s not always a quality 😀
Merci encore pour ta patience d’ange…
Amicalement,
Steph
Yves BOURDON answered 5 years ago
Merci Steph !
The video is fantastic !!!
I continue to progress on my side (for NTP time I have included an automatic time change).
// Replaces placeholder with time and date
String readTime() {//retourne un string donc on utilise une variable globale NTPtime
struct tm timeinfo;
if(!getLocalTime(&timeinfo)){
return “0”;
}
time_t now = time(nullptr);//récupère heure
//Temps = (ctime(&now)); //Temps = “Tue Nov 29 22:45:59 2016”;
struct tm *local = localtime(&now);
Heure = local -> tm_hour;
Minute = local -> tm_min;
Seconde = local -> tm_sec;
Annee = local -> tm_year + 1900;
Mois = local -> tm_mon + 1;
Jour = local -> tm_mday;
// Day in March that DST starts on, at 1 am
byte dstOn = (31 – (5 * Annee / 4 + 4) % 7);
// Day in October that DST ends on, at 2 am
byte dstOff = (31 – (5 * Annee / 4 + 1) % 7);
if ((Mois > 3 && Mois < 10) ||
(Mois == 3 && (Jour > dstOn || (Jour == dstOn && Heure >= 1))) ||
(Mois == 10 && (Jour < dstOff || (Jour == dstOff && Heure <= 1))))
Heure = Heure + 1;//Heure d’été et initialisation de la requête NTP à GMT+1 (heure d’hiver)
if (Heure == 24) Heure = 0;
sprintf(NTPtime, “%02d:%02d:%02d %02d-%02d”, Heure, Minute, Seconde, Jour, Mois);
return “1”;
}
A demain, avec impatience pour voir le code !
Amicalement,
Yves
Steph answered 5 years ago
Hi Yves,
I’ll release the code in a few hours… don’t go too far 😉
I’m done commenting everything, I still have a Readme` to write and I’m pushing it on GitHub.
As far as NTP is concerned, the exercise is interesting, of course, but you don’t need it 🙂
Let me explain: since the interface of the web application will run in a browser, JavaScript can handle the clock locally by relying on the system clock of your PC.
Well… I’ll do the finishing touches and you’ll have everything you need for tonight 🙂
See you soon,
Steph
Steph answered 5 years ago
Hi, Yves,
This time it’s done! I’m finished!
I created a specific post to announce the release of the project, in order to collect feedback and questions.
I’ve taken care to comment my code so that you won’t have any trouble reading it. I hope the result is up to your expectations.
Have fun!
And see you on the project post,
Steph
Steph answered 5 years ago
Hi Yves,
Do you think this post can be marked as resolved, or do you still have some issues that need to be clarified in relation to your original question?
If new questions come to mind regarding the project I just published in response to your request, I’d prefer you to do so on the post dedicated to it.
Best wishes,
Steph
Yves BOURDON answered 5 years ago
Hello Steph,
I have some works to do today, and I I had no time to work on the project.
I will start again tomorrow !
Of course this post can be marked as resolved.
Unfortunately I don’t know how to do that !
We get in touch tomorrow !
Amicalement,
Yves