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 http://192.168.4.1

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

Downloads

• M5Burner-for-windows-v0.0.6 (Yandex Disk): https://yadi.sk/d/4dnf2NfdsIAj3Q