Arduino + ESP8266 remote control LED using an Android App with Camera Live View

The Plan

In several of my previous post, I showed…

1. …my setup to control LED’s using an Arduino + ESP8266. (LED’s Control Through ESP8266 + Arduino Web Page)
2. …using the AppInventor environment to send a Web.PutText to send a message to the Arduino. (AppInventor2 Web Interface Trial)
3. …embedding a live stream of a Foscam Wireless Camera into an AppInventor application. (Real time Wireless Camera view using AppInventor2)

My plan is to now mash up all three into one project.  I will make an app that will send Web.PutText to the Arduino through the ESP8266 to trigger LED light changes and have an embedded live Foscam Wireless window all on the screen on an Android App built in the AppInventor environment.

The Android App (built in AppInventor2)

The screen layout is made up of

• 6 buttons to turn on/off 3 LED’s.  The buttons are just sending custom WebPutText keywords.
• A WebViewer element which loads will load web page defined in text box element when the Go button is clicked.
• Another text box to specify the web address of the Arduino + ESP8266 system.

Here is what is looks like….

The AppInventor code to point the Web component to the ESP8266/Arduino server will set the Web1 URL to point to the web address that is entered in the corresponding text box.  I was running out of screen space and didn’t want to have to add another button so I just have the code run after the address is typed into the box and something else on the screen is touched.  It looks like this…

The code to start up the live camera view is really just creating a Webviewer window which will display the web site specified in the corresponding text box whenever the Go button is clicked.  The rest is really up to the Foscam camera to serve up the live stream….

The LED controls are just sending some custom strings using the Web.PutText function.  I am using “PtcApp” as a keyword that is not likely to be seen by the server that I can key off of.  I follow up “PtcApp” keyword with a code for the {first letter of the LED color}:{1 for on / 0 for off}.  The magic will happen on the upcoming Arduino code.  Here is the AppInventor code….

The Arduino Code

I am only going to cover the additional Arduino code I add to implement the AppInventor functionality here.  The rest of the program has been detailed in many of my previous post.

The first step is really simple.  I just added another parser block to look for “PtcApp” in the incoming line from the ESP8266.  I left all the previous parsing blocks and function so that all the previous features will still continue working (ie: the web page interface is still fully functional).   Once the “PtcApp” is found, I call a function to parse out which color LED to control and if it is a request for On or OFF.  Here is the code snips….

 if (InLine.indexOf("PtcApp ") != -1) {
    CommandQue[QueIn++]=PUT_REQUEST;    //** See next section in post for what this is for **
    ParseCustomAppRequest(InLine);
    UpdateLCDStats();
    NumberAppReq++;
    UpdateLCDStats();
 }
....
//*** This parses out the LED control strings from custom Android App and sets the appropriate state vars *** 
void ParseCustomAppRequest(String InLine){
 if (InLine.indexOf("R:0")!=-1) RED_State=false;
 if (InLine.indexOf("G:0")!=-1) GREEN_State=false;
 if (InLine.indexOf("B:0")!=-1) BLUE_State=false;

 if (InLine.indexOf("R:1")!=-1) RED_State=true;
 if (InLine.indexOf("G:1")!=-1) GREEN_State=true;
 if (InLine.indexOf("B:1")!=-1) BLUE_State=true;
}

The First Test

This all actually started working very well initially.  Everything worked pretty much on the first attempt, but after 5 LED change requests from the Android App, the ESP8266+Arduino stopped seeing any more requests.

Debugging the logs, I found that each PUT request was holding an additional IPD channel open.  (In case you haven’t been following my previous posts, an IPD channel is the ESP8266 way of handling multiple TCP clients.  Each channel corresponds to a client so the server can send messages to a specific client).  The ESP8266 seems to have a limit to only be able to hold open 5 open IPD channels and then stop accepting any more connections.

I remembered another similar situation where the client wasn’t closing the connection.  It was because I wasn’t sending an HTTP header back for a GET request (see the “Extra Fix” section in my post “Arduino + ESP8266 Mini Server with Command Que“).  Hoping it was the same problem I made a very simple HTTP header with 0 length response and send it back each time I get a PUT request…

String PutResponse ="HTTP/1.0 200 OK \r\n"
 "Date: Fri, 31 Dec 1999 23:59:59 GMT\r\n"
 "Content-type: text/html\r\n"
 "Content-length: 0\r\n"
 "Connection: Closed\r\n"
 "\r\n";

...

 case PUT_REQUEST:
    SendCIPChunk(PutResponse,CommandQueIPD_CH[QueOut]); // Send the CIPSEND command to respond to Put request 
    break;

Once I sent back the proper HTTP header, the client automatically closed the connection and all the requests from the AppInventor Web.PutText button clicks were coming in on IPD channel 0 consistently.  I was able to get the LED to change +100 times through a day of testing so I think it is pretty stable now.  🙂

BTW – I will include a link at the end of this post for the full Arduino code to get the complete picture.

The Demo

Here is a short video demoing the setup…

The Arduino Code

If you want the code…

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