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…

AppInventorWebFeatureTrialScreenLayout

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…

AppInventorWebFeatureTrialCode

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

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.

Advertisements

17 thoughts on “AppInventor2 Web Interface Trial

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

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

  3. Hi Peter,

    First of all thanks for this blog! It’s really usefull!
    I plan to control LED13 of my Arduino with an App designed by App Inventor but without any server… Point to Point let’s say. Just like you planned.

    I’ve got an issue though with this tutorial.

    When I press Put Text (or Post Text) on my App, it displays “Error 1103: Unable to post or put the text “Hello Put” with the specified URL: http://192.168.4.1

    So here is my questions:

    1) How did you get your IP address of your Arduino?
    When I try to get mine I’ve got that:

    AT+CIFSR

    192.168.4.1
    192.168.1.18

    So I assume, it must be one of those? Unfortunatly none works… 😦

    2) How did you configure your EPS8266?
    TCP Client or TCP Server?
    Could you please give me more details about the configuration of your EPS8266?

    Thanks a lot!

    KR,

    Alex

    Liked by 1 person

    Reply
    • Alex,

      I have seen the Error 1103 before. That happened to me when the device I was running my AppInventor app on couldn’t reach the ESP8266. One way that could happen is if you are not on the same Wifi network.

      The ESP8266 can connect to a Wifi router and operate as a Wifi access point all by itself. You can set up the ESP8266 to the the mode you want using the AT+CWMODE= command. Since you are getting 2 IP addresses from your AT+CIFSR command, you must be in mode 3 which means it is running as both a Wifi client and Wifi access point/router at the same time.

      The 192.168.4.1 is the IP address if you are directly connecting to the ESP8266. The 192.168.1.18 is the IP address that the ESP8266 is from the router you connected to. I am not sure which Wifi network your Android device is connected to.
      * If you are connecting both your Android device to a Wifi access point (or router), then you would use 192.168.1.18.
      * If you are having your Android device directly connect to the ESP8266, then you should use 192.168.4.1. Make sure that your Android device’s Wifi is connected to the ESP8266’s Wifi SSID name. I changed the SSID name of my ESP8266 some time ago so I can’t remember the default name, but I think it might just be ESP8266 or that plus some other letters. Just open up the Wifi settings on your Android device and do a scan. I remember it was pretty easy to figure out which one was the ESP8266’s SSID name.

      If the Wifi network isn’t the issue, then here are the ESP8266 initialization commands from my Arduino sketch….
      AT+RST
      AT+CIPMUX=1
      AT+CIPSERVER=1,80
      Note: I am using port 80 in the CIPSERVER command. To talk to the ESP8266, you would need to use the IP address like 192.168.4.1:80 (the “:80” is the key). You can change that 80 to any other port you would like. Just make sure that when you try to talk to it from a client, you use the same number after the “:”.
      Also, I found that I had to set CIPMUX=1 first to get the CIPSERVER=1,80 working.

      BTW – Not sure if you saw the later post, but I got the PutText function working pretty well. See the post “Arduino + ESP8266 remote control LED using an Android App with Camera Live View” posted on Jan 9, 2015. You can even download the Arduino sketch from that post. If you are interested, I can also add the .apk file that I created in that post. Let me know.

      Thanks,
      Peter

      Like

      Reply
      • Hi Peter!

        I wish you could see my face when I received my “Put Text” on my Arduino!! 😀

        Thanks for your great explanations! All clear now!
        Basically, my EPS8266 is connected as a client that’s why it works perfectly with 192.168.1.18:80

        Do you know if it’s doable when the EPS and the Mobile are not connected to the same Wifi access point? And without any server.
        Like this, I can control my IO of my Arduino in the other side of the world!

        I saw your last post about controlling a LED with the app and watching it through the Cam. Great job! But tell me if I’m wrong, you are using a server and you are on the same access point, aren’t you?

        Thanks a lot Peter!

        Alex

        Liked by 1 person

      • Alex,

        Glad you were able to get the “Put Text” to work. It is always a such a great feeling when something works as intended.

        In my demo with controlling a LED with the app and watching it through a Wifi camera, the Android phone is NOT on the same Wifi access point. It is easy to miss in the video, but my phone’s Wifi is not even turned on at all. I am only using the phone’s 4G (cellular) network connection. I actually can control the LED and watch the live feed from the other side of the world…. as long as I can reach the public internet. I demo’ed the remote LED controls to a few of my son’s friends at a park several mile from home. Not quite around the world, but definitely not on the same Wifi network. 🙂

        The ESP8266 needs to connect to a Wifi access point/server connected to the internet, but the phone client just needs to be on the internet.

        One note is that I am also using port forwarding on my router. Setting that up takes a little networking knowledge. If you are not familiar with it, it is a way to kind of open a window in your router to allow outside traffic to come in. It is a little of a security risk so I only set up port forwarding when I have a specific reason for it.

        If you are thinking of trying to control your Arduino from outside the house, you will likely need to also set up port fowarding. Try Google’ing “port forwarding” along with your router model if you want to try it and not familiar with port forwarding. Each router’s menu in this area can be different so would be helpful if you can find the instructions for your specific model.

        Glad you are finding this blog useful. It has been fun blogging about my projects. Hope to be posting more of my fun “adventures” in tech soon.

        Thanks,
        Peter

        Like

      • Hi Peter!

        Thanks for your feeback!
        I used your code of the “Arduino + ESP8266 remote control LED using an Android App with Camera Live View” Project.

        I removed the LCD parts of the code because I want it as simple as possible and it doesn’t work unfortunatly. 😦

        I think we have a different firmware of our EPS8266. Mine the baudrate is 9600.

        Anyway, I have more questions:

        1) Are you using an Arduino Uno? I guess not because I can see “Serial1” in your code.

        2) My App send data “LED1” or “LED0″ to 192.168.1.18:80 and when I read data from the Serial, all I have is this:

        +IPD,0,235:PUT / HTTP/1.1
        Content-Length: 4
        User-Agent: Dalvik/2.1.0 (Linux; U; Android 5.0.2; XT1033 Build/LXB22.46-28)
        Host: 192.168.1.18
        Cnncto: ep-lve
        ccp-Ecdig gi
        otet-ye:aplctinx-w-fr-ulncdd

        LE1
        O


        I am actually expecting to receive something like this:


        +IPD,0,235:PUT / HTTP/1.1
        User-Agent: Dalvik/2.1.0 (Linux; U; Android 5.0.2; XT1033 Build/LXB22.46-28)
        Host: 192.168.1.18
        Connection: Keep-Alive
        Accept-Encoding: gzip
        Content-Type: application/x-www-form-urlencoded
        Content-Length: 4

        LED0
        OK

        So here is my code to get this:

        #include

        SoftwareSerial ESP8266(10,11);

        const char LED = 12;

        void setup()
        {
        pinMode(LED,OUTPUT);
        digitalWrite(LED,LOW);

        Serial.begin(9600);
        ESP8266.begin(9600);
        initESP8266();
        }

        void loop()
        {
        if(ESP8266.available())
        {
        String response = “”;
        while(ESP8266.available())
        {
        char c = ESP8266.read();
        response+=c;
        }
        Serial.print(response);

        }
        }

        void initESP8266()
        {
        sendDataToESP8266(“AT+RST”,3000);
        sendDataToESP8266(“AT+CWMODE=1”,5000);
        sendDataToESP8266(“AT+CIFSR”,1000);
        sendDataToESP8266(“AT+CIPMUX=1”,1000);
        sendDataToESP8266(“AT+CIPSERVER=1,80”,1000);
        }

        void sendDataToESP8266(String command, const int timeout)
        {
        ESP8266.println(command);
        readDataFromESP8266(timeout);
        }

        String readDataFromESP8266(const int timeout)
        {
        String message = “”;
        long int time = millis();
        while( (time+timeout) > millis())
        {
        while(ESP8266.available())
        {
        char c = ESP8266.read();
        message+=c;
        }
        }
        Serial.println(message);
        return message;
        }

        3) Did you notice that when “+IPD,” = 4, I can’t read any message anymore?

        I am sorry to be such a pain in the a** but I am so frustrated with this bloody ESP!

        Thanks for any help!

        Alex

        Like

      • Alex,

        I saw that you found the other post regarding the limitations of the SW UART cause the end of the messages to be missing or corrupted. It does look like you are hitting the same limitation I saw with it. Your other option might be to use the HW UART for the ESP8266, but then you won’t have any logging capability. You can also try bumping up the baud rate on the SW UART, but you will have to make sure to have a very good level shifting circuit. I was not using a very good one so was getting corrupted characters when trying to go past 9600.

        I did also notice the issue with anything after “+IPD:4”. It looks like the ESP8266 firmware / HW can only up to 4 channels in parallel. It is unfortunate, but for under $5 USD, I don’t really expect much.

        Thanks,
        Peter

        Like

  4. Hi, when you say results from Arduino, does it means you are seeing it from the Serial Monitor?
    +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

    you are seeing this from the serial monitor?

    Like

    Reply
    • Aaron,

      That is correct. The snippet that you listed shows up in the Arduino Serial Monitor if you have it open when the “PostText” button was pressed in the Android App.

      Just a little more detail….

      • The “+IPD,1,240:” is generated by the ESP8266. It signifies that the communication is coming from connection/channel 1 with a length of 240 characters.
      • The “POST / HTTP/1.1…..” and on is generated by the Android App. This is a standard HTTP protocol POST transaction. I found a great reference regarding HTTP transactions at http://www.jmarshall.com/easy/http/ There is a section specific to POST there too.

      Thanks,
      Peter

      Like

      Reply
  5. Hi Peter,
    Thanks for the explanation. Is it possible if i can take a look at your full arduino code please?

    Cheers,
    Aaron

    Like

    Reply
  6. Hi Peter,

    Sorry to bother you again. I am wondering how i should code the arduino uno side for this?
    Is it the same as what Alex posted above?
    Hope you can help me out please. 🙂

    Like

    Reply
    • Aaron,

      No problem. Always glad to help out a fellow Arduino enthusiast.

      Not sure exactly what you are trying to accomplish right now. I see that you found some of my code in some of the other posts. I think all my Arduino code used in my posts is included in various posts. Are you trying to recreate something from one of my posts or trying to do something new?

      Also, I notice that you mention your are using the UNO which only has 1 HW UART which is used for the serial terminal debugging message. If you are trying to use a SW UART connected to the ESP8266, you might run into a dead end. I found that the SW UART is just not fast enough when there is more than just a line or 2 at a time. After that, the interface seems too slow and characters will be lost. I haven’t found any way around that through SW changes. I had to change over to an Arduino Mega which has multiple HW UARTs. See my post “Arduino Slow SW UART Limits with ESP8266” which describes the problem and where you can purchase a Arduino Mega for around $15 USD to avoid it.

      If you don’t want to purchase another Arduino board, you can connect the ESP8266 to the HW UART, but then you won’t be able to use the serial terminal any more. You will be running “blind” but you won’t miss any more characters.

      Hope that helps,
      Peter

      Like

      Reply
  7. Its seem that it can be opened 5 chanels…and then the comunication stop.
    you can automaticly close the chanels with “set server timeout” AT+CIPSTO=2

    it will close chanels in 2 seconds

    Like

    Reply
    • Thank you for the insight. This is very useful. I didn’t know there was a way to automatically close the channels. I will try to add that to my code next time I make an update.

      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