Lesson 14. UI Flow. Hello M5 UI Flow

  • The purpose of this lesson

    Hi! Today we will get acquainted with our new development - M5 UI Flow. This is an amazing development environment for M5STACK in Blockly and Python programming languages. M5 UI Flow is a cloud-based platform, so there is no need to compile and download a sketch via cable - now just press one button and wait a couple of seconds for the sketch to be executed on the device.

    This tutorial will teach you how to: prepare a device to work with M5 UI Flow; write the first program on Blockly and load it into the device wirelessly.

    Short help

    List of components for the lesson

    • PC;
    • M5STACK;
    • USB-C cable from standard kit.

    Let's start!

    Step 1

    Visit Download on our website and download M5Burner-for-windows(Fig. 1).
    Click here to go to the website http://m5stack.com or here to download version 0.0.6 immediately http://m5stack.com/download/M5Burner-for-windows-v0.0.6.zip

    Figure 1. Section Download on this site M5STACK

    Step 2

    Unzip to the desktop the contents of the archive and execute with admin rights executable file M5Burner.exe (Fig. 2).

    Figure 2. Run the utility as an administrator

    Step 3

    Connect the device to your computer using a standard USB-C cable (Fig. 3).

    Figure 3. Connection M5 to PC

    Step 4

    Specify the COM port that is connected to M5; then specify the port speed 921600; also select the latest stable version of M5 UI Flow and press Burn (Fig. 4).

    Figure 4. Preparation, start flashing process and its completion

    Step 5

    Disconnect the M5 from the computer (Fig. 5).

    Figure 5. Disconnecting the M5 from the PC

    Step 6

    Now the device needs to be rebooted. To do this, briefly press the red power button on the left side of the device case (Fig. 6).

    Figure 6. Reboot device

    Step 7

    When the device beeps, press and hold the third button (C button) on the device, and the device creates an access point and prompts you to connect to it (Fig. 7).

    Figure 7. The device waits for customers

    Step 8

    Connect to the created access point using a computer (Fig. 8).

    Figure 8. Connect to the M5 via Wi-Fi

    Step 9

    Open a modern browser and go to your device's address, then enter your work or home Wi-Fi network information so that the M5 can access the Internet (Fig. 9).
    In order to avoid mistakes in typing the address, click

    Figure 9. M5 connection to the Internet

    Step 10

    After M5 successfully connects to the network, you will see a similar page (Fig. 10).

    Figure 10. Wifi connection is successful ^_^

    Step 11

    After the device beeps, press and hold the first button (button A) on the device - the M5 will try to establish wifi connection to Your network (Fig. 11).

    Figure 11

    Step 12

    After the device successfully connects to the Internet, an access code (Api key) and a QR code will appear on the screen (figure 12).

    Figure 12

    Step 13

    Re-open the browser and go to http://flow.m5stack.com, then enter the Api key and click Finish (Fig. 13).

    Figure 13

    Step 14

    Note - if specified in Fig. 14 the indicator is red and has the inscription Offline, then make sure that Your M5 is connected to Wi-Fi, then click on the indicator itself and after a few seconds the indicator will change color to green and the inscription will be Online.

    Figure 14

    Step 15

    Now we will try to write our first program on Blockly and execute it on the device. First, drag the Label element to the virtual screen of the device. Second, drag the Label puzzle from the middle column and glue it to the setup puzzle. Third: inside the added puzzle, select the Label: label_1 and enter the text in the box Show: Hello M5 UI Flow!. Fourth: click on the arrow in the upper right corner-the program will boot into the device.

    Figure 15. Writing and uploading the program to the M5

    Test and run step

    Pay attention to the screen of Your M5 (Fig. 16). This concludes the lesson.

    Figure 16. Hurray! Got :)


  • How do non windows users get the firmware on our m5's?

  • @dimi Nice start but how do we include other libraries so we can interface to other systems over http/mqtt/etc?

  • What about M5Burner for Mac OS ? Are you going to release it in the future?

  • All flashes OK and detects the network OK but after the reset and the long press of "upload" it will not reconnect to the WiFi network ??? any one any ideas?

  • @ajb2k3 You can burn the firmware via M5Burner
    Here is the article guide you for burning

  • @fab Thanks gay

  • @gadjet Is that problem exiting still? Try to reset your board again. Sometime, it is a problem about LAN network

  • To everyone:
    Please download lastest version of M5Burner from official website

  • @julianLesson 14. UI Flow. Hello M5 UI Flow 中说:

    @dimi Nice start but how do we include other libraries so we can interface to other systems over http/mqtt/etc?

    Also Curious about this

  • Following the video on an OSX 10.12.6 using python 3.7 but getting the following when trying to connect.

    Traceback (most recent call last):
    File "./tools/esptool.py", line 2853, in <module>
    File "./tools/esptool.py", line 2846, in _main
    File "./tools/esptool.py", line 2554, in main
    File "./tools/esptool.py", line 446, in connect
    last_error = self._connect_attempt(mode=mode, esp32r0_delay=False)
    File "./tools/esptool.py", line 405, in _connect_attempt
    self._setRTS(True) # EN=LOW, chip in reset
    File "./tools/esptool.py", line 377, in _setRTS
    AttributeError: 'Serial' object has no attribute 'dtr'

    However arduino is connecting with no trouble??

  • @cpyarger it basically runs microPython so you can import any module supported by micro python.

    For example to connect to a wifi hotspot you can import the "network" module:

    To upload custom files/modules you can use "adafruit ampy" or any of the other tools described in this tutorial: https://learn.adafruit.com/micropython-basics-load-files-and-run-code/overview
    just make sure you upload them to the /flash/ folder.

    Another useful thing is the REPL which allows you to see the MicroPython Log, very useful to debug your code and see what's happening in the background as not everything can be seen in the LCD:

    The ESP32 also supports the WebREPL:

  • @m5-docs This link points to a " page not available yet" message