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 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
-
How do non windows users get the firmware on our m5's?
UIFlow, so easy an adult can learn it!
If I don't know it, be patient!
I've ether not learned it or am too drunk to remember it!
Author of the WIP UIFlow Handbook!
M5Black, Go, Stick, Core2, and so much more it cant be fit in here! -
-
@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?
Thanks
Luciano -
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?
Thanks -
@ajb2k3 You can burn the firmware via M5Burner
Here is the article guide you for burning
https://m5stack.readthedocs.io/en/latest/get-started/how_to_burn_firmware_en.html -
@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
www.m5stack.com -
@julian 在 Lesson 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>
_main()
File "./tools/esptool.py", line 2846, in _main
main()
File "./tools/esptool.py", line 2554, in main
esp.connect(args.before)
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
self._port.setDTR(self._port.dtr)
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:
https://docs.micropython.org/en/latest/esp8266/quickref.html#networkingTo 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:
https://docs.micropython.org/en/latest/wipy/tutorial/repl.htmlThe ESP32 also supports the WebREPL:
https://micropython.org/webrepl/ -
@m5-docs This link points to a " page not available yet" message
