Program ESP8226 WIFI module using Ardunio Environment

Hello,

I have been using the ESP8226 WiFi Module made by Adafruit in the Ardunio Environment. Everything
works using samples from internet. I can communicate with it and create web page turning on LEDs
and reading sensors.

But I need help creating more than one Web Page to communicate with my device. I am think of doing
this is 2 ways.

  1. Create all the pages inside the ESP8226 WiFi module.
    So every time a user connects to it, the web pages come alive and the user selects what he wants
    to do.

The problem I have is I do not know how to go from one page to another. For example if I have
a main page and 5 other pages, then how do I go from the main page to any of the other pages?

  1. Another way would be to create a Website outside the ESP8226. The user would go to different
    pages and sends just commands to the ESP8226. Then the ESP8226 would turn on LEDs or would
    send back a temperature reading.

I think the second method is much cleaner and easier to modify later on the future. Because then
I don't have to deal with programming the ESP8226 module anymore. I can just modify the Web pages
to do different things. I also know how to create hyperlinks to go from one page to another.
This way the Web pages can be used as an APP to be used on phones in the future.

Please let me know what you think.

I need to know if anyone would like to help me out.

Thanks

Bobby

For handling multiple pages, one way is to create a single html page which is divided up into a number of logical "pages". The idea is that you expose only one logical page at a time by hiding all others.

I've used such a trick in this project for multiple configuration pages Arduino ESP8266 Speaking Clock see file WebServerHtml.h

In principle, the html page is divided with div tags into logical pages:

<div id=divPage1> 
. . . 
html for page 1 here
. . .
. . .
</div>  <!--  <div id=divPage1>  -->



<div id=divPage2> 
. . . 
html for page 2 here
. . .
. . .
</div>  <!--  <div id=divPage2>  -->



<div id=divPage3> 
. . . 
html for page 3 here
. . .
. . .
</div>  <!--  <div id=divPage3>  -->

to hide a page x:

document.getElementById(page[ x ]).style.display = "none";

to expose a page x:

document.getElementById( page[ x ] ).style.display = "block";

You have to maintain a navigation bar which allows access to the individual "pages".
The use can move between "pages" without a return trip to the server.

Hello,

Your project is so advanced. I am a beginner and trying to just make something simple.
Attached is my program. I attached the 2 files "index" and "Page1" to the program called
"Home_Automation.ino".

There are a few buttons on the index file. The LED button turns on an LED on the ESP8226 module.

I created a button called "LIGHTS". All I want to do is once this button is pushed, the "Page1" gets
displayed and "index" display page disappears. For now I just made the "Page1" a very simple "Hello message".

In this program the Ardunio prints out the IP address of the ESP8226. Then I use that in a web browser
to start the index page. The page comes up and I can turn on and off different pins and LED on the
ESP8226 module.

Now I like to go to a different page by pushing the "LIGHTS" button. I also tried to create a Hyperlink. But it comes and says Not found:/Page1.html/

Please help.

Thanks

Hello,

Sorry I forgot to attach the files.

Here they are.

Thanks Again

Bobby

Home_Automation.ino (5.14 KB)

index.h (1.45 KB)

Page1.h (180 Bytes)

It looks like you have to add this to setup() :

server.on("/", handleRoot);
server.on("/form", handleForm);
server.on("/page1", handlePage1);   //new

And create this function similar to handleRoot()

void handlePage1() {
   // new function
   String s = page1 ;

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

And in your HTML, call it by something like

. . .
<a href="/page1">page1</a>
. . .

Hello,

Bravo, 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

It should work with an Iphone if it is connected directly to your WLAN (SSID "AEROCON") and you use the IP address which your router has assigned to the ESP.

If you are out of range, and hoping to connect over say the GSM network, then it becomes much more difficult because you have to configure port forwarding on your router to allow incoming internet traffic to contact the ESP device in your internal network.

Hello,

My IPHONE is connected to the same WiFi called "AEROCON".
and I type in the same IP address that I use when I use a computer to
access the web pages inside the ESP8226.

The only difference is that the computer is connected to the router using
Ethernet cable and not WiFi. So the data goes through the Ethernet cable
to the router and then from there through WiFi to the ESP8226.

I don't think the range is an issue because everything is close to each other.

Any ideas why the browser on the IPHONE redirects me to "dnsrsearch.com".

Thanks

Bobby

Google for “dnsrsearch iPhone”
It is variously described as a browser hijacker and a virus.

Hello,

Thank You.

Bobby