mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
update m5core UIflow quickstart
This commit is contained in:
Gitshaoxiang
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
@@ -75,33 +75,39 @@ ified developers
|
||||
|
||||
## Firmware burning
|
||||
|
||||
> 1. Double-click the Burner burning tool and click the download button in the left menu according to the firmware version you need. Then, connect the M5 device to the computer via a Type-C data cable, select the corresponding COM, baud rate , as well as the type of your programming device.
|
||||
|
||||
?>Note: M5Burner includes different UIFlow firmware versions from different M5Stack products. Therefore, you need to select the correct device type before proceeding with the burning process to obtain the firmware that matches the device, as shown in the figure below. (The default burning rate of the configuration can be chosen. In special cases like malfunction of the burning process, you can try to reduce the burning rate to 115200).
|
||||
>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.
|
||||
|
||||
<img src="/image/base/device_select.webp" width="70%">
|
||||
<img src="assets\img\quick_start\core\burner_m5core01.webp" width="70%">
|
||||
|
||||
>2.Then connect the M5 device to the computer through the Type-C data cable, select the corresponding COM port, the baud rate can use the default configuration in M5Burner, i In addition, you can also fill in the device to be connected later during the firmware burning stage WIFI information. After configuration, click "Burn" to start burning.
|
||||
|
||||
<img src="assets\img\quick_start\core\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\core\burner_done.webp" width="70%">
|
||||
|
||||
> 2. Select the firmware version you want to burn, connect the device to the computer via Type-C data cable, select the corresponding COM port and device type. Click "Burn" to start burning. When the burning log prompts ' Hard resetting via RTS pin ', it means the firmware has finished burning already.
|
||||
|
||||
?> When first burning or the firmware program runs abnormally, you can click "Erase" to erase the flash memory so that there is no need to erase again in the subsequent firmware update. Otherwise, the Wi-Fi information which is saved already will be deleted and the API Key will be refreshed.
|
||||
|
||||
<img src="/image/base/Burner_user.gif " width="70%">
|
||||
|
||||
## Configure WIFI
|
||||
|
||||
> UIFlow provides both offline and web version of the programmer. When using the web version, we need to configure a WiFi connection for the device. The following describes two ways to configure WiFi connection for the device (Burn configuration and AP hotspot configuration).
|
||||
|
||||
### Burn configuration WiFi
|
||||
### Burn configuration WiFi(recommend)
|
||||
|
||||
?> UIFlow-1.4.5 and the above versions are in support of the pre-burning configuration under WIFI connnection. All users need to do is to fill in WIFI configuration box before setting your firmware to burn. After the configuration of WIFI, clicking 'Burn' to start firmware burning so that the WIFI infomation you filled in together with your firmware will be burned and stored into your M5 device.
|
||||
|
||||
<img src="assets\img\getting_started_pics\m5stack_core\get_started_with_uiflow\m5burner_wifi.webp " width="70%">
|
||||
<img src="assets\img\quick_start\core\burner_wifi.webp" width="70%">
|
||||
|
||||
|
||||
### AP hotspot configuration WiFi
|
||||
|
||||
> 1. Click the red power button on the left side of the device to turn it on, press button A once the UIFlow Logo appears on the screen, and use a mobile phone to connect to the wifi hotspot displayed on the device screen
|
||||
> 1. Click the red power button on the left side of the device to turn on the power. After the UIFlow Logo appears on the screen, quickly press the right button on the panel to enter the "Setup" page. Use the left and right buttons to switch up and down the menu options to the "Wi-Fi via AP" option, press the middle button to select, and enter the AP hotspot WiFi configuration mode.
|
||||
|
||||
<img src="assets\img\getting_started_pics\m5stack_core\get_started_with_uiflow\uiflow_wifi_setup1.webp ">
|
||||
<img src="assets\img\quick_start\core\core_ap_setup.webp">
|
||||
|
||||
> 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 successful configuration and enter programming mode.
|
||||
|
||||
@@ -115,9 +121,9 @@ ified developers
|
||||
|
||||
?> 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.
|
||||
|
||||
> After turning on your device, you can enter the coding mode by pushing the left button on the front surface of the device once the screen shows UIFlow logo. When the indicator on the coding page turns color from red to green, you can visit website [flow.m5stack.com](http://flow.m5stack.com/) in your computer browser to access UIFlow coding page.
|
||||
> After booting, quickly press the right button on the panel to enter the Setup page after the menu appears on the screen, select "Internet Mode", and use a computer browser to access [flow.m5stack.com](http://flow.m5stack.com/) Enter the UIFlow programming page.
|
||||
|
||||
<img src="assets\img\getting_started_pics\m5stack_core\get_started_with_uiflow\uiflow_program_mode.webp ">
|
||||
<img src="assets\img\quick_start\core\core_wifi_mode.webp">
|
||||
|
||||
|
||||
#### API KEY
|
||||
@@ -174,13 +180,13 @@ ified developers
|
||||
|
||||
> After the driver installation is completed, it will automatically enter the UIFlow Desktop IDE with the configuration box popping up. At this time, connect the M5 device to the computer via the Tpye-C data cable.
|
||||
|
||||
<img src="assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_03.webp">
|
||||
<img src="assets\img\quick_start\core\core_usb_connect.webp">
|
||||
|
||||
!> Using UIFlow Desktop IDE requires M5 device with UIFlow firmware and enter **USB programming mode**.
|
||||
|
||||
> Click the power button on the left side of the device to restart. Quickly select Setup after entering the menu, enter the configuration page, and select **USB mode**.
|
||||
|
||||
<img src="assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_04.webp">
|
||||
<img src="assets\img\quick_start\core\core_usb_mode.webp">
|
||||
|
||||
> Select the corresponding port, and the programming device, click OK to connect.
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
<img src="assets\img\quick_start\core\burner_m5core02.webp" width="70%">
|
||||
|
||||
>3.当烧录日志提示"Burn Successfully"时，则表示固件已经烧录完成。
|
||||
>3.当烧录日志提示`Burn Successfully`时，则表示固件已经烧录完成。
|
||||
|
||||
<img src="assets\img\quick_start\core\burner_done.webp" width="70%">
|
||||
|
||||
@@ -90,6 +90,7 @@
|
||||
|
||||
>UIFlow提供了离线与web版本的编程器，在使用web版本的UIFlow时，我们需要为设备配置WiFi连接。下面介绍为设备配置WiFi连接的两种方式（烧录配置与AP热点配置）。
|
||||
|
||||
|
||||
### 烧录配置WiFi(推荐)
|
||||
|
||||
?>UIFlow-1.4.5以上版本支持WiFi连接的前期烧录配置, 用户只需在固件烧录前将WiFi信息填入WiFi配置框，随后点击"Burn"进行固件烧录，填入的WiFi信息将随同固件一起烧录保存至M5设备。
|
||||
@@ -101,13 +102,13 @@
|
||||
|
||||
>1.单击设备左侧的红色电源键开机，在屏幕出现UIFlow Logo后迅速按下面板上右测按键进入"Setup"页面。使用左右按键上下切换菜单选项至"Wi-Fi via AP"选项，按下中间按钮选中，进入AP热点WiFi配置模式。
|
||||
|
||||
<img src="assets\img\getting_started_pics\m5stack_core\get_started_with_uiflow\uiflow_wifi_setup1.webp ">
|
||||
<img src="assets\img\quick_start\core\core_ap_setup.webp">
|
||||
|
||||
>2.用手机连接热点成功后，打开手机浏览器扫描屏幕上的二维码，或是直接访问 __192.168.4.1__，进入页面填写个人的WIFI信息，点击配置，使设备记录下你的WiFi信息。配置成功后设备将自动重启。并进入编程模式。
|
||||
|
||||
?>注意：配置的WiFi信息中，不允许出现"空格"等特殊字符。
|
||||
|
||||
<img src="assets\img\getting_started_pics\m5stack_core\get_started_with_uiflow\uiflow_wifi_setup2.webp ">
|
||||
<img src="assets\img\getting_started_pics\m5stack_core\get_started_with_uiflow\uiflow_wifi_setup2.webp">
|
||||
|
||||
|
||||
## 网络编程模式与API KEY
|
||||
@@ -116,9 +117,9 @@
|
||||
|
||||
?>网络编程模式是M5设备与UIFlow web编程平台的一个对接模式,屏幕会显示出当前设备的网络连接状态。当页面左上角的WiFi与云端连接指示标志为绿色时，则代表随时可接收程序推送。默认情况下，在首次WiFi网络配置成功后，设备将自动重启，并进入网络编程模式。若您在运行其他应用后不知如何重新进入编程模式，你可以参考以下操作。
|
||||
|
||||
>开机后，在屏幕出现UIFlow Logo后迅速按下面板上右侧按键进入Setup页面，选中""，使用电脑浏览器访问[flow.m5stack.com](http://flow.m5stack.com/)进入UIFlow编程页面.
|
||||
>开机后，在屏幕出现菜单后迅速按下面板上右侧按键进入Setup页面，选中"Internet Mode"，使用电脑浏览器访问[flow.m5stack.com](http://flow.m5stack.com/)进入UIFlow编程页面.
|
||||
|
||||
<img src="assets\img\getting_started_pics\m5stack_core\get_started_with_uiflow\uiflow_program_mode.webp ">
|
||||
<img src="assets\img\quick_start\core\core_wifi_mode.webp">
|
||||
|
||||
|
||||
#### API KEY配对
|
||||
@@ -174,13 +175,13 @@
|
||||
|
||||
>驱动安装完成后，将自动进入UIFlow Desktop IDE并自动弹出配置框，此时将M5设备通过Tpye-C数据线连接至电脑.
|
||||
|
||||
<img src="assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_03.webp">
|
||||
<img src="assets\img\quick_start\core\core_usb_connect.webp">
|
||||
|
||||
!>使用UIFlow Desktop IDE需要M5设备搭载UIFlow固件且进入**USB编程模式**.
|
||||
|
||||
>单击设备左侧电源键重启，进入菜单后快速选择Setup，进入配置页面，选择**USB mode**.
|
||||
|
||||
<img src="assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_04.webp">
|
||||
<img src="assets\img\quick_start\core\core_usb_mode.webp">
|
||||
|
||||
>选择好对应的端口，与编程设备，点击OK进行连接.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user