mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
add core2 uiflow quickstart
This commit is contained in:
vany5921
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 890 KiB |
+21
-51
@@ -29,7 +29,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img src="assets/img/quick_start/core2/burn2.jpg">
|
||||
><img src="/image/base/CP210X_install.gif " width="70%">
|
||||
|
||||
?> Note: After the installation of MacOS users, please put the application in the Application folder, as shown in the figure below.
|
||||
|
||||
@@ -38,17 +38,21 @@
|
||||
|
||||
## Firmware burning
|
||||
|
||||
>1.Double-click to open the Burner burning tool, select the corresponding device type in the left menu, select the firmware version you need, and click the download button to download.
|
||||
>1.Double-click to open the M5Burner, ①Select the corresponding device type in the left menu, ②Select the firmware version you want, ③Click the download button to download.
|
||||
|
||||
<img src="assets/img/quick_start/core2/burn_core2_01.jpg" width="70%">
|
||||
<img src="assets\img\quick_start\core2\burner_m5core01.webp" width="70%">
|
||||
|
||||
>2.Then connect the M5 device to the computer through the Type-C cable, select the corresponding COM port, the baud rate can use the default configuration in M5Burner, in addition, you can also fill in the WIFI that the device will be connected to during the firmware burning stage information. After configuration, click "Burn" to start burning.
|
||||
>2.Then connect the M5 device to the computer through the Type-C cable, select the corresponding COM port, the baud rate can use the default configuration in M5Burner, ④Click Erase on the right to erase Flash, close the current page when finished. ⑤Click "Burn" to start burning, you can input WIFI configuration information during burning.
|
||||
|
||||
<img src="assets/img/quick_start/core2/burn_core2_02.jpg" width="70%">
|
||||
<img src="assets\img\quick_start\core2\burner_m5core02.webp" width="70%">
|
||||
|
||||
>3.When the burning log prompts `Burn Successfully`, it means that the firmware has been burned.
|
||||
|
||||
<img src="assets/img/quick_start/m5stickcplus/burn_done.webp" width="70%">
|
||||
<img src="assets\img\quick_start\core2\burner_m5core04.webp" width="70%">
|
||||
|
||||
>4. If you need to change the configuration, you can ⑥click configuration to setup.
|
||||
|
||||
<img src="assets\img\quick_start\core2\burner_m5core05.webp" width="70%">
|
||||
|
||||
?> When first burning or the firmware program runs abnormally, you can click "Erase" to erase the flash memory. In the subsequent firmware update, there is no need to erase again, otherwise the saved Wi-Fi information will be deleted and the API Key will be refreshed.
|
||||
|
||||
@@ -59,17 +63,15 @@
|
||||
|
||||
### Burn configuration WiFi(recommend)
|
||||
|
||||
?> UIFlow-1.5.4 and versions above can write WiFi information directly through M5Burner.
|
||||
?> UIFlow-1.6.2 and versions above can write WiFi information directly through M5Burner.
|
||||
|
||||
<img src="assets/img/quick_start/m5stickcplus/burner_wifi.webp" width="70%">
|
||||
<img src="assets/img/quick_start/core2/burner_wifi.webp" width="70%">
|
||||
|
||||
### AP hotspot configuration WiFi
|
||||
|
||||
> 1. Press and hold the power button on the left to turn on the machine. If WiFi is not configured, the system will automatically enter the network configuration mode when it is turned on for the first time. Suppose you want to re-enter the network configuration mode after running other programs, you can refer to the operation below. After the UIFlow Logo appears at startup, quickly click the Home button (center M5 button) to enter the configuration page. Press the button on the right side of the fuselage to switch the option to Setting, and press the Home button to confirm. Press the right button to switch the option to WiFi Setting, press the Home button to confirm, and start the configuration.
|
||||
> 1. Click the power button on the left side of the device to turn it on. The UIFlow Logo appears on the screen. After entering the main page, press the `Setup` button on the screen. In the `WiFi` option, press the start button of the config Wi-Fi by web option, and the device will automatically restart, where Secelt Wi-Fi is the last connected WiFi. After the device jumps, the WiFi Config page will be displayed. Follow the prompts to connect to the SSID hotspot through the WiFi of the mobile phone or computer, open the browser to visit __192.168.4.1__, and enter the WiFi information in the pop-up page to configure the network successfully. After the configuration is successful, the device will automatically restart. And enter the programming mode.
|
||||
|
||||
<img src="assets/img/quick_start/core2/wifi_ap.jpg">
|
||||
|
||||
> 2. After successfully connecting to the hotspot with your mobile phone, open the mobile phone browser to scan the QR code on the screen or directly access __192.168.4.1__, enter the page to fill in your personal WIFI information, and click Configure to record your WiFi information. The device will restart automatically after successfully configuring and enter programming mode.
|
||||
<img src="assets\img\quick_start\core2\core_ap_setup.webp">
|
||||
|
||||
?> Note: Special characters such as "space" are not allowed in the configured WiFi information.
|
||||
|
||||
@@ -82,51 +84,17 @@
|
||||
|
||||
?> Network programming mode is a docking mode between M5 device and UIFlow web programming platform. The screen will show the current network connection status of the device. When the indicator is green, it means that you can receive program push at any time. Under default situation, after the first successful WiFi network configuration, the device will automatically restart and enter the network programming mode. If you do not know how to re-enter the programming mode after running other applications, you can refer to the following operations.
|
||||
|
||||
> restarting, press button A in the main menu interface to select the programming mode and wait till the right indicator of the network indicator to turn green in the programming mode page. Access UIFlow programming page by visiting [flow.m5stack.com](http://flow.m5stack.com/) on a computer browser.
|
||||
> After powering on, after the menu appears on the screen, quickly press the `Flow` button in the middle of the screen to enter the API KEY page. Access UIFlow programming page by visiting [flow.m5stack.com](http://flow.m5stack.com/) on a computer browser.
|
||||
|
||||
<img src="assets/img/quick_start/core2/wifi_mode.jpg">
|
||||
<img src="assets\img\quick_start\core2\core_wifi_mode.webp">
|
||||
|
||||
#### API KEY Pairing
|
||||
|
||||
> API KEY is the communication credential for M5 devices when using UIFlow web programming. By configuring the corresponding API KEY on the UIFlow side, the program can be pushed for the specific device. The user needs to visit [flow.m5stack.com](http://flow.m5stack.com/) in the computer web browser to enter the UIFlow programming page. Click the setting button in the menu bar at the upper right corner of the page, enter the API Key on the corresponding device, select the hardware used, click OK to save and wait till it prompts successfully connecting.
|
||||
|
||||
<img src="assets/img/quick_start/core2/api.jpg">
|
||||
|
||||
## HTTP
|
||||
|
||||
> Complete the above steps, then you can start programming with UIFlow. For example:Access Baidu via HTTP
|
||||
|
||||
<img src="assets/img/quick_start/core2/example.jpg" width="40%">
|
||||
|
||||
## BLE UART
|
||||
|
||||
#### Function Description
|
||||
|
||||
>Establish Bluetooth connection and enable Bluetooth passthrough service.
|
||||
|
||||
><img src="/image/Advanced module/ble_uart.webp" width="40%">
|
||||
|
||||
* __Init ble uart name__
|
||||
Initialize settings, configure Bluetooth device name.
|
||||
|
||||
* __BLE UART Writre__
|
||||
Send data using BLE UART.
|
||||
|
||||
* __BLE UART remain cache__
|
||||
Check the number of bytes of BLE UART data.
|
||||
|
||||
* __BLE UART read all__
|
||||
Read all data in BLE UART cache.
|
||||
|
||||
* __BLE UART read characters__
|
||||
Read n data in BLE UART cache.
|
||||
|
||||
#### Instructions
|
||||
|
||||
>Establish Bluetooth passthrough connection and send on / off control LED.
|
||||
|
||||
><img src="/image/Advanced module/ble_uart_user.webp" width="70%">
|
||||
<img src="assets/img/quick_start/core2/uiflow_use.gif">
|
||||
|
||||
<!---
|
||||
|
||||
## UIFlow Desktop IDE
|
||||
|
||||
@@ -181,9 +149,11 @@ Read n data in BLE UART cache.
|
||||
<img src="assets/img/quick_start/core2/desktop.jpg">
|
||||
|
||||
|
||||
--->
|
||||
|
||||
## Related Links
|
||||
|
||||
* [UIFlow Block introduction](zh_CN/uiflow/uiflow_home_page)
|
||||
* [UIFlow Block introduction](en/uiflow/uiflow_home_page)
|
||||
|
||||
|
||||
<script>
|
||||
@@ -4,7 +4,7 @@
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
<img src="assets\img\uiflow-card.webp" width="300px" data-no-zoom>
|
||||
<a href="">
|
||||
<a href="/#/en/quick_start/core2/m5stack_core2_get_started_MicroPython">
|
||||
<h3>UIFlow</h3>
|
||||
<div class="platform-tag"></div>
|
||||
</a>
|
||||
|
||||
@@ -0,0 +1,222 @@
|
||||
# UIFlow 快速上手
|
||||
|
||||
?>本教程适用于M5Core2
|
||||
|
||||
## 驱动安装
|
||||
|
||||
>程序烧录前，M5Core2用户请根据您使用的操作系统，点击下方按钮下载相应的CP210X驱动程序压缩包.在解压压缩包后，选择对应操作系统位数的安装包进行安装。
|
||||
|
||||
* __下载CP210X驱动程序__
|
||||
|
||||
<div class="files_download">
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/drivers/CP210x_VCP_Windows.zip">
|
||||
<img src="/image/base/Windows_logo.webp" width="50">
|
||||
<span class="item-title">Windows10</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/drivers/CP210x_VCP_MacOS.zip">
|
||||
<img src="/image/base/MacOS_logo.webp" width="50">
|
||||
<span class="item-title">MacOS</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/drivers/CP210x_VCP_Linux.zip">
|
||||
<img src="/image/base/Linux_logo.webp" width="50">
|
||||
<span class="item-title">Linux</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
><img src="/image/base/CP210X_install.gif " width="70%">
|
||||
|
||||
|
||||
## 烧录工具
|
||||
|
||||
>请根据您所使用的操作系统，点击下方按钮下载相应的M5Burner固件烧录工具.解压打开应用程序。
|
||||
|
||||
<div class="files_download">
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/M5Burner.zip">
|
||||
<img src="/image/base/Windows_logo.webp" width="50">
|
||||
<span class="item-title">Windows10</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/M5Burner_MacOS.zip">
|
||||
<img src="/image/base/MacOS_logo.webp" width="50">
|
||||
<span class="item-title">MacOS</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/M5Burner_Linux.zip">
|
||||
<img src="/image/base/Linux_logo.webp" width="50">
|
||||
<span class="item-title">Linux</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<img src="assets/img/getting_started_pics/how_to_burn_firmware/M5Burner/M5Burner_01.webp">
|
||||
|
||||
?>注意：MacOS用户安装完成后请将应用放入Application文件夹内，如下图所示。
|
||||
|
||||
><img src="/image/base/application.webp" width="70%">
|
||||
|
||||
?>注意：Linux用户请切换至解压文件路径下，在终端中运行`./M5Burner`, 运行应用。
|
||||
|
||||
## 固件烧录
|
||||
|
||||
>1.双击打开Burner烧录工具，①在左侧菜单中选择对应的设备类型，②选择你所需要的固件版本，③点击下载按钮进行下载。
|
||||
|
||||
<img src="assets\img\quick_start\core2\burner_m5core01.webp" width="70%">
|
||||
|
||||
>2.然后将M5设备通过Type-C数据线连接到电脑，选择对应的COM口，波特率可使用M5Burner中的默认配置，④点击右侧Erase擦除Flash，完成后关闭当前页面。⑤点击"Burn"开始烧录，在烧录时可填入WIFI配置信息。
|
||||
|
||||
<img src="assets\img\quick_start\core2\burner_m5core02.webp" width="70%">
|
||||
|
||||
>3.当烧录日志提示`Burn Successfully`时，则表示固件已经烧录完成。
|
||||
|
||||
<img src="assets\img\quick_start\core2\burner_m5core04.webp" width="70%">
|
||||
|
||||
>4. 如果您需要修改配置文件，⑥可点击configuration进行修改。
|
||||
|
||||
<img src="assets\img\quick_start\core2\burner_m5core05.webp" width="70%">
|
||||
|
||||
|
||||
?>首次烧录或固件程序运行异常时，可点击右上角的"Erase"擦除flash内存，在后续的固件更新时，则无需再次擦除，否则将删除已保存的Wi-Fi信息且刷新API Key.
|
||||
|
||||
|
||||
## 配置WIFI
|
||||
|
||||
>UIFlow提供了离线与web版本的编程器，在使用web版本的UIFlow时，我们需要为设备配置WiFi连接。下面介绍为设备配置WiFi连接的两种方式（烧录配置与AP热点配置）。
|
||||
|
||||
|
||||
### 烧录配置WiFi(推荐)
|
||||
|
||||
?>M5Burner支持WiFi连接的前期烧录配置, 用户只需在固件烧录前将WiFi信息填入WiFi配置框，填入的WiFi信息将随同固件一起烧录保存至M5设备。
|
||||
|
||||
<img src="assets/img/quick_start/core2/burner_wifi.webp" width="70%">
|
||||
|
||||
|
||||
### AP热点配置WiFi
|
||||
|
||||
>1.单击设备左侧的电源键开机，屏幕出现UIFlow Logo，等待进入主页面后，按下屏幕上"Setup"按钮。在`WiFi`选项中，按下config Wi-Fi by web选项的start按钮，设备会自动重启，其中Secelt Wi-Fi为上次连接的WiFi。设备跳转后将显示WiFi Config页面，按照提示通过手机或电脑的WiFi连接SSID热点，打开浏览器访问 __192.168.4.1__，在弹出的页面内输入WiFi信息进行配置即可成功配网。配置成功后设备将自动重启。并进入编程模式。
|
||||
|
||||
<img src="assets\img\quick_start\core2\core_ap_setup.webp">
|
||||
|
||||
?>注意：配置的WiFi信息中，不允许出现"空格"等特殊字符。
|
||||
|
||||
<img src="assets\img\getting_started_pics\m5stack_core\get_started_with_uiflow\uiflow_wifi_setup2.webp">
|
||||
|
||||
|
||||
## 网络编程模式与API KEY
|
||||
|
||||
#### 进入网络编程模式
|
||||
|
||||
?>网络编程模式是M5设备与UIFlow web编程平台的一个对接模式,屏幕会显示出当前设备的网络连接状态。当页面左上角的WiFi与云端连接指示标志为绿色时，则代表随时可接收程序推送。默认情况下，在首次WiFi网络配置成功后，设备将自动重启，并进入网络编程模式。若您在运行其他应用后不知如何重新进入编程模式，你可以参考以下操作。
|
||||
|
||||
>开机后，在屏幕出现菜单后迅速按下屏幕中间Flow按键进入API KEY页面，使用电脑浏览器访问[flow.m5stack.com](http://flow.m5stack.com/)进入UIFlow编程页面.
|
||||
|
||||
<img src="assets\img\quick_start\core2\core_wifi_mode.webp">
|
||||
|
||||
|
||||
#### API KEY配对
|
||||
|
||||
>API KEY是M5设备在使用UIFlow web编程时的通信凭证。通过在UIFlow端配置相应的API KEY，能够为指定的设备推送程序。用户需在电脑端浏览器访问[flow.m5stack.com](http://flow.m5stack.com/)进入UIFlow编程页面，点击页面右上角的菜单栏中的设置按钮，输入对应设备上的API Key，选择使用的硬件，点击OK保存，等待提示连接成功。
|
||||
|
||||
<img src="assets/img/quick_start/core2/uiflow_apikey.webp">
|
||||
|
||||
## Hello M5
|
||||
|
||||
>完成以上步骤，就可以开始使用UIFlow进行编程了。（1. 放置标签 2. 添加标签程序块 .3 点击右上角运行按钮 ）
|
||||
|
||||
<img src="assets/img/quick_start/core2/uiflow_use.gif">
|
||||
|
||||
<!---
|
||||
|
||||
## UIFlow Desktop IDE
|
||||
|
||||
>UIFlow Desktop IDE是一个离线版的UIFlow编程器，无需网络依赖，且能够提供反应迅速程序推送体验，请根据您的操作系统，点击下方按钮对应版本的 **UIFlow-Desktop-IDE** 进行下载.
|
||||
|
||||
<div class="files_download">
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/UIFlow-Desktop-IDE.zip">
|
||||
<img src="/image/base/Windows_logo.webp" width="50">
|
||||
<span class="item-title">Windows10</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/UIFlow-Desktop-IDE_MacOS.zip">
|
||||
<img src="/image/base/MacOS_logo.webp" width="50">
|
||||
<span class="item-title">MacOS</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="item">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/UIFlow-Desktop-IDE_Linux.zip">
|
||||
<img src="/image/base/Linux_logo.webp" width="50">
|
||||
<span class="item-title">Linux</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
#### USB编程模式
|
||||
|
||||
>将下载好的UIFlow Desktop IDE压缩包解压，双击执行应用程序.
|
||||
|
||||
<img src="assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_01.webp">
|
||||
|
||||
?>软件启动后，将自动检测你的电脑是否安装有USB驱动（CP210X），点击Install，根据提示，进行安装.
|
||||
|
||||
<img src="assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_02.webp">
|
||||
|
||||
>驱动安装完成后，将自动进入UIFlow Desktop IDE并自动弹出配置框，此时将M5设备通过Tpye-C数据线连接至电脑.
|
||||
|
||||
<img src="assets\img\quick_start\core\core_usb_connect.webp">
|
||||
|
||||
?>使用UIFlow Desktop IDE需要M5设备搭载UIFlow固件且进入**USB编程模式**.
|
||||
|
||||
>单击设备左侧电源键重启，进入菜单后快速选择Setup，进入配置页面，选择**USB mode**.
|
||||
|
||||
<img src="assets\img\quick_start\core\core_usb_mode.webp">
|
||||
|
||||
>选择好对应的端口，与编程设备，点击OK进行连接.
|
||||
|
||||
<img src="assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_05.webp">
|
||||
|
||||
|
||||
--->
|
||||
|
||||
## 相关视频
|
||||
|
||||
- UIFlow 的简介
|
||||
|
||||
<video width="500" controls>
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/UI%20Flow%20Overview.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
- UIFlow 中开发 M5Core 的视频教程
|
||||
|
||||
<video width="500" controls>
|
||||
<source 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" type="video/mp4">
|
||||
</video>
|
||||
|
||||
|
||||
## 相关链接
|
||||
|
||||
* [M5GO编程入门教程](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/UIFlow-Book-zh_cn.pdf)
|
||||
* [UIFlow Block介绍](zh_CN/uiflow/uiflow_home_page)
|
||||
|
||||
|
||||
<script>
|
||||
anchor_search();
|
||||
scrollFunc();
|
||||
</script>
|
||||
@@ -4,7 +4,7 @@
|
||||
</div>
|
||||
<div class="platform-item">
|
||||
<img src="assets\img\uiflow-card.webp" width="300px" data-no-zoom>
|
||||
<a href="">
|
||||
<a href="/#/zh_CN/quick_start/core2/m5stack_core2_get_started_MicroPython">
|
||||
<h3>UIFlow</h3>
|
||||
<div class="platform-tag"></div>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user