updated

2026-05-20 10:23:01 -07:00 · 2019-04-04 11:02:52 +08:00
parent 48260a2713
commit 082d54dba2
16 changed files with 236 additions and 9 deletions
@@ -27,7 +27,7 @@
    <tr>
        <td align="center"><a href="#/en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS">Arduino-Mac</a> / <a href="#/en/quick_start/m5core/m5stack_core_get_started_Arduino_Windows">Arduino-Win</a> / <a href="#/en/quick_start/m5core/m5stack_core_get_started_MicroPython">UIFlow</a></td>
        <td align="center"><a href="#/en/quick_start/m5stick/m5stick_quick_start_with_Arduino_MacOS">Arduino-Mac</a> / <a href="#/en/quick_start/m5stick/m5stick_quick_start_with_Arduino_Windows">Arduino-Win</a> / <a href="#/en/quick_start/m5stick/m5stick_quick_start_with_uiflow">UIFlow</a></td>
-        <td align="center"><a href="#/en/quick_start/m5stickc/m5stickc_quick_start_with_Arduino_Windows">Arduino-Win</a></td>
+        <td align="center"><a href="#/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows">Arduino-Win</a></td>
    </tr>
 </table>

@@ -1,4 +1,4 @@
-# M5Core Quick Start {docsify-ignore-all}
+# M5Core Quick Start - Arduino Mac {docsify-ignore-all}

 :clapper: **[Video Tutorial](#Video-Tutorial)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:memo: **[Text Tutorial](#Table-of-Contents)**

@@ -1,4 +1,4 @@
-# M5Core Quick Start {docsify-ignore-all}
+# M5Core Quick Start - Arduino Win {docsify-ignore-all}

 <!-- ?> We suggest you confirm whether the `USB driver`, `Git` and `Arduino IDE` has installed first. If not, please view this two articles [establish serial connection](/en/related_documents/establish_serial_connection) and [Install Git and Arduino IDE](/en/related_documents/how_to_install_git_and_arduino). -->

@@ -1,4 +1,4 @@
-# UIFlow Quick Start(Blockly/MicroPython) {docsify-ignore-all}
+# M5Core Quick Start - UIFlow {docsify-ignore-all}

 :clapper: **[Video Tutorial](#Video-Tutorial)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:memo: **[Text Tutorial](#Table-of-Contents)**

@@ -1,4 +1,4 @@
-# M5Cloud Quick Start(MicroPython) {docsify-ignore-all}
+# M5Core Quick Start - M5Cloud {docsify-ignore-all}

 ?> If it's first time to use M5Core or you want to change the networkable AP that means the Core can't access [http://cloud.m5stack.com](http://cloud.m5stack.com), you need visit this article for setting wifi [How to connect wifi using Core with M5Cloud](/en/related_documents/how_to_connect_wifi_using_core_with_m5cloud).

@@ -1,4 +1,4 @@
-# M5Stick Quick Start for Arduino {docsify-ignore-all}
+# M5Stick Quick Start - Arduino Mac {docsify-ignore-all}

 <!-- :clapper: **[Video Tutorial](#Video-Tutorial)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:memo: **[Text Tutorial](#Text-Tutorial)** -->

@@ -1,4 +1,4 @@
-# M5Stick Quick Start {docsify-ignore-all}
+# M5Stick Quick Start - Arduino Win {docsify-ignore-all}

 <!-- ?> We suggest you confirm whether the `USB driver`, `Git` and `Arduino IDE` has installed first. If not, please view this two articles [establish serial connection](en/related_documents/establish_serial_connection) and [Install Git and Arduino IDE](en/related_documents/how_to_install_git_and_arduino). -->

@@ -1,4 +1,4 @@
-# M5Stick Quick Start for UIFlow {docsify-ignore-all}
+# M5Stick Quick Start - UIFlow {docsify-ignore-all}

 <img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/uiflow-logo.png">

@@ -0,0 +1,107 @@
+# M5Stick Quick Start - Arduino Mac {docsify-ignore-all}
+
+<!-- :clapper: **[Video Tutorial](#Video-Tutorial)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:memo: **[Text Tutorial](#Text-Tutorial)** -->
+
+<!-- *** -->
+
+<!-- ?> Before setting the development environment, we suggest you confirm whether the USB driver has installed. If not, please visit this link [establish serial connection](/en/related_documents/establish_serial_connection). -->
+
+<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/macos-logo.png">
+
+## Text Tutorial
+
+1. [Setting Environment](#setting-environment)
+
+    - [Step1. Install Arduino IDE](#step1-install-arduino-ide)
+
+    - [Step2. ESP32 Board Support](#step2-esp32-board-support)
+
+    - [Step3. Install M5Stack Lib](#step3-install-m5stack-lib)
+
+    - [Step4. Install U8g2 library](#Step4-Install-U8g2-library)
+
+2. [Example](#example)
+
+## Setting Environment
+
+### Step1. Install `Arduino IDE`
+
+First, if Arudino IDE is not installed, install it. It's *download address* is https://www.arduino.cc/en/Main/Software
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide.png">
+
+### Step2. ESP32 Board Support
+
+Open Arduino IDE, click `Arduino`->`Peferences`->`Settings`
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_01.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_02.png">
+
+Copy the following last ESP32 Board Manager URL to this option `Additional Boards Manager URLs: `
+
+*NOW, last ESP32 board manager URL is https://dl.espressif.com/dl/package_esp32_index.json*
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_03.png">
+
+Confirm OK and click `Tools`->`Board:`->`Boards Manager...` for installing esp32
+
+Search `ESP32` in the new pop-up dialog, then click `install`
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_04.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_05.png">
+
+### Step3. Install M5Stack Lib
+
+Start up Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`
+
+Type `M5Stack` into the search box, search it and install.
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_06.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_07.png">
+
+### Step4. Install U8g2 Library
+
+Open Arduino IDE, click `Sketch`->`Include Library`->`Manage Libraries...`, search `U8g2` for installing.
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
+
+## Example
+
+The USB cable connects to <mark>[M5Stick built in MPU9250](https://ae01.alicdn.com/kf/HTB1pICNXznuK1RkSmFPq6AuzFXa1.jpg)</mark>, then select your serial port which is connected the M5Stick.
+
+Select a demo example, compile and upload
+
+### 1. Select your board and the serial port
+
+Start up Arduino IDE, and click `Tools -> Boards -> M5Stack-Core-ESP32` to select your board
+
+Click `Tools -> Ports ->` to select the serial port which is connected with M5Stick
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_10.png">
+
+### 2. Select an example
+
+Click `File-> Examples`. Here are some test programs in `M5Stack`->`Stick`
+
+Try to open a sketch called `FactoryTest` inside Basics.
+
+<img src="assets/img/getting_started_pics/m5stick/m5stick_quick_start_arduino_mac_01.png">
+
+Compile it and upload, the M5Stick screen will show "Hello World! Exist""
+
+**The button located at the bottom left of stick is the power button, click to turn it on, press again to reset when running. If you want to let stick enter deep sleep status, you need to press the power button twice quickly.**
+
+## 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`.
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy_01.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy_02.png">
+
+?> **If you want to read more the permission about the CP2104 USB driver, visit the following link please.** https://developer.apple.com/library/archive/technotes/tn2459/\_index.html
@@ -1,4 +1,4 @@
-# M5StickC Quick Start {docsify-ignore-all}
+# M5StickC Quick Start - Arduino Win {docsify-ignore-all}

 <!-- ?> We suggest you confirm whether the `USB driver`, `Git` and `Arduino IDE` has installed first. If not, please view this two articles [establish serial connection](en/related_documents/establish_serial_connection) and [Install Git and Arduino IDE](en/related_documents/how_to_install_git_and_arduino). -->

@@ -0,0 +1,120 @@
+# M5StickC Quick Start - UIFlow {docsify-ignore-all}
+
+<img src="assets/img/getting_started_pics/m5stickc/m5stickc_06.png"><img src="assets/img/uiflow-logo.png">
+
+**[1. Burn UIFlow Firmware](#_1-Burn-UIFlow-Firmware)**
+
+**[2. Wi-Fi Setting](#_2-Wi-Fi-Setting)**
+
+**[3. Program](#_3-Program)**
+
+## 1. Burn UIFlow Firmware
+
+#### (1) Download M5Burner
+
+Access [M5Stack Official Website](http://www.m5stack.com/download), and download M5Burner
+
+<img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner.png" alt="Screenshot of coverpage" title="Cover page">
+
+<img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner_02.png" alt="Screenshot of coverpage" title="Cover page">
+
+#### (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 **`115200 baud rate`** that the board is connected to the computer, and select the latest version of UIFlow firmware for M5StickC
+
+Click `Burn` for downloading UIFlow firmware
+
+<img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_01.png">
+
+The following interface appears, indicating that the firmware is successfully burned.
+
+<img src="assets/img/getting_started_pics/how_to_burn_firmware/qs_uiflow_02.png">
+
+
+<!-- 1. **[Update firmware](#update-firmware)**
+
+2. **[Power on](#power-on)**
+
+3. **[Setting environment](#setting-environment)**
+
+    - **[Step1. Setting WIFI](#step1-setting-wifi)**
+
+    - **[Step2. Setting API Key](#step2-setting-api-key)**
+
+4. **[Example](#example)**
+
+5. **[Related Video](#Related-Video)**
+
+6. **[UIFlow Tutorial](https://m5stack.github.io/UIFlow_doc/cn/index.html)** -->
+
+## Update firmware
+
+>Update the stick to the latest firmware version for a better experience.
+
+*If you need to update or burn firmware by yourself, please click [here](en/related_documents/how_to_burn_firmware)*
+
+<img src="assets/img/getting_started_pics/m5stick/stick_03.png">
+
+## Power on
+
+>The button located at the bottom left of stick is the power button, click to turn it on, press again to reset when running. If you want to let stick enter deep sleep status, you need to press the power button twice quickly.
+
+>In addition to the power button, the stick also provides another button `A` for you to program.
+
+<img src="assets/img/getting_started_pics/m5stick/stick_02.png" width="300" height="300">
+
+## Setting environment
+
+### Step1. Setting WIFI
+
+When you turn on stick for the first time, it will enter the configuration page by default. And it's OLED screen will display it's own **AP name(SSID)** and **ap-setting address(192.168.4.1)**.
+
+At this time, you can use the mobile phone to connect to this hotspot. After the connection is successful, use the browser to enter the network configuration address, enter the WIFI configuration page, enter the personal WIFI information, click `Save`, and wait for the connection to succeed.
+
+<img src="assets/img/getting_started_pics/m5stick/stick_04.png">
+
+## Step2. Setting API Key
+
+After the WIFI is successfully configured, stick will automatically reset and enter the programming mode. When the screen displays “Done”, it indicates that the network has been successfully connected. Access our WebIDE [flow.m5stack.com](http://flow.m5stack.com/) for programming.
+
+Click the `Settings` button at the top right of the [WebIDE](http://flow.m5stack.com/), enter the **API Key** displayed on the stick screen and click `Save`. Now, start programming.
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_setting.png">
+
+<img src="assets/img/getting_started_pics/m5stick/stick_05.png">
+
+## Supplement
+
+>If clicked `Download`, stick will run the last downloaded program straight. In this case, if you want to enter programming mode, you need to press `A` button once the stick screen disappears `UIFlow` logo after it was reset.
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png">
+
+>If you want to configurate a new wifi for stick, you need to press and hold `A` button for more than one second and then release once the stick screen disappears `UIFlow` logo after it was reset.
+
+## Example
+
+>Click and download [example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Core/M5Stick/UIFlow). And open this example code in UIFlow, then run it. Program phenomenon: White squares will scroll back and forth on the screen.
+
+<img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_02.png" width=50% height=50%><img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_03.png" width=50% height=50%>
+
+### Note
+
+>the resolution of stick screen is **64x128**, so if you want to drag a graph at [WebIDE](http://flow.m5stack.com/) to display on stick screen, it's better for you to drag it within a certain range shown as following figure.(Currently only supports the display of rectangular patterns, as well as labels.)
+
+<img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_01.png" width=50% height=50%>
+
+## Related Video
+
+**UIFlow introduce**
+
+<video width="500" height="315" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/UIFlow%20Tutorials/A3%20-%20UIflow%20Tutorial%201.mp4" type="video/mp4">
+</video>
+
+**UIFlow quick start (Mac & Linux)**
+
+<video width="500" height="315" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Getting%20started%20with%20UI%20flow%20(Mac_Linux).mp4" type="video/mp4">
+</video>