The ESP8266 has given the hobbyist the ability to do some rather amazing tricks for their home projects. But, as the weekend programmers have learned, the more complex the webpage, the slower the ESP8266 appears to be in managing the page. What is needed is to take some of the professional web tools and use them to put our little $4 dollar ESP8266 into turbo mode! What we want to do is only move the HTML page once from the server to our browser device (desktop, notebook, cellphone, tablet) and then move only the data thereafter. On the browser, we want to show the data (in our example, we will show the time the ESP8266 has been running since power-on). We are also going to build a graphic slider control which can be adjusted across its range. The value of the control will be sent to the ESP8266 and will control the LED blink rate on our NodeMCU (a Chinese manufactured LoLin board).
To summarize, the time value that is ticking away will come from the ESP8266 every second and the value of the slider control will be sent to the ESP8266 to control the LED blink rate.Implementation
const int sliderMAX = 1; // This sets the number of sliders you want
Below is shown a screen-print of my browser after connecting to the web-server:
The code attached will turn the ESP8266 into a web-server and the client section of the code will log into your home router. For this to be successful, you must change the two following lines in the main tab:
const char* ssid = "**SSID*"; const char* password = "wifipasswd";
If you are using another ESP8266 module or board that is not the LoLin produced NodeMCU, you will likely have to also change the line below:
int LED = 2; // NodeMCU by LoLin
After you upload the compiled code to your ESP8266, you will need to use the Arduino serial monitor to determine the IP address that the NodeMCU acquires from you home WiFi router. Shown below is what I get:
... Attempting to log into router... BOOTING ESP8266 ...Connected to SKINC99 Station IP address: 192.168.100.67
This project is marked "easy" but the concepts and code utilized are "advanced" topics and many readers will need to spend time studying the code and doing some serious research and reading in order to make changes. But I wanted to bring this technique forward and publish it because AJAX is a very powerful capability and will greatly extend your thinking on what can be done with the ESP8266.
This project could not have been done without Peter's help and I want to thank him for working through the difficulties and posting his implementation. Open Source code and projects are paramount to self-education using the World Wide Web.