update doc format

2026-05-20 10:23:01 -07:00 · 2020-03-19 12:00:44 +08:00
parent 16f9363b84
commit 466ff520f0
30 changed files with 105 additions and 916 deletions
@@ -1,4 +1,4 @@
-# GPS {docsify-ignore-all}
+# GPS

 <div class="product_pic"><img src="assets/img/product_pics/unit/unit_gps_01.png" ><img src="assets/img/product_pics/unit/unit_gps_02.png"></div>

@@ -1,4 +1,4 @@
-# HEX {docsify-ignore-all}
+# HEX

 <div class="product_pic"><img src="assets\img\product_pics\unit\hex\unit_hex_01.webp"><img src="assets\img\product_pics\unit\hex\unit_hex_02.webp"></div>

@@ -20,12 +20,6 @@
 - 1x HEX Unit
 - 1x Grove 线

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

 >EasyLoader是一个简洁快速的程序烧录器，其内置了一个产品相关的案例程序，通过简单步骤将其烧录至主控，即可进行一系列的功能验证.**(程序烧录前，请根据设备类型安装相应驱动程序. M5Core型主机[请点击此处查看CP210X驱动安装教程](zh_CN/arduino/arduino_development?id=安装串口驱动)，M5StickC/V/T/ATOM系列可免驱动使用)**
@@ -1,8 +1,6 @@
-# HUB {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_hub.png" width="30%" height="30%">
-
+# HUB

+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_hub.png"></div>

 ## 描述

@@ -21,17 +19,6 @@
 - 1x HUB Unit
 - 1x Grove 线

-## 尺寸重量
-
- 包装尺寸:67mm x 53mm x 12mm
- 包装重量:17g
-
-## 相关链接
-
- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
- **[官方论坛](http://forum.m5stack.com/)**
-
 ## 原理图

 <img src="assets/img/product_pics/unit/hub_sch.JPG">
@@ -1,7 +1,6 @@
-# IR {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_ir.png" width="30%" height="30%">
+# IR

+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_ir.png"></div>

 ## 描述

@@ -22,18 +21,6 @@
 - 1x IR Unit
 - 1x Grove 线

-## 尺寸重量
-
- 包装尺寸:67mm x 53mm x 12mm
- 包装重量:17g
-
-## 相关链接
-
- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
- **[官方论坛](http://forum.m5stack.com/)**
-
-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -50,27 +37,11 @@

 ### 1. Arduino IDE

-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-int cur_recv_value = 0;
-
-// initialization
-M5.begin();
-pinMode(ir_recv_pin, INPUT);// receiver pin
-pinMode(ir_send_pin, OUTPUT);// transmitter pin
-digitalWrite(ir_send_pin, 1);// send infrared light
-
-// read data
-cur_recv_value = digitalRead(ir_recv_pin);// read the status of receiver
-```
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/Arduino)

 ### 2. UIFlow

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

 <img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_03.png">

@@ -85,12 +56,9 @@ cur_recv_value = digitalRead(ir_recv_pin);// read the status of receiver
 <tr><td>IR Unit</td><td>Receiver Pin</td><td>Transmitter Pin</td><td>5V</td><td>GND</td></tr>
 </table>

-
 <script>

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

@@ -1,8 +1,6 @@
-# JOYSTICK {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_joystick_01.png" width="30%" height="30%">
-
+# JOYSTICK

+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_joystick_01.png"></div>

 ## 描述

@@ -26,23 +24,11 @@
 - 1x JOYSTICK Unit
 - 1x Grove 线

-## 尺寸重量
-
- 包装尺寸:75mm x 45mm x 30mm
- 包装重量:27g
-
 ## 应用

 - 游戏控制器
 - 机器人远程控制

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

 >EasyLoader是一个简洁快速的程序烧录器，其内置了一个产品相关的案例程序，通过简单步骤将其烧录至主控，即可进行一系列的功能验证.**(程序烧录前，请根据设备类型安装相应驱动程序. M5Core型主机[请点击此处查看CP210X驱动安装教程](zh_CN/arduino/arduino_development?id=安装串口驱动)，M5StickC/V/T/ATOM系列可免驱动使用)**
@@ -74,40 +60,13 @@

 ### 1. Arduino IDE

-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-#include "Wire.h"
-
-#define JOY_ADDR 0x52
-
-// declaration
-uint8_t x_data, y_data, button_data;
-char data[100];
-
-// initialization
-M5.begin();
-M5.Lcd.clear();
-dacWrite(25, 0);//disable the speak noise
-Wire.begin(21, 22, 400000);
-
-
-// read data
-Wire.requestFrom(JOY_ADDR, 3);
-if (Wire.available()) {
-  x_data = Wire.read();// X(range: 10~250)
-  y_data = Wire.read();// Y(range: 10~250)
-  button_data = Wire.read();// Z(0: released 1: pressed)
-  sprintf(data, "x:%d y:%d button:%d\n", x_data, y_data, button_data);
-}
-```
+[请点击此处获取Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/Arduino)

 <img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_04.png">

 ### 2. UIFlow

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

 <img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_03.png">

@@ -122,25 +81,10 @@ if (Wire.available()) {
 <tr><td>JOYSTICK Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>

-
 **Mega328 ISP**下载接口Pin脚定义

 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">

-## 相关视频
-
-**Joystick 的演示 - 遥控轮椅**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stack%20Joystick.mp4" type="video/mp4">
-</video>
-
-**Joystick 的演示 - 菜单界面的翻页与选择**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Control%20M5%20With%20Joystick.mp4" type="video/mp4">
-</video>
-
 <script>

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/joystick-unit';
@@ -1,9 +1,6 @@
-# LASER.RX {docsify-ignore-all}
-
-<img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_02.jpg" width="30%" height="30%">
-
+# LASER.RX

+<div class="product_pic"><img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_01.jpg"><img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_02.jpg"></div>

 ## 描述

@@ -24,14 +21,9 @@
 - 1x LASER.RX unit
 - 1x CONNEXT cable

-## 尺寸重量
-
- 包装尺寸:60mm x 57mm x 17mm
- 包装重量:18g
-
 ## 应用

- 空间激光通信系统. 
+- 空间激光通信系统.

 ## 原理图

@@ -49,60 +41,15 @@

 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)

-
 ## 案例程序

- **UIFlow**
+### UIFlow

 <img src="assets\img\product_pics\unit\laser_rx\laser-rx.png" width="80%" height="80%">

 ### Arduino IDE

-*以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER).*
-
-```arduino
-/* This demo is for LASER.TX and LASER.RX, utilized UART for transmittion and reception of
- laser signals. In order to get the result of this demo, you will need to connect LASER.TX 
- and LASER.RX with PORTC(blue) respectively onto two different M5Cores with M5GO bases on
-  bottom. Then flash the demo into both M5Core device. 
-  When testing the demo, you need to point the TX unit to RX, and press the button TX connected 
-  device. RX connected device will reponse with a display,and will show what is received . 
-  See this link for more detals: https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Unit/LASER/EasyLoader_LASER_RX.exe
- */
-
-#include <M5Stack.h>
-
-char ch;
-// serial 2 write and read
-//#define RX 
-void setup() {
-  M5.begin();
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(9600, SERIAL_8N1, 16, 17);
-
-}
-
-void loop() {
-M5.update();
-
-  if (M5.BtnA.wasReleased()) {
-    ch = 'A';
-    Serial2.write(ch);
-  } else if (M5.BtnB.wasReleased()) {
-    ch = 'B';
-    Serial2.write(ch);
-  } else if (M5.BtnC.wasReleased()) {
-    ch = 'C';
-    Serial2.write(ch);
-  }
-  M5.update();
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.print(ch);
- }
-}
-```
+[请点击此处获取Arduino示例代码](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER)

 ### 管脚映射

@@ -112,7 +59,6 @@ M5.update();
 </table>

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

 <video class="video_size" controls>
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
@@ -1,8 +1,6 @@
-# LASER.TX {docsify-ignore-all}
-
-<img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_02.jpg" width="30%" height="30%">
+# LASER.TX

+<div class="product_pic"><img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_01.jpg"><img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_02.jpg"></div>

 ## 描述

@@ -26,11 +24,6 @@
 - 1x LASER.TX unit
 - 1x CONNEXT cable

-## 尺寸重量
-
- 包装尺寸:60mm x 57mm x 17mm
- 包装重量:19g
-
 ## 应用

 - 空间激光通信系统. 
@@ -53,57 +46,13 @@

 ## 案例程序

- **UIFlow**
+### UIFlow

 <img src="assets\img\product_pics\unit\laser_tx\laser-tx.png" width="60%" height="80%">

 ### Arduino IDE

-*以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER).*
-
-```arduino
-/* This demo is for LASER.TX and LASER.RX, utilized UART for transmittion and reception of
- laser signals. In order to get the result of this demo, you will need to connect LASER.TX 
- and LASER.RX with PORTC(blue) respectively onto two different M5Cores with M5GO bases on
-  bottom. Then flash the demo into both M5Core device. 
-  When testing the demo, you need to point the TX unit to RX, and press the button TX connected 
-  device. RX connected device will reponse with a display,and will show what is received . 
-  See this link for more detals: https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Unit/LASER/EasyLoader_LASER_RX.exe
- */
-
-#include <M5Stack.h>
-
-char ch;
-// serial 2 write and read
-//#define RX 
-void setup() {
-  M5.begin();
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(9600, SERIAL_8N1, 16, 17);
-
-}
-
-void loop() {
-M5.update();
-
-  if (M5.BtnA.wasReleased()) {
-    ch = 'A';
-    Serial2.write(ch);
-  } else if (M5.BtnB.wasReleased()) {
-    ch = 'B';
-    Serial2.write(ch);
-  } else if (M5.BtnC.wasReleased()) {
-    ch = 'C';
-    Serial2.write(ch);
-  }
-  M5.update();
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.print(ch);
- }
-}
-```
+[请点击此处获取Arduino示例程序](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER)

 ### 管脚映射

@@ -112,9 +61,7 @@ M5.update();
 <tr><td>LASER_TX</td><td>/</td><td>TX</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/Unit/LASER-TX-RX.mp4" type="video/mp4" >
@@ -123,8 +70,6 @@ M5.update();
 <script>

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/laser-tx-unit';
-
-
   anchor_search(purchase_link);
   scrollFunc();

@@ -1,7 +1,6 @@
-# LIGHT {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_light.png" width="30%" height="30%">
+# LIGHT

+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_light.png"></div>

 ## 描述

@@ -21,24 +20,12 @@
 - 1x LIGHT Unit
 - 1x Grove 线

-## 尺寸重量
-
- 包装尺寸:67mm x 53mm x 12mm
- 包装重量:17g
-
 ## 应用

 - 光控开关
 - 太阳能庭院灯
 - 红外监控摄像头

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

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -55,30 +42,13 @@

 ### 1. Arduino IDE

-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-uint16_t analogRead_value = 0;
-uint16_t digitalRead_value = 0;
-
-// initialization
-M5.begin();
-dacWrite(25, 0);// disable the speak noise
-pinMode(26, INPUT);// LIGHT Pin setting
-
-// read data
-analogRead_value = analogRead(36);// read analog value of LIGHT
-digitalRead_value = digitalRead(26);
-```
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/Arduino)

 <img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_04.png">

 ### 2. UIFlow

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

 <img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_03.png">

@@ -101,17 +71,10 @@ digitalRead_value = digitalRead(26);
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%20iot%20lighting%20part%202%20-%20light%20sensor%20control.mp4" type="video/mp4">
 </video>

-**LIGHT 的应用**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Light%20Units.mp4" type="video/mp4">
-</video>
-
 <script>

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/light-sensor-unit';

-
   anchor_search(purchase_link);
   scrollFunc();

@@ -1,18 +1,12 @@
-# M5:bit {docsify-ignore-all}
-
-<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg" width="250" height="250"> <img src="assets/img/product_pics/unit/m5bit/unit_m5bit_02.jpg" width="250" height="250"><img src="assets/img/product_pics/unit/m5bit/unit_m5bit_03.jpg" width="250" height="250">
-
+# M5:bit

+<div class="product_pic"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg"><img src="assets/img/product_pics/unit/m5bit/unit_m5bit_02.jpg"></div>

 ## 描述

-**M5:bit** 
+**M5:bit**

-是一款M5Core-Microbit串口通信转接板，
-
-该转接板将Microbit的串口引脚连接至GROVE接口，用于与M5Core之间进行串口通信，或是其他应用.
-
-并将其余IO接口拓展引出，使用杜邦线就能与各种各样的硬件进行连接.
+是一款M5Core-Microbit串口通信转接板，该转接板将Microbit的串口引脚连接至GROVE接口，用于与M5Core之间进行串口通信，或是其他应用.并将其余IO接口拓展引出，使用杜邦线就能与各种各样的硬件进行连接.

 **注意：**

@@ -27,85 +21,15 @@

 -  1x M5:bit

-## 尺寸重量
-
- 包装尺寸:62mm x 22mm x 7mm
- 包装重量:16g
-
 ## 案例程序

- **MakeCode**
+### MakeCode

 <img src="assets/img/product_pics/unit/m5bit/m5bit.png">

 ### Arduino IDE

-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/M5Bit/Arduino/M5BIT).*
-
-```arduino
-/*
-    Connect to GRVOE C on M5Core
-*/
-#include <M5Stack.h>
-#include <M5StackUpdater.h>
-
-#define WIDTH 320
-#define HEIGHT 240
-#define BLOCK_SIZE  40
-#define UNIT_WIDTH  5
-#define UNIT_HEIGHT 5
-#define UNIT_SIZE 25
-#define GETX(i) ((i) % (5))
-#define GETY(i) ((i) / (5))
-int world[UNIT_SIZE];
-int i;
-  
-void setup() {
-  M5.begin();
-  Wire.begin();
-  if(digitalRead(BUTTON_A_PIN) == 0){
-    Serial.println("Will load menu binary");
-    updateFromFS(SD);
-    ESP.restart();
-  }
-  Serial2.begin(115200, SERIAL_8N1, 16, 17);
-  M5.Lcd.fillScreen(BLACK);
-  M5.Lcd.setTextSize(2);
-  M5.Lcd.setCursor(35, 220);  
-  M5.Lcd.println("  <       *       >");  
-    for (i = 0; i < UNIT_SIZE; i++) {
-    world[i] = 0;
-  }
-  i = UNIT_SIZE / 2;
-}
-
-void loop() {
-      M5.update();
-      int x = GETX(i) + 1;
-      int y = GETY(i);
-      if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, LIGHTGREY);
-      else M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, BLUE);
-      if (M5.BtnC.wasPressed()) {
-         if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, WHITE);
-         else M5.Lcd.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE, BLACK);
-         ++i;
-         if (i >= UNIT_SIZE) i=0;
-      }
-      if (M5.BtnA.wasPressed()) {
-         if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, WHITE);
-         else M5.Lcd.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE, BLACK);
-         --i;
-         if (i < 0 ) i=UNIT_SIZE -1;
-      }
-      if (M5.BtnB.wasPressed()) {
-        if (world[i] > 0) world[i]=0;
-        else world[i]=1;
-        Serial2.print(world[i]);
-        Serial2.print(GETX(i));
-        Serial2.println(GETY(i));
-      }
-}
-```
+[请点击此处获取Arduino示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/M5Bit/Arduino/M5BIT)

 <script>

@@ -1,7 +1,6 @@
-# M5CAMERA {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/m5camera/unit_m5camera_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/m5camera/unit_m5camera_02.jpg" width="30%" height="30%">
+# M5CAMERA

+<div class="product_pic"><img src="assets/img/product_pics/unit/m5camera/unit_m5camera_01.jpg"><img src="assets/img/product_pics/unit/m5camera/unit_m5camera_02.jpg"></div>

 ## 描述

@@ -14,7 +13,6 @@
 - 打开手机浏览器，访问<mark>192.168.4.1</mark>,进入监控页面实时获取拍摄视频.
 - 视频帧率大约在每秒5-6帧.

-
 <img src="assets/img/product_pics/unit/unit_m5camera_05.png" width="50%">


@@ -57,12 +55,6 @@
 - 4x LEGO积木
 - 1x Type-C USB(20cm)

-## 尺寸重量
-
- 包装尺寸:75mm x 45mm x 30mm
- 包装重量:41g
-
-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -77,7 +69,6 @@

 ## 管脚映射

-
 **摄像头驱动芯片 OV2640 接口**

 | *接口*             | *Camera Pin* | *M5Camera*  |
@@ -202,12 +193,6 @@
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Camera.mp4" type="video/mp4">
 </video>

-**M5Camera 的应用 - 保护布丁**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/Protective-Pudding.mp4" type="video/mp4">
-</video>
-
 <script>

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/esp-32-camera-psram';
@@ -1,7 +1,6 @@
-# M5CameraF {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_m5camera_f_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_m5camera_f_07.png" width="30%" height="30%">
+# M5CameraF

+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_m5camera_f_01.png"><img src="assets/img/product_pics/unit/unit_m5camera_f_07.png"></div>

 ## 描述

@@ -14,7 +13,6 @@
 - 打开手机浏览器，访问<mark>192.168.4.1</mark>,进入监控页面实时获取拍摄视频.
 - 视频帧率大约在每秒5-6帧.

-
 <img src="assets/img/product_pics/unit/unit_m5camera_f_02.png" width="50%">

 <img src="assets/img/product_pics/unit/unit_m5camera_f_03.png" width="50%">
@@ -69,14 +67,8 @@
 - 1x Wall/1515
 - 1x Type-C USB(20cm)

-## 尺寸重量
-
- 包装尺寸:75mm x 45mm x 30mm
- 包装重量:41g
-
 <img src="assets/img/product_pics/unit/unit_m5camera_f_05.png" width="50%" height="50%">

-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -89,7 +81,6 @@

 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)

-
 ## 管脚映射

 **相机管脚映射**
@@ -141,7 +132,6 @@
 | SCL           | IO23      |
 | SDA           | IO22      |

-
 **MPU6050 接口**

 *IIC 地址是 0x68*
@@ -170,7 +160,6 @@

 - **数据手册** - [ESP32](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/core/esp32_datasheet_cn.pdf) - [OV2640](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/OV2640DS_en.pdf)

-
 ## 案例程序

 ### 出厂固件（WiFi传输图像）
@@ -1,7 +1,6 @@
-# M5CameraX {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_m5camera_x_01.png" width="30%" height="30%">
+# M5CameraX

+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_m5camera_x_01.png"></div>

 ## 描述

@@ -14,7 +13,6 @@
 - 打开手机浏览器，访问<mark>192.168.4.1</mark>,进入监控页面实时获取拍摄视频.
 - 视频帧率大约在每秒5-6帧.

-
 <!-- <img src="assets/img/product_pics/unit/unit_m5camera_05.png" width="100%" height="100%"><img src="assets/img/product_pics/unit/unit_m5camera_06.png" width="100%" height="100%">

 <img src="assets/img/product_pics/unit/unit_m5camera_04.png"> -->
@@ -57,12 +55,6 @@
 - 1x Wall-1515
 - 1x Type-C USB(20cm)

-
-## 尺寸重量
-
- 包装尺寸:75mm x 45mm x 30mm
- 包装重量:38g
-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -1,8 +1,6 @@
-# 16-Key Capacitive Touch {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_makey.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_02.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_05.png" width="30%">
-
+# 16-Key Capacitive Touch

+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_makey.png"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_02.png"></div>

 ## 描述

@@ -16,7 +14,6 @@

 使用杜邦线（公对公），将其一端插入"GND"，当另一端短接至 Unit 上的键值的时候,蜂鸣器将发出相应的音调.

-
 2）驱动M5Core的扬声器:
 将 MAKEY Unit 连接至 M5Core 的 Grove A.并烧录该[案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version).

@@ -35,26 +32,14 @@
 - 1x MAKEY Unit
 - 1x Grove 线

-## 尺寸重量
-
- 包装尺寸:67mm x 53mm x 12mm
- 包装重量:19g
-
 ## 应用

 - 水果键盘

-
-
 ## 相关链接

- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[Maykey 固件](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/firmware_328p)**

-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -71,25 +56,7 @@

 ### 1. Arduino IDE

-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-
-// initialization
-M5.begin();
-pinMode(21, INPUT); pinMode(22, INPUT);
-Wire.begin();// Init I2C
-
-// read data
-Wire.requestFrom(MAKEY_ADDR, 2);
-while (Wire.available()) {
-  Key1 = Wire.read();//read data from MAKEY
-  Key2 = Wire.read();//read data from MAKEY
-  tone_key = (Key2<<8) | Key1;// the following picture will explain "tone_key"
-}
-```
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version)

 <img src="assets/img/product_pics/unit/unit_example/MAKEY/tone_key_pitch_zh_CN.png">

@@ -97,7 +64,7 @@ while (Wire.available()) {

 ### 2. UIFlow

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

 <img src="assets/img/product_pics/unit/unit_example/MAKEY/example_unit_makey_02.png">

@@ -1,8 +1,6 @@
-# MINI.PROTO {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_01.jpg" width="30%"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_02.jpg" width="30%">
-
+# MINI.PROTO

+<div class="product_pic"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_01.jpg"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_02.jpg"></div>

 ## 描述

@@ -13,7 +11,6 @@
 -  PORTB：GPIO 36,26
 -  PORTC：GPIO 16,17 

-
 <br><br><br>

 <img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_03.jpg" width="50%">
@@ -34,9 +31,6 @@

 - 原型设计

-
-## 相关链接
-
 ## 原理图

 <img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_04.jpg" width="50%" height="50%">
@@ -1,8 +1,6 @@
-# NCIR {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_ncir.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_ncir_grove_a.png" width="30%" height="30%">
-
+# NCIR

+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_ncir.png"><img src="assets/img/product_pics/unit/unit_ncir_grove_a.png"></div>

 ## 描述

@@ -27,11 +25,6 @@
 - 1x NCIR Unit
 - 1x Grove 线

-## 尺寸重量
-
- 包装尺寸:75mm x 45mm x 30mm
- 包装重量:41g
-
 ## 应用

 -  人体体温测量
@@ -57,37 +50,13 @@

 ### 1. Arduino IDE

-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/NCIR).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-
-#define NCIR_ADDR 0x5A
-
-// declaration
-uint16_t result;
-float temperature;
-
-// initialization
-Wire.begin();
-M5.begin();
-
-// read data
-Wire.beginTransmission(NCIR_ADDR);Wire.write(0x07);Wire.endTransmission(false);
-Wire.requestFrom(NCIR_ADDR, 2);
-result = Wire.read();// Receive DATA
-result |= Wire.read() << 8;// Receive DATA
-
-// store temperature value
-temperature = result * 0.02 - 273.15;
-```
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/NCIR)

 <img src="assets/img/product_pics/unit/unit_example/NCIR/example_unit_ncir_04.png">

 ### 2. UIFlow

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

 <img src="assets/img/product_pics/unit/unit_example/NCIR/example_unit_ncir_03.png">

@@ -1,8 +1,6 @@
-# NEOFLASH {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_neoflash_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_neoflash_02.png" width="30%" height="30%">
-
+# NEOFLASH

+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_neoflash_01.png"><img src="assets/img/product_pics/unit/unit_neoflash_02.png"></div>

 ## 描述

@@ -25,22 +23,12 @@
 - 1x NeoFlash Unit
 - 1x Grove 线

-## 尺寸重量
-
- 包装尺寸:220mm x 59mm x 10mm
- 包装重量:131g
-
 ## 相关链接

- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[FastLED Library](https://github.com/FastLED/FastLED/wiki/Overview)**

 - **[FastLED Reference(中文版本)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**

-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -53,18 +41,17 @@

 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)

-
 ## 案例程序

 ### Arduino IDE

 该案例将展示基于网络的PIR人体感应时钟.当检测到人体靠近时，灯板点亮显示实时时间，当检测信号消失，则熄灭灯板.

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

 <img src="assets/img/product_pics/unit/unit_example/NEOFLASH/example_unit_neoflash_01.png">

- **UIFlow**
+### UIFlow

 打开 http://flow.m5stack.com 点击 Demo 载入uiflow例程

@@ -85,13 +72,6 @@
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/NeoFlash/E1%20-%20Neoflash%20%E4%BE%8B%E7%A8%8B%EF%BC%88UIFlow%20Tutorials%202%EF%BC%89.mp4" type="video/mp4">
 </video>

-**Neoflash 的演示 - 闹钟**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20NeoFlash.mp4" type="video/mp4">
-</video>
-
-
 <script>

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/neoflash-acrylic-light-board';
@@ -1,14 +1,12 @@
-# NEOPIXEL {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_neopixel.jpg" width="30%" height="30%">
-
+# NEOPIXEL

+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_neopixel.jpg"></div>

 ## 描述

 **RGB LED** 是一款可编程灯条.该灯条支持数字寻址，这意味着你可以单独控制灯条上的每一个单独的LED灯显示的颜色、亮度.使用单总线编程，可进行灯条拓展.需要注意的是，随着灯条连接数量的逐渐增加，伴随的功耗也会增加，因此在使用LED个数较多的RGB LED灯条时，需要额外为其提供电源.

-*注意：在连接时请留意输入端口与输出端口的方向.输入端口用作连接接M5Core，或RGB LED延长拓展.*
+注意：在连接时请留意输入端口与输出端口的方向.输入端口用作连接接M5Core，或RGB LED延长拓展

 <img src="assets/img/product_pics/unit/unit_neopixel_02.png">

@@ -22,17 +20,8 @@

 - 1x RGB LED Unit

-## 尺寸重量
-
- 产品尺寸：10cm/20cm/0.5m/1m/2m
- 产品重量：4g/5g/12g/19g/36g
-
 ## 相关链接

- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[FastLED Library](https://github.com/FastLED/FastLED/wiki/Overview)**

 - **[FastLED Reference(中文版本)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**
@@ -49,73 +38,17 @@

 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)

-
 ## 案例程序

 ### 1. Arduino IDE

-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)。*
-
-```arduino
-/*
-    Install FastLED library first.
-*/
-#include <M5Stack.h>
-#include "FastLED.h"
-
-#define Neopixel_PIN    21
-#define NUM_LEDS    30
-
-CRGB leds[NUM_LEDS];
-uint8_t gHue = 0;
-static TaskHandle_t FastLEDshowTaskHandle = 0;
-static TaskHandle_t userTaskHandle = 0;
-
-void setup(){
-  Serial.begin(115200);
-  M5.begin();
-  M5.Lcd.clear(BLACK);
-  M5.Lcd.setTextColor(YELLOW); M5.Lcd.setTextSize(2); M5.Lcd.setCursor(40, 0);
-  M5.Lcd.println("Neopixel example");
-  M5.Lcd.setTextColor(WHITE);
-  M5.Lcd.setCursor(0, 25);
-  M5.Lcd.println("Display rainbow effect");
-
-  // Neopixel initialization
-  FastLED.addLeds<WS2811,Neopixel_PIN,GRB>\
-                         (leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
-  FastLED.setBrightness(10);
-  xTaskCreatePinnedToCore(FastLEDshowTask, \
-                         "FastLEDshowTask", 2048, NULL, 2, NULL, 1);
-}
-
-void loop(){
-}
-
-void FastLEDshowESP32(){
-    if (userTaskHandle == 0){
-        userTaskHandle = xTaskGetCurrentTaskHandle();
-        xTaskNotifyGive(FastLEDshowTaskHandle);
-        const TickType_t xMaxBlockTime = pdMS_TO_TICKS( 200 );
-        ulTaskNotifyTake(pdTRUE, xMaxBlockTime);
-        userTaskHandle = 0;
-    }
-}
-
-void FastLEDshowTask(void *pvParameters){
-    for(;;){
-        fill_rainbow(leds, NUM_LEDS, gHue, 7);// rainbow effect
-        FastLED.show();// must be executed for neopixel becoming effective
-        EVERY_N_MILLISECONDS( 20 ) { gHue++; }
-    }
-}
-```
+[请点击此处下载Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)

 <img src="assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_02.png">

 ### 2. UIFlow

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

 <img src="assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png">

@@ -140,7 +73,6 @@ void FastLEDshowTask(void *pvParameters){
    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Akela%20Weapons.mp4" type="video/mp4">
 </video>

-
 <script>

   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/neopixel-rgb-leds-cable';
@@ -1,8 +1,6 @@
-# OP.180 {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/op180/unit_op180_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/op180/unit_op180_02.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/op180/unit_op180_03.jpg" width="30%" height="30%">
-
+# OP.180

+<div class="product_pic"><img src="assets/img/product_pics/unit/op180/unit_op180_01.jpg"><img src="assets/img/product_pics/unit/op180/unit_op180_02.jpg"></div>

 ## 描述

@@ -18,23 +16,15 @@
 - 1x OP.180 unit
 - 1x GROVE 线

-
-## 尺寸重量
-
- 包装尺寸:68mm x 52mm x 12mm
- 包装重量:16g
-
 ## 应用

 - 自动门
 - 自动化机械控制

-
 ## 原理图

 <img src="assets/img/product_pics/unit/op180/unit_op180_04.jpg" width="30%" height="30%">

-
 ## EasyLoader

 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -49,8 +39,7 @@

 ## 案例程序

- [点击此处，获取案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).
-
+- [点击此处获取Arduino案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).

 ## 相关视频

@@ -1,14 +1,11 @@
-# OP.90 {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/op90/unit_op90_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/op90/unit_op90_02.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/op90/unit_op90_03.jpg" width="30%" height="30%">
-
+# OP.90

+<div class="product_pic"><img src="assets/img/product_pics/unit/op90/unit_op90_01.jpg"><img src="assets/img/product_pics/unit/op90/unit_op90_02.jpg"></div>

 ## 描述

 **OP.90** 是一款90°的非接触式光电限位开关.该Unit上两侧分别为红外、发射接收器，正常工作时，发射测会不断发射红外信号至接受测，当有物体从中间经过并遮挡到红外信号时，输出端将产生动作信号，判断物体经过.常用于机械控制系统中，作为安全联锁或是光电计数装置.

-
 ## 产品特性

 - 角度:90°
@@ -19,17 +16,11 @@
 - 1x OP.90 unit
 - 1x GROVE 线

-## 尺寸重量
-
- 包装尺寸:60mm x 57mm x 17mm
- 包装重量:18g
-
 ## 应用

 - 自动门
 - 自动化机械控制

-  
 ## 原理图

 <img src="assets/img/product_pics/unit/op90/unit_op90_04.jpg" width="30%" height="30%">
@@ -48,8 +39,7 @@

 ## 案例程序

- [点击此处，获取案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).
-
+- [点击此处获取Arduino案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).

 ## 相关视频

@@ -1,9 +1,6 @@
-# PaHUB {docsify-ignore-all}
-
-
-<img src="assets/img/product_pics/unit/pahub/pahub_p1.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/pahub/pahub_p3.jpg" width="30%" height="30%">
-
+# PaHUB

+<div class="product_pic"><img src="assets/img/product_pics/unit/pahub/pahub_p1.jpg"><img src="assets/img/product_pics/unit/pahub/pahub_p3.jpg"></div>

 ## 描述

@@ -19,8 +16,6 @@

 <img src="assets/img/product_pics/unit/pahub/pahub_p2.jpg" width="30%" height="30%">

-
-
 ### 产品特性

 - I2C GROVE PORTA 拓展
@@ -47,29 +42,22 @@
 - 1x PaHUB Unit
 - 1x Grove 线

-
-## 尺寸重量
-
- 包装尺寸:67mm x 53mm x 12mm
- 包装重量:19g
-
 ## 参考文档

 - Datasheet - **[TCA9548A](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/TCA9548A_en.pdf)**

-
 ## 案例程序

 - 通讯类型 - I2C
 - 地址 - 0x70

- **UIFlow**
+### UIFlow

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

 <img src="assets/img/product_pics/unit/pahub/pahub.png" width="80%" height="80%">

- **[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/Arduino/PaHUB)**
+[Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/Arduino/PaHUB)

 ## EasyLoader

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