Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/john-lassen.de/plugins/system/t3/includes/menu/megamenu.php on line 141
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.

 

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

 



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