update docs format

2026-05-20 10:23:01 -07:00 · 2020-03-18 14:27:11 +08:00
parent 93f6747e78
commit 479f81ea00
24 changed files with 99 additions and 474 deletions
@@ -72,7 +72,6 @@ Bugc底座需要结合M5StickC控制器使用.在底座上，配备了四个由S

   var purchase_link = 'https://m5stack.com/products/bugc-w-o-m5stickc';

-
   anchor_search(purchase_link);
   scrollFunc();

@@ -1,8 +1,6 @@
-# CardKB HAT {docsify-ignore-all}
-
-<img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_02.jpg" width="30%" height="30%"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_03.jpg" width="30%" height="30%">
-
+# CardKB HAT

+<div class="product_pic"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_01.jpg"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_02.jpg"></div>

 ## 描述

@@ -26,9 +24,6 @@
 ## 产品特性

 - 全键盘输入，多种按键组合.
-
-## 尺寸和重量
-
 - 尺寸： 84.6mm * 54.2mm * 6.5mm
 - 重量： 21g

@@ -64,50 +59,15 @@

 ## 案例程序

-### Arduino IDE
+- **Arduino IDE**

-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)*
+[请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)获取完整代码

-```arduino
-#include <M5StickC.h>
-#include <Wire.h>
-
-#define CARDKB_ADDR 0x5F
-
-void setup()
-{
-  M5.begin();
-  Wire.begin(0, 26);
-  M5.Lcd.setRotation(3);
-  M5.Lcd.fillScreen(BLACK);
-  M5.Lcd.setCursor(0, 0, 2 );
-  M5.Lcd.setTextColor(YELLOW);
-
-  M5.Lcd.println("IIC Address: 0x5F\n");
-  M5.Lcd.println(">>");
-}
-void loop()
-{
-  Wire.requestFrom(CARDKB_ADDR, 1);
-  while(Wire.available())
-  {
-    char c = Wire.read(); // receive a byte as characterif
-    if (c != 0)
-    {
-      M5.Lcd.printf("%c", c);
-      Serial.println(c, HEX);
-      Serial.println(char(c));
-    }
-  }
-  // delay(10);
-}
-```
-
-### UIFLOW
+- **UIFlow**

 <img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat.jpg" width="30%" height="30%">

-*获取UIFLOW例程 [点击](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT/UIFLOW)*
+获取UIFLOW例程 [点击](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT/UIFLOW)

 ## 相关视频

@@ -1,14 +1,11 @@
-# DAC HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_03.jpg" width="30%" height="30%">
-
+# DAC HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg"></div>

 ## 描述

 **DAC Hat**是一款兼容M5SticKC的DA转换模块，内部集成DAC转换芯片MCP4725，具备低功耗，高精度，单通道，12位缓冲电压输出数模转换器（DAC），非易失性存储器（EEPROM）.其片上精密输出放大器使其能够达到轨到轨模拟输出摆幅.用户可以使用I2C接口命令将DAC输入和配置烧写到非易失性存储器（EEPROM）中，使得DAC在断电期间仍能保持代码，上电后即可直接使用,I2C地址为0x60.

-
 ## 产品特性

 - 输出电压: 0-3.3V
@@ -30,11 +27,6 @@

 - 1x DAC HAT

-## 尺寸重量
-
- 包装尺寸:40mm x 42mm x 30mm
- 包装重量:14g
-
 ## 应用

 - 设定点或失调微调
@@ -44,12 +36,10 @@
 - PC外设
 - 数据采集系统

-
 ## 原理图

 <img src="assets/img/product_pics/hat/dac_hat/dac_hat_04.jpg" width="50%" height="50%">

-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -68,19 +58,16 @@

 <img src="assets/img/product_pics/hat/dac_hat/dac.png" width="80%" height="80%">

-### Arduino IDE
+- **Arduino IDE**

-[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/DAC)，获取完整程序.
+[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/DAC)获取完整程序.

 ## 相关链接

 -  **Datasheet** - [MCP4725](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/MCP4725_en.pdf)

-
 ## 相关视频

-**Demo** 
-
 <video class="video_size" controls>
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ADC-DAC-HAT.mp4" type="video/mp4" >
 </video>
@@ -89,7 +76,6 @@

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-env-hat';

-
   anchor_search(purchase_link);
   scrollFunc();

@@ -1,7 +1,6 @@
-# ENV HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_03.jpg" width="30%" height="30%">
+# ENV HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg"></div>

 ## 描述

@@ -20,11 +19,6 @@
    - ±1300μT（x，y轴），±2500μT（z轴）
    - 磁场分辨率约为0.3μT

-## 重量尺寸
-
- 单品尺寸：24mm x 20.3mm x 13.8mm
- 单品重量：3g
-
 ## 包含

 - 1x ENV Hat
@@ -84,7 +78,7 @@

 <img src="assets/img/product_pics/hat/env_hat/env.png">

-### Arduino IDE
+- **Arduino IDE**

 [点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)，获取完整程序.

@@ -1,7 +1,6 @@
-# FINGER HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\finger_hat\finger_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_03.jpg" width="30%" height="30%">
+# FINGER HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_01.jpg"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_02.jpg"></div>

 ## 描述

@@ -14,7 +13,6 @@ UART 参数设置:
 - 停止位(1 bit)
 - 校验位(无)

-
 ## 产品特性

 - 指纹容量:  150
@@ -30,9 +28,6 @@ UART 参数设置:
 - 通讯波特率: 9600-115200（默认为19200）
 - 工作温度:   -10° - 60°
 - 相对湿度:   20% - 80%
-
-## 重量尺寸
-
 - 尺寸：24mm * 65mm * 20mm
 - 重量：12g

@@ -46,12 +41,10 @@ UART 参数设置:
 - 替代密码认证
 - 身份识别

-
 ## 原理图

 <img src="assets/img/product_pics/hat/finger_hat/finger_hat_04.jpg" width="50%" height="50%">

-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -81,7 +74,6 @@ UART 参数设置:
 - 数据手册 **[FPC1020A](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/1020A_datasheet_cn.pdf)**

 ## 相关视频
-**Demo** 

 <video class="video_size" controls>
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/FINGER-HAT.mp4" type="video/mp4" >
@@ -1,8 +1,6 @@
-# JoyC {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\JoyC_hat\JoyC_01.jpg" width="20%"> <img src="assets\img\product_pics\hat\JoyC_hat\JoyC_02.jpg" width="20%"> <img src="assets\img\product_pics\hat\JoyC_hat\JoyC_03.jpg" width="20%"> <img src="assets\img\product_pics\hat\JoyC_hat\JoyC_04.jpg" width="20%">
-
+# JoyC

+<div class="product_pic"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_01.jpg"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_02.jpg"></div>

 ## 描述

@@ -13,9 +11,6 @@
 - 内嵌STM32F030F4
 - 通信协议：I2C（地址：0x38）
 - 支持全方位偏移/中心按键
-
-## 重量尺寸
-
 - 单品尺寸：200mm x 55mm x 50mm
 - 重量：81g（含电池）

@@ -50,7 +45,9 @@

 <img src="assets\img\product_pics\hat\JoyC_hat\JoyC.png" width="60%"> 

- **[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/JoyC)**
+- **Arduino**
+
+获取[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/JoyC)例程

 ## 相关视频

@@ -1,7 +1,6 @@
-# Joystick HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_01.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_02.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_03.jpg" width="30%">
+# Joystick HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_01.jpg"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_02.jpg"></div>

 ## 描述

@@ -11,17 +10,11 @@

 采用HAT系列统一的插接式设计与M5StickC可靠连接，用最精简的方式，获得更多人机交互输入体验.

-
-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_04.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_05.jpg" width="30%">
-
 ## 产品特性

 - 内嵌STM32F030F4
 - 通信协议：I2C（地址：0x38）
 - 支持全方位偏移/中心按键
-
-## 重量尺寸
-
 - 单品尺寸：24mm x 30mm x 17mm
 - 单品重量：3g

@@ -29,8 +22,6 @@

 - 1x Joystick HAT

-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_06.jpg" width="30%">
-
 ## 应用

 - 游戏控制器
@@ -95,7 +86,7 @@

 - **Arduino**

-点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)查看完整代码
+点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)下载完整代码

 ## 管脚映射

@@ -1,7 +1,6 @@
-# NCIR HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_03.jpg" width="30%" height="30%">
+# NCIR HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg"></div>

 ## 描述

@@ -9,11 +8,10 @@

 与大多数接触式型传感器不同地方在于,该传感器通过测量远距离物体发射出的红外光波来检测温度.无需物理接触，这使得它比一般传感器拥有更广的测温范围: -70°C 至 + 380°C.视场角为90°，能够方便快捷的测量某一位置的平均温度.

-IIC（0x5A）
-
 ## 产品特性

 - MLX90614ESF-AAA
+- IIC地址（0x5A）
 - 工作电压: 4.5 to 5.5V
 - 物体测温范围: -70°C ~ 380°C
 - 环境测温范围: -40°C ~ 125 ˚C
@@ -25,11 +23,6 @@ IIC（0x5A）

 - 1x NCIR Hat

-## 尺寸重量
-
- 包装尺寸:40mm x 42mm x 30mm
- 包装重量:13g
-
 ## 应用

 -  人体体温测量
@@ -55,7 +48,6 @@ IIC（0x5A）

 >2.下载软件后，双击运行应用程序，将M5设备通过数据线连接至电脑,选择端口参数，点击 **"Burn"** 即可开始烧录.(**为M5StickC烧录时，请将波特率设置在750000或115200**)

-
 ## 案例程序

 - **UIFlow**
@@ -63,7 +55,8 @@ IIC（0x5A）

 <img src="assets/img/product_pics/hat/ncir_hat/ncir.png">

- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)**
+- **Arduino IDE**
+点击[此处下载](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)示例程序

 ### 管脚映射

@@ -1,8 +1,6 @@
-# Neoflash HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_01.jpg" width="30%"> <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_02.jpg" width="30%"> <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_05.jpg" width="30%">
-
+# Neoflash HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_01.jpg"><img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_02.jpg"></div>

 ## 描述

@@ -22,9 +20,6 @@
 - 孔间距: 0.1 in - (2.54 mm)
 - 孔尺寸: 0.039" 1mm (CNC工艺)
 - 安装方式: 紧贴背面（默认）/水平拼接
-
-## 重量尺寸
-
 - 单品尺寸：58mm x 23.5mm x 1mm
 - 单品重量：2g

@@ -63,7 +58,7 @@

 - **Arduino**

-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/neoflash-hat/Arduino)**
+点击[此处下载](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/neoflash-hat/Arduino)完整示例

 ## 管脚映射

@@ -1,7 +1,6 @@
-# PIR HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_03.jpg" width="30%" height="30%">
+# PIR HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg"></div>

 ## 描述

@@ -21,11 +20,6 @@

 - 1x PIR Hat

-## 尺寸重量
-
- 包装尺寸:40mm x 42mm x 30mm
- 包装重量:12g
-
 ## 应用

 - 人体感应灯具
@@ -38,12 +32,6 @@

 <img src="assets\img\product_pics\hat\pir_hat\pir_hat_04.jpg" width="50%" height="50%">s

-## 相关链接
-
- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
- **[官方论坛](http://forum.m5stack.com/)**
-

 ## EasyLoader

@@ -71,7 +59,6 @@
    </div>
 </div>

-
 ## 案例程序

 - **UIFlow**
@@ -1,20 +1,16 @@
-# PowerC HAT{docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\PowerC_hat\powerC_01.webp" width="30%"> <img src="assets\img\product_pics\hat\PowerC_hat\powerC_02.webp" width="30%"> <img src="assets\img\product_pics\hat\PowerC_hat\powerC_03.webp" width="30%"> 
+# PowerC HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\PowerC_hat\powerC_01.webp"><img src="assets\img\product_pics\hat\PowerC_hat\powerC_02.webp"></div> 

 ## 描述

 **PowerC HAT** 是一款专为M5StickC设计的充电模块，内置IP3005高精度锂电池保护IC与IP5209电源管理IC，采用I2C通信协议与主机M5StickC进行数据传输，通过编程可查看电压、电流等信息.模块背面电池座可安装2节16340电池，通过充电模块对电池进行充电，也可作为充电宝通过电池对外供电.此外提供了XH1.25插头锂电池充电接口.模块提供一个I2C接口用于连接I2C外设，typeC接口用于电源输入，USB-A母座用于电源输出，电压输出为5V/1.5A，输入电压为5V.模块配有一个独立开关，按一次开启，连按两次关闭.
-<img src="assets\img\product_pics\hat\PowerC_hat\powerC_04.webp" width="30%">

 ## 产品特性
+
 - 电池检测
 - 移动充电宝
 - 电池充电器
-
-## 重量尺寸
-
 - 单品尺寸：55mm x 35mm
 - 重量：19g

@@ -40,13 +36,13 @@

 - **UIFlow**

-*UIFlow代码点击这里[下载](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/UIFlow).*
+UIFlow代码点击这里[下载](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/UIFlow)

 <img src="assets\img\product_pics\hat\PowerC_hat\PowerC.png" width="30%">

 - **Arduino**

-*获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)*
+获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)

 ## EasyLoader

@@ -1,14 +1,11 @@
-# PROTO PLUS HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_01.jpg" width="30%"> <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_02.jpg" width="30%">
-
+# PROTO PLUS HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_01.jpg"> <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_02.jpg"></div>

 ## 描述

 **PROTO PLUS HAT** 是一款兼容M5SticKC的万能板.相比前代产品PROTO HAT，"PLUS"在设计上提供了更大的电路板面积. 结合配套的8 pin 排针能够将M5StickC顶部的拓展接口全部连接至万能板内，使得用户可以自由的在板上进行电路设计. 90°排针能够使万能板以多种角度与M5StickC进行拼接.如果你打算为你的项目添加简单的电路设计并希望通过改变电路板的拼接方式以达到节省空间的目的, HAT PROTO PLUS 会是一个不错的选择.

-
 <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_03.jpg" width="30%">

 ## 产品特性
@@ -16,13 +13,9 @@
 - 孔尺寸: 0.039" 1mm (CNC工艺)
 - 孔间距: 0.1 in - (2.54 mm)
 - 板孔数量: 168 孔
-
-## 重量尺寸
-
 - 单品尺寸：54mm x 23.5mm x 1mm
 - 单品重量：2g

-
 ## 包含

 - 1x PROTO PLUS HAT
@@ -33,8 +26,6 @@
 - 电路原型设计
 - 相关应用: [点击查看](https://www.hackster.io/kiraku-labo/balance-robot-9009db)

-
-
 ## 相关视频

 <video class="video_size" controls>
@@ -43,44 +34,7 @@

 ## 案例程序

-*以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/ShashaDDD/EC11Encoder).*
-
-```arduino
-#include <TaskScheduler.h>
-#include <M5StickC.h>
-#include <Arduino.h>
-#include "RotaryEncoderWithButton.h"
-
-
-//#include <SimpleTimer.h>
-
-//RotaryEncoderWithButton rotary(2,3,4);
-RotaryEncoderWithButton rotary(26,36,0);
-
-uint32_t data;
-int i;
-void t1Callback();
-Task t1(5, TASK_FOREVER, &RotaryEncoderWithButton::ReadAB);
-Scheduler runner; 
-
-void setup() {
-	M5.begin();
-	Serial.begin(115200);
-	rotary.begin();
-
-	runner.init();
-  	runner.addTask(t1);
-
-	delay(100);
-	t1.enable();
-
-}
-
-void loop() {
-	runner.execute();
-}
-```
-
+[点击此处获取完整代码](https://github.com/ShashaDDD/EC11Encoder)

 <script>

@@ -1,31 +1,21 @@
-# PROTO HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%">
-
+# PROTO HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg"></div>

 ## 描述

 **PROTO HAT** 是一款兼容M5SticKC的万能板,你可以自由的在板上进行电路设计.如果你打算为你的设计添加简单的电路并为其添加可靠的保护外壳, Hat PROTO 是一个不错的选择.

-<img src="assets\img\product_pics\hat\proto_hat\hat_proto_05.jpg" width="30%">
-
 ## 产品特性

 - 孔尺寸: 0.039" 1mm (CNC工艺)
 - 孔间距: 0.1 in - (2.54 mm)
 - 板孔数量: 40 Holes

-
 ## 包含

 - 1x PROTO Hat

-## 尺寸重量
-
- 包装尺寸:40mm x 42mm x 30mm
- 包装重量:13g
-
 ## 应用

 - 电路原型设计
@@ -37,17 +27,6 @@

 <img src="assets\img\product_pics\hat\proto_hat\hat_proto_04.jpg" width="50%" height="50%">

-## 相关链接
-
- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
- **[官方论坛](http://forum.m5stack.com/)**
-
-## 案例程序
-
- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)**
-
-
 ## 相关视频

 <video class="video_size" controls>
@@ -1,9 +1,6 @@
-# PuppyC {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\puppyc_hat\puppyc_02.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_04.jpg" width="30%" height="30%">
-
+# PuppyC

+<div class="product_pic"><img src="assets\img\product_pics\hat\puppyc_hat\puppyc_01.jpg"><img src="assets\img\product_pics\hat\puppyc_hat\puppyc_02.jpg"></div>

 ## 描述

@@ -11,29 +8,21 @@

 PuppyC底座需要结合M5StickC控制器使用，StickC编程后通过I2C协议(0x38)与PuppyC进行通信，控制舵机运动.

-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_03.jpg" width="30%" height="30%">
-
 ## 产品特性

 - 可编程机器人
 - 舵机驱动控制器
 - 四足行走
-
-
-## 规格尺寸
-
 - 尺寸：52mm * 60mm * 35mm
 - 重量：58g
 - 舵机角度：0-180°

-
 ## 应用

 - 舵机驱动
 - 机器人控制
 - 智能玩具

-
 ## 包含

 - 1x PuppyC 底座
@@ -50,16 +39,15 @@ PuppyC底座需要结合M5StickC控制器使用，StickC编程后通过I2C协议

 >2.下载软件后，双击运行应用程序，将M5设备通过数据线连接至电脑,选择端口参数，点击 **"Burn"** 即可开始烧录.(**为M5StickC烧录时，请将波特率设置在750000或115200**)

-
 ## 案例程序

-### 1. Arduino IDE
+- **Arduino IDE**

-[点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC)，获取完整程序.
+[点击此处获取Arduino程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC)

-### 2. UIFlow
+- **UIFlow**

-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC/UIFlow)
+[点击此处获取UIFlow程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC/UIFlow)

 <img src="assets/img/product_pics/hat/puppyc_hat/puppy.png" width="80%" height="80%">

@@ -1,9 +1,6 @@
-# RoverC {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_01.jpg" width="20%" height="30%"> <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_02.jpg" width="20%" height="30%">
-<img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_03.jpg" width="20%" height="30%"> <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_04.jpg" width="20%" height="30%">
-
+# RoverC

+<div class="product_pic"><img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_01.jpg"><img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_02.jpg"></div>

 ## 描述

@@ -11,7 +8,6 @@

 <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_05.jpg" width="40%" height="30%">

-
 ## 产品特性

 - I2C通讯（0x38）
@@ -21,6 +17,8 @@
 - 全向移动
 - 配备电池底座
 - 运动灵活
+- 尺寸：75mm * 75mm * 55mm
+- 重量： 213g

 ## 使用说明
 使用前请确保RoverC已经充满电，充电方式：将M5StickC插入RoverC，并连接USB线缆进行充电.
@@ -52,11 +50,6 @@
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/RoverC_USER.MP4" type="video/mp4">
 </video>

-## 外形尺寸
-
- 尺寸：75mm * 75mm * 55mm
- 重量： 213g
-
 ## 应用

 - 小型移动式机器人
@@ -83,7 +76,7 @@

 <img src="assets\img\product_pics\hat\roverc_hat\roverC.png" width="40%" height="30%">

-### 1. Arduino 例程
+- **Arduino**

 配合JoyC HAT使用 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/RoverC)，获取完整程序.

@@ -1,18 +1,14 @@
-# RS485 HAT {docsify-ignore-all}
-
-
-<img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_03.jpg" width="30%" height="30%">
+# RS485 HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg"></div>

 ## 描述

 **RS485 HAT** 是一款兼容M5SticKC的RS485转换器.内部集成SP485EEN，主要部分由一个485自动收发器电路和一个DC-DC降压电路组成（可以将输入电压降至5V）
-<br><br>
-RS485是一种标准，用于定义串行通信系统的驱动器和接收器的电气特性，广泛用于工业领域。 支持多点系统. 
-<br><br>
-该产品用于将TTL标准转换为RS485标准。 如果外部串行设备是RS485标准，可以通过该模块实现TTL转换RS485协议的实现设备之间的通信.

-<br>
+RS485是一种标准，用于定义串行通信系统的驱动器和接收器的电气特性，广泛用于工业领域。 支持多点系统. 
+
+该产品用于将TTL标准转换为RS485标准。 如果外部串行设备是RS485标准，可以通过该模块实现TTL转换RS485协议的实现设备之间的通信.

 ## 产品特性

@@ -29,21 +25,15 @@ RS485是一种标准，用于定义串行通信系统的驱动器和接收器的
 - 1x RS485 HAT
 - 1x 4 Pin 3.96 端子

-## 尺寸重量
-
- 包装尺寸:40mm x 42mm x 30mm
- 包装重量:17g
-
 ## 应用

 - RS485多点系统
 - 工业领域的串行通信.

-
 ## 相关链接

 -  **Datasheet** - [SP485EEN](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/SP485EEN_en.pdf)
-  
+
 ## 原理图

 <img src="assets/img/product_pics/hat/rs485_hat/rs485_hat_04.jpg" width="80%" height="80%">
@@ -61,38 +51,11 @@ RS485是一种标准，用于定义串行通信系统的驱动器和接收器的

 ## 案例程序

-<a href="#zh_CN\uiflow\RS485">代码示例</a>
+<a href="#zh_CN\uiflow\RS485">RS485使用说明</a>

-### 1. Arduino IDE
-
-*以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/RS485).*
-
-```arduino
-#include <M5StickC.h>
-
-/* This demo is for RS485 Hat uart write and read ,
-AutoSend Hello M5! AutoReceive and diaplay on screen */
-
-void setup() {
-
-  M5.begin(true,true,true);
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(115200, SERIAL_8N1, 26, 0);
-
-  Serial.println("RS485");
-
-}
-void loop() {
-  Serial2.print("Hello M5!");
-
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.setTextSize(2);
- }
-}
-```
+### Arduino IDE

+[请点击此处下载代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/RS485)

 ### 管脚映射

@@ -101,20 +64,15 @@ void loop() {
 <tr><td>HAT ADC</td><td>TX</td><td>RX</td><td>5V</td><td>GND</td></tr>
 </table>

-
 ## 相关视频
-**Demo** 

 <video class="video_size" controls>
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/RS485_HAT.mp4" type="video/mp4" >
 </video>

-
 <script>

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-rs485-hat-aoz1282ci';
-
-
   anchor_search(purchase_link);
   scrollFunc();

@@ -1,14 +1,11 @@
-# SERVO HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\servo_hat\servo_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_03.jpg" width="30%" height="30%">
-
+# SERVO HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_01.jpg"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_02.jpg"></div>

 ## 描述

 **SERVO HAT** 是一款供M5StickC使用的伺服电机模块. 舵机型号为ES9251II，运动角度为145°±10°，采用PWM的控制方式控制旋转角度,信号端口为G26.

-
 ## 产品特性

 - 旋转速度:   0.09sec/60°
@@ -17,9 +14,6 @@
 - 扭矩:      0.25Kgf.cm
 - 转矩:      3.5oz.in
 - 工作电压:   5.0V±0.2V
-
-## 重量尺寸
-
 - 尺寸： 24mm*29mm
 - 重量： 9g

@@ -33,14 +27,10 @@
 - 角度控制
 - 伺服系统

-
-
 ## 原理图

 <img src="assets/img/product_pics/hat/servo_hat/servo_hat_04.jpg" width="50%" height="50%">

-
-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -59,22 +49,18 @@

 - **Arduino**

-点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/servo-hat/Arduino/SERVO)查看完整程序
-
+[点击此处查看完整程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/servo-hat/Arduino/SERVO)

 ## 相关视频
-**Demo** 

 <video class="video_size" controls>
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/SERVO-HAT.mp4" type="video/mp4" >
 </video>

-
 <script>

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-servo-hat';

-
   anchor_search(purchase_link);
   scrollFunc();

@@ -1,8 +1,6 @@
-# SPK HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_03.jpg" width="30%" height="30%">
-
+# SPK HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg" width="30%" height="30%"></div>

 ## 描述

@@ -20,11 +18,6 @@

 - 1x SPK Hat

-## 尺寸重量
-
- 包装尺寸:40mm x 42mm x 30mm
- 包装重量:13g
-
 ## 应用

 - MP4/MP3
@@ -65,16 +58,17 @@
    </div>
 </div>

-
-
 ## 案例程序

 - **UIFlow**
-Open http://flow.m5stack.com and Load Demo
+
+打开 http://flow.m5stack.com 加载Demo示例

 <img src="assets\img\product_pics\hat\spk_hat\spk.png">

- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)**
+- **Arduino**
+
+[点击此处下载Arduino示例代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)

 ### 管脚映射

@@ -87,7 +81,6 @@ Open http://flow.m5stack.com and Load Demo

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-speaker-hat';

-
   anchor_search(purchase_link);
   scrollFunc();

@@ -1,19 +1,15 @@
-# THERMAL HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_03.jpg" width="30%" height="30%">
-
+# THERMAL HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg" ></div>

 ## 描述

 **THERMAL HAT**是一款兼容M5StickC的人体红外热成像.内置**MLX90640**热电堆传感器,能够测量物体表面温度.并通过由表面温度形成的温度梯度，生成热成像图片.(图片分辨率为**32 x 24**)
-
-**MLX90640** 红外（IR）传感器阵列具备了高分辨率与在恶劣环境中可靠工作的能力.与昂贵的高端热像仪相比，Hat-Thermal是一个高性价比的替代方案.相对一般的微测辐射热计，该传感器优势在于，不需要频繁重复校准,从而确保了检测的连续性并降低了系统维护成本.视场角提供广角版（110°×75°）.
-
-I2C 地址为**0x33**.(GOIO 0/26)
+**MLX90640** 红外（IR）传感器阵列具备了高分辨率与在恶劣环境中可靠工作的能力.与昂贵的高端热像仪相比，Thermal HAT是一个高性价比的替代方案.相对一般的微测辐射热计，该传感器优势在于，不需要频繁重复校准,从而确保了检测的连续性并降低了系统维护成本.视场角提供广角版（110°×75°）

 ## 产品特性

+- I2C地址:**0x33**(GOIO 0/26)
 - 工作电压: 3V ~ 3.6V
 - 工作电流: 23mA
 - 视场角: 110°x75°
@@ -26,13 +22,6 @@ I2C 地址为**0x33**.(GOIO 0/26)

 - 1x THERMAL Hat

-## 尺寸重量
-
- 包装尺寸:40mm x 42mm x 30mm
- 包装重量:13g
-
-<img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_04.jpg" width="50%" height="50%">
-
 ## 应用

 -  高精度的非接触性测温器
@@ -70,12 +59,13 @@ I2C 地址为**0x33**.(GOIO 0/26)

 - **UIFlow**

-*获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/MLX90640/UIFlow).*
+[获取UIFlow示例点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/MLX90640/UIFlow)

 <img src="assets/img/product_pics/hat/thermal_hat/thermal.png">

- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)**
+- **Arduino**

+[点击此处下载Arduino代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)

 ## 相关视频

@@ -1,16 +1,11 @@
-# ToF HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_01.jpg" width="30%"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_02.jpg" width="30%"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_03.jpg" width="30%">
+# ToF HAT

+<div class="product_pic"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_01.jpg"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_02.jpg"></div>

 ## 描述

 **ToF HAT**是一款专为M5SticKC设计的高精度激光测距传感器，内部集成ST激光测距芯片**VL53L0X**、**940nm VCSEL**发射器，通过测量激光信号到被测物体的往返时间，能够在不到30ms的时间内测量2m范围内的绝对距离.与传统测距不同的地方在于，无论检测目标的的反射率如何，它都能提供精确的距离测量数据.在一些对数据精度有一定要求的距离测量、障碍物识别项目中，**ToF HAT**能够有不错的表现.

-通信协议：I2C、地址为**0x29**.(GOIO 0/26)
-
-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_04.jpg" width="30%">
-
 ## 产品特性

 - 高精度
@@ -20,9 +15,7 @@
 - 安全方面：
    - 符合最新标准的1级激光设备
    - 标准IEC 60825-1:2014-第3版
-
-## 重量尺寸
-
+- 通信协议：I2C地址为**0x29**(GOIO 0/26)
 - 单品尺寸：24mm x 20.3mm x 13.8mm
 - 单品重量：3g

@@ -30,8 +23,6 @@

 - 1x ToF HAT

-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_06.jpg" width="30%">
-
 ## 应用

 - 障碍物识别
@@ -66,7 +57,7 @@

 - **Arduino**

-点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/tof-hat/Arduino/ToF)查看完整示例
+[单击此处下载完整Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/tof-hat/Arduino/ToF)

 ### 管脚映射

@@ -75,7 +66,6 @@
 <tr><td>ToF HAT</td><td>SDA</td><td>SCL</td><td>3.3V</td><td>GND</td></tr>
 </table>

-
 ## 相关视频

 <video class="video_size" controls>
@@ -86,7 +76,6 @@

   var purchase_link = 'https://m5stack.com/products/m5stickc-tof-hatvl53l0x';

-
   anchor_search(purchase_link);
   scrollFunc();

--- a/Show More
+++ b/Show More