mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
add blockly custom guide
This commit is contained in:
shaoxiang
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@@ -133,8 +133,8 @@ M5stickC is one of the core devices in M5Stack product series which is built in
|
||||
**AXP192**
|
||||
|
||||
<table>
|
||||
<tr><td>INLED</td><td>TFT</td><td>RTC</td><td>ESP32</td>
|
||||
<tr><td>LD02</td><td>LD03</td><td>LD01</td><td>DIC DCI</td>
|
||||
<tr><td>Microphone</td><td>RTC</td><td>TFT backlight</td><td>TFT IC</td><td>ESP32/3.3V MPU6886/SH200Q</td><td>5V GROVE</td>
|
||||
<tr><td>LDOio0</td><td>LDO1</td><td>LDO2</td><td>LDO3</td><td>DC-DC1</td><td>IPSOUT</td>
|
||||
</table>
|
||||
|
||||
**M5StickC extendable IO at top**
|
||||
|
||||
@@ -60,4 +60,13 @@
|
||||
<a href="https://github.com/m5stack/UIFlow-Code"><p style="margin-top:20px">VScode- M5Stack Plugin</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mt-3">
|
||||
<div class="media border p-3">
|
||||
<img src="assets/img/related_documents/Page_logo/blockly-custom-logo.png" class="mr-3 mt-3 " style="width:50px; margin-top:5px!important">
|
||||
<div class="media-body">
|
||||
<a href="#en/related_documents/blockly_custom"><p style="margin-top:20px">UIFlow Block Custom</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,66 @@
|
||||
# UIFlow Block Custom{docsify-ignore-all}
|
||||
|
||||
|
||||
1. [Create block](#Create-block)
|
||||
|
||||
2. [Code-Parameter](#Code-Parameter)
|
||||
|
||||
3. [Save and Changes](#Save-and-Changes)
|
||||
|
||||
4. [Using program block](#Using-program-block)
|
||||
|
||||
|
||||
## Create block
|
||||
|
||||
|
||||
Create a custom block by clicking on the `Custom` option > `Create` in the block list.
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_01.jpg">
|
||||
|
||||
To create a new block, we need to provide:
|
||||
|
||||
`1: group name`: the name of the group in which the custom block is placed
|
||||
|
||||
`2: Block color`: Appearance color of the block
|
||||
|
||||
`3: Block label`: Only letters, numbers, underscores are allowed
|
||||
|
||||
`4: Block type`: Define the type of the block as `Value` (value), or `Execute` (execute)
|
||||
|
||||
`5: Number of blocks`: Ability to add multiple blocks at the same time and save them to a `.m5b` file at the same time
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_02.jpg">
|
||||
|
||||
|
||||
|
||||
## Code-Parameter
|
||||
|
||||
|
||||
Click the `Add` option under `Parameter`, add a program property, enter the name displayed in the block, and select the property type. Enter the code contained in the custom block in the `Block Code` option box.
|
||||
|
||||
[Click here to visit Github for more program API](https://github.com/m5stack/UIFlow-Code/wiki)
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_03.jpg">
|
||||
|
||||
When the attribute type of a custom block has constant or variable input, we can get these values in the code and perform further processing and operations.
|
||||
|
||||
Example: Select the attribute type as `String` (string input). In this case, if we want to get the string input when using, just use `${Parameter name}` in the code. It is `${show_word}`. It should be noted that when there is a space in the block name, use ${} to get the space that needs to be replaced with the `_` underscore.
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_04.jpg">
|
||||
|
||||
## Save and Changes
|
||||
|
||||
After editing the program, click `Download` to save.
|
||||
|
||||
Click on `Open .m5b` to open the saved custom program for modification.
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_05.jpg">
|
||||
|
||||
|
||||
## Using program block
|
||||
|
||||
Open a custom block by clicking on the`Custom`option > `Open` ，in the block list.
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_06.jpg">
|
||||
<br></br>
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_07.jpg">
|
||||
@@ -122,10 +122,13 @@ M5stick C 是 M5Stack 产品系列中的核心设备之一，该产品系列建
|
||||
**AXP192**
|
||||
|
||||
<table>
|
||||
<tr><td>INLED</td><td>TFT</td><td>RTC</td><td>ESP32</td>
|
||||
<tr><td>LD02</td><td>LD03</td><td>LD01</td><td>DIC DCI</td>
|
||||
<tr><td>Microphone</td><td>RTC</td><td>TFT backlight</td><td>TFT IC</td><td>ESP32/3.3V MPU6886/SH200Q</td><td>5V GROVE</td>
|
||||
<tr><td>LDOio0</td><td>LDO1</td><td>LDO2</td><td>LDO3</td><td>DC-DC1</td><td>IPSOUT</td>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
**M5StickC 顶部拓展的 IO 口**
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickc/m5stickc_04.png" alt="gray_02" width=100% height=100%>
|
||||
|
||||
@@ -56,4 +56,13 @@
|
||||
<a href="https://github.com/m5stack/UIFlow-Code"><p style="margin-top:20px">VScode-M5Stack插件</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mt-3">
|
||||
<div class="media border p-3">
|
||||
<img src="assets/img/related_documents/Page_logo/blockly-custom-logo.png" class="mr-3 mt-3 " style="width:50px; margin-top:5px!important">
|
||||
<div class="media-body">
|
||||
<a href="#zh_CN/related_documents/blockly_custom"><p style="margin-top:20px">UIFlow 程序块定制</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,67 @@
|
||||
# UIFlow 程序块定制{docsify-ignore-all}
|
||||
|
||||
|
||||
1. [创建程序块](#创建程序块)
|
||||
|
||||
2. [程序块代码-传参](#程序块代码-传参)
|
||||
|
||||
3. [程序块保存-修改](#程序块保存-修改)
|
||||
|
||||
4. [使用程序块](#使用程序块)
|
||||
|
||||
|
||||
## 创建程序块
|
||||
|
||||
|
||||
点击程序块列表中的`Custom`选项 > `Create` ，创建一个自定义程序块
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_01.jpg">
|
||||
|
||||
创建一个新的程序块，我们需要提供 :
|
||||
|
||||
`1：分组名称`: 自定义程序块所放置在的分组名称
|
||||
|
||||
`2：程序块颜色`: 程序块的外观颜色
|
||||
|
||||
`3：程序块标签`: 只允许包含字母、数字、下划线
|
||||
|
||||
`4：程序块类型`: 定义程序块的类型为`Value`(数值)，或是`Execute`(执行)
|
||||
|
||||
`5：程序块数量`: 能够同时添加多个程序块，并同时保存到一个`.m5b`文件中
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_02.jpg">
|
||||
|
||||
|
||||
|
||||
## 程序块代码-传参
|
||||
|
||||
|
||||
点击`Parameter`下方的`Add`选项，添加一条程序属性，输入程序块所显示的名称，以及选择属性类型，在`Block Code`选项框中输入自定义程序块所包含的代码.
|
||||
|
||||
[点击此处，访问Github获取更多程序API](https://github.com/m5stack/UIFlow-Code/wiki)
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_03.jpg">
|
||||
|
||||
当自定义程序块的属性类型带有常量或变量输入时，我们可以在代码中获取这些值，并进行进一步的处理和运算.
|
||||
|
||||
例： 将属性类型选择为`String`(字符串输入)，此时在程序中，如果我们想要获得使用时所输入的字符串，只需要在代码中使用`${Parameter name}`，也就是`${show_word}`,需要注意的是，当程序块名称中带有空格时，在使用${}去获取需要使用`_`下划线对空格进行替代
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_04.jpg">
|
||||
|
||||
## 程序块保存-修改
|
||||
|
||||
完成程序编辑后，点击`Download`进行保存
|
||||
|
||||
点击`Open .m5b`，能够打开已保存的自定义程序进行修改
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_05.jpg">
|
||||
|
||||
|
||||
## 使用程序块
|
||||
|
||||
点击程序块列表中的`Custom`选项 > `Open` ，打开一个自定义程序块
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_06.jpg">
|
||||
<br></br>
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_07.jpg">
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
# 如何安装USB驱动并建立与PC的串口通讯 {docsify-ignore-all}
|
||||
|
||||
**[MacOS](#for-macOS)** **[Windows](#for-windows)**
|
||||
|
||||
**这个文档会介绍如何安装USB驱动，并与PC建立串口通信.**
|
||||
|
||||
## For MacOS
|
||||
|
||||
### 1. 安装USB驱动
|
||||
|
||||
**[下载SiLabs CP2104驱动](http://res.m5stack.com/Driver/CP210x_VCP_MacOS.zip)**
|
||||
|
||||
**如果镜像文件SiLabsUSBDriverDisk.dmg已经下载了, 挂载它, 根据以下图片显示的步骤来安装.**
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/macOS_CP2104_dmg.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/macOS_CP2104_pkg.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/2.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/3.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/4.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/5.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/6.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/7.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/8.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/9.png">
|
||||
</figure>
|
||||
|
||||
### 2. 在MacOS上检查确认COM串口号
|
||||
|
||||
**打开终端terminal并执行以下命令两次, 第一次在板子或者dongle还未插入PC的时候, 然后把板子或者dongle插入执行第二次. 这时候，在执行第二次命令之后，出现的串口号就是此时板子与PC相连的串口号**
|
||||
|
||||
**MacOS**
|
||||
|
||||
ls /dev/cu.*
|
||||
|
||||
|
||||
|
||||
## For Windows
|
||||
|
||||
### 1. 安装USB驱动
|
||||
|
||||
**下载[SiLabs CP2104驱动](https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers)**
|
||||
|
||||
**根据您windows版本来下载对应版本的USB驱动(Windows7/8/10).**
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_download_CP2104_USB_driver.png">
|
||||
</figure>
|
||||
|
||||
**选择正确的版本来安装，如果电脑系统是32位，则下载符合Windows版本的X86版本USB驱动，如果电脑系统是64位，则下载符合Windows版本的X64版本USB驱动, 然后安装驱动.**
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver01.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver02.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_install_usb_driver03.png">
|
||||
</figure>
|
||||
|
||||
### 2. 在Windows上检查确认COM串口号
|
||||
|
||||
**在Windows的设备管理器上查看COM串口号. 插上板子或者dongle之后，查看显示的COM口，再拔掉，此时消失的COM口就是该板子或dongle对应的COM口.**
|
||||
|
||||
**下图显示了M5Core板子与PC通信的COM串口号**
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/getting_started_pics/establish_serial_connection/windows_m5stack_in_device_manager.png">
|
||||
</figure>
|
||||
@@ -1,53 +0,0 @@
|
||||
# 如何连接WIFI (For M5Cloud) {docsify-ignore-all}
|
||||
|
||||
?> *如果您的M5Cloud还没预先烧录名为`M5Cloud`固件的话，请阅读这篇文章[如何烧录使用M5Burner烧录固件](zh_CN/related_documents/how_to_burn_firmware)*
|
||||
|
||||
**重启M5Core之后，您会看到M5Core出现下图界面。现在我们就开始连接WIFI吧**
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/m5stack_connet_wifi.png">
|
||||
</figure>
|
||||
|
||||
## 目录
|
||||
|
||||
1. [连接M5Core的热点](#connect-to-m5Core-AP)
|
||||
|
||||
2. [选择可联网的WIFI热点](#select-networkable-ap)
|
||||
|
||||
3. [重启M5Core](#reset-your-device)
|
||||
|
||||
## 1. 连接M5Core的热点
|
||||
|
||||
**使用手机或者PC连接M5Core发出的热点AP(看，现在我的M5Core发出的热点名是`M5Stack-a67c`)**
|
||||
|
||||
## 2. 选择可联网的WIFI热点
|
||||
|
||||
**打开浏览器并输入网址`192.168.4.1`，然后选择可联网的WIFI，并输入其密码(如下图，我的WIFI名字是`MasterHax_2.4G`)**
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/wifisetup.png">
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/wifi_connect_successfully.png">
|
||||
</figure>
|
||||
|
||||
?> 如果您的M5Core没成功连接WIFI，请重试一次.
|
||||
|
||||
## 3. 重启M5Core
|
||||
|
||||
**在M5Core成功连接WIFI之后，重启您的Core**
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/check_code_on_m5stack.png">
|
||||
</figure>
|
||||
|
||||
!> **Note** 可是如果您的Core之前绑定过M5Cloud账号(也就是之前有过将check code输入到[M5Cloud](http://cloud.m5stack.com))，这时M5Core屏幕会如下图所示。
|
||||
|
||||
<figure>
|
||||
<img src="assets/img/related_documents/how_to_connect_wifi_with_m5cloud/connected_wifi_m5cloud_been_bound.png">
|
||||
</figure>
|
||||
|
||||
## 最后
|
||||
|
||||
现在，您可以阅读这篇文章开始使用M5Cloud编程啦！[M5Cloud上手指南](zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython_m5cloud)
|
||||
Reference in New Issue
Block a user