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.
List of components for the lesson
- USB-C cable from standard kit.
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
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
Connect the device to your computer using a standard USB-C cable (Fig. 3).
Figure 3. Connection M5 to PC
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
Disconnect the M5 from the computer (Fig. 5).
Figure 5. Disconnecting the M5 from the PC
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
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
Connect to the created access point using a computer (Fig. 8).
Figure 8. Connect to the M5 via Wi-Fi
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
After M5 successfully connects to the network, you will see a similar page (Fig. 10).
Figure 10. Wifi connection is successful ^_^
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).
After the device successfully connects to the Internet, an access code (Api key) and a QR code will appear on the screen (figure 12).
Re-open the browser and go to http://flow.m5stack.com, then enter the Api key and click Finish (Fig. 13).
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.
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 :)
- M5Burner-for-windows-v0.0.6 (Yandex Disk): https://yadi.sk/d/4dnf2NfdsIAj3Q
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
Please download lastest version of M5Burner from official website