From 8b49a0a36f9cc780401fc294e15333a0a0a342ab Mon Sep 17 00:00:00 2001 From: watson8544 <854410664@qq.com> Date: Sat, 6 Apr 2019 23:18:12 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0C=E7=9A=84uiflow=E4=B8=AD?= =?UTF-8?q?=E6=96=87=E7=89=88=E4=B8=8A=E6=89=8B=E6=8C=87=E5=8D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...stickc_quick_start_with_arduino_Windows.md | 6 +- .../m5stickc_quick_start_with_uiflow.md | 16 ++- .../m5stickc_quick_start_with_uiflow.md | 130 ++++++++++++++++++ docs/zh_CN/README.md | 2 +- ...5stack_core_get_started_Arduino_Windows.md | 2 +- ...5stick_quick_start_with_arduino_Windows.md | 2 +- .../m5stickc/m5stickc_quick_start.md | 4 +- ...stickc_quick_start_with_arduino_Windows.md | 8 +- .../m5stickc_quick_start_with_uiflow.md | 108 +++++++++++++++ 9 files changed, 265 insertions(+), 13 deletions(-) create mode 100644 docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md create mode 100644 docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md diff --git a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md index 285acfcb..a94eb7a9 100644 --- a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md +++ b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md @@ -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`) +* Select Board: ESP32 Pico Kit + +* Select Upload Speed: 115200bps or 1.5Mbps + +* Select Port: COM31 (Now, my serial port which is connected with PC is `COM31`) diff --git a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md index 3976fe0f..82e57c32 100644 --- a/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md +++ b/docs/en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md @@ -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 +* Select COM: COM31 (Now, my serial port which is connected with PC is `COM31`) + +* Select Baudrate: 115200 + +* Download and select Firmware: UIFlow-vx.x.x-StickC -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. -## 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 diff --git a/docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md b/docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md new file mode 100644 index 00000000..3976fe0f --- /dev/null +++ b/docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md @@ -0,0 +1,130 @@ +# M5StickC Quick Start - UIFlow {docsify-ignore-all} + + + +**[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 + +Screenshot of coverpage + +Screenshot of coverpage + +#### (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 + + + +The following interface appears, indicating that the firmware is successfully burned. + + + +## 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 + + + + +#### (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 ) + + + +#### (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.* + + + +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 + + + +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. + + + + + +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` + + + +From `Hardware` -> `LED`, drag a block named `LED ON` and another block named `LED OFF` + +From `Timer`, drag a block named `Wait 1s` + + + +Click the `Run` button in the upper right corner of the page to execute the effect + + + +**The Result:** + + + + + \ No newline at end of file diff --git a/docs/zh_CN/README.md b/docs/zh_CN/README.md index b4f92462..7151f66c 100644 --- a/docs/zh_CN/README.md +++ b/docs/zh_CN/README.md @@ -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)** )*
diff --git a/docs/zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_Windows.md b/docs/zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_Windows.md index 1d69407a..1f724c47 100644 --- a/docs/zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_Windows.md +++ b/docs/zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_Windows.md @@ -1,4 +1,4 @@ -# M5Core 的上手指南 {docsify-ignore-all} +# M5Core 的上手指南 - Arduino Win{docsify-ignore-all} diff --git a/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md b/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md index 9426623e..e2928e7c 100644 --- a/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md +++ b/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows.md @@ -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)。 diff --git a/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start.md b/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start.md index e3ee7b9f..a19ae83a 100644 --- a/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start.md +++ b/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start.md @@ -4,6 +4,6 @@ - | + | ---|--- -[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) \ No newline at end of file +[Arduino-Windows](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows) | [UIFlow](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_uiflow) \ No newline at end of file diff --git a/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md b/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md index b0c2a9f7..ef013a37 100644 --- a/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md +++ b/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md @@ -1,4 +1,4 @@ -# M5StickC 上手指南 {docsify-ignore-all} +# M5StickC 上手指南 - Arduino Win{docsify-ignore-all} @@ -84,7 +84,11 @@ 打开 Arduino IDE，并选择正确的串口号。这个串口号其实就是连接 M5StickC 的串口号，注意不要选错 -选择板子的名字，波特率和串口号： **ESP32 Pico Kit**, **115200**, COM31 (你看，像我现在与 M5StickC 相连的串口就是 `COM31`，所以我应该选择 `COM31`) +* 选择开发板 ( Board ): ESP32 Pico Kit + +* 选择波特率 ( Upload Speed ): 115200bps 或 1.5Mbps + +* 选择串口号 ( Port )：COM31 ( 我现在与 M5StickC 相连的串口就是 `COM31`，所以我应该选择 `COM31` ) diff --git a/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md b/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md new file mode 100644 index 00000000..38f814b9 --- /dev/null +++ b/docs/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md @@ -0,0 +1,108 @@ +# M5StickC 上手指南 - UIFlow {docsify-ignore-all} + + + +**[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 + +Screenshot of coverpage + +Screenshot of coverpage + +#### (2) 烧录固件 + +用 USB Type-C 线将 M5StickC 连接到 PC，解压 M5Burner，然后双击可执行文件 `M5Burner.exe`，以打开 M5Burner + +选择合适的 `COM`, `Baudrate` 和 最新版本的`固件` + +* 选择 COM：COM31 ( 我现在与 M5StickC 相连的串口就是 `COM31`，所以我应该选择 `COM31` ) + +* 选择波特率 ( Baudrate ): 115200 + +* 下载并选择固件 ( Firmware ): UIFlow-vx.x.x-StickC + + + + +点击 `Burn` 以烧录固件 + +下图所示，表示 M5StickC 的固件已经下载成功 + + + +## 2. 设置 Wi-Fi + +成功烧录 M5StickC 的 UIFlow 固件之后, 轻按一下 M5StickC 左下角的 `Power Switch` 按键 + +M5StickC 将会开启 Wi-Fi 热点，并显示热点 ( AP ) 名字，如下图所示 + + + +#### (2) 连接到 AP + +打开您手机或电脑的 Wi-Fi 设置，然后连接显示在 M5StickC 屏幕上的热点 ( 比如, 我这里显示的热点名字是 M5-80f0 )，成功连接之后, 打开浏览器访问网址 `192.168.4.1`, 然后选择可联网的 Wi-Fi，并输入 Wi-Fi 密码。 ( 现在, 我这里的 Wi-Fi 是 M5 。 ) + + + +#### (3) 连接 Wi-Fi + +M5StickC 重启，然后成功地连上了 Wi-Fi ( 我使用的是 M5 ), M5StickC 的屏幕上会显示它的 `APIKEY` + +*APIKEY 的说明: 设备唯一识别码。只要 UIFlow 连上了这个 M5StickC 设备的 APIKEY，编程好的代码就会下载到这个设备中。* + + + +此时屏幕上网络图标的状态说明: + +* 绿色：M5StickC 成功地连接到了 UIFlow 服务器, 也即在线状态，可以开始编程 + +* 红色：M5StickC 还没连接上 UIFlow 服务器，处于离线状态 + +## 4. 例程 + +#### (1) 连接到 UIFlow + +如果您使用电脑编程, 那么在浏览器中访问 `flow.m5stack.com` + + + +然后点击 UIFlow 的左上角的齿轮，在弹出的窗口中输入您的 M5StickC 上显示的 APIKEY，点击 `保存`，这样 UIFlow 就绑定了您的 M5StickC 设备。 + +*注意：每次您在 UIFlow 中上传程序到 M5StickC 之前，请注意确保当前的 UIFlow 连接的是您的 M5StickC 的 APIKEY，也即确保 UIFlow 绑定的是您的 M5StickC 设备。* + + + + + +现在，您已经可以开始使用 UIFlow 啦! + +#### (2) 编写例程 + +拖拽 UIFlow 界面左上角的 `Lable` 控件到 `M5StickC` 中，改变他们的属性： `文本` and `字体` + + + +从 `硬件` -> `LED`中，拖拽一个出名为 `LED ON` 和另外一个名为 `LED OFF` 的 Block + +从 `时间` 中, 拖拽出两个名为 `等待 1 秒` 的 Block + + + +点击 UIFlow 界面右上角的 `RUN` 按钮 + + + +**结果:** + + + +