M5Stack with MIT App Inventor - Easy mobile app creation for your M5Stack


  • M5Stack

    This tutorial assumes that you have already pre-installed the necessary com port driver, have installed the Arduino IDE (arduino.cc) m5stack board manager files and the m5stack library.
    If you haven’t see the Arduino quick start guide on our docs page:
    https://docs.m5stack.com/#/en/quick_start/m5core/m5stack_core_quick_start

    First of all why would we want to use MIT app inventor with M5Stack? MIT app inventor is a fantastic and simple tool that uses block programming and a simple UI to design android apps. You can download the .apk file for the app that you have designed and even publish it on the google play store.

    Although UI flow already offers a remote mobile app function it is not robust enough yet to accommodate an app with a more sophisticated UI and also it is only accessible by scanning a QR code which connects to a webpage.

    Currently I have only managed to use Arduino code to program the M5stack to work with MIT app inventor, but I am sure there will be a way to program this functionality soon with UI flow, especially now that the custom blocks function has now been integrated.

    For the people out there who prefer to use blocks though do not fear. A computer science teacher from Tunisia by the name of Adel Kassah has developed a nice website (easycoding.tn A.K.A Tuniot) which allows the user to generate Arduino code for ESP32 by using blocks, and he has many nice tutorials on his youtube channel on how to use it.

    0_1551189779859_Screen Shot 2019-02-20 at 11.31.17.png

    Let’s get started. First go to the website easycoding.tn scroll down the page until you see the icon
    TUNIOT FOR ESP32 on the left side column. (!!Make sure you choose esp32 and not esp8266!!)

    0_1551226415918_Screen Shot 2019-02-20 at 11.35.53.png

    After you clicked the icon you will be greeted with the block interface that looks like this.
    0_1551226451342_Screen Shot 2019-02-20 at 11.41.16.png

    I will not go into detail on how this interface works as Adel already does a good enough job of that in his videos. He has created a bunch of templates for setting up a web server on your ESP32 device so we will choose one of those templates from the drop down templates panel which is called “server in an encrypted network”

    0_1551226496861_Screen Shot 2019-02-20 at 11.45.28.png
    0_1551226523769_Screen Shot 2019-02-20 at 11.45.38.png

    We need to first enter our wifi network and password into the black block labelled “Connect Network ssid “ ” password “ “ ” so we can connect our device to the network. (note: if you do not feel secure entering your home wifi details into this website it’s ok we can enter it offline in the arduino code later)
    0_1551226573669_Screen Shot 2019-02-20 at 11.49.42.png
    We also need to remove the block that assigns a static IP. Do this by right clicking the block and selecting delete block.
    0_1551226609451_Screen Shot 2019-02-21 at 13.43.17.png
    Next we need to get the clear http request block from the String section. In a moment we will be creating two if blocks which will compare the request against the string “on” or “off”. This clear http request block will remove any unnecessary data from the http request in order to compare the strings better ( if we don’t use this block our http request will look like this “GET /on HTTP/1.1)
    0_1551226650200_Screen Shot 2019-02-21 at 16.31.04.png
    Add this block in below the set STRING client request to server request block.
    0_1551226701134_Screen Shot 2019-02-21 at 22.54.20.png
    Now we can set the two if blocks for off and on http request. We get the if block and comparator block the first two blocks from the logic section and drag them in above the client flush block.
    0_1551226786778_Screen Shot 2019-02-21 at 22.58.11.png
    0_1551226829378_Screen Shot 2019-02-21 at 22.59.09.png

    Now we get the client request block from the string section and place it in the first empty slot in the logic block we just placed.

    0_1551227169233_Screen Shot 2019-02-21 at 23.02.02.png
    0_1551227186249_Screen Shot 2019-02-21 at 23.02.11.png

    Next we need to go into the text section to get a blank block with quotation marks around it, this block creates a string which we can type something into such as “on” and then compare whether the http request has the same message or not.

    0_1551227231556_Screen Shot 2019-02-21 at 23.04.47.png
    0_1551227242459_Screen Shot 2019-02-21 at 23.05.04.png

    Duplicate the last steps to create an if condition for off as well.
    0_1551227299981_Screen Shot 2019-02-21 at 23.07.03.png

    Now for this simple example we will light up an LED on pin 26 which is easy to find on the base of the core, but for go and fire users you will have to insert a grove connector into port b (black port) and stick the LED into the end of the grove cable connector. Attach the short leg of the LED which is ground into the left side of the connector which has a black wire connected to it and the other leg into the right side which has a yellow wire connected to it.
    0_1551228469457_IMG_1050-min.JPG
    0_1551228677936_IMG_1048.JPG
    To finish off the code on this website we find the digital write pin block in the digital section of IN/OUT and place one in each of the if conditions we just made.
    0_1551228732066_Screen Shot 2019-02-21 at 23.23.50.png

    Then change their values to these

    0_1551228758288_Screen Shot 2019-02-21 at 23.24.04.png

    0_1551228937443_Screen Shot 2019-02-21 at 23.25.43.png

    Now were done with the blocks code on this site, click on the copy arduino code to clipboard code button, load up the arduino IDE, create a new sketch and paste the code in.

    0_1551228991709_Screen Shot 2019-02-21 at 23.35.08.png
    0_1551229007612_Screen Shot 2019-02-21 at 23.37.11.png

    Now make sure your m5stack is plugged in and port and correct m5 stack board is selected. Although this code will work fine theres some small adjustments we can do to make our lives easier. Unless we do a scan of devices on our network we don’t know what the IP dress of our M5stack device is. So before we upload this code we can make some minor adjustments to display the IP address on the screen of our device.

    At the very top of the sketch below #include <Wifi.h> we can add the line #include <M5Stack.h> to include the m5stack library.

    0_1551229082497_Screen Shot 2019-02-27 at 00.57.47.png

    Now let’s scroll down to the void setup() section and add this line which initializes the m5stack M5.begin

    and replace the line Serial.println((WiFi.localIP())); with M5.Lcd.println((WiFi.localIP()));

    0_1551229194797_Screen Shot 2019-02-27 at 00.59.41.png

    Now we can test that this works before we create the app. Upload the code to your device wait for it to display its IP address on the screen which should look something like 192.168.x.x.
    Copy that IP address into the browser and then add a forward slash followed by on like so:
    http://192.168.1.8/on if you did everything correctly your LED should now turn on, to turn it off simply replace on with off in the http request http://192.168.1.8/off

    Now to design the app we need to go to http://ai2.appinventor.mit.edu

    To test the app we will need to install the app inventor companion app on our android device. You can search for it on the google play store and install it from there. Or if you cannot access the play store the app inventor website has provided an .apk link (http://ai2.appinventor.mit.edu/companions/MITAI2Companion.apk) which you can copy via bluetooth or sd card to your android device and install from the file explorer.

    If you do not have an android device or need more information on how to get setup you can follow this link http://appinventor.mit.edu/explore/ai2/setup.html

    Create the App

    Once your setup with the app or emulator start a new project and drag two buttons from the pallete to the screen.
    0_1551229360911_Screen Shot 2019-02-27 at 01.02.21.png

    After dragging the two buttons to the screen we can rename them from button 1, button 2 to something more descriptive like ButtonON, ButtonOFF. Select the the button in the components section and click on the rename button below.

    0_1551229416860_Screen Shot 2019-02-26 at 13.01.43.png

    Aside from the two buttons we also need to drag a web component from the connectivity tab of the palette on to the screen. No icon will appear on the screen for the web component but we can tell that it has been added as it will appear in the components section.
    0_1551229476335_Screen Shot 2019-02-26 at 13.11.56.png

    Change the text of your buttons by selecting them in the components section and editing them in the text field of the properties section.

    0_1551229530342_Screen Shot 2019-02-26 at 13.17.10.png

    That’s all for the layout, let’s move to the blocks to complete the app. Press the blocks button in the top right hand corner of the window to move to the blocks page. This is where we will write the code for our app.

    0_1551229573652_Screen Shot 2019-02-26 at 13.22.33.png

    First we will need to grab two button click blocks from the button section in the blocks menu, click the drop down list to change them to ButtonON and ButtonOFF like so.

    0_1551229671486_Screen Shot 2019-02-26 at 13.25.04.png

    Enter the web section and drag the “set web1 url to” blocks into the button click blocks

    0_1551229761631_Screen Shot 2019-02-26 at 13.27.19.png

    Now this is how we send the http request with the app. Take an empty text block from the Text section of the blocks menu and place it in the slot at the end of the set web1 blocks we just placed. Now we need to enter in the url that we just typed in our browser to turn the light on or off into the text blocks we just placed.

    0_1551229827068_Screen Shot 2019-02-26 at 13.29.07.png

    The result should look something like the following image. Remember the IP address of your device will be different to mine, so remember to double check that the IP address on the screen of your M5 is the same as what you entered in the block.

    0_1551229887876_Screen Shot 2019-02-26 at 13.33.52.png

    Lastly we need to add the “call web1 .get” blocks from the web blocks and add them below the http request.

    0_1551229957528_Screen Shot 2019-02-26 at 13.35.21.png

    Now our app is finished and we can test it by clicking on connect choosing the ai companion option and scan the qr code.

    0_1551230028850_Screen Shot 2019-02-26 at 13.38.14.png
    0_1551230042425_Screen Shot 2019-02-26 at 13.38.24.png

    Hope you enjoyed this tutorial. Show us what M5 apps you create.


Log in to reply
 

Looks like your connection to M5Stack Community was lost, please wait while we try to reconnect.