Merge pull request #51 from watson8544/master

about program with m5cloud
2026-05-20 10:23:01 -07:00 · 2018-11-27 14:57:22 +08:00
parent 889f3a9ae7 2bc6e6c91c
commit 7eb735fd06
19 changed files with 343 additions and 72 deletions
@@ -61,7 +61,7 @@ MPU9250 Version:

 - **[Purchase](https://www.aliexpress.com/store/product/M5Stack-Official-New-M5Stick-Mini-Development-Kit-ESP32-1-3-OLED-80mAh-Battery-Inside-Buzzer-IR/3226069_32947692973.html?spm=a2g1y.12024536.productList_5885011.subject_1)**

-  **<mark>Quick Start</mark>** - Arduino
+-  **<mark>Quick Start</mark>** - [Arduino](en/quick_start/m5core/m5stick_get_started_arduino)

 <figure>
    <img src="assets/img/product_pics/core/minicore/m5stick/m5stick_01.jpg" height="500" width="500">
@@ -1,6 +1,6 @@
 # M5Flow Quick Start(Blockly/MicroPython)

-!> **Note** *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](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).*
+!> **Note** *a. 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](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). b. If *

 ### **By default, we account your M5Core has been connected with the networkable AP. And the screen shows like this figure below after you pressed the `UPLOAD` button on the left.**

@@ -73,7 +73,27 @@ Drag a block named `Set emoji map in0` from `Emoji` class and click `Run` buttom

 ### c. Program with MicroPython

+Copy the following codes, and paste them to `Python coding area`, and click `Run` button.

+```Python
+from m5stack import *
+from m5ui import *
+clear_bg(0x111111)
+
+
+btnA = M5Button(name='ButtonA', text='ButtonA', visibility=False)
+btnB = M5Button(name='ButtonB', text='ButtonB', visibility=False)
+btnC = M5Button(name='ButtonC', text='ButtonC', visibility=False)
+
+
+lcd.print("Hello M5Stack")
+```
+
+<figure>
+    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_micropython.png">
+</figure>
+
+At that moment, the screen of M5Core will display `Hello M5Stack`.

 ## 3. Play a song now

@@ -103,4 +123,4 @@ Now, run it and enjoy your musical work!

 ## Complete

-?> **Note** *Also, For being more familiar with M5, here some simple pratices ([M5Flow Practices about Blockly](/en/practice/practice_blockly) and [M5Flow Practices about Blockly](/en/practice/practice_micropython)) for you or you can contact us for a [WorkShop](support@m5stack.com).*
+?> **Note** *Also, For being more familiar with M5, you can contact us for a WorkShop <support@m5stack.com>*
@@ -0,0 +1,12 @@
+# M5Stick Quick Start(Arduino)
+
+## 1. Install `U8g2` library
+
+If you have installed `U8g2`, then just run and upload your m5stick's poject.
+If not, then open Arduino IDE, and click `Sketch`->`Include Library`->`Manage Libraries...` for installing `U8g2` library
+
+<figure>
+  <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
+</figure>
+
+## 2. Upload your project
@@ -55,15 +55,15 @@
                '/en/':'/'
            },
            // auto2top   : true,
-            maxLevel   : 3,
-            subMaxLevel: 3,
+            maxLevel   : 1,
+            subMaxLevel: 1,

            // PLUGINS
            // -----------------------------------------------------------------
            executeScript: true,
            ga    : 'UA-100100910-3',
            search: {
-                depth      : 3,
+                depth      : 1,
                noData     : 'No results!',
                placeholder: 'Search...'
            }
@@ -40,7 +40,7 @@ M5Core和FACE底板，再加上Calculator键盘之后，烧录你的固件到M5C

 -  **例程文件** - a. [Arduino](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/FACES) - b. [MicroPython](https://github.com/m5stack/M5Cloud/tree/master/examples/FACES)(for M5Cloud)

-  **M5Cloud使用方法** - [MicroPython(M5Cloud)](en/quick_start/m5core/m5stack_core_get_started_MicroPython_m5cloud)
+-  **M5Cloud使用方法** - [MicroPython(M5Cloud)](zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython_m5cloud)

 <figure>
    <img src="assets/img/product_pics/core/faces_kit/qwerty.jpg">
@@ -61,7 +61,7 @@ MPU9250 版本:

 - **[旗舰店](https://www.aliexpress.com/store/product/M5Stack-Official-New-M5Stick-Mini-Development-Kit-ESP32-1-3-OLED-80mAh-Battery-Inside-Buzzer-IR/3226069_32947692973.html?spm=a2g1y.12024536.productList_5885011.subject_1)**

-  **<mark>快速上手</mark>** - Arduino
+- **<mark>上手指南</mark>** - [Arduino](zh_CN/quick_start/m5core/m5stick_get_started_arduino)

 <figure>
    <img src="assets/img/product_pics/core/minicore/m5stick/m5stick_01.jpg" height="300" width="300">
@@ -1,4 +1,4 @@
-# M5Core 快速上手(macOS, Arudino)
+# M5Core 上手指南(macOS, Arudino)

 ?> **提示** 如果你的操作系统是Windows，请点击[这里](zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_Windows)。

@@ -42,22 +42,15 @@ python get.py

 ```

-Where ~/Documents/Arduino represents your sketch book location as per "Arduino" > "Preferences" > "Sketchbook location" (in the IDE once started). Adjust the command above accordingly if necessary!
-
-Where ~/Documents/Arduino represents your default sketch book location. If you encounter any problems it could be that your Arduino sketchbook folder is in a different location. This can be found by running arduino and navigating through the menu to "Arduino" > "Preferences" > "Sketchbook location". Adjust the command above accordingly if necessary!
-
-?> **Tip** If you get the error below: `xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools),`
-`missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun`, install the command line dev tools by typing `xcode-select --install` into the terminal and hit enter. once installed try the command above again and restart the Arduino IDE.
-
-?> **Tip** If you get the error: `IOError: [Errno socket error] [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol` `version (_ssl.c:590) when running python get.py`, try `python3` instead of `python` and restart the Arduino IDE.
+?> **Tip** 如果你遇到如下错误: `xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools),`
+`missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun`, 请在终端输入如下命令`xcode-select --install`并Enter，等`xcode-select`安装好了，重启Arduino IDE。


+### Step3. 安装M5Stack Lib

-### Step3. Install M5Stack Lib
+打开Arduino IDE, 然后选择`Sketch`->`Include Library`->`Manage Libraries...`

-Start up Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`
-
-Type `M5Stack` into the search box, search it and install.
+在搜索框输入`M5Stack`搜索并安装。

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_install_m5stack_lib.png">
@@ -70,32 +63,31 @@ Type `M5Stack` into the search box, search it and install.



-## Example
+## 例程

-The USB cable connects to M5Stack Core, then select your serial port which is connected M5Stack Core.
-Select a demo example, compile and upload
+用USB线连接M5Core和PC，然后选择PC上正与M5Core连接的串口号。

-### 1. Select your board and the serial port
+### 1. 选择板子和串口

-Start up Arduino IDE, and click `Tools -> Boards -> M5Stack-Core-ESP32` to select your board
+打开Arduino IDE, 并点击`Tools`->`Boards`->`M5Stack-Core-ESP32`

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_select_board.png">
 </figure>


-Click `Tools -> Ports ->` to select the serial port which is connected with M5Stack Core
+点击`Tools` -> `Ports` 以选择合适的串口号

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_select_serial_port.png">
 </figure>


-### 2. Select an example
+### 2. 选择一个例程

-Click `File-> Examples`. Here are some test programs in `M5Stack->`
+点击`File`->`Examples`->`M5Stack`->`Basics`

-Try to open a sketch called `HelloWorld` inside Basics.
+选择例程`HelloWorld`.


 <figure>
@@ -103,8 +95,7 @@ Try to open a sketch called `HelloWorld` inside Basics.
 </figure>


-
-Compile it and upload, the M5Stack screen will show "Hello World!"
+编译并上传这个例程，然后M5Stack屏幕会显示"Hello World!"

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/display_hello_world.png">
@@ -112,9 +103,10 @@ Compile it and upload, the M5Stack screen will show "Hello World!"



-## Note
+## 注意

-Although most versions of MacOS have no problem with detecting the COM port, on some newer versions of High Sierra sometimes Slab\_USBtoUART does not appear. If this is the case, after you connect the M5 open `security and privacy` in the system preferences and set it to `permit`.
+虽然大多数版本的MacOS系统都没找不到串口号这个问题，可是有些最新版本系统就可能出现这个问题。
+如果真的遇到这个问题了，请连接M5并在`system preferences`中打开`security and privacy`，设置`permit`

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy.png">
@@ -130,4 +122,4 @@ Although most versions of MacOS have no problem with detecting the COM port, on
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy_02.png">
 </figure>

-?> **Tip** **If you want to read more the permission about the CP2104 USB driver, visit the below link please.** https://developer.apple.com/library/archive/technotes/tn2459/\_index.html
+?> **Tip** **如果你想了解更多关于CP2104 USB驱动的资料，请阅读这个链接的内容** https://developer.apple.com/library/archive/technotes/tn2459/\_index.html
@@ -1,4 +1,4 @@
-# M5Core 快速上手(Windows, Arudino)
+# M5Core 上手指南(Windows, Arudino)

 ?> **提示** 如果你的操作系统是MacOS的话，请点击[这里](zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS)。

@@ -65,7 +65,7 @@

 ## 示例

-这部分是为了验证现在你是否能通过Arduino IDE对M5Core编程。 
+这部分是为了验证现在你是否能通过Arduino IDE对M5Core编程。
 现在，用USB线连接M5Core和PC，然后打开Arduino IDE，并选择正确的串口号。这个串口号其实就是连接M5Core的串口号，注意不要选错啦。

 选择一个example例程，然后上传运行试试。
@@ -1,37 +1,33 @@
-# M5Flow Quick Start(Blockly/MicroPython)
+# M5Flow 上手指南(Blockly/MicroPython)

-!> **Note** *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](flow.m5stack.com), you need visit this article for setting wifi [How to connect wifi using Core](/zh_CN/related_documents/how_to_connect_wifi_using_core).*
+?> **Tip** *a. 如果你的设备还没烧录M5Flow固件的话，请参考这篇文档[如果使用M5Burner烧录固件](/zh_CN/related_documents/how_to_burn_firmware).* *b. 如果你是第一次使用这个Core或者想Core连接其他可联网的热点AP的话，请参考这篇文档[如果使用Core连接WIFI和M5Flow](/zh_CN/related_documents/how_to_connect_wifi_using_core)。*

-### **By default, we account your M5Core has been connected with the networkable AP. And the screen shows like this figure below after you pressed the `UPLOAD` button on the left.**
+*这时候，你的M5Core已经连接到了可联网WIFI热点，如果按下Core上左边的按键`UPLOAD`的话，会如下图显示。*

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/apikey.jpg">
 </figure>

-?> **Note** *After a few seconds if nothing is pressed the M5 will automatically run the code that was previously uploaded. If we want to upload new code we have to make sure we press the `upload` button on this menu before the M5 boots the code in it’s memory.*
+?> **Tip** *如果M5Core开机之后，两三秒内没做操作的话，会自动地显示预置的程序界面。所以最好开机之后，立马按下`upload`按键。*

-## CONTENT
+## 目录

-1. [Connect to M5Flow](#connect-to-m5flow)
+1. [连接到M5Flow](#connect-to-m5flow)

-2. [Program with Core](#program-with-core)
+2. [编程Core](#program-with-core)

-3. [Play a song now](#play-a-song-now)
+3. [音乐例程](#play-a-song-now)


-## 1. Connect to M5Flow
+## 1. 连接到M5Flow

-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.
+1. 现在用手机或者平板扫描M5Core上的二维码，或者你使用PC编程的话，在PC的浏览器上输入网址`flow.m5stack.com`。

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/webide.png">
 </figure>

-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. 因为每次上传代码到M5Core之前都要确保M5Flow正与手上的M5Core连接，而不是其他M5Core，所以需要点击M5Flow IDE页面右上角的齿轮，并在弹出的对话框内输入手上M5Core屏幕上显示的`APIKEY`，最后点击保存。

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
@@ -41,15 +37,15 @@ So press the little gear in the top right corner of the screen and enter the `AP
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png">
 </figure>

-Then M5Flow will connect with this Core.
+然后M5Flow就会连接到M5Core，此时M5Core屏幕右上角的小圆点就会变成绿色，不然会是一直红色。

-At the moment, you can draw a UI or program it through Blockly(or Python) as shown below.
+现在，可以继续下面的步骤，开始M5Core编程啦！

-## 2. Program with Core
+## 2. 编程Core

-### a. Draw a UI
+### a. 画一个UI

-Drag 4 kinds of elements into `M5Stack Core` UI and click `Run` buttom on M5UI.Flow
+拖拽M5Flow IDE左上角的4种控件到`M5Stack Core`的UI界面，并点击页面右上角的`Run`按钮，执行效果。

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.png">
@@ -59,9 +55,9 @@ Drag 4 kinds of elements into `M5Stack Core` UI and click `Run` buttom on M5UI.F
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png">
 </figure>

-### b. Program with Blockly
+### b. 编写Blockly程序

-Drag a block named `Set emoji map in0` from `Emoji` class and click `Run` buttom on M5UI.Flow
+从左边的`Emoji`分类里拖拽`Set emoji map in0`程序块到到`Blockly`的编码区域上，然后点击`Run`按钮。

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.png">
@@ -71,15 +67,34 @@ Drag a block named `Set emoji map in0` from `Emoji` class and click `Run` buttom
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png">
 </figure>

-### c. Program with MicroPython
+### c. 编写MicroPython程序
+
+复制以下代码到Python编辑区，然后点击右上角的`Run`执行代码
+```Python
+from m5stack import *
+from m5ui import *
+clear_bg(0x111111)


+btnA = M5Button(name='ButtonA', text='ButtonA', visibility=False)
+btnB = M5Button(name='ButtonB', text='ButtonB', visibility=False)
+btnC = M5Button(name='ButtonC', text='ButtonC', visibility=False)

-## 3. Play a song now

-Now, let's make a music player and play a song in a few minutes using M5Stack Core.
+lcd.print("Hello M5Stack")
+```

-Drag a `loop`, `music` and `timer` block into the coding area from the components section.
+<figure>
+    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/program_with_micropython.png">
+</figure>
+
+这时候，M5Core屏幕上会打印出`Hello M5Stack`字样。
+
+## 3. 编写音乐例程
+
+下面，让我们在一两分钟内编写一个音乐例程。
+
+拖拽`loop`, `music`和`timer`这几个程序块到`Blockly`编码区域。

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_loop_block.png">
@@ -93,14 +108,14 @@ Drag a `loop`, `music` and `timer` block into the coding area from the component
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_timer_block.png">
 </figure>

-Then set parameters of `music block` and `timer block` as shown belown.
+然后设置`music block`和`timer block`的相关参数，如下图所示。

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/whole_program.png">
 </figure>

-Now, run it and enjoy your musical work!
+现在，点击`Run`就可以运行音乐程序啦!

-## Complete
+## 最后

-?> **Note** *Also, For being more familiar with M5, here some simple pratices ([M5Flow Practices about Blockly](/en/practice/practice_blockly) and [M5Flow Practices about Blockly](/en/practice/practice_micropython)) for you or you can contact us for a [WorkShop](support@m5stack.com).*
+?> **Tip** *如果你想了解更多M5Flow方面的编程的话，可以给我们发邮件，报名我们的课程<support@m5stack.com>.*
@@ -0,0 +1,155 @@
+# M5Cloud 上手指南(MicroPython)
+
+?> **Note** *如果你的设备还没烧录M5Cloud固件的话，请参考这篇文档[如果使用M5Burner烧录固件](/zh_CN/related_documents/how_to_burn_firmware).*
+
+?> **Note**  *如果你是第一次使用这个Core或者想Core连接其他可联网的热点AP的话，请参考这篇文档[如果使用Core连接WIFI和M5Cloud](/zh_CN/related_documents/how_to_connect_wifi_using_core_with_m5cloud).*
+
+*如果你的Core已经连接了可联网WIFI热点之后，屏幕会如下图显示，出现check code(check code用于M5Core设备与M5Cloud绑定)，下面开始M5Cloud的编程*
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/check_code_on_m5stack.png">
+</figure>
+
+## 目录
+
+1. [连接到M5Cloud](#connect-to-m5cloud)
+
+2. [绑定设备](#binding-device)
+
+3. [编程Core](#program-with-Core)
+
+
+## 1. 连接到M5Cloud
+
+如果你想用PC连编程M5Core的话，请在浏览器页面输入M5Core屏幕上显示的网址`cloud.m5stack.com`
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/register_page_m5cloud.png">
+</figure>
+
+然后，注册一个M5Cloud账号
+
+## 2. 绑定设备
+
+
+点击M5Cloud上`Device`->`Add`按钮，并输入check code到对话框。(看，我的check code是`052879`)
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/webIDE_binding_device_interface.png">
+</figure>
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/WebIDE_check_code.png">
+</figure>
+
+这时候，你可以按照下面的步骤使用Python编程Core啦！
+
+## 2. 编程Core
+
+### a. 新建工程
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/new_a_faces_prj.png">
+</figure>
+
+### a. 开始编程
+
+*现在我们以使用FACES Kit为举例如何使用M5Cloud。*
+
+在创建新工程之后，新建文件，并重命名为`faces.py`。
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/add_file.png">
+</figure>
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/rename_file.png">
+</figure>
+
+然后分别拷贝如下的代码到`faces.py`和`main.py`，并保存。
+
+```Python
+"""
+File name: faces.py
+
+M5Stack MicroPython FACES keyboard I2C driver
+"""
+
+class Faces:
+  def __init__(self, i2c=None):
+    if i2c == None:
+      from machine import I2C, Pin
+      self.i2c = I2C(sda=21, scl=22)
+    else:
+      self.i2c = i2c
+    self.addr = 0x08
+    self.cb = None
+
+  def read(self):
+    return self.i2c.readfrom(self.addr, 1)
+
+  def _callback(self, pin):
+    from machine import Pin
+    if pin == Pin(5):
+      self.cb(self.read())
+
+  def callback(self, cb):
+    from machine import Pin
+    self.pin = Pin(5)
+    self.pin.init(Pin.IN)
+    self.pin.irq(trigger=Pin.IRQ_FALLING, handler=self._callback)
+    self.cb = cb
+```
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/faces_py_file.png">
+</figure>
+
+
+```Python
+"""
+File name: main.py
+"""
+
+from m5stack import *
+from faces import Faces
+
+keyboard = Faces()
+
+# read once
+print("Key value:", end='')
+print(keyboard.read())
+
+# callback
+def keyboard_cb(value):
+  print("Key value:", end='')
+  print(value)
+  lcd.print(value)
+
+keyboard.callback(keyboard_cb)
+```
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/final_result.png">
+</figure>
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/save_file.png">
+</figure>
+
+
+现在点击M5Cloud界面上的`Upload`按钮，如下图所示的操作。
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/upload_it.png">
+</figure>
+
+## 最后
+
+这个FACES Kits的例程功能是，当你按下FACES面板上的某个按键之后，屏幕上会显示对应按键的值。
+
+现在我按下QWERTY键盘上第一行的按键。("q", "w", "e", "r", "t", "y", "u", "i", "o", "p")
+
+<figure>
+    <img src="assets/img/getting_started_pics/get_started_with_m5cloud/result.png">
+</figure>
@@ -1,7 +1,9 @@
-# M5Stack Core Get Started
+# M5Stack Core上手指南

-## Pick up your programming mode below for getting started
+## 选择你需要的编程语言
+
+*使用Arduino/C++编程的话，选择Arduino；使用M5Flow/MicroPython，选择Blockly/MicroPython*

 <img src="assets/img/getting_started_pics/arduino_logo.png"> | <img src="assets/img/getting_started_pics/blockly_and_micropython.png">
 ---|---
-[Arduino](/en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Blockly/MicroPython](/en/quick_start/m5core/m5stack_core_get_started_MicroPython)
+[Arduino](/zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Blockly/MicroPython](/zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython)
@@ -0,0 +1,18 @@
+# M5Stick 上手指南(Arduino)
+
+## 1. 安装`U8g2`库
+
+如果你已经安装了`U8g2`库的话，直接跳到第二步往下执行。
+如果还没的话，打开Arduino IDE，并点击`Sketch`->`Include Library`->`Manage Libraries...`，搜索`U8g2`进行安装。
+
+<figure>
+  <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
+</figure>
+
+## 2. Arduino-ESP32的开发设置
+
+请根据你PC的操作系统类型阅读对应的文档。
+
+<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png">
+---|---
+[MacOS](/zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Windows](/zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_Windows)
@@ -1,4 +1,4 @@
-# 使用Core连接Wi-Fi
+# 连接Wi-Fi(For M5Flow)

 ?> **Tip** *如果你的M5Core还没预先烧录了M5Flow固件的话，参考这篇文章[如何使用M5Burner烧录固件](zh_CN/related_documents/how_to_burn_firmware))*

@@ -54,4 +54,8 @@

 <figure>
    <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/change_wifi.jpg">
-</figure>
+</figure>
+
+## 最后
+
+现在，你可以阅读这篇文章开始使用M5Flow编程啦！[M5Flow上手指南](zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython)
@@ -0,0 +1,53 @@
+# 如何连接WIFI (For M5Cloud)
+
+?> **Tip** *如果你的M5Cloud还没预先烧录名为`M5Cloud`固件的话，请阅读这篇文章[如何烧录使用M5Burner烧录固件](zh_CN/related_documents/how_to_burn_firmware)*
+
+**重启M5Core之后，你会看到M5Core出现下图界面。现在我们就开始连接WIFI吧**
+
+<figure>
+    <img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/m5stack_connet_wifi.png">
+</figure>
+
+## 目录
+
+1. [连接M5Core的热点](#connect-to-m5Core-AP)
+
+2. [选择可联网的WIFI热点](#select-networkable-ap)
+
+3. [重启M5Core](#reset-your-device)
+
+## 1. 连接M5Core的热点
+
+**使用手机或者PC连接M5Core发出的热点AP(看，现在我的M5Core发出的热点名是`M5Stack-a67c`)**
+
+## 2. 选择可联网的WIFI热点
+
+**打开浏览器并输入网址`192.168.4.1`，然后选择可联网的WIFI，并输入其密码(如下图，我的WIFI名字是`MasterHax_5G`)**
+
+<figure>
+    <img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/wifisetup.png">
+</figure>
+
+<figure>
+    <img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/wifi_connect_successfully.png">
+</figure>
+
+?> **Tip** 如果你的M5Core没成功连接WIFI，请重试一次.
+
+## 3. 重启M5Core
+
+**在M5Core成功连接WIFI之后，重启你的Core**
+
+<figure>
+    <img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/check_code_on_m5stack.png">
+</figure>
+
+!> **Note** 可是如果你的Core之前绑定过M5Cloud账号(也就是之前有过将check code输入到[M5Cloud](http://cloud.m5stack.com))，这时M5Core屏幕会如下图所示。
+
+<figure>
+    <img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/connected_wifi_m5cloud_been_bound.png">
+</figure>
+
+## 最后
+
+现在，你可以阅读这篇文章开始使用M5Cloud编程啦！[M5Cloud上手指南](zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython_m5cloud)