mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
增加C的uiflow中文版上手指南
This commit is contained in:
watson8544
@@ -84,7 +84,11 @@ Because M5StickC's serial driver chip is driver-free installation type, connect
|
||||
|
||||
Open Arduino IDE, then select your serial port which is connected M5Core.
|
||||
|
||||
Select board name, baudrate, the specified serial port: **ESP32 Pico Kit**, **115200**, COM31(Now, my serial port which is connected with PC is `COM31`)
|
||||
* <font color="red">Select Board: ESP32 Pico Kit</font>
|
||||
|
||||
* <font color="red">Select Upload Speed: 115200bps or 1.5Mbps</font>
|
||||
|
||||
* <font color="red">Select Port: COM31</font> (Now, my serial port which is connected with PC is `COM31`)
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_quick_start_08.png">
|
||||
|
||||
|
||||
@@ -22,17 +22,23 @@ Access [M5Stack Official Website](http://www.m5stack.com/download), and download
|
||||
|
||||
Connect M5StickC 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 **`115200 baud rate`** that the board is connected to the computer, and select the latest version of UIFlow firmware for M5StickC
|
||||
Select the `COM`, `Baudrate` and the lastest `firmware`
|
||||
|
||||
Click `Burn` for downloading UIFlow firmware
|
||||
* <font color="red">Select COM: COM31</font> (Now, my serial port which is connected with PC is `COM31`)
|
||||
|
||||
* <font color="red">Select Baudrate: 115200</font>
|
||||
|
||||
* <font color="red">Download and select Firmware: UIFlow-vx.x.x-StickC</font>
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_01.png">
|
||||
|
||||
The following interface appears, indicating that the firmware is successfully burned.
|
||||
Click `Burn` for downloading UIFlow firmware
|
||||
|
||||
The following figure indicates that the firmware is successfully burned.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_02.png">
|
||||
|
||||
## 3. Wi-Fi Setting
|
||||
## 2. Wi-Fi Setting
|
||||
|
||||
#### (1) Select `SETUP`
|
||||
|
||||
@@ -63,7 +69,7 @@ The status of the network icon on the screen:
|
||||
|
||||
* Red means be offline status
|
||||
|
||||
## 4. Program
|
||||
## 3. Program
|
||||
|
||||
#### (1) Connect to UIFlow
|
||||
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
# M5StickC Quick Start - UIFlow {docsify-ignore-all}
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_06.png"><img src="assets/img/uiflow-logo.png">
|
||||
|
||||
**[1. Burn UIFlow Firmware](#_1-Burn-UIFlow-Firmware)**
|
||||
|
||||
**[2. Wi-Fi Setting](#_2-Wi-Fi-Setting)**
|
||||
|
||||
**[3. Program](#_3-Program)**
|
||||
|
||||
## 1. 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 M5StickC 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 **`115200 baud rate`** that the board is connected to the computer, and select the latest version of UIFlow firmware for M5StickC
|
||||
|
||||
Click `Burn` for downloading UIFlow firmware
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_01.png">
|
||||
|
||||
The following interface appears, indicating that the firmware is successfully burned.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_02.png">
|
||||
|
||||
## 3. Wi-Fi Setting
|
||||
|
||||
#### (1) Select `SETUP`
|
||||
|
||||
After successfully burning the UIFlow firmware, click the `Power Switch` button in the lower left corner of the M5StickC.
|
||||
|
||||
M5StickC will display the AP name as the shown below
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_03.png">
|
||||
|
||||
|
||||
#### (2) Connect to AP
|
||||
|
||||
Turn on Wi-Fi on your phone or computer, then connect to the M5StickC hotspot `AP` displayed on the screen ( For example, the M5-80f0 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/m5stickc/qs_uiflow/qs_uiflow_04.png">
|
||||
|
||||
#### (3) Connect to Wi-Fi
|
||||
|
||||
After M5StickC successfully connects to a networkable Wi-Fi (here M5), the screen will display `APIKEY`.
|
||||
|
||||
*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/m5stickc/qs_uiflow/qs_uiflow_05.png">
|
||||
|
||||
The status of the network icon on the screen:
|
||||
|
||||
* Green means M5StickC successfully connected to UIFlow Server, that is online status
|
||||
|
||||
* Red means be offline status
|
||||
|
||||
## 4. Program
|
||||
|
||||
#### (1) Connect to UIFlow
|
||||
|
||||
Now 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/m5stickc/qs_uiflow/qs_uiflow_06.png">
|
||||
|
||||
Every time before you upload the code to M5StickC through UIFlow, make sure that UIFlow is connected to the M5StickC 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 M5StickC screen in the pop-up dialog box. Click `Save`, then UIFlow will connect to M5StickC.
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_07.png">
|
||||
|
||||
Now you can start programming with UIFlow!
|
||||
|
||||
#### (2) Programming example
|
||||
|
||||
Drag and drop the `Lable` in the upper left corner of the UIFlow IDE to the UI interface of `M5StickC`, change their `text` and `font`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_10.png">
|
||||
|
||||
From `Hardware` -> `LED`, drag a block named `LED ON` and another block named `LED OFF`
|
||||
|
||||
From `Timer`, drag a block named `Wait 1s`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_13.png">
|
||||
|
||||
Click the `Run` button in the upper right corner of the page to execute the effect
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_16.png">
|
||||
|
||||
<mark>**The Result:**</mark>
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_14.png">
|
||||
|
||||
|
||||
<!--
|
||||
## Example
|
||||
|
||||
>Click and download [example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Core/M5Stick/UIFlow). And open this example code in UIFlow, then run it. Program phenomenon: White squares will scroll back and forth on the screen.
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_02.png" width=50% height=50%><img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_03.png" width=50% height=50%>
|
||||
|
||||
### Note
|
||||
|
||||
>the resolution of stick screen is **64x128**, so if you want to drag a graph at [WebIDE](http://flow.m5stack.com/) to display on stick screen, it's better for you to drag it within a certain range shown as following figure.(Currently only supports the display of rectangular patterns, as well as labels.)
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_01.png" width=50% height=50%>
|
||||
|
||||
## Related Video
|
||||
|
||||
**UIFlow introduce**
|
||||
|
||||
<video width="500" height="315" controls>
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/UIFlow%20Tutorials/A3%20-%20UIflow%20Tutorial%201.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
**UIFlow quick start (Mac & Linux)**
|
||||
|
||||
<video width="500" height="315" controls>
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Getting%20started%20with%20UI%20flow%20(Mac_Linux).mp4" type="video/mp4">
|
||||
</video> -->
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
|
||||
|
||||
*( **[上手指南](zh_CN/quick_start/m5stick/m5stick_quick_start)** )* *( **[上手指南](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows)** )*
|
||||
*( **[上手指南](zh_CN/quick_start/m5stick/m5stick_quick_start)** )* *( **[上手指南](zh_CN/quick_start/m5stickc/m5stickc_quick_start)** )*
|
||||
|
||||
<div class="item">
|
||||
<a href="/#/zh_CN/core/m5stick">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# M5Core 的上手指南 {docsify-ignore-all}
|
||||
# M5Core 的上手指南 - Arduino Win{docsify-ignore-all}
|
||||
|
||||
<!-- ?> 建议您先确认安装了 `USB驱动` 和 `Arduino IDE`。 如果还没的话，阅读这两篇文档[如何建立串口连接](zh_CN/related_documents/establish_serial_connection)和[安装 Arduino IDE](zh_CN/related_documents/how_to_install_git_and_arduino)。 -->
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# M5Stick 上手指南(Windows, Arudino) {docsify-ignore-all}
|
||||
# M5Stick 上手指南 - Arduino Win{docsify-ignore-all}
|
||||
|
||||
?> 建议你先确认安装了 `USB驱动` 和 `Arduino IDE`。 如果还没的话，阅读这两篇文档[如何建立串口连接](zh_CN/related_documents/establish_serial_connection)和[安装 Arduino IDE](zh_CN/related_documents/how_to_install_git_and_arduino)。
|
||||
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
|
||||
<!-- *使用Arduino/C++编程的话，选择Arduino；使用Blockly/MicroPython，选择UIFlow(Blockly/MicroPython)* -->
|
||||
|
||||
<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png">
|
||||
<img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">
|
||||
---|---
|
||||
[Arduino-MacOS](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS) | [Arduino-Windows](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows)
|
||||
[Arduino-Windows](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows) | [UIFlow](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_uiflow)
|
||||
@@ -1,4 +1,4 @@
|
||||
# M5StickC 上手指南 {docsify-ignore-all}
|
||||
# M5StickC 上手指南 - Arduino Win{docsify-ignore-all}
|
||||
|
||||
<!-- ?> 建议你先确认安装了 `USB驱动` 和 `Arduino IDE`。 如果还没的话，阅读这两篇文档[如何建立串口连接](zh_CN/related_documents/establish_serial_connection)和[安装 Arduino IDE](zh_CN/related_documents/how_to_install_git_and_arduino)。 -->
|
||||
|
||||
@@ -84,7 +84,11 @@
|
||||
|
||||
打开 Arduino IDE，并选择正确的串口号。这个串口号其实就是连接 M5StickC 的串口号，注意不要选错
|
||||
|
||||
选择板子的名字，波特率和串口号： **ESP32 Pico Kit**, **115200**, COM31 (你看，像我现在与 M5StickC 相连的串口就是 `COM31`，所以我应该选择 `COM31`)
|
||||
* <font color="red">选择开发板 ( Board ): ESP32 Pico Kit</font>
|
||||
|
||||
* <font color="red">选择波特率 ( Upload Speed ): 115200bps 或 1.5Mbps</font>
|
||||
|
||||
* <font color="red">选择串口号 ( Port )：COM31</font> ( 我现在与 M5StickC 相连的串口就是 `COM31`，所以我应该选择 `COM31` )
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_quick_start_08.png">
|
||||
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
# M5StickC 上手指南 - UIFlow {docsify-ignore-all}
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/m5stickc_06.png"><img src="assets/img/uiflow-logo.png">
|
||||
|
||||
**[1. 烧录 UIFlow 固件](#_1-烧录-UIFlow-固件)**
|
||||
|
||||
**[2. 设置 Wi-Fi](#_2-设置-Wi-Fi)**
|
||||
|
||||
**[3. 例程](#_3-例程)**
|
||||
|
||||
## 1. 烧录 UIFlow 固件
|
||||
|
||||
#### (1) 下载 M5Burner
|
||||
|
||||
浏览器访问 [M5Stack Official Website](http://www.m5stack.com/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) 烧录固件
|
||||
|
||||
用 USB Type-C 线将 M5StickC 连接到 PC，解压 M5Burner，然后双击可执行文件 `M5Burner.exe`，以打开 M5Burner
|
||||
|
||||
选择合适的 `COM`, `Baudrate` 和 最新版本的`固件`
|
||||
|
||||
* <font color="red">选择 COM：COM31</font> ( 我现在与 M5StickC 相连的串口就是 `COM31`，所以我应该选择 `COM31` )
|
||||
|
||||
* <font color="red">选择波特率 ( Baudrate ): 115200</font>
|
||||
|
||||
* <font color="red">下载并选择固件 ( Firmware ): UIFlow-vx.x.x-StickC</font>
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_01.png">
|
||||
|
||||
|
||||
点击 `Burn` 以烧录固件
|
||||
|
||||
下图所示，表示 M5StickC 的固件已经下载成功
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_02.png">
|
||||
|
||||
## 2. 设置 Wi-Fi
|
||||
|
||||
成功烧录 M5StickC 的 UIFlow 固件之后, 轻按一下 M5StickC 左下角的 `Power Switch` 按键
|
||||
|
||||
M5StickC 将会开启 Wi-Fi 热点，并显示热点 ( AP ) 名字，如下图所示
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_03.png">
|
||||
|
||||
#### (2) 连接到 AP
|
||||
|
||||
打开您手机或电脑的 Wi-Fi 设置，然后连接显示在 M5StickC 屏幕上的热点 ( 比如, 我这里显示的热点名字是 M5-80f0 )，成功连接之后, 打开浏览器访问网址 `192.168.4.1`, 然后选择可联网的 Wi-Fi，并输入 Wi-Fi 密码。 ( 现在, 我这里的 Wi-Fi 是 M5 。 )
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_04.png">
|
||||
|
||||
#### (3) 连接 Wi-Fi
|
||||
|
||||
M5StickC 重启，然后成功地连上了 Wi-Fi ( 我使用的是 M5 ), M5StickC 的屏幕上会显示它的 `APIKEY`
|
||||
|
||||
*APIKEY 的说明: 设备唯一识别码。只要 UIFlow 连上了这个 M5StickC 设备的 APIKEY，编程好的代码就会下载到这个设备中。*
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_05.png">
|
||||
|
||||
此时屏幕上网络图标的状态说明:
|
||||
|
||||
* 绿色：M5StickC 成功地连接到了 UIFlow 服务器, 也即在线状态，可以开始编程
|
||||
|
||||
* 红色：M5StickC 还没连接上 UIFlow 服务器，处于离线状态
|
||||
|
||||
## 4. 例程
|
||||
|
||||
#### (1) 连接到 UIFlow
|
||||
|
||||
如果您使用电脑编程, 那么在浏览器中访问 `flow.m5stack.com`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_06.png">
|
||||
|
||||
然后点击 UIFlow 的左上角的齿轮，在弹出的窗口中输入您的 M5StickC 上显示的 APIKEY，点击 `保存`，这样 UIFlow 就绑定了您的 M5StickC 设备。
|
||||
|
||||
*注意：每次您在 UIFlow 中上传程序到 M5StickC 之前，请注意确保当前的 UIFlow 连接的是您的 M5StickC 的 APIKEY，也即确保 UIFlow 绑定的是您的 M5StickC 设备。*
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_07.png">
|
||||
|
||||
现在，您已经可以开始使用 UIFlow 啦!
|
||||
|
||||
#### (2) 编写例程
|
||||
|
||||
拖拽 UIFlow 界面左上角的 `Lable` 控件到 `M5StickC` 中，改变他们的属性： `文本` and `字体`
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_10.png">
|
||||
|
||||
从 `硬件` -> `LED`中，拖拽一个出名为 `LED ON` 和另外一个名为 `LED OFF` 的 Block
|
||||
|
||||
从 `时间` 中, 拖拽出两个名为 `等待 1 秒` 的 Block
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_13.png">
|
||||
|
||||
点击 UIFlow 界面右上角的 `RUN` 按钮
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_16.png">
|
||||
|
||||
<mark>**结果:**</mark>
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_14.png">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user