From ae38489d14372f0d31c52b6baba314089dfd9cea Mon Sep 17 00:00:00 2001 From: LiHuashen <854410664@qq.com> Date: Mon, 18 Mar 2019 14:02:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0uiflow=E7=9A=84=E4=B8=8A?= =?UTF-8?q?=E6=89=8B=E6=8C=87=E5=8D=97=20en?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../m5stack_core_get_started_MicroPython.md | 199 ++++++++++++------ .../m5stack_core_get_started_MicroPython.md | 12 +- 2 files changed, 139 insertions(+), 72 deletions(-) diff --git a/docs/en/quick_start/m5core/m5stack_core_get_started_MicroPython.md b/docs/en/quick_start/m5core/m5stack_core_get_started_MicroPython.md index 4eab92f3..7b2f2051 100644 --- a/docs/en/quick_start/m5core/m5stack_core_get_started_MicroPython.md +++ b/docs/en/quick_start/m5core/m5stack_core_get_started_MicroPython.md @@ -1,68 +1,159 @@ # UIFlow Quick Start(Blockly/MicroPython) {docsify-ignore-all} -:clapper: **[Video Tutorial](#Video-Tutorial)**      :memo: **[Text Tutorial](#Text-Tutorial)** +:clapper: **[Video Tutorial](#Video-Tutorial)**      :memo: **[Text Tutorial](#Table-of-Contents)** -?> a. If your M5Stack Core was not burnt with a specific firmware named `UIFlow` in advance, please visit this article [How to burn firmware](/en/related_documents/how_to_burn_firmware) for burnning). b. If it's first time to use M5Stack Core or you want to change the networkable AP that means the Core can't access [flow.m5stack.com](http://flow.m5stack.com), you need visit this article for setting wifi [How to connect wifi using Core](/en/related_documents/how_to_connect_wifi_using_core). + -
+ + +## Table of Contents + +**[1. Install USB to Serial Driver](#_1-Install-USB-to-Serial-Driver)** + +**[2. Burn UIFlow Firmware](#_2-Burn-UIFlow-Firmware)** + +**[3. Wi-Fi Setting](#_3-Wi-Fi-Setting)** + +**[4. Program](#_4-Program)** - -## Text Tutorial + -## 1. Connect to UIFlow +## 1. Install USB to Serial Driver -1. Now you scan the QR code with your phone or tablet to start programming on your mobile device. If you want to program the M5 from your computer, enter the url shown at the top of the screen `flow.m5stack.com`. It will show as following figure. +Open your browser, enter the official website of M5Stack https://m5stack.com/download -
- -
+#### (1) click `Windows` for downloading this installation package and then unzip this package. -2. Whenever we want to upload code to the M5 from UI flow we need to make sure the device is paired. So press the little gear in the top right corner of the screen and enter the `APIKEY` which shows on the screen of M5(Now, my APIKEY is `9C6469`) and click `SAVE`. + -
- -
+#### (2) According to your Windows operating system type, select the corresponding driver installation package -Then UIFlow will connect with this Core. +* 32-bit Windows operating system, choose `CP210xVCPInstaller_x86_vx.x.x.x.exe` -At the moment, you can draw a UI or program it through Blockly(or Python) as shown below. +* 64-bit Windows operating system, choose `CP210xVCPInstaller_x64_vx.x.x.x.exe` -## 2. Program with Core + -### a. Draw a UI +#### (3) double click the executable file for installing. -Drag 4 kinds of elements into `M5Stack Core` UI and click `Run` buttom on M5UI.Flow + -
- -
+ + +#### (4) Check the serial port number `COMx` + +To comfirm if the USB to Serial Driver was successfully installed already, Check the list of identified COM ports in the `Windows Device Manager`: + +Connect the Core to the computer via a USB Type-C cable, open `Windows Device Manager`, click `Ports(COM & LPT)` for checking the list of identified COM ports. + +Disconnect M5Core device and connect it back, to verify which port disappears from the list and then shows back again. + + + +## 2. 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 M5Core 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 `921600 baud rate` that the board is connected to the computer, and select the latest version of UIFlow firmware. + + + +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 red button in the upper left corner of the Core to restart the device. Once the Core is powered on, immediately click the `C button` that indicates you select the `SETUP` option on the screen for the network configuration. Then click on the middle button and select `Link Server: Flow.m5stack.com`. + + + +#### (2) Connect to AP + +Turn on Wi-Fi on your phone or computer, then connect to the M5Core hotspot `AP` displayed on the screen ( For example, the M5Stack-0d60 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 ) + + + +#### (2) Connect to Wi-Fi + +After M5Core successfully connects to a networkable Wi-Fi (here M5), the screen will display `APIKEY` and the QR code that can access the UIFlow webpage. + +*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 small dot on the screen: + +* Green means M5Core successfully connected to Wi-Fi, that is online status + +* Red means be offline status + +## 4. Program + +#### (2) Connect to UIFlow + +Now scan the QR code on the M5Core with your phone or tablet, or 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 M5Core through UIFlow, make sure that UIFlow is connected to the M5Core 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 M5Core screen in the pop-up dialog box. Click `Save`, then UIFlow will connect to M5Core. + + + + + +Now you can start programming with UIFlow! + +#### (2) Programming example + +#### a. draw a UI + +Drag and drop the 4 controls in the upper left corner of the UIFlow IDE to the UI interface of `M5Stack Core` and click the `Run` button in the upper right corner of the page to execute the effect. + + + +#### b. writing a Blockly program + +Drag the `Set emoji map in0` block from the `Emoji` category on the left to the code area of `Blockly` and click the `Run` button. + + -### b. Program with Blockly +*The link of source coce: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f* -Drag a block named `Set emoji map in0` from `Emoji` class and click `Run` buttom on M5UI.Flow +#### c. writing a MicroPython program -
- -
- -*The source code of this demostration: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f* - -### c. Program with MicroPython - -Copy the following codes, and paste them to `Python coding area`, and click `Run` button. +Copy the following code into the Python editing area, then click `Run` in the top right corner to execute the code. ```Python from m5stack import * @@ -78,44 +169,20 @@ btnC = M5Button(name='ButtonC', text='ButtonC', visibility=False) lcd.print("Hello M5Stack") ``` -
- -
+ -At that moment, the screen of M5Core will display `Hello M5Stack`. - -## 3. Play a song now - -Now, let's make a music player and play a song in a few minutes using M5Stack Core. - -Drag a `loop`, `music` and `timer` block into the coding area from the components section. - -Then set parameters of `music block` and `timer block` as shown belown. - -
- -
- -Now, run it and enjoy your musical work! - -*The source code of this demostration: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_play_a_song.m5f* - -## Complete - -?> *Absolutely, For being more familiar with M5, you can read [the tutorial documentation of UIFlow](https://m5stack.github.io/UIFlow_doc/cn/index.html).* +At this time, the word 'Hello M5Stack` will be printed on the M5Core screen. ## Video Tutorial **UIFlow Overview** - + **UIFlow Tutorial** - + - + \ No newline at end of file +?> *Absolutely, For being more familiar with M5, you can read [the tutorial documentation of UIFlow](https://m5stack.github.io/UIFlow_doc/cn/index.html).* --> \ No newline at end of file diff --git a/docs/zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython.md b/docs/zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython.md index 93326dc1..56b152b2 100644 --- a/docs/zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython.md +++ b/docs/zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython.md @@ -64,7 +64,7 @@ Screenshot of coverpage -### (2) 烧录固件 +#### (2) 烧录固件 将 M5Core 通过 USB Type-C 线连接到电脑，解压刚刚下载的 M5Burner 压缩包, 然后双击可执行文件 `M5Burner.exe` @@ -72,7 +72,7 @@ -点击 `Burn` for downloading UIFlow firmware +点击 `Burn` 以下载 UIFlow 的固件到 M5Core 中 @@ -94,7 +94,7 @@ -#### (2) 连接 UIFlow +#### (2) 连接 Wi-Fi M5Core 成功连接可联网的 Wi-Fi ( 这里是 M5 )之后，屏幕会出现 `APIKEY` 和 可以访问到 UIFlow 网页的二维码 @@ -112,7 +112,7 @@ M5Core 成功连接可联网的 Wi-Fi ( 这里是 M5 )之后，屏幕会出现 ` #### (1) 连接 UIFlow -现在用手机或者平板扫描 M5Core 上的二维码，或者您使用电脑编程的话，在电脑的浏览器上输入网址`flow.m5stack.com` +现在用手机或者平板扫描 M5Core 上的二维码，或者您使用电脑编程的话，在电脑的浏览器上输入网址 `flow.m5stack.com` @@ -128,14 +128,14 @@ M5Core 成功连接可联网的 Wi-Fi ( 这里是 M5 )之后，屏幕会出现 ` #### a. 画一个 UI -拖拽UIFlow IDE左上角的4种控件到`M5Stack Core`的UI界面，并点击页面右上角的`Run`按钮，执行效果。 +拖拽 UIFlow IDE 左上角的 4 种控件到 `M5Stack Core` 的 UI 界面，并点击页面右上角的 `Run` 按钮，执行效果。 #### b. 编写 Blockly 程序 -从左边的`Emoji`分类里拖拽`Set emoji map in0`程序块到到`Blockly`的编码区域上，然后点击`Run`按钮。 +从左边的 `Emoji` 分类里拖拽 `Set emoji map in0` 程序块到到 `Blockly` 的编码区域上，然后点击 `Run` 按钮。