mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
更新uiflow的上手指南 en
This commit is contained in:
LiHuashen
@@ -1,68 +1,159 @@
|
||||
# UIFlow Quick Start(Blockly/MicroPython) {docsify-ignore-all}
|
||||
|
||||
:clapper: **[Video Tutorial](#Video-Tutorial)** :memo: **[Text Tutorial](#Text-Tutorial)**
|
||||
:clapper: **[Video Tutorial](#Video-Tutorial)** :memo: **[Text Tutorial](#Table-of-Contents)**
|
||||
|
||||
?> a. If your M5Stack Core was not burnt with a specific firmware named `UIFlow` in advance, please visit this article [How to burn firmware](/en/related_documents/how_to_burn_firmware) for burnning). b. If it's first time to use M5Stack Core or you want to change the networkable AP that means the Core can't access [flow.m5stack.com](http://flow.m5stack.com), you need visit this article for setting wifi [How to connect wifi using Core](/en/related_documents/how_to_connect_wifi_using_core).
|
||||
<!-- ?> a. If your M5Stack Core was not burnt with a specific firmware named `UIFlow` in advance, please visit this article [How to burn firmware](/en/related_documents/how_to_burn_firmware) for burnning). b. If it's first time to use M5Stack Core or you want to change the networkable AP that means the Core can't access [flow.m5stack.com](http://flow.m5stack.com), you need visit this article for setting wifi [How to connect wifi using Core](/en/related_documents/how_to_connect_wifi_using_core).
|
||||
|
||||
By default, we account your M5Core has been connected with the networkable AP. And the screen shows like this figure below after you pressed the `UPLOAD` button on the left. After a few seconds if nothing is pressed the M5 will automatically run the code that was previously uploaded. If we want to upload new code we have to make sure we press the `upload` button on this menu before the M5 boots the code in it’s memory.
|
||||
By default, we account your M5Core has been connected with the networkable AP. And the screen shows like this figure below after you pressed the `UPLOAD` button on the left. After a few seconds if nothing is pressed the M5 will automatically run the code that was previously uploaded. If we want to upload new code we have to make sure we press the `upload` button on this menu before the M5 boots the code in it’s memory. -->
|
||||
|
||||
<figure>
|
||||
<!-- <figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg">
|
||||
</figure>
|
||||
</figure> -->
|
||||
|
||||
## Table of Contents
|
||||
|
||||
**[1. Install USB to Serial Driver](#_1-Install-USB-to-Serial-Driver)**
|
||||
|
||||
**[2. Burn UIFlow Firmware](#_2-Burn-UIFlow-Firmware)**
|
||||
|
||||
**[3. Wi-Fi Setting](#_3-Wi-Fi-Setting)**
|
||||
|
||||
**[4. Program](#_4-Program)**
|
||||
|
||||
|
||||
|
||||
## Text Tutorial
|
||||
<!-- ## Text Tutorial
|
||||
|
||||
1. [Connect to UIFlow](#connect-to-uiflow)
|
||||
|
||||
2. [Program with Core](#program-with-core)
|
||||
|
||||
3. [Play a song now](#play-a-song-now)
|
||||
3. [Play a song now](#play-a-song-now) -->
|
||||
|
||||
|
||||
## 1. Connect to UIFlow
|
||||
## 1. Install USB to Serial Driver
|
||||
|
||||
1. Now you scan the QR code with your phone or tablet to start programming on your mobile device. If you want to program the M5 from your computer, enter the url shown at the top of the screen `flow.m5stack.com`. It will show as following figure.
|
||||
Open your browser, enter the official website of M5Stack https://m5stack.com/download
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png">
|
||||
</figure>
|
||||
#### (1) click `Windows` for downloading this installation package and then unzip this package.
|
||||
|
||||
2. Whenever we want to upload code to the M5 from UI flow we need to make sure the device is paired. So press the little gear in the top right corner of the screen and enter the `APIKEY` which shows on the screen of M5(Now, my APIKEY is `9C6469`) and click `SAVE`.
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/download_usb_driver_win_01.png">
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/enter_apikey.gif">
|
||||
</figure>
|
||||
#### (2) According to your Windows operating system type, select the corresponding driver installation package
|
||||
|
||||
Then UIFlow will connect with this Core.
|
||||
* 32-bit Windows operating system, choose `CP210xVCPInstaller_x86_vx.x.x.x.exe`
|
||||
|
||||
At the moment, you can draw a UI or program it through Blockly(or Python) as shown below.
|
||||
* 64-bit Windows operating system, choose `CP210xVCPInstaller_x64_vx.x.x.x.exe`
|
||||
|
||||
## 2. Program with Core
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver01.png">
|
||||
|
||||
### a. Draw a UI
|
||||
#### (3) double click the executable file for installing.
|
||||
|
||||
Drag 4 kinds of elements into `M5Stack Core` UI and click `Run` buttom on M5UI.Flow
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver02.png">
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif">
|
||||
</figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver03.png">
|
||||
|
||||
#### (4) Check the serial port number `COMx`
|
||||
|
||||
To comfirm if the USB to Serial Driver was successfully installed already, Check the list of identified COM ports in the `Windows Device Manager`:
|
||||
|
||||
Connect the Core to the computer via a USB Type-C cable, open `Windows Device Manager`, click `Ports(COM & LPT)` for checking the list of identified COM ports.
|
||||
|
||||
Disconnect M5Core device and connect it back, to verify which port disappears from the list and then shows back again.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/check_serial_port_01.png">
|
||||
|
||||
## 2. Burn UIFlow Firmware
|
||||
|
||||
#### (1) Download M5Burner
|
||||
|
||||
Access [M5Stack Official Website](http://www.m5stack.com/download), and download M5Burner
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner.png" alt="Screenshot of coverpage" title="Cover page">
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner_02.png" alt="Screenshot of coverpage" title="Cover page">
|
||||
|
||||
#### (2) Burn the firmware
|
||||
|
||||
Connect M5Core to the computer via the USB Type-C cable, unzip the M5Burner archive you just downloaded, and double-click the executable `M5Burner.exe`
|
||||
|
||||
Select the `serial number` and `921600 baud rate` that the board is connected to the computer, and select the latest version of UIFlow firmware.
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_02.png">
|
||||
|
||||
Click `Burn` for downloading UIFlow firmware
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_06_02.png">
|
||||
|
||||
The following interface appears, indicating that the firmware is successfully burned.
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_05.png">
|
||||
|
||||
## 3. Wi-Fi Setting
|
||||
|
||||
#### (1) Select `SETUP`
|
||||
|
||||
After successfully burning the UIFlow firmware, click the red button in the upper left corner of the Core to restart the device. Once the Core is powered on, immediately click the `C button` that indicates you select the `SETUP` option on the screen for the network configuration. Then click on the middle button and select `Link Server: Flow.m5stack.com`.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_04.png">
|
||||
|
||||
#### (2) Connect to AP
|
||||
|
||||
Turn on Wi-Fi on your phone or computer, then connect to the M5Core hotspot `AP` displayed on the screen ( For example, the M5Stack-0d60 is now displayed ). After the connection is successful, open a browser and enter the URL `192.168.4.1`, then select Wi-Fi that can be connected to the network, enter the Wi-Fi password. ( Now, the networkable Wi-Fi is M5 )
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_05.png">
|
||||
|
||||
#### (2) Connect to Wi-Fi
|
||||
|
||||
After M5Core successfully connects to a networkable Wi-Fi (here M5), the screen will display `APIKEY` and the QR code that can access the UIFlow webpage.
|
||||
|
||||
*Description of APIKEY: APIKEY is the device unique identifier. As long as the current UIFlow is connected to which device's APIKEY, The programming code will be downloaded to that device.*
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_06.png">
|
||||
|
||||
The status of the small dot on the screen:
|
||||
|
||||
* Green means M5Core successfully connected to Wi-Fi, that is online status
|
||||
|
||||
* Red means be offline status
|
||||
|
||||
## 4. Program
|
||||
|
||||
#### (2) Connect to UIFlow
|
||||
|
||||
Now scan the QR code on the M5Core with your phone or tablet, or if you are programming with a computer, enter the URL `flow.m5stack.com` on your computer's browser
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png">
|
||||
|
||||
Every time before you upload the code to M5Core through UIFlow, make sure that UIFlow is connected to the M5Core you want to program.
|
||||
|
||||
So you need to click on the gear in the upper right corner of the UIFlow IDE page and enter APIKEY on your M5Core screen in the pop-up dialog box. Click `Save`, then UIFlow will connect to M5Core.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png">
|
||||
|
||||
Now you can start programming with UIFlow!
|
||||
|
||||
#### (2) Programming example
|
||||
|
||||
#### a. draw a UI
|
||||
|
||||
Drag and drop the 4 controls in the upper left corner of the UIFlow IDE to the UI interface of `M5Stack Core` and click the `Run` button in the upper right corner of the page to execute the effect.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif">
|
||||
|
||||
#### b. writing a Blockly program
|
||||
|
||||
Drag the `Set emoji map in0` block from the `Emoji` category on the left to the code area of `Blockly` and click the `Run` button.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif">
|
||||
|
||||
|
||||
### b. Program with Blockly
|
||||
*The link of source coce: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f*
|
||||
|
||||
Drag a block named `Set emoji map in0` from `Emoji` class and click `Run` buttom on M5UI.Flow
|
||||
#### c. writing a MicroPython program
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif">
|
||||
</figure>
|
||||
|
||||
*The source code of this demostration: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f*
|
||||
|
||||
### c. Program with MicroPython
|
||||
|
||||
Copy the following codes, and paste them to `Python coding area`, and click `Run` button.
|
||||
Copy the following code into the Python editing area, then click `Run` in the top right corner to execute the code.
|
||||
|
||||
```Python
|
||||
from m5stack import *
|
||||
@@ -78,44 +169,20 @@ btnC = M5Button(name='ButtonC', text='ButtonC', visibility=False)
|
||||
lcd.print("Hello M5Stack")
|
||||
```
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_micropython.png">
|
||||
</figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_micropython.png">
|
||||
|
||||
At that moment, the screen of M5Core will display `Hello M5Stack`.
|
||||
|
||||
## 3. Play a song now
|
||||
|
||||
Now, let's make a music player and play a song in a few minutes using M5Stack Core.
|
||||
|
||||
Drag a `loop`, `music` and `timer` block into the coding area from the components section.
|
||||
|
||||
Then set parameters of `music block` and `timer block` as shown belown.
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/play_a_song.gif">
|
||||
</figure>
|
||||
|
||||
Now, run it and enjoy your musical work!
|
||||
|
||||
*The source code of this demostration: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_play_a_song.m5f*
|
||||
|
||||
## Complete
|
||||
|
||||
?> *Absolutely, For being more familiar with M5, you can read [the tutorial documentation of UIFlow](https://m5stack.github.io/UIFlow_doc/cn/index.html).*
|
||||
At this time, the word 'Hello M5Stack` will be printed on the M5Core screen.
|
||||
|
||||
## Video Tutorial
|
||||
|
||||
**UIFlow Overview**
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/rJwcCx1FnVY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src='https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/UI%20Flow%20Overview.mp4' frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
|
||||
**UIFlow Tutorial**
|
||||
|
||||
<iframe height=498 width=510 src='https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/UIFlow%20Tutorials/A3%20-%20UIflow%20Tutorial%201.mp4' frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src='https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/UIFlow%20Tutorials/A3%20-%20UIflow%E7%AE%80%E4%BB%8B.mp4' frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
|
||||
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/rdz6hBoqamA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
|
||||
<!-- ## Complete
|
||||
|
||||
<!-- **Getting started with UIFlow (Mac & Linux) (This video is a little outdated now)**
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/oEiFLsukAEE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
|
||||
?> *Absolutely, For being more familiar with M5, you can read [the tutorial documentation of UIFlow](https://m5stack.github.io/UIFlow_doc/cn/index.html).* -->
|
||||
@@ -64,7 +64,7 @@
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner_02.png" alt="Screenshot of coverpage" title="Cover page">
|
||||
|
||||
### (2) 烧录固件
|
||||
#### (2) 烧录固件
|
||||
|
||||
将 M5Core 通过 USB Type-C 线连接到电脑，解压刚刚下载的 M5Burner 压缩包, 然后双击可执行文件 `M5Burner.exe`
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_02.png">
|
||||
|
||||
点击 `Burn` for downloading UIFlow firmware
|
||||
点击 `Burn` 以下载 UIFlow 的固件到 M5Core 中
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/burn_firmware_06_02.png">
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/core_home_page_05.png">
|
||||
|
||||
#### (2) 连接 UIFlow
|
||||
#### (2) 连接 Wi-Fi
|
||||
|
||||
M5Core 成功连接可联网的 Wi-Fi ( 这里是 M5 )之后，屏幕会出现 `APIKEY` 和 可以访问到 UIFlow 网页的二维码
|
||||
|
||||
@@ -112,7 +112,7 @@ M5Core 成功连接可联网的 Wi-Fi ( 这里是 M5 )之后，屏幕会出现 `
|
||||
|
||||
#### (1) 连接 UIFlow
|
||||
|
||||
现在用手机或者平板扫描 M5Core 上的二维码，或者您使用电脑编程的话，在电脑的浏览器上输入网址`flow.m5stack.com`
|
||||
现在用手机或者平板扫描 M5Core 上的二维码，或者您使用电脑编程的话，在电脑的浏览器上输入网址 `flow.m5stack.com`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png">
|
||||
|
||||
@@ -128,14 +128,14 @@ M5Core 成功连接可联网的 Wi-Fi ( 这里是 M5 )之后，屏幕会出现 `
|
||||
|
||||
#### a. 画一个 UI
|
||||
|
||||
拖拽UIFlow IDE左上角的4种控件到`M5Stack Core`的UI界面，并点击页面右上角的`Run`按钮，执行效果。
|
||||
拖拽 UIFlow IDE 左上角的 4 种控件到 `M5Stack Core` 的 UI 界面，并点击页面右上角的 `Run` 按钮，执行效果。
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif">
|
||||
|
||||
|
||||
#### b. 编写 Blockly 程序
|
||||
|
||||
从左边的`Emoji`分类里拖拽`Set emoji map in0`程序块到到`Blockly`的编码区域上，然后点击`Run`按钮。
|
||||
从左边的 `Emoji` 分类里拖拽 `Set emoji map in0` 程序块到到 `Blockly` 的编码区域上，然后点击 `Run` 按钮。
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user