ESP 8266 Arduino IDE WebConfig

If you're developing many projects with an ESP8266, it would be usefull that you can configure your ESP (e.g. IP Address) via Browser.

I've developed a convinient way, based on the WebServerExample at https://github.com/esp8266/Arduino.

Key Features :

• Easy configuration of IP-Address, Netmask, Gateway, SSID and password for your router
• Build-In NTP Client (especially when you want to build a clock), with timezome and daylight saving support
• Realtime clock structure for having a convinient way to access the date/time
• Turn On/Off things at a given time (e.g. for lamps)
• Administration-page will not be accessible after a given time because AP-Mode at the ESP will be disabled
• Simple AJAX Support (microajax)
• HTML pages can be in a differnt (.h-) file and are stored in Progmem.

Compile the source code and put it on your ESP.
After first start use a WiFi device, connect to the ESP Wifi-Access Point (e.g. mobile phone or notebook) and go to address :

http://192.168.4.1/admin.html

Now you see a menu (see on the right side at this page), where you can change the settings to you needs. 

Settings at the INO-File

If the ESP is starting in Admin(Accesspoint)-Mode you have to use/change these settings :

#define ACCESS_POINT_NAME  "MYESP" 
#define ACCESS_POINT_PASSWORD "12345678" 

 
Define the time, the ESP is in admin-mode after startup and opens up an access point:

#define AdminTimeOut 180 // Defines the time in seconds, when the admin mode will be diabled 

The DateTime structure

In the Main Arduino is a global Struct-Varibale called DateTime. This struct will be updated every second. If you have the NTP Client running, the struct will also be updatet by NTP. 

struct  strDateTime {
   byte hour;
   byte minute;
   byte second;
   int year;
   byte month;
   byte day;
   byte wday;   // Weekday
};

How do I add a new static HTML-Page ?

The easiest way is, to create a new Header-File. In this example, we call it example.h :

const char PAGE_example[] PROGMEM = R"=====(
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/style.css" type="text/css" />
  <h1>My Example goes Here</h1>

)=====";

 
As you see, the HTML-Content is enclosed by R"=====( .... HTML ...  )=====".
This is nice technique to put huge amount of static data into a variable where you don't have to escape any quotation marks or line feeds.

Now include the example.h in your main arduino file.

#include "example.h"

 Go to the setup() function and add the following to it (before server.begin() ) :

server.on ( "/example.html", []() { server.send ( 200, "text/html", PAGE_EXAMPLE );  } );

Now compile and flash it to your ESP. Open a Browser and go to :
http://192.168.4.1/example.html or to the address you have given the ESP.

How do I add a new HTML-Page with dynamic content ?

I havefound out thatit is notsogood when youassemble a stringand send thisas output.
Firstly, building the string ist relativelytime consumingand secondly it could reachpartlythememory of the ESP eg. if you build dynamic HTML tables in it or have a big HTML-Page and you make a search-replace on your variables.

So, I decided, to do all this by AJAX. First, send out the HTML-Page and then fill it with content.

Okay, time for an example.

I assume, the example of the static page is working.
Now, we  add a few things in the example.h

const char PAGE_example[] PROGMEM = R"=====(
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/style.css" type="text/css" />
  <script src="/microajax.js"></script> <!-- Adding microajax  -->
  <h1>My Example goes Here</h1>     

   <div id="mydynamicdata>Here comes the Dynamic Data in </div>   <!-- added a DIV, where the dynamic data goes to -->
   <script>                
      setValues("/admin/filldynamicdata");  //-- this function calls the function on the ESP      
   </script>

)=====";

The microajax.js also includes a function, to fill common types of values (innerHTML, value, checkbox).

Now add a function to the example.h

void filldynamicdata()
{        
    String values ="";
    values += "mydynamicdata|" + (String) + "This is my Dynamic Value" + "|div\n";   // Build a string, like this:  ID|VALUE|TYPE
    server.send ( 200, "text/plain", values);   
}

server.on ( "/admin/filldynamicdata", filldynamicdata );

Now you can compile all and when you open the page, you should see :

How do I get values in a HTML Form?

In the HTML Part, put a Form, like you do it in your normal way.
Suppose there isaform-field named "firstname", do the  following steps :

In the setup() at the main Android-File change

server.on ( "/example.html", []() { server.send ( 200, "text/html", PAGE_EXAMPLE );  } );

to :

server.on ( "/example.html", processExample);

In the example.h create a new function, called "processExample"

void processExample()
{        
    if (server.args() > 0 )  // Are there any POST/GET Fields ? 
    {
       for ( uint8_t i = 0; i < server.args(); i++ ) {  // Iterate through the fields
            if (server.argName(i) == "firstname") 
            {
                 // Your processing for the transmitted form-variable 
                 String fName = server.arg(i);
            }
        }
    }
    server.send ( 200, "text/html", PAGE_EXAMPLE ); 
}

Main Administration Menu

General Configuration

Network Settings


NTP Settings


Network Information