diff --git a/docs/assets/img/product_pics/core/minicore/atom/atom_00.jpg b/docs/assets/img/product_pics/core/minicore/atom/atom_00.jpg new file mode 100644 index 00000000..25f7a4c6 Binary files /dev/null and b/docs/assets/img/product_pics/core/minicore/atom/atom_00.jpg differ diff --git a/docs/assets/img/product_pics/core/minicore/atom/configure_wifi.jpg b/docs/assets/img/product_pics/core/minicore/atom/configure_wifi.jpg new file mode 100644 index 00000000..b548e51b Binary files /dev/null and b/docs/assets/img/product_pics/core/minicore/atom/configure_wifi.jpg differ diff --git a/docs/assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_05.jpg b/docs/assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_05.jpg index d0caaa6e..a46242a8 100644 Binary files a/docs/assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_05.jpg and b/docs/assets/img/related_documents/UIFlow_Desktop_IDE/Desktop_IDE_05.jpg differ diff --git a/docs/en/quick_start/atom/atom_quick_start.md b/docs/en/quick_start/atom/atom_quick_start.md index 2b49baae..88ea358b 100644 --- a/docs/en/quick_start/atom/atom_quick_start.md +++ b/docs/en/quick_start/atom/atom_quick_start.md @@ -13,31 +13,17 @@ ## Menu option introduction -The breathing light changes color every second in this state +>The breathing light changes color every second in this state -- YELLOW Light + -**Configure WIFI Mode** +- GREEN Light **UIFlow Online Program Mode** - +- BLUE Light **USB Mode** -- GREEN Light +- YELLOW Light **Configure WIFI Mode** -**UIFlow Online Program Mode** - - - -- PURPLE Light - -**APP Run Mode** - - - -- BLUE Light - -**USB Mode** - - +- PURPLE Light **APP Run Mode** ## Meaning of light status @@ -55,12 +41,15 @@ The breathing light changes color every second in this state ## Menu Usage -1. After burning the UIFlow firmware, the device enters the WEB distribution mode by default (the yellow-light is always on). At this time, Atom will automatically issue a WIFI hotspot, such as M5Stack-XXXX. Connect to this WIFI and open the browser. Enter 192.168.4.1 to enter the web configuration page. Enter The SSID and password are used for network connection. At this time, the red light flashes. After the connection is successful, the blue light stays on briefly (UIFlow server is not connected). When the green light flashes, the UIFlow server is connected normally. At this time, online programming can be performed. -
+1. After the uiflow firmware is burned, the device will automatically connect to the WiFi information filled in m5bunner. If the connection fails, you can try to press the middle button to connect again. If it still fails, you can try to manually redistribute the network. -2. The device enters the last selected mode by default upon power-on. If you need to change the mode, just press and hold the middle button during power-on (or restart). The menu mode will automatically scroll in the form of lights until the lights change to the desired mode Release the color. For example, you need to reconfigure WIFI. When the device is powered on or restarted, press and hold the middle button until it is released when the yellow-light breathing is displayed, and then enter WIFI configuration mode. +2. When the device is powered on, it will enter the last selected mode by default. If you want to change the mode, just press and hold the middle button while powering on (or when restarting), and do not release it. The menu mode will change color in the form of breathing light, and then release it when the light changes to the required mode color. For example, it is necessary to manually reconfigure WiFi. When the device is powered on or restarted, press and hold the middle button until the Yellow breathing light is displayed and released. At this time, the yellow light is always on and the WiFi configuration mode is entered. -3. API key can be seen through web configuration page or serial port tool + + +3. In WiFi configuration mode, atom will automatically send out WiFi hotspot, such as M5Stack-XXXX. Connect to this WiFi and open the browser and enter 192.168.4.1 to enter the web configuration page. Enter SSID and password to connect to the network. At this time, the red light flashes. After the connection is successful, the blue light stays on (the uiflow server is not connected) for a short time. When the green light flashes, it indicates that the uiflow server is connected normally. At this time, you can go online Programming. + +4. API key can be seen through web configuration page or serial port tool. diff --git a/docs/en/uiflow/introduction.md b/docs/en/uiflow/introduction.md index a088c85d..c0787275 100644 --- a/docs/en/uiflow/introduction.md +++ b/docs/en/uiflow/introduction.md @@ -7,6 +7,7 @@ 4. [UIFlow Quick Start](#UIFlow-Quick-Start) +5. [UIFlow IDE](#Install-UIFlow-Desktop-IDE) ## Flash UIFlow firmware @@ -72,6 +73,8 @@ >2.Once you have connected to your Atom's access point you can enter the wifi settings page by entering __192.168.4.1__ into your browser. Then you have arrived at the page choose your home wifi network from the list, enter your password and click configure + + ## Configure API Key #### Entering Code Upload Mode @@ -90,15 +93,11 @@ >After power on, wait for the LED indicator to turn red to green (this indicates that atom has successfully connected to the network), and directly visit [flow.m5stack. com](http://flow.m5stack.com/) in the computer browser to enter the uiflow programming page +>The apikey of atom can be viewed through the web distribution network page or through the serial port tool -## API Key +> -#### Entering Code Upload Mode - ->After turning on the M5stack, select the Upload mode by pressing the left face button. Assuming you have already setup wifi on your device, the M5stack will connect to your network and once it is connected will display a QR code and a unique API Key. We can now start to program the device by scanning the M5stack with a mobile device or entering the url displayed at the top of the screen into your browser [flow.m5stack.com](http://flow.m5stack.com/) - - -> +## Input API Key #### Connecting your device with API Key @@ -107,9 +106,62 @@ > ->The apikey of atom can be viewed through the web distribution network page or through the serial port tool -> + +## Install-UIFlow-Desktop-IDE + +>Click **UIFlow-Desktop-IDE** for your operating system below to download. + +
+

Download UIFlow Desktop IDE:

+

+ Windows + MacOS + Linux +

+
+ +#### configuration + +>Unzip the downloaded UIFlow Desktop IDE archive and double-click to execute the application. + + + +?>After the software is started, it will automatically detect whether your computer has a USB driver (CP210X) installed, click Install, and follow the prompts to install it. + + + +>After the driver installation is complete, it will automatically enter the UIFlow Desktop IDE and automatically pop up the configuration box. At this time, connect the M5 device to the computer through the Tpye-C data cable. + + + +* __For M5GO__ + +!>Using the UIFlow Desktop IDE requires the M5 device to carry the UIFlow firmware and enter the **USB mode**. + +>Click the power button on the left side of the device to restart. After entering the menu, select Setup quickly to enter the configuration page and select**USB mode**. + + + +>Select the corresponding port, and connect to the programming device, click OK. + + + +* __For M5StickC__ + +!>If you are using M5StickC, please follow the instructions below + +>Press and hold the power key on the left side of the fuselage for 2 seconds to start the machine. After the uiflow logo appears, quickly click the home key (center M5 key) to enter the configuration page. Press the button on the right side of the fuselage to switch the option to setting, and press home to confirm. Press the right key to switch to USB mode, press home key to confirm, enter USB programming mode, select the corresponding COM port and device in IDE, and click Connect. + + + +* __For Atom__ + +!>If you are using Atom, please follow the instructions below + +>When the device is powered on or restarted, press and hold the middle button until it is released when the blue-light breathing is displayed, and then enter USB mode. + +> ## UIFlow Quick Start diff --git a/docs/image/base/configure_wifi.jpg b/docs/image/base/configure_wifi.jpg new file mode 100644 index 00000000..b548e51b Binary files /dev/null and b/docs/image/base/configure_wifi.jpg differ diff --git a/docs/image/base/usbmode.jpg b/docs/image/base/usbmode.jpg new file mode 100644 index 00000000..6778bad2 Binary files /dev/null and b/docs/image/base/usbmode.jpg differ diff --git a/docs/zh_CN/quick_start/atom/atom_quick_start.md b/docs/zh_CN/quick_start/atom/atom_quick_start.md index 3b543478..85554be2 100644 --- a/docs/zh_CN/quick_start/atom/atom_quick_start.md +++ b/docs/zh_CN/quick_start/atom/atom_quick_start.md @@ -13,39 +13,17 @@ ## 菜单选项介绍 -- 黄灯 +>呼吸灯不同颜色状态代表不同菜单选项 -**配置WIFI模式** + - - - - - -- 绿灯 - -**UIFlow在线模式** - - - - - -- 紫灯 - -**APP运行模式** - - - - - -- 蓝灯 - -**USB模式** - - +- 绿灯 **UIFlow 在线编程模式** +- 蓝灯 **USB 模式** +- 黄灯 **配置 WIFI 模式** +- 紫灯 **APP 运行模式** ## 灯光状态含义 @@ -63,11 +41,15 @@ ## 使用方法 -1. 烧录完UIFlow固件设备默认进入WEB配网模式（黄灯常亮），此时Atom会自动发出WIFI热点，比如M5Stack-XXXX，连接此WIFI并打开浏览器输入192.168.4.1进入web配置页面，输入SSID和密码进行网络连接，此时红灯闪烁，连接成功后蓝灯短暂常亮(UIFlow服务器未连接)待到绿灯闪烁时表示UIFlow服务器连接正常，此时可进行在线编程。 +1. 烧录完UIFlow固件设备会自动连接M5Bunner中填入的WIFI信息，如果连接失败可尝试按下中间按键再次连接，如果仍然失败可尝试手动重新配网。 -2. 设备通电默认进入最后一次选择的模式，如需改变模式，只需在上电时（或重启时）按住中间按键不要松开，菜单模式以呼吸灯形式变色，等到灯光变换为所需模式颜色时再松开。例如需要重新配置WIFI，设备上电或重启时按住中间按键不放，直到显示黄色呼吸灯时松开，此时即进入WIFI配置模式。 +2. 设备通电默认进入最后一次选择的模式，如需改变模式，只需在上电的同时（或重启时）按住中间按键不要松开，菜单模式以呼吸灯形式变色，等到灯光变换为所需模式颜色时再松开。例如需要手动重新配置WIFI，设备上电或重启时按住中间按键不放，直到显示黄色呼吸灯时松开，此时黄灯常亮即进入WIFI配置模式。 -3. 通过Web配置页面和串口工具可以看到APIkey + + +3. 在WIFI配置模式下，Atom会自动发出WIFI热点，比如M5Stack-XXXX，连接此WIFI并打开浏览器输入192.168.4.1进入web配置页面，输入SSID和密码进行网络连接，此时红灯闪烁，连接成功后蓝灯短暂常亮(UIFlow服务器未连接)待到绿灯闪烁时表示UIFlow服务器连接正常，此时可进行在线编程。 + +4. 通过Web配置页面和串口工具可以看到APIkey。 diff --git a/docs/zh_CN/uiflow/introduction.md b/docs/zh_CN/uiflow/introduction.md index 00a2a908..0a3e988a 100644 --- a/docs/zh_CN/uiflow/introduction.md +++ b/docs/zh_CN/uiflow/introduction.md @@ -5,7 +5,9 @@ 3. [配置APIKey](#配置API-Key) -4. [UIFlow快速上手指南](#UIFlow快速上手指南) +4. [UIFlow IDE](#安装UIFlow-Desktop-IDE) + +5. [UIFlow教程](#UIFlow教程) ## UIFlow固件 @@ -64,8 +66,6 @@ >    - - * __Atom Matrix__ __&__ __Atom Lite__ >__*1.4.5以上版本可直接通过M5Bunner配置__ @@ -97,11 +97,68 @@ >进入UIFlow后，点击页面右上角的菜单栏中的设置按钮，输入对应设备上的API Key，点击OK保存，等待提示连接成功 -> +> >Atom的APIKey可以通过web配网页面查看，或通过串口工具查看 +<<<<<<< HEAD +> + + +## 安装UIFlow-Desktop-IDE + +>点击下方对应自己操作系统的 **UIFlow-Desktop-IDE** 进行下载. + +
+

下载 UIFlow Desktop IDE:

+

+ Windows + MacOS + Linux +

+
+ +#### 基本配置 + +>将下载好的UIFlow Desktop IDE压缩包解压，双击执行应用程序. + + + +?>软件启动后，将自动检测你的电脑是否安装有USB驱动（CP210X），点击Install，根据提示，进行安装. + + + +>驱动安装完成后，将自动进入UIFlow Desktop IDE并自动弹出配置框，此时将M5设备通过Tpye-C数据线连接至电脑. + + + +!>使用UIFlow Desktop IDE需要M5设备搭载UIFlow固件且进入**USB编程模式**. + +>单击设备左侧电源键重启，进入菜单后快速选择Setup，进入配置页面，选择**USB mode**. + + + +>选择好对应的端口，与编程设备，点击OK进行连接. + + + +!>如果你使用的是M5StickC请按以下说明操作 + +>长按机身左侧的电源键2秒进行开机，在出现UIFlow Logo后，快速单击Home键（中心M5按键），进入配罝页面。按机身右侧按键将选项切换至Setting，按下Home键确认。按右侧按键切换选项至USB mode, +按下Home键确认，进入USB编程模式.在IDE中选择相应的COM口与设备，点击连接。 + + + +!>如果你使用的是Atom请按以下说明操作 + +>在上电同时（或重启时）按住中间按键不要松开，菜单模式以呼吸灯形式变色，等到灯光变换为蓝色呼吸灯时松开，即进入USB模式 + +> + +## UIFlow教程 +======= ## 相关教材 +>>>>>>> 3cd56af95d6b315f183720dac88d2b3e42c9401e * [M5StickC物联网入门教程](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/M5StickC_Guide.pdf)