0

Multiple Webpages on ESP8226
Moderators: adafruit_support_bill, adafruit

Please be positive and constructive with your questions and comments.

Multiple Webpages on ESP8226

by Bobby_Y on Mon Mar 04, 2019 6:29 pm

Hello,
I am using a Adafruit ESP8226 WiFi module. I have used examples such as reading humidity and turning LEDs on and off.
Everything works fine. I just need to have multiple Web Pages. So I can jump from one page to another by clicking a button.

Attached is my project. Once connected the Com port will printout the IP address of the ESP8226. I then use that in a
browser. It opens the INDEX page inside the ESP8226 module. I push the buttons and they all work fine.
I created a button called "LIGHTS". I like to open another simple page called Page1. And make the index file disappear. I have
attached both html files index, html and page1.html to the Ardunio program.

But the browser says Page1 can not be found. I also tried a hyperlink to do it. That does not work either.

Can anyone help me please.

The website does not allow me to attached the .HTML or the .h files. So here they are
[color=#0040FF]This is the Index file;
Code: Select all | TOGGLE FULL SIZE
const char MAIN_page[] PROGMEM = R"=====(
<HTML>
<TITLE>
Eng Tech Inc
</TITLE>
<BODY>
<CENTER>
<FORM method="post" action="/form">
<TABLE>
<TR><TD colspan=2><B>IoT Based Home Automation System</B></TD></TR>
<TR><TD>Temp: @@TEMP@@ C</TD><TD>Load Status</TD></TR>


<TR><TD>
<INPUT TYPE=SUBMIT VALUE="ON1" name=submit>
<INPUT TYPE=SUBMIT VALUE="OFF1" name=submit>
</TD>
<TD>@@L1@@</TD></TR>
 
<TR><TD>
<INPUT TYPE=SUBMIT VALUE="ON2" name=submit>
<INPUT TYPE=SUBMIT VALUE="OFF2" name=submit>
</TD>
<TD>@@L2@@</TD></TR>
 
<TR><TD>
<INPUT TYPE=SUBMIT VALUE="ON3" name=submit>
<INPUT TYPE=SUBMIT VALUE="OFF3" name=submit>
</TD>
<TD>@@L3@@</TD></TR>
 
<TR><TD>
<INPUT TYPE=SUBMIT VALUE="ON4" name=submit>
<INPUT TYPE=SUBMIT VALUE="OFF4" name=submit>
</TD>
<TD>@@L4@@</TD></TR>
 
<TR><TD>
<INPUT TYPE=SUBMIT VALUE="LED" name=submit>
</TD>
<TD>@@L5@@</TD></TR>

<TR><TD>
<INPUT TYPE=SUBMIT VALUE="LIGHTS" name=submit>
</TD>

<ul>
   <li>Create <strong>bold</strong> or <em>italic</em> text.</li>
   <li>Change the <span style="color:#800000;">text color</span></li>
   <li>Change the <span style="font-family:comic sans ms,cursive;">font family</span> or <span style="font-size:12px;">font size</span></li>
   <li>Create <a href="Page1.htm/">hyperlinks</a></li>
   <li>Create a bulleted list...</li>
   <li>...and much more!</li>
</ul>

 
<TR><TD colspan=2><B><CENTER><A href = "https://circuits4you.com">www.circuits4you.com</a></CENTER></B></TD></TR>
</TABLE>
</FORM>
 
</CENTER>
</BODY>
</HTML>
)=====";

And this is the Page1 file.
Code: Select all | TOGGLE FULL SIZE
const char page1[] PROGMEM = R"=====(
<HTML>
   <HEAD>
         <TITLE>My first web page</TITLE>
   </HEAD>
<BODY>
   <CENTER>
         <B>Hello World.... </B>
   </CENTER>   
</BODY>
</HTML>
)=====";

Thanks

Bobby
Attachments
Home_Automation.ino
(5.14 KiB) Downloaded 51 times

Bobby_Y
 
Posts: 18
Joined: Mon Mar 04, 2019 6:05 pm

Re: Multiple Webpages on ESP8226

by oesterle on Mon Mar 04, 2019 7:39 pm

Hi, Bobby!

Your revised sketch is missing the code required to respond with your new web page.

Look at the code for routing existing pages in the setup() function:
Code: Select all | TOGGLE FULL SIZE
  server.on("/", handleRoot);
  server.on("/form", handleForm);

You'll need to define a new route for "Page1.h" in your setup() function; something like this:
Code: Select all | TOGGLE FULL SIZE
  server.on("/page1", handlePage1);

Then, you'll need to define the handlePage1() function. Look at the handleRoot() function as an example of how to do this. This would probably work:
Code: Select all | TOGGLE FULL SIZE
void handlePage1() {
  String s = page1;
  server.send(200, "text/html", s);
}

All my code here is untested.

Cheers,

Eric

oesterle
 
Posts: 656
Joined: Tue Sep 17, 2013 11:32 pm

Re: Multiple Webpages on ESP8226

by Bobby_Y on Tue Mar 05, 2019 12:49 pm

Hello Eric,

Excellent. That works using a computer. But it does not work when I try it with a IPHONE.

When I type in the IP address on the IPHONE browser, it re routes it to a "dnsrsearch.com" site.

How can I run it from my IPHONE?

Thanks again.

Bobby

Bobby_Y
 
Posts: 18
Joined: Mon Mar 04, 2019 6:05 pm

Re: Multiple Webpages on ESP8226

by Bobby_Y on Wed Mar 06, 2019 1:35 pm

Hello,

I found out how to stop Time Warner to redirect the IP address of the ESP8226.
But now I get this message
"Safari cannot open the page becasue it could not connect to the server".

My IPHONE is connected to the WIFI network. And the ESP8226 is also on the same network.
I can communicate with the ESP8226 using a computer that is connected to the same network
with an Ethernet Cable.
But not with the IPHONE using WiFI.

Thanks
Bobby

Bobby_Y
 
Posts: 18
Joined: Mon Mar 04, 2019 6:05 pm

Re: Multiple Webpages on ESP8226

by oesterle on Wed Mar 06, 2019 3:46 pm

Hey, Bobby.

That's odd.

  • On the phone, does it help to type http:// before the IP address of the ESP8266?
  • Are you sure your phone is trying to access the ESP8266 over Wi-Fi, and not over the cell network?
  • Can you try running a little webserver (maybe in Node.js) on your PC, and accessing it via your phone over Wi-Fi?
  • What is the IP address of each device in this scenario? (Are all devices on the same subnet?)

Cheers,

Eric

oesterle
 
Posts: 656
Joined: Tue Sep 17, 2013 11:32 pm

Re: Multiple Webpages on ESP8226

by Bobby_Y on Wed Mar 06, 2019 6:33 pm

Hello Eric,

Here are the answers to your questions,

On the phone, does it help to type http:// before the IP address of the ESP8266?
No Difference

Are you sure your phone is trying to access the ESP8266 over Wi-Fi, and not over the cell network?
Yes. Looking at the phone, The WIFI icon is on with good strength. I also put the phone is AIRPLANE mode to make sure.


Can you try running a little webserver (maybe in Node.js) on your PC, and accessing it via your phone over Wi-Fi?

I did that. Same result. "Safari cannot open the page because it could not connect to server"

What is the IP address of each device in this scenario? (Are all devices on the same subnet?)
The Phone WiFi IP address is 172.16.31.148, Subnet Mask is 255.255.255.0
The Computer IP address is set to "Automatic" mode.
When I access the ESP8226 using the browser on the computer, I type 172.16.31.178. This should be the ESP8226 IP address.

Please note that I am using the WiFi network at work. There is gateway. Is it possible that might be the problem?

Thanks

Bobby

Bobby_Y
 
Posts: 18
Joined: Mon Mar 04, 2019 6:05 pm

Re: Multiple Webpages on ESP8226

by Bobby_Y on Wed Mar 06, 2019 8:34 pm

Hello Eric,

I used a TP-Link wireless router and created a WiFi network independent of the one used at work.

I then used the new SSID (WiFi Network name) in my program. Compile and then load it into the ESP8226.

Now I can access the ESP8226 from my IPHONE without any problem. What do you think is the problem
that the IPHONE can not communicate with the ESP8226 through the Work network.

Thanks Again

Bobby

Bobby_Y
 
Posts: 18
Joined: Mon Mar 04, 2019 6:05 pm

Re: Multiple Webpages on ESP8226

by oesterle on Wed Mar 06, 2019 10:38 pm

Your network administrator may
block machines from talking to each other – in Starbucks, for example, I talk between two machines on their public Wi-Fi. This is usually for security of users/customers.
block certain ports from serving data – port 80 may be blocked in some way; changing the port on both server and client can possibly work around this, i.e. starting your ESP8266 on port 8083 instead of 80, and visiting 172.16.31.178:8083 from your client.

But something is weird here, since you can still access the 8266 from your PC, right?
Just not the phone?
Can you access it from a coworker's phone?

oesterle
 
Posts: 656
Joined: Tue Sep 17, 2013 11:32 pm

Re: Multiple Webpages on ESP8226

by aditya55 on Tue May 21, 2019 9:53 am


aditya55
 
Posts: 1
Joined: Tue May 21, 2019 9:52 am

Please be positive and constructive with your questions and comments.