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…
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) Host: 192.168.0.175 Connection: Keep-Alive Accept-Encoding: gzip Content-Type: application/x-www-form-urlencoded Content-Length: 9 Hello put OK
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 192.168.0.175 Connection: Keep-Alive Accept-Encoding: gzip Content-Type: application/x-www-form-urlencoded Content-Length: 10 Hello post OK
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.
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.