LED’s Control Through ESP8266 + Arduino Web Page

The Plan

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…

HTMLFormSnap

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 Code

The really messy code is available here:

https://drive.google.com/file/d/0B1a0nPfCQQvKbThLeFM5MW44dFU/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 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…

Update12_14_14

The Demo

Video demo of the system in action…

Advertisements

11 thoughts on “LED’s Control Through ESP8266 + Arduino Web Page

  1. Pingback: Adding LED States to Web Page (LED’s Control Through ESP8266 + Arduino Web Page) | PetesTechProjects

  2. Pingback: Cheap $4.59 LCD with Arduino | PetesTechProjects

  3. Pingback: Adding LCD to Web Page Controlled LED (Arduino + ESP8266) | PetesTechProjects

  4. Pingback: Real time Dlink Wireless Camera view using AppInventor2 | PetesTechProjects

  5. Pingback: Arduino + ESP8266 remote control LED using an Android App with Camera Live View | PetesTechProjects

    • I just tried the download link after logging out of my Google account and was able to get the file so I think the link should still be good. Couple if unfortunate issues that I have found trying to share from Google Drive though….
      1) Right click and “Save Link as..” will not work. You have to actually follow the link. If you try “Save Link as..”, you will get a blank html file.
      2) When you left click the link, Chrome or Internet explorer will say there is no appropriate viewer for the file. There should be a download button though.

      What browser are you using? I only tested on Chrome and Internet Explorer.

      Like

      Reply
  6. hello, There is probably an easy answer to this, but i’ve looked & looked to no avail! HOW does the Arduino (or 8266) know where this web page is in order to connect with it? (when the html is launched). i have my web page come up on my notebook (where the ino is running and i’ve place the IP address, ssid, & password into the code, but in my mind, when i launch this html, how would it know to be caught by the 8266?

    new to wi-fi stuff,
    Russ in Coral Springs, Florida

    Like

    Reply
    • Russ,

      I am not sure I totally understand your question. The Arduino or ESP8266 doesn’t really “know” where the web page is. Also the .ino should be running on the Arduino chip, not on the notebook. Let me try to explain the transaction to see if it helps.

      1. When you type in the IP address of the ESP8266 into your web browser on your notebook, it will send a string to port 80 of that IP address through your laptops Wifi adapter. The string will start with “GET / HTTP/1.1”.
      2. The ESP8266 will see the Wifi message and pass this string to the Arduino through the serial port which connects them together.
      3. My Arduino sketch (the .ino running on the Arduino board) is parsing for the “GET / ” string.
      4. When the “GET / ” string is found (ie: you typed the IP address into your web browser), the Arduino sketch will send out a HTTP header and the HTML code to the serial port connected to the ESP8266.
      5. The ESP8266 then sends this message over Wifi back to your web browser. Your web browser will decode the HTTP header and HTML code and display the page to you.

      BTW – Notice that the full communication path here doesn’t include the USB cable between your laptop to Arduino at all. This means that the Arduino board doesn’t have to be connected to the same laptop you are using the browser on. The Arduino board can be totally disconnected from the laptop you are browsing on (ie: connected to another laptop/desktop USB port or anything that can power up the Arduino). As long as the ESP8266 and the laptop you are browsing from are on the same Wifi network, the system will work.

      Hope this helps,
      Peter

      Like

      Reply
  7. Hi,

    I am testing my esp8266 with last one month .Still i am not able make a reliable web server.

    You post is very help full., I trie it and getting following error and getting hang while access from any browser .

    OK
    InLine:
    InLine: 0,CONNECT
    InLine:
    InLine: +IPD,0,364:GET / HTTP/1.1
    ******** IPD found: 0
    InLine: Host: 192.168.1.4
    InLine: Connection: keep-alive
    InLine: Cache-Control: max-age=0
    InLine: Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
    InLine: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36
    InLine: Accept-Encoding: gzip, deflate, sdch
    InLine: Accept-Language: en-US,en;q=0.8
    InLine:
    InLine:
    InLine: OK
    InLine: @f¬8¤ÿâÎDH
    InLine: {
    InLine: HTTP/1.0 200 OK
    InLine: ERROR
    InLine: Date: Fri, 31 Dec 1999 23:59:59 GMT
    InLine: Content-Type: text/html
    InLine: busy p…
    InLine: Content-Length: 1155
    InLine: busy p…
    InLine:
    InLine: ERROR
    Timed out on keyword: SEND OK
    InLine: AT+CIPSEND=0,527
    InLine: link is not
    AHAHAHAHAHAAHAHAHAHAHAH***********************************
    Timed out on keyword: >

    Could you please help me .Thanks in advance..

    Like

    Reply
    • It look like you might be using some of the code I shared in a post. The error you are encountering is due to trying to send a message to a ESP8266 channel that is not open. I also see a bunch of junk characters (InLine: @f¬8¤ÿâÎDH) right before the HTTP header is being sent back. I am not sure what that is but is probably the reason for your trouble. Are you using a level shifter between your Arduino and ESP8266?

      Like

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s