Real time Wireless Camera view using AppInventor2

The Plan

I was showing people how I can remotely control some LED’s connected to an Arduino and an ESP8266 through the internet while at the park today.  I had 2 phones running.  One phone had a live feed coming from a Dlink Wireless camera and the other phone was controlling the LED’s through the web page that I demoed in my previous post “LED’s Control Through ESP8266 + Arduino Web Page“.  Note: There have been other additions to enhance the setup in some of my later post that built on top of that so look for those if you are interested.

This 2 phone demo was pretty cool but it was a little clunky having 2 phones for a demo.  I was thinking a more elegant demo would be to have the LED controls and live feed all contained in one Android app.

I have also been messing around with MIT’s AppInventor environment in some of my recent posts.  I found that I can send custom strings to the Arduino through the internet using the Web.PutText feature (see post “AppInventor2 Web Interface Trial“) so controlling the LED’s can be taken care of by using that.

I did some more looking around in AppInventor2 and found the WebViewer component today.  I am going to see if I can make a portion of the app screen show a web page that is pointed to my Dlink Wireless camera.  This post will show the trials I did to get familiar with the AppInventor2 WebViewer component.

The AppInventor Setup

The screen layout is added on top of the Web Interface Trial for now.  I left the 2 buttons to send a PutText and PostText.  I added a text box to type in the URL and a load button.  The rest of the screen is just a WebViewer component….


The code is also simple.  When someone clicks the load button, set the WebViewer’s URL property to what is in the text box….


The Testing

First I tried just entering into the text box and couldn’t get the web page to load.  I then decided to try putting the full address of “” and that worked.  Then I tried and could view this blog site with no problem.

I then tried to enter the ip address of my Dlink Wireless camera.  Unfortunately all that comes up is “Error: Authorization Required…. Authentication was requested”.  When I go to the same page using a standard web browser on the PC, it pops up login dialog.  The camera could be using Java scripts.  The AppInventor WebViewer probably just doesn’t support it.

Luckily I have different type of wireless camera to try.  I recently bought a refurbished Foscam FI8910W Wireless Camera from Amazon:  I tried that one and it worked perfectly.  That camera has a much simpler web interface and even features a “mobile phone” interface.  I logged into the camera in the WebViewer window and could see a live feed.

The Next

Now I have tested the individual pieces to be able to make an AppInventor App that can send custom strings to my Arduino + ESP8266 + LED setup and display a live video feed in the same app to watch as the lights change.  Will hope to put it all together in my next post and show a quick video demo of it all working.

AppInventor2 Web Interface Trial

The Plan

So far I have been able to demo using a simple TTY or a more complex HTML web page with an embedded form to control 3 LEDs connected to an Arduino through an ESP8266 wifi module.  I was looking for a way to control things directly from an Android App to make it look cooler and to allow for a more flexible messaging system.  In my last post, I also showed how I started messing around with MIT’s App Inventor 2 environment (Android Programming with AppInventor2).  I tried finding some sort of raw TCP IP connection or UDP packet sender in the App Inventor 2 tools, but couldn’t find anything.  The closest I could find was the Web.PutText and Web.PostText.  This blog post is to show the details of what I found trying to get familiar with this AppInventor feature.

The AppInventor Implementation

The AppInventor screen layout is very simple.  All I want to do at this point is to send either Web.PutText or Web.PostText so I just made 2 buttons on the screen that I can attach some code to.  I also added a Web component with the URL set to the IP address of my ESP8266 (see my previous post “Adding LCD to Web Page Controlled LED” for details on the ESP8266).  Here is a snapshot of the screen layout in AppInventor…


The “code” is also dead simple.

  • When Button1 is clicked, send a Web.PutText with a payload of “Hello put”
  • When Button2 is clicked, send a Web.PostText with a payload of “Hello post”

Here is what the “code” looks like…


The Results

I fired up my Arduino + ESP8266 system and launched my AppInventor application on my Android tablet.

When I click the button to test the Web.PutText feature, this is what the Arduino saw coming from the ESP8266…

  • +IPD,0,237:PUT / HTTP/1.1
    User-Agent: Dalvik/1.6.0 (Linux; U; Android 4.2.1; M470BSA Build/JOP40D)
    Connection: Keep-Alive
    Accept-Encoding: gzip
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 9
    Hello put

When I clicked the button to test the Web.PostText feature, this is what the Arduino saw coming from the ESP8266…

  • +IPD,1,240:POST / HTTP/1.1
    User-Agent: Dalvik/1.6.0 (Linux; U; Android 4.2.1; M470BSA Buil
    Connection: Keep-Alive
    Accept-Encoding: gzip
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 10
    Hello post

Both of these will send a full HTTP header before the text that I want to send.  So it isn’t exactly what I wanted like a TTY app which can send just the raw characters, but it still drastically cuts down on the data traffic vs. my previous implementation using a full HTML page with embedded form.  Using the HTML form required me to send a full HTML page just so a user could send back a POST command and then required me to send back another full HTTP header and HTML page.  Now I can build a fully customized Android app that can send a PUT or POST command without needing my server to send it something first.  Also don’t need to send back a full HTTP header and HTML to satisfy the browser.  Should make my system a little more robust when a user has the custom Android app.

The Next

Now that I have a better grasp of what raw data will be going through the ESP8266 when AppInventor calls the Web.PutText function, I will enhance my previous Arduino code to be able to control LED’s from messages coming from a custom Android app utilizing the Web.PutText component.

BTW – I contemplated if I should use the Web.PutText or Web.PostText component and decided to go with the Web.PutText for now.  The Web.PostText sends the string “POST / HTTP” which is identical to the trigger I use for controlling LEDs and sending back a full HTTP header and HTML page with the current LED states when using a HTML form.  The Web.PutText will send a string with “PUT / HTTP” which I am currently NOT looking for.  This will allow me to add to my current system instead of replacing my current system.

Hopefully my next post will be to demo a custom Android App controlling LED through the ESP8266 and Arduino from anywhere in the world where I can access the internet.

Android Programming with AppInventor2

A little break from the Arduino and ESP8266.  Wanted to broaden my skills with some Android programming to be able to come back and interface phone/tablet with the Arduino.

The Plan

I wanted to be able to use my Android phone or tablet to communicate with my Arduino through the ESP8266 or a Bluetooth module that I bought recently.  I saw some other examples on Youtube where they used MIT’s AppInventor platform to make some Android apps that could communicate through a Bluetooth module.  I decided to try my hand at making a few apps at … and got very caught up in it.  The system is very easy to use and relatively powerful.  Very impressed with how easy they make it.  This post is focusing on the first app that I made.

The Android App

I followed the normal tutorials they have at the AppInventor web site.  They were painting type apps where you can draw pictures with your finger.  Was useful to get the feeling of the environment.  I pushed forward to make something I thought was a little more interesting.  I decided to incorporate the accelerometer with the drawing program.  It is kind of like a marble with wet paint on a pad of paper.  You can tilt the phone/tablet to move the marble around on the pad and leave a trail where the marble rolled.  Best to just show the video of the finished app….

The Research

To start, I needed to get familiar with AppInventor accelerometer interface.  I made a very simple app that would just print out what the x and y accelerometer returned whenever there was a change in the accelerometer readings.  Just 2 labels and 2 text boxes to fill in the accelerometer reading.  Here is a short video….

Here is what the screen layout looks like in AppInventor….


The “code” looks like this…


All this is saying is…

  • Whenever there is a change in the accelerometer…
    1. Change the text in text box1 to the value returned by the x-accelerometer.
    2. Change the text in text box2 to the value returned by the y-accelerometer.

That is it!!  That is the entire “code”!

From what I can tell, it looks like it is just reporting back in standard G’s.  If I have the phone vertical, the y-accelerometer shows around 9.8 ( m/sec^2 if I am not mistaken).  The same goes for the x-accelerometer.  I didn’t test the z since I am not trying to sense that for anything yet.

The Full Mable Pad App

Now that I figured out the accelerometer interface I moved on to making the marble pad app.  I already knew how to draw dots on the screen from the various on line tutorials.  Now just needed to mash the 2 together.

  1. First I create a button to reset the screen and a canvas that the dots will be painted on.  That is all that the screen setup needs to be…
    • MarblePadScreenLayoutSnap
  2. The code initialize an x and y variable to hold the current position of the marble.
    • See next section for picture.
  3. When the screen initializes, set the current x and y variables to the halfway point, ie: middle of the canvas.  Draw a purple dot at the current x,y coordinate (which we just set to middle of the canvas).
    • MarblePadInitCode
  4. Whenever the accelerometer value changes,
    1. increment the current y by the value returned by y accelerometer
    2. subtract the value returned by the x-accelerometer from the current x value.  We need to subtract the x accelerometer value because tilting it right causes a negative number
    3. Round the value of the accelerometer value since the x,y coordinates are pixels so need to be whole numbers.
    4. Check if the current x or y value is either below 10.  If either are less then 10, set it back to 10.  This is to keep a top and left border around where the marble can go.
    5. Check if the current x or y value is within 10 of the total width or total length of the canvas area.  If it is, set it back to 10 less than the max.  This is to keep a right and bottom border around where the marble can go.
    6. Once the new x,y coordinate is found, draw the new dot.


There is also some code for the reset screen which is the same as the screen init but adds a clear canvas at the start to wipe all the lines on the screen.


That is pretty much it!  Not very hard at all.  If you have ever thought, “only if someone would write an app that could…”, I encourage you to give it a try.  You can be that someone that will write that app.

The Actual Code

If you want to play around with the Marble Pad app, you can download the .apk here:

If you have your own AppInventor2 account and want to import the full code, you can get the .aia file here:

Have fun!

Adding LCD to Web Page Controlled LED (Arduino + ESP8266)

The Plan

In my previous post (LED’s Control Through ESP8266 + Arduino Web Page), I demonstrated how I used the ESP8266 and an Arduino Mega to create a web page that could control some LED lights from anyplace I could access the internet.  In my other previous post (Cheap $4.59 LCD with Arduino), I showed how I wired up a very cheap LCD to my Arduino and the demo software that showed how to draw various item and text on the screen.  I have not played around with the LCD a little and am now going to mash the 2 together and display a few key server statistics on the LCD screen.  Amazingly, it wasn’t as hard as I thought it would be.

In some of my previous posts, I already included details about how I have a counter for some key servers stats like number of web pages served, number or LED change request served, etc.  I am going to reuse those same counters and display to the screen.

The Arduino SW

First I draw the basic background of the screen by the following code.  I added comments to help make things easy to understand.

Note: I luckily guessed the LCD library was using the same color codes used for HTML pages.  I used this page to get the colors I wanted…

#define LCD_NETWORK_ROW 101
#define LCD_IPADDR_ROW 114
#define LCD_GRAY_ROW 101
#define LCD_SERVED_ROW 14
#define LCD_CHANGES_ROW 28
#define LCD_RESETS_ROW 42
void SetUpLCDBaseDisplay(){

 //*** Create blue title bar with name ***
 myGLCD.setColor(0, 0, 255); // Blue for interior of rectangle coming up
 myGLCD.fillRect(0, 0, 159, 13); // Draw a solid rectangle from upper left = (0,0) to bottom right (159,13) 
 myGLCD.setBackColor(0, 0, 255); // Blue background for upcoming text
 myGLCD.setColor(255, 255, 255); // White lettering for upcoming text
 myGLCD.print("Pete's ESP8266 Hack", RIGHT, 1); // Write the text right justified at row 1
 //*** Create gray bar at bottom with status ***
 myGLCD.setColor(64, 64, 64); // Grey 
 myGLCD.fillRect(0, LCD_GRAY_ROW, 159, 127); // Gray box at bottom of screen
 myGLCD.setBackColor(64, 64, 64); // Gray background for upcoming text
 myGLCD.setColor(255, 255, 255); // White lettering for upcoming text
 myGLCD.print("Network:", LEFT, LCD_NETWORK_ROW); 
 myGLCD.print("...init",RIGHT, LCD_NETWORK_ROW);
 myGLCD.print("IP Add:", LEFT, LCD_IPADDR_ROW);
 myGLCD.print("...init",RIGHT, LCD_IPADDR_ROW);

 //** Create labels for key server stats 
 myGLCD.setBackColor(0, 66, 0); // Darkish Green ... note: lettering is set to white from last above still
 myGLCD.print("LED Changes: " + String(int(NumberLEDRequest)), RIGHT, LCD_CHANGES_ROW);
 myGLCD.print("Web Served: " + String(int(NumberServed)), RIGHT, LCD_SERVED_ROW);
 myGLCD.print("ESP8266 RSTS: " + String(int(NumberOfResets)), RIGHT, LCD_RESETS_ROW); 

This is what the screen looks like ..


Whenever I increment any of my key server stats, I call this function…

void UpdateLCDStats(){
 myGLCD.setBackColor(0, 66, 0); // Darkish green background
 myGLCD.setColor(255, 255, 255); // White lettering
 myGLCD.print(String(int(NumberLEDRequest)), RIGHT, LCD_CHANGES_ROW);
 myGLCD.print(String(int(NumberServed)), RIGHT, LCD_SERVED_ROW);
 myGLCD.print(String(int(NumberOfResets)), RIGHT, LCD_RESETS_ROW);

This will update the LCD with the most recent counter values.  I was originally re-writing the entire line including the label, but found that I would sometime miss some of the incoming serial data.  The screen updating turns out to be pretty slow so writing all the characters must have been taking too long.  I minimized the amount of LCD update to just 3 digits to try to avoid this issue.

Here is the full Arduino sketch if you want it…

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

The Results

The testing went pretty well so here is a quick video of the system in action….

Cheap $4.59 LCD with Arduino

The Plan

Now that I have the ESP8266 reasonably stable and serving up a web page that can take inputs from a user to control 3 LED’s, I am going to move on and add more peripherals to learn more of the Arduino capabilities. The first peripheral is going to be an LCD.

Because I am really cheap, I decided to dive right in and buy the cheapest one I could find for $4.59 (shipping included) here:

I knew it was a risk since there is nearly no documentation for it and is not one of the compatible LCD’s listed at the web site.  I did make sure that the vendors page did at least have a link to some code examples at… although the wording on the page of “Normally, the chip is Samsung S6D02A1″ didn’t really give me a lot of confidence.  Since I was only shelling out $4.59 I figured it was worth the risk.

The Zip File

I went to and was able to download a zip file.  Inside the zip file were a few .pdf files with some specifications.  One note was that the logic level was 2.8V which is a problem since the Arduino is 5V logic levels.  There was a comment on the product page…. “Using with Arduino, every IO port should be connected with resistance range 500 ~ 2KΩ.”.  I am assuming this is a cheap way to address the voltage difference.

The Wiring

First was to wire up LCD module.  The module has connection holes on 2 edges.  One came populated with a standard pin header and the other side just had the holes where a header could be installed.  There is a SD Card slot which has traces going to the holes that don’t have pins installed but NOT to the pre-populated header.  Looks like will need to solder if I want to use the SD Card slot.  Here is a picture….


Since I was mostly interested in just the LCD for now, I just plugged the pre-populated header into my bread board.  The pins were labeled…

1 – RST
2 – CS
3 – D/C
4 – DIN
5 – CLK
6 – VCC
7 – BL
8 – GND

There was a directory in the zip file, “1.8SPI Test Code for ArduinoUNO”.  I found an example Arduino sketch inside, QDtech_Demo_160x128_Serial_S6D02A1.ino.  At the start of the sketch, there was a section that listed what LCD pins should be connected to which Arduino digital IO….

//for QD_TFT180X SPI LCD Modle
//Param1:Value Can be:QD_TFT180A/QD_TFT180B/QD_TFT180C
//Param2 instructions:Connect to LCD_Pin SDA/SDI/MOSI(it means LCD_Model Pin_SDA/SDI/MOSI Connect to Arduino_UNO Pin11)
//Param3 instructions:Connect to LCD_Pin SCL/CLK/SCLK(it means LCD_Model Pin_SCL/CLK/SCLK Connect to Arduino_UNO Pin10)
//Param4 instructions:Connect to LCD_Pin CS/CE(it means LCD_Model Pin_CS/CE Connect to Arduino_UNO Pin9)
//Param5 instructions:Connect to LCD_Pin RST/RESET(it means LCD_Model Pin_RST/RESET Connect to Arduino_UNO Pin12)
//Param6 instructions:Connect to LCD_Pin RS/DC(it means LCD_Model Pin_RS/DC Connect to Arduino_UNO Pin8)
UTFT myGLCD(QD_TFT180C,11,10,9,12,8); // Remember to change the model parameter to suit your display module!

Most pins were easy to figure out.  The only questionable ones were DIN and BL.  I assumed that DIN meant Data In which would seems to match up with MOSI (Master Out Slave In) meaning.  I took a chance and just wired that up.  One of the included data sheets had VCC listed at typical 4.5V so I also took a chance and just directly hooked it up to the Arduino +5V output.  BL I assumed was for Back Light control.  Since I really don’t care about back light level, I just tied it to the +5V for full brightness.

The Software

I loaded up the “QDtech_Demo_160x128_Serial_S6D02A1.ino” into the Arduino IDE.  I couldn’t get it to compile at first then realized that I needed to import the UTFT library.  Luckily I found it in the same directory.  In the Arduino IDE go to Sketch -> Import Library -> Add Library… Browse to the UTFT directory which is in the same directory as the example sketch.  Once I did that, the code compiled.

The First Attempt

I loaded the example sketch to the Arduino with the LCD hooked up as described above … held my breath… and….. got a blank white screen.  😦

The Debug

After checking all my wiring, I remembered the “Using with Arduino, every IO port should be connected with resistance range 500 ~ 2KΩ.” comment on vendors product description page.  I thought that was “optional” to make it more stable if the screen was jittery or refreshed looked bad or something intermittent.  Since I didn’t have any other ideas, I went ahead and added a 1K resistor in series to every one of the control pins (not VCC or BL or GND).  I restarted the Arduino sketch and…. VOILA!  The LCD started to draw things and animate things.  Here is a video of what the example sketch did with the LCD….

Note: I tried on both the Arduino Uno and the Arduino Mega.  Both worked the same.

The Next

The example Arduino sketch in the zip file is pretty well document.  Going to start playing around with it to better understand the functions, capabilities and limitations.  After that, I want to add the LCD to my other project that remotely controls LED’s (posted here: LED’s Control Through ESP8266 + Arduino Web Page).  I can display some key server stats like the IP address, number of LED changes, up time, etc.   Maybe even something like a heartbeat animation for fun.

Update…. See my later post of how I added some basic text updates to my project “

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….HTMLFormSnap12_19

The HTML Implementation

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

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

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”…


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>";
 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){
 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…

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.

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…


I found that helped me write the HTML code for the above like this…

<form action="" method="post">
 <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>
 <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>
 <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>
<input type="submit" value="Submit">

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….

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
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
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8


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:

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…


The Demo

Video demo of the system in action…