mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
...
This commit is contained in:
LiHuashen
BIN
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -4,7 +4,7 @@
|
||||
|
||||
* * *
|
||||
|
||||
:memo:**[Description](#Description)** :bulb:**[Quick Start](en/quick_start/m5core/m5stack_core_quick_start)** :octocat:**[Example](https://github.com/m5stack/M5Stack/tree/master/examples/Basics)** :electric_plug:**[Schematic](https://github.com/m5stack/M5-3D_and_PCB/blob/master/M5_Core_SCH%2820171206%29.pdf)** 🛒**[Purchase](https://www.aliexpress.com/store/product/M5Stack-Official-Stock-Offer-ESP32-Basic-Core-Development-Kit-Extensible-Micro-Control-Wifi-BLE-IoT-Prototype/3226069_32837164440.html?spm=2114.12010615.8148356.2.3b9b2de96y27jH)** :clapper:**[Related Video](#Related-Video)**
|
||||
:memo:**[Description](#Description)** :bulb:**[Quick Start](en/quick_start/m5core/m5stack_core_quick_start)** :octocat:**[Example](https://github.com/m5stack/M5Stack/tree/master/examples/Basics)** :electric_plug:**[Schematic](https://github.com/m5stack/M5-3D_and_PCB/blob/master/M5_Core_SCH%2820171206%29.pdf)** 🛒**[Purchase](https://www.aliexpress.com/store/product/M5Stack-Official-Stock-Offer-ESP32-Basic-Core-Development-Kit-Extensible-Micro-Control-Wifi-BLE-IoT-Prototype/3226069_32837164440.html?spm=2114.12010615.8148356.2.3b9b2de96y27jH)** :clapper:**[Related Video](#Related-Video)**
|
||||
|
||||
## Description
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
* * *
|
||||
|
||||
:memo:**[Description](#Description)** :bulb:**[Quick Start](en/quick_start/m5core/m5stick_get_started_arduino)** :octocat:**[Example](https://github.com/m5stack/M5Stack/tree/master/examples/Stick/FactoryTest)** :electric_plug:**[Schematic](#Schematic)** 🛒**[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)** :clapper:**[Related Video](#Related-Video)**
|
||||
:memo:**[Description](#Description)** :bulb:**[Quick Start](en/quick_start/m5stick/m5stick_quick_start)** :octocat:**[Example](https://github.com/m5stack/M5Stack/tree/master/examples/Stick/FactoryTest)** :electric_plug:**[Schematic](#Schematic)** 🛒**[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)** :clapper:**[Related Video](#Related-Video)**
|
||||
|
||||
## Description
|
||||
|
||||
|
||||
@@ -89,4 +89,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">
|
||||
|
||||
?> **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
|
||||
?> **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
|
||||
@@ -0,0 +1,13 @@
|
||||
# M5Stick Quick Start
|
||||
|
||||
**Pick up your programming mode below for getting started**
|
||||
|
||||
<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/m5stick/m5stick_quick_start_with_arduino) | [UiFlow(Blockly/MicroPython)](en/quick_start/m5stick/m5stick_quick_start_with_uiflow)
|
||||
|
||||
|
||||
|
||||
<!-- <img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/getting_started_pics/blockly_and_micropython.png"> -->
|
||||
<!-- ---|---|--- -->
|
||||
<!-- [MacOS](en/quick_start/m5stick/m5stick_quick_start_with_arduino) | [Windows](en/quick_start/m5stick/m5stack_core_get_started_Arduino_Windows) | [UiFlow(Blockly/MicroPython)](en/quick_start/m5stick/m5stick_quick_start_with_uiflow) -->
|
||||
@@ -0,0 +1,17 @@
|
||||
# M5Stick Quick Start for Arduino
|
||||
|
||||
## 1. 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">
|
||||
|
||||
## 2. Arduino-ESP32 setting
|
||||
|
||||
Please read the corresponding document according to the operating system type of your PC.
|
||||
|
||||
Because of being built in the same MCU, the quick-start step of m5stick is similar with [m5core]([M5Core](en/quick_start/m5core/m5stack_core_quick_start)).
|
||||
|
||||
<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png">
|
||||
---|---
|
||||
[MacOS](en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Windows](en/quick_start/m5core/m5stack_core_get_started_Arduino_Windows)
|
||||
@@ -0,0 +1,71 @@
|
||||
# M5Stick Quick Start for UIFlow
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.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)**
|
||||
|
||||
## 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 shut down, 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%>
|
||||
@@ -1,9 +1,19 @@
|
||||
# M5Stick快速上手
|
||||
|
||||
:octocat:**[例程](#例程)**
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png">
|
||||
|
||||
1. **[更新固件](#更新固件)**
|
||||
|
||||
2. **[开关机操作](#开关机操作)**
|
||||
|
||||
3. **[编程环境配置](#编程环境配置)**
|
||||
|
||||
- **[Step1. 设置WIFI](#step1-设置wifi)**
|
||||
|
||||
- **[Step2. 设置API Key](#step2-设置api-key)**
|
||||
|
||||
4. **[例程](#例程)**
|
||||
|
||||
## 更新固件
|
||||
|
||||
>将stick更新到最新固件版本，以获得更棒的体验
|
||||
@@ -20,18 +30,23 @@
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stick/stick_02.png" width="300" height="300">
|
||||
|
||||
## 配置WIFI
|
||||
## 编程环境配置
|
||||
|
||||
>首次开机时，会默认进入配置页面，stick的屏幕上显示了**热点的名称（SSID）**，以及**网络配置的地址（192.168.4.1）**
|
||||
>这时候可以使用手机连接这个热点，待连接成功后，使用浏览器输入网络配置地址，进入WIFI配置页面，输入个人WIFI的信息，点击保存，等待连接成功
|
||||
### Step1. 设置WIFI
|
||||
|
||||
首次开机时，会默认进入配置页面，stick的屏幕上显示了**热点的名称（SSID）**，以及**网络配置的地址（192.168.4.1）**
|
||||
|
||||
这时候可以使用手机连接这个热点，待连接成功后，使用浏览器输入网络配置地址，进入WIFI配置页面，输入个人WIFI的信息，点击保存，等待连接成功
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stick/stick_04.png">
|
||||
|
||||
## 配置API Key
|
||||
### Step2. 设置API Key
|
||||
|
||||
>配置WIFI成功后stick会自动进行重启，并进入编程模式，当屏幕显示“Done”，则表示已经成功连接上了网络，访问[flow.m5stack.com](http://flow.m5stack.com/)进入编程UIFlow编程页面
|
||||
配置WIFI成功后stick会自动进行重启，并进入编程模式，当屏幕显示“Done”，则表示已经成功连接上了网络，访问[flow.m5stack.com](http://flow.m5stack.com/)进入编程UIFlow编程页面
|
||||
|
||||
>点击屏幕右上角的菜单中的设置按钮，填写stick屏幕上显示的**API Key**，点击保存，开始编程吧！
|
||||
点击屏幕右上角的菜单中的设置按钮，填写stick屏幕上显示的**API Key**，点击保存，开始编程吧！
|
||||
|
||||
<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">
|
||||
|
||||
@@ -39,19 +54,22 @@
|
||||
|
||||
>如果下载了程序，那么每次开机都会默认运行，如果想要重新运行或下载程序，那么需要在重启出现Logo时单击按键A，再次进入编程模式
|
||||
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png">
|
||||
|
||||
>如果想要配置新的WIFI，那么需要在重启出现Logo时，长按按键A一秒以上后松开，进入配置页面
|
||||
|
||||
>如果错过了操作时间，可以单击复位按钮，重启再次操作
|
||||
|
||||
|
||||
## 关于编程
|
||||
|
||||
>stick的屏幕**分辨率为64x128**，所以当你UIFlow中往屏幕添加图形的时候，需要将形状放置到一定范围之内才能显示，目前只支持显示矩形图案，以及标签
|
||||
|
||||
>我们会尽快针对stick做出一系列兼容UIFlow的优化，敬请期待
|
||||
|
||||
## 例程
|
||||
|
||||
>点击下载[例程](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Core/M5Stick/UIFlow)，并在UIFlow中打开例程，下载例程到stick中。效果：白色方块会在屏幕上来回滚动
|
||||
|
||||
<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%>
|
||||
<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%>
|
||||
|
||||
## 注意
|
||||
|
||||
>stick的屏幕**分辨率为64x128**，所以当你UIFlow中往屏幕添加图形的时候，需要将形状放置到一定范围之内才能显示，目前只支持显示矩形图案，以及标签
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_01.png" width=50% height=50%>
|
||||
|
||||
>我们会尽快针对stick做出一系列兼容UIFlow的优化，敬请期待
|
||||
Reference in New Issue
Block a user