In my previous post, “LED’s Control through TTY“, I showed how I can control some LED’s though a TTY client connected to my Arduino and ESP8266 ($4 Wifi module). I also posted how I made a reasonably stable web server utilizing a command que to respond to html requests here “Mini Server with Command Queue Memory Issue“. I am going to mash them together by adding a form in my HTML code that will send requests to the server to change the LED states.
The Web Page Implementation
I will use a HTML form to send a POST request back to the server. If you are like me and not familiar with how this works, I will explain what I know and how I will try to get it to work.
First I found out how to create a form with radio buttons and a submit button. Here is what the page looks like…
I found www.w3schools.com/tags/tag_form.asp that helped me write the HTML code for the above like this…
<html> <body> <form action="" method="post"> <fieldset> <legend>Red LED State</legend> <input type="radio" name="RedLEDState" value="RED_ON"> ON <input type="radio" name="RedLEDState" value="RED_OFF" checked="checked"> OFF<br> </fieldset> <fieldset> <legend>Green LED State</legend> <input type="radio" name="GreenLEDState" value="GREEN_ON"> ON <input type="radio" name="GreenLEDState" value="GREEN_OFF" checked="checked"> OFF<br> </fieldset> <fieldset> <legend>Blue LED State</legend> <input type="radio" name="BlueLEDState" value="BLUE_ON"> ON <input type="radio" name="BleuLEDState" value="BLUE_OFF" checked="checked"> OFF<br> </fieldset> <input type="submit" value="Submit"> </form> </body> </html>
The Server Implementation
Disclaimer: I am no expert. Just sharing what I found through googl’ing and trial and error.
When someone clicks the submit button in the form above, it will send a “POST” to the server. This post will include the name / value pair as defined in the above. Best to just show what my server sees when someone clicks the submit button above….
POST / HTTP/1.1 Host: 192.168.0.175 Connection: keep-alive Content-Length: 64 Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Origin: http://192.168.0.175 User-Agent: Mozilla/5.0 (Linux; Android 4.1.2; SPH-L300 Build/JZO54K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.93 Mobile Safari/537.36 Content-Type: application/x-www-form-urlencoded Referer: http://192.168.0.175/ Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.8 RedLEDState=RED_OFF&GreenLEDState=GREEN_ON&BlueLEDState=BLUE_OFF
Note the last line highlighted in cyan. In this example, the RED and GREEN LED ON button would have been checked and the BLUE LED OFF button was checked. I plan on using this request line to control the LED states. The one side effect is that the browser is now waiting for a HTML response. My simple hack to address this is to just re-send the same web page again for now. Eventually I will add code pre-populate the radio buttons with the current state of the LED’s instead of all OFF.
The really messy code is available here:
Save to your local drive and then you can open it in a text editor if you don’t have the Arduino ID.
The coding is REALLY sloppy for now. Will go back to clean up once I get everything I want working.
The Hardware Setup
If you missed it in my earlier post…
Video demo of the system in action…