mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
add gif pictures to "quick start with m5flow"
This commit is contained in:
Lihuashen
BIN
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
@@ -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.*
|
||||
|
||||
<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** *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.
|
||||
|
||||
<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. 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`.
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/input_apikey.png">
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/enter_apikey.gif">
|
||||
</figure>
|
||||
|
||||
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
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.png">
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_ui.gif">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png">
|
||||
</figure>
|
||||
|
||||
### b. Program with Blockly
|
||||
|
||||
Drag a block named `Set emoji map in0` from `Emoji` class and click `Run` buttom on M5UI.Flow
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.png">
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/draw_heart.gif">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/run_and_upload.png">
|
||||
</figure>
|
||||
*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.
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_loop_block.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/drag_music_block.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<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.
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/whole_program.png">
|
||||
<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/play_a_song.gif">
|
||||
</figure>
|
||||
|
||||
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 <support@m5stack.com>*
|
||||
|
||||
+2
-2
@@ -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)
|
||||
|
||||
<!--
|
||||
<figure class="thumbnails">
|
||||
@@ -38,7 +38,7 @@ Our aim is "**Stackable Board is Product**". Here's the [Official Website](www.m
|
||||
|
||||
## Contact & Support
|
||||
|
||||
- :computer: Visit [Official Website](www.m5stack.com) for newest product
|
||||
- :computer: Visit [Official Website](http://www.m5stack.com) for newest product
|
||||
- :busts_in_silhouette: Sign in our [Forum](http://forum.m5stack.com) for more designs with M5Stack
|
||||
- :mailbox_with_mail: If you have any questions, you can contact us by Email <tech@m5stack.com>
|
||||
- :convenience_store: If you want to get our products, access our [Store](http://www.aliexpress.com/store/all-wholesale-products/3226069.html?spm=2114.12010108.100004.3.7e3a5379KoyhDo)
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@ M5Stack Coreモジュールは **ESP32** チップをベースに開発されて
|
||||
|
||||
私たちの目的は、**<mark>誰もが簡単に自分のアイデアを形にできるような仕組みを作る</mark>**ことです。
|
||||
|
||||
オフィシャルサイトは [こちら](www.m5stack.com)です。
|
||||
オフィシャルサイトは [こちら](http://www.m5stack.com)です。
|
||||
|
||||
<!-- <figure class="thumbnails">
|
||||
<img src="assets/img/transport.gif" alt="Screenshot of coverpage" title="Cover page">
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
我们的全系列产品基本是以<mark>ESP</mark>芯片为主芯片。
|
||||
|
||||
我们希望"**堆叠即是产品**"。 这是我们的[官网](www.m5stack.com)。
|
||||
我们希望"**堆叠即是产品**"。 这是我们的[官网](http://www.m5stack.com)。
|
||||
|
||||
<!--
|
||||
<figure class="thumbnails">
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
## 联系方式(Contact & Support)
|
||||
|
||||
- :computer: 访问[官网](www.m5stack.com)了解最新的产品
|
||||
- :computer: 访问[官网](http://www.m5stack.com)了解最新的产品
|
||||
- :busts_in_silhouette: 登录我们的[论坛](http://forum.m5stack.com)了解更多基于M5产品的创意设计
|
||||
- :mailbox_with_mail: 如果你有对产品有任何疑问或有更好的建议，请联系我们的[邮箱](tech@m5stack.com)
|
||||
- :convenience_store: 如果你想继续购买我们的产品，请访问我们的[官方旗舰店](http://www.aliexpress.com/store/all-wholesale-products/3226069.html?spm=2114.12010108.100004.3.7e3a5379KoyhDo)
|
||||
|
||||
Reference in New Issue
Block a user