Adding LED States to Web Page (LED’s Control Through ESP8266 + Arduino Web Page)

The Plan

In my previous post demonstrated how I can remotely control some LEDs through a web page being served up by an Arduino hooked up to the ESP8266 (post here).  The web page was static and the check boxes always defaulted back to Off.  I am going to add code that will pre-populate the check box to show which state the LED’s are in when the web page is served up.  I also am going to add a new button that will request what is the latest state of the LED’s since multiple users could be controlling the LED’s.  This is what I want to see….

The HTML Implementation

To add 2 buttons that will return different strings to the server when clicked, I added this to my previous HTML…

 <fieldset>
 <legend>Actions</legend>
   <input type="submit" name="LEDFormAction" value="Set LED States"> &nbsp &nbsp &nbsp 
   <input type="submit" name="LEDFormAction" value="Get LED States">"
 </fieldset>

You can find the rest of the HTML in my last post referenced above.

With this, the POST message sent to the server will also include:

• LEDFormAction=Get+LED+States
• or
• LEDFormAction=Set+LED+States

Here is an example one for the POST messages sent when someone clicks the “Set LED States”…

RedLEDState=RED_OFF&GreenLEDState=GREEN_ON&BlueLEDState=BLUE_OFF&LEDFormAction=Set+LED+States

Now all the web server code needs to do is look for a line with “LEDFormAction=Set+LED+State”  and then change the LED states based on the request found on the same line.  If it finds “LEDFormAction=Get+LED+State”, it will just formulate the HTML with latest LED states and send back without changing the LED states.  You can look at the code linked below to see the Arduino code implementation.

The Arduino Code Implementation

To pre-populate the buttons with the latest state, I just pre-formulate the HTML code for that section using an if statement like this…

 if (RED_State){
 RED_StateHTML = "<input type=\"radio\" name=\"RedLEDState\" value=\"RED_ON\" checked=\"checked\"> ON"
 "<input type=\"radio\" name=\"RedLEDState\" value=\"RED_OFF\"> OFF<br>";
 }else{
 RED_StateHTML = "<input type=\"radio\" name=\"RedLEDState\" value=\"RED_ON\"> ON"
 "<input type=\"radio\" name=\"RedLEDState\" value=\"RED_OFF\" checked=\"checked\"> OFF<br>";
 }
... repeat for each LED ...

Then I just concatenate the string into the full HTML code sent out and the requester will see the correct check box filled in.

To add the functions for the 2 buttons shown in the HTML above, I just look for the key words and do the appropriate calls as explained above.

 if (InLine.indexOf("LEDFormAction=Set+LED+States") != -1){
    ParseLEDControl(InLine);
    SetLEDStates();
    NumberLEDRequest++;
 }
 if (InLine.indexOf("LEDFormAction=Get+LED+States") != -1){
    //Do nothing sinc the "POST / " command already is sending HTML page with latest LED states
 }

The Arduino Code

If you want the full code…

https://drive.google.com/file/d/0B1a0nPfCQQvKTkQ4QXo1aWVWczg/view?usp=sharing

Save to your local drive and then you can open it in a text editor if you don’t have the Arduino IDE.

BTW – I added a little extra code to actually try to wait for key responses during CIPSEND commands instead of a blind timeout in this version.  Not sure if it really helps as I still see the ESP8266 randomly just reset itself quite often but this seems cleaner way to do communications.