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.
|