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.

 
Installation

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 :

Put this in your example.h file :


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);   
}

 

At least, you must tell the ESP- Webserver, that he has to call the filldynamicdata-function, where you call setValues("/admin/filldynamicdata").

In the setup() Function of your Arduino Main, add this :
server.on ( "/admin/filldynamicdata", filldynamicdata );


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

My Example goes Here

This is filled by AJAX, Millis since start: 17862


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 );
}
With server.argName(i) and  server.arg(i) you can iterate through the fields and process them for you needs.

DOWNLOAD

ESP_WebConfig.zip

Changelog



Main Administration Menu
esp_config_menu

General Configuration
esp_general_settings

Network Settings
esp_config_network

NTP Settings

esp_config_ntp_settings

Network Information
esp_config_info