diff --git a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png new file mode 100644 index 00000000..bbfd78c7 Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png differ diff --git a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_run.png b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_run.png new file mode 100644 index 00000000..fa17b6c5 Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_run.png differ diff --git a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_setting.png b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_setting.png new file mode 100644 index 00000000..f50f5876 Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_setting.png differ diff --git a/docs/en/core/basic.md b/docs/en/core/basic.md index 6c3289cf..e5128266 100644 --- a/docs/en/core/basic.md +++ b/docs/en/core/basic.md @@ -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 diff --git a/docs/en/core/m5stick.md b/docs/en/core/m5stick.md index 82b476ad..17ba8372 100644 --- a/docs/en/core/m5stick.md +++ b/docs/en/core/m5stick.md @@ -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 diff --git a/docs/en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS.md b/docs/en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS.md index 69f38517..1bdb5571 100644 --- a/docs/en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS.md +++ b/docs/en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS.md @@ -89,4 +89,4 @@ Although most versions of MacOS have no problem with detecting the COM port, on -?> **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 \ No newline at end of file +?> **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 \ No newline at end of file diff --git a/docs/en/quick_start/m5stick/m5stick_quick_start.md b/docs/en/quick_start/m5stick/m5stick_quick_start.md new file mode 100644 index 00000000..aba03fc9 --- /dev/null +++ b/docs/en/quick_start/m5stick/m5stick_quick_start.md @@ -0,0 +1,13 @@ +# M5Stick Quick Start + +**Pick up your programming mode below for getting started** + + | +---|--- +[Arduino](en/quick_start/m5stick/m5stick_quick_start_with_arduino) | [UiFlow(Blockly/MicroPython)](en/quick_start/m5stick/m5stick_quick_start_with_uiflow) + + + + + + diff --git a/docs/en/quick_start/m5stick/m5stick_quick_start_with_arduino.md b/docs/en/quick_start/m5stick/m5stick_quick_start_with_arduino.md new file mode 100644 index 00000000..e31eb195 --- /dev/null +++ b/docs/en/quick_start/m5stick/m5stick_quick_start_with_arduino.md @@ -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. + + + +## 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)). + + | +---|--- +[MacOS](en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Windows](en/quick_start/m5core/m5stack_core_get_started_Arduino_Windows) diff --git a/docs/en/quick_start/m5stick/m5stick_quick_start_with_uiflow.md b/docs/en/quick_start/m5stick/m5stick_quick_start_with_uiflow.md new file mode 100644 index 00000000..323102b6 --- /dev/null +++ b/docs/en/quick_start/m5stick/m5stick_quick_start_with_uiflow.md @@ -0,0 +1,71 @@ +# M5Stick Quick Start for UIFlow + + + +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)* + + + +## 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. + + + +## 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. + + + +## 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. + + + + + +## 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. + + + +>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. + + + +## 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.) + + \ No newline at end of file diff --git a/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_uiflow.md b/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_uiflow.md index 9e613827..aec203bc 100644 --- a/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_uiflow.md +++ b/docs/zh_CN/quick_start/m5stick/m5stick_quick_start_with_uiflow.md @@ -1,9 +1,19 @@ # M5Stick快速上手 -:octocat:**[例程](#例程)** - +1. **[更新固件](#更新固件)** + +2. **[开关机操作](#开关机操作)** + +3. **[编程环境配置](#编程环境配置)** + + - **[Step1. 设置WIFI](#step1-设置wifi)** + + - **[Step2. 设置API Key](#step2-设置api-key)** + +4. **[例程](#例程)** + ## 更新固件 >将stick更新到最新固件版本，以获得更棒的体验 @@ -20,18 +30,23 @@ -## 配置WIFI +## 编程环境配置 ->首次开机时，会默认进入配置页面，stick的屏幕上显示了**热点的名称（SSID）**，以及**网络配置的地址（192.168.4.1）** ->这时候可以使用手机连接这个热点，待连接成功后，使用浏览器输入网络配置地址，进入WIFI配置页面，输入个人WIFI的信息，点击保存，等待连接成功 +### Step1. 设置WIFI + +首次开机时，会默认进入配置页面，stick的屏幕上显示了**热点的名称（SSID）**，以及**网络配置的地址（192.168.4.1）** + +这时候可以使用手机连接这个热点，待连接成功后，使用浏览器输入网络配置地址，进入WIFI配置页面，输入个人WIFI的信息，点击保存，等待连接成功 -## 配置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**，点击保存，开始编程吧！ + + @@ -39,19 +54,22 @@ >如果下载了程序，那么每次开机都会默认运行，如果想要重新运行或下载程序，那么需要在重启出现Logo时单击按键A，再次进入编程模式 + + >如果想要配置新的WIFI，那么需要在重启出现Logo时，长按按键A一秒以上后松开，进入配置页面 >如果错过了操作时间，可以单击复位按钮，重启再次操作 - -## 关于编程 - ->stick的屏幕**分辨率为64x128**，所以当你UIFlow中往屏幕添加图形的时候，需要将形状放置到一定范围之内才能显示，目前只支持显示矩形图案，以及标签 - ->我们会尽快针对stick做出一系列兼容UIFlow的优化，敬请期待 - ## 例程 >点击下载[例程](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Core/M5Stick/UIFlow)，并在UIFlow中打开例程，下载例程到stick中。效果：白色方块会在屏幕上来回滚动 - \ No newline at end of file + + +## 注意 + +>stick的屏幕**分辨率为64x128**，所以当你UIFlow中往屏幕添加图形的时候，需要将形状放置到一定范围之内才能显示，目前只支持显示矩形图案，以及标签 + + + +>我们会尽快针对stick做出一系列兼容UIFlow的优化，敬请期待 \ No newline at end of file