diff --git a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif new file mode 100644 index 00000000..8c5b5d6f Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif differ diff --git a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif new file mode 100644 index 00000000..e6cfc32f Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif differ diff --git a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/enter_apikey.gif b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/enter_apikey.gif new file mode 100644 index 00000000..8bfc8696 Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/enter_apikey.gif differ diff --git a/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/play_a_song.gif b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/play_a_song.gif new file mode 100644 index 00000000..8e685307 Binary files /dev/null and b/docs/assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/play_a_song.gif differ 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 54f7e490..eb83329b 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,16 +1,16 @@ # M5Flow Quick Start(Blockly/MicroPython) -!> **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 * +?> **Tip** *a. If your M5Stack Core was not burnt with a specific firmware named `M5Flow` 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](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).* -### **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.** +*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.*
-?> **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** *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.* -## CONTENT +## **CONTENT** 1. [Connect to M5Flow](#connect-to-m5flow) @@ -19,57 +19,44 @@ 3. [Play a song now](#play-a-song-now) -## 1. Connect to M5Flow +## **1. Connect to 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. 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.
-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. 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`.
- -
- -
- +
Then M5Flow will connect with this Core. At the moment, you can draw a UI or program it through Blockly(or Python) as shown below. -## 2. Program with Core +## **2. Program with Core** ### a. Draw a UI Drag 4 kinds of elements into `M5Stack Core` UI and click `Run` buttom on M5UI.Flow
- +
-
- -
### b. Program with Blockly Drag a block named `Set emoji map in0` from `Emoji` class and click `Run` buttom on M5UI.Flow
- +
-
- -
+*The source code of this demostration: https://tower.im/projects/65b1c6743d194d22a801ed916832eb2b/uploads/fd59d8000b541c346d6c6d18291c29bb?version=1* ### c. Program with MicroPython @@ -95,32 +82,22 @@ lcd.print("Hello M5Stack") At that moment, the screen of M5Core will display `Hello M5Stack`. -## 3. Play a song now +## **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://tower.im/projects/65b1c6743d194d22a801ed916832eb2b/uploads/9062b4bc81b3dc9be74f92be510a81d0?version=1* + ## Complete ?> **Note** *Also, For being more familiar with M5, you can contact us for a WorkShop * diff --git a/docs/index.md b/docs/index.md index 9fdb1d06..29e89e52 100644 --- a/docs/index.md +++ b/docs/index.md @@ -21,7 +21,7 @@ Our a series of core boards are based on **ESP32** chip. -Our aim is "**Stackable Board is Product**". Here's the [Official Website](www.m5stack.com) +Our aim is "**Stackable Board is Product**". Here's the [Official Website](http://www.m5stack.com)