How can i programatically switch between web pages on a webserver on ESP32.

Projects Programming
1

Hi

I am fairly new to Arduino and ESP32.
I want to have an AP running with an async Webserver, using Arduino, no problem, I found examples which are clear.

Next, I would like to have the webbrowser to switch to an alternative page whenever a variable is set, e.g the ADC value is above a certain value or an input pin is changed, if anyone can link to an example or tutorial that would be great (or any other help to achieve this).

The main and the alternative page will have data on it which must update automatically every 1-5 second, not the same data on the pages, this I believe I can manage myself.

It could be nice to be redirected to a landingpage whenever a device is connected to the AP, any example/tutorial or comments are welcome.

I am doing a project and replacing my Display in a Peugeot 407 which is not visible unless it is cold.
The CAN messages I hope I will manage to receive and decode and if a fault appears on the car, the display must show an alternative webpage with the fault and the explanation, otherwise it mustr show temperature, radiochannel, volume a.s.o.

Code a.s.o when (if) I succeed, will be publicly available, this is for fun, not for making money.

Any help is highly appreciated, Br Peter

2

To summarize, if I type in the IP of the ESP32 in my web browser, taking as a given that we are networked, I will GET the main page. Then, I click a link on the main page to GET the information page. If the sensor is under one condition, the ESP32 will respond with one version of the information page and under exclusive conditions to the first, it will respond with an alternate information page. Is this about right?

3

I am not sure I completely understand what you mean, perhaps because English is not my native language.

Let me try to clarify:

First the Android tablet connects to the ESP32 AP either with the webservers IP or via a redirect to a landingpage, this is the Mainpage.
When a certain CAN message is received, the tablet must show an alternative webpage, (e.g. index/fault) and after some time e.g. 30sec. go back to the main page.
The trigger to switch webpage can be whatever, in this case it is a specific CAN message, this is not important right now, it could be anything else triggering this.

So I am looking for some example/tutorial/help on how to have the Arduino code make the webserver+tablet display 2 different pages depending on the value of a variable.

Like this

if (!Fault)
{display Mainpage with one set of variables being displayed and update every 0.2sec.}
else
{display the Fault webpage with another set of variables being displayed and updated every 2sec}
4

HTTP is RESTful, meaning the Android does not maintain a connection with the ESP32 beyond making a request and receiving a response. That said, HTML can contain code to refresh itself, ie ask for an updated copy. HTML can alternatively contain JavaScript that can run embedded in the HTML page and request updated copies of portions of the page.

5

12345PJ:
When a certain CAN message is received, the tablet must show an alternative webpage, (e.g. index/fault) and after some time e.g. 30sec. go back to the main page.

It is not clear from that whether the data that causes a different page to be selected is on the tablet or on the ESP32.

If the data is on the tablet then it just needs to access the correct page on the server.

If the data is on the ESP32 then it needs code that tells it, when it gets a page request, to serve the appropriate response.

This sort of problem is not specific to an ESP32 or to the Arduino programming environment. There are probably hundreds of examples on the internet if your search includes web programming on PCs.

...R

6

Sorry my mistake, the data that must cause a change in the displayed page is on the ESP32, not the tablet.

But the data could be transferred with the Mainpage and if the browser on the tablet then can switch to the alternative page, that is fine.

Thanks, I will try to search for it.

7

I do it like this

String s;
if (!Fault) {
s+=htmlheader;
s+=thepage;
s+=htmlclose;
}
else {
s+=htmlheader;
s+=thepage;
s+=htmlclose;
}

server.send(200, "text/html", s);

That said, HTML can contain code to refresh itself, ie ask for an updated copy.

I never got that to work the way i wanted to on an ESP, but if you do let me know.

8

Deva_Rishi:
I never got that to work the way i wanted to on an ESP, but if you do let me know.

Add the following to the header of your HTML page for 30 second refresh.

<head>
  <meta http-equiv="refresh" content="30">
</head>
9

Perehama:
Add the following to the header of your HTML page for 30 second refresh.

<head>

> ```

Yes well, if that would work for me, i would not have mentioned it, but the browsers i use do not respond with the intended result. (which is refresh in 30s in this case isn't it ? )

10

Deva_Rishi:
Yes well, if that would work for me, i would not have mentioned it, but the browsers i use do not respond with the intended result. (which is refresh in 30s in this case isn't it ? )

Modern browsers that support HTML5 claim to support it. Do you have a way of "sniffing" the ESP to confirm that the browser is or is not making a GET request every 30 seconds? If it is, then it's a matter of how the request is handled inside the ESP. I apologize, but I have not done anything with an ESP chip. I have done exactly this with the ENC28J60 chip and an ATmega1284P.

11

Perehama:
Do you have a way of "sniffing" the ESP to confirm that the browser is or is not making a GET request every 30 seconds? If it is, then it's a matter of how the request is handled inside the ESP.

Not sure why it isn't working, just dropped the idea to do it that way (wasn't that important to me), but if someone can get it to work on an ESP i am all ears.

12

Deva_Rishi:
Not sure why it isn't working, just dropped the idea to do it that way (wasn't that important to me), but if someone can get it to work on an ESP i am all ears.

It may be the browser settings. auto-refresh is a security risk in that the user can grant permission to a website to refresh with unsolicited content. HTTP as stated in my first post was not intended for this use. A WebSocket is a much better protocol for a maintained connection between the client and server.

13

I used a technique called "long polling" in a project I built. If I recall correctly when the server sent data to the browser the javascript on the browser immediately made another call to the server. However the server would not respond immediately, it would wait until it had new data.

...R

PS ... my web programming for that project was on my PC, not on an Arduino.

14

As Perehama has stated HTTP is RESTful so you make state transactions and do not keep a continuous connection open. You make a request and you get a response. Then the interaction is over as far as the server is concerned. You can then make another request from your client based on whatever logic you run on your client side and get another response from the server.

If you are hitting your HTTP server with a modern day browser such as Chrome, you can use javascript to poll your HTTP server using asynchronous calls to an HTTP endpoint (AJAX request). When your server has new data you can then update the HTML Document Object Model (DOM) to reflect that new data with no interaction from the user.

There is not an instance I can think of where you would want your HTTP server making any sort of notification to a client that has not made a new request nor is there any protocol for an HTTP server to do so.

I am not exactly sure what has been tried on an ESP, but I have successfully done AJAX calls on an ESP8266 and ESP32. If you have a working HTTP server there is nothing stopping any valid HTTP requests from coming through.

15

My plan was actually to use websockets, this was one of the examples I found and should be able to adapt to my needs but I still need to make the displayed content change in case I receive a "Fault" message on the CAN bus.

I am not sure but I might be able to update a variable which the client can check continously to see if it should navigate to the alternative page.

I am also considering another approach of sending data via BT to an Android app running on the tablet.

I will keep this thread updated but it will be a very slow moving project.

Thanks anyone for the support, still, if anyone stumbles upon an example/tutorial for this, please let me know.

16

If you are going to create an Android app, why don't you let the App make 'get' request repeatedly, to get updated info. Then you can just use the ESPweberver.

17

Deva_Rishi:
If you are going to create an Android app, why don't you let the App make 'get' request repeatedly, to get updated info. Then you can just use the ESPweberver.

Yes, do this.

Alternatively do the same thing for a web browser using javascript.

The question that has been asked is for the most part not related to microcontrollers. The question is just "How do I poll an HTTP server?" You can do that any number of ways. If you are going to do it with a standard web browser like Chrome and would like the GUI to look like a modern web application, I would definitely use HTML, CSS and JavaScript. It is flexible to do every 5 seconds or per any logic you choose and will be viewed from a device that has lots of RAM.

12345PJ:
I would like to have the webbrowser to switch to an alternative page whenever a variable is set, e.g the ADC value is above a certain value or an input pin is changed[...]

Key words web browser; this is your client application. Your client app should send an HTTP GET request your server and the response will tell you your ADC value or input pin value. In your client browser application (ex viewing a web page) you can do whatever you want, you can display a new page or update the values on the screen etc. What you do is up to you after you HTTP GET request your values from the web server.

12345PJ:
The main and the alternative page will have data on it which must update automatically every 1-5 second, not the same data on the pages[...]

Web pages are served from an HTTP Server and delt with (viewed) on an HTTP Client (web browser). An HTTP Server serving HTML/XML pages does not ever update. You can only make a RESTful transaction. The interaction is stateless because it is one request and one response.

You can, however, serve dynamic pages at the same endpoint (URI / web page). Again this dynamic page will not update the client. The client will need to make an additional request for information. Because the page is dynamic, the same client request to the same endpoint can result in different data being sent in the HTTP response.

12345PJ:
I want to have an AP running with an async Webserver[...]

It could be nice to be redirected to a landingpage whenever a device is connected to the AP[...]

I missed this in my first reading of your question. This appears to infer that your microcontroller will not be connected to the internet and your client machine will be connected directly to it. This has the drawback that your client most likely can't connect to the internet because it will be connected to your Arduino access point. This means you will need to store all of your HTML, CSS and JavaScript on your microcontroller. ESP32's are pretty good for FLASH. You can use SPIFFS to store a lot of text files, but little to no images.

"Redirected to a landingpage" you can use a captive portal.

12345PJ:
I am doing a project and replacing my Display in a Peugeot 407 which is not visible unless it is cold.
The CAN messages I hope I will manage to receive and decode and if a fault appears on the car, the display must show an alternative webpage with the fault and the explanation, otherwise it mustr show temperature, radiochannel, volume a.s.o.

I've never used a CAN bus, but if you can interface it to your Arduino (ESP32) this is all still relevant to the above statements about the HTTP Server and Client.