diff --git a/docs/assets/img/product_pics/unit/unit_example/BUTTERFLY/example_unit_butterfly_04.png b/docs/assets/img/product_pics/unit/unit_example/BUTTERFLY/example_unit_butterfly_04.png
index 7bf7c15f..7fec2bcf 100644
Binary files a/docs/assets/img/product_pics/unit/unit_example/BUTTERFLY/example_unit_butterfly_04.png and b/docs/assets/img/product_pics/unit/unit_example/BUTTERFLY/example_unit_butterfly_04.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_04.png b/docs/assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_04.png
new file mode 100644
index 00000000..6dd888dc
Binary files /dev/null and b/docs/assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_04.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_example/ENV/example_unit_env_05.png b/docs/assets/img/product_pics/unit/unit_example/ENV/example_unit_env_05.png
new file mode 100644
index 00000000..a5064848
Binary files /dev/null and b/docs/assets/img/product_pics/unit/unit_example/ENV/example_unit_env_05.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_example/EXTIO/example_unit_extio_01.png b/docs/assets/img/product_pics/unit/unit_example/EXTIO/example_unit_extio_01.png
new file mode 100644
index 00000000..d85adc03
Binary files /dev/null and b/docs/assets/img/product_pics/unit/unit_example/EXTIO/example_unit_extio_01.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_03.png b/docs/assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_03.png
new file mode 100644
index 00000000..4fb4b057
Binary files /dev/null and b/docs/assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_03.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_03.png b/docs/assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_03.png
new file mode 100644
index 00000000..d9b92a9b
Binary files /dev/null and b/docs/assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_03.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_example/MAKEY/example_unit_makey_02.png b/docs/assets/img/product_pics/unit/unit_example/MAKEY/example_unit_makey_02.png
new file mode 100644
index 00000000..69a52008
Binary files /dev/null and b/docs/assets/img/product_pics/unit/unit_example/MAKEY/example_unit_makey_02.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png b/docs/assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png
index e9725dd6..b64edc29 100644
Binary files a/docs/assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png and b/docs/assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_example/RELAY/example_unit_relay_01.png b/docs/assets/img/product_pics/unit/unit_example/RELAY/example_unit_relay_01.png
index a0ede8eb..69a72124 100644
Binary files a/docs/assets/img/product_pics/unit/unit_example/RELAY/example_unit_relay_01.png and b/docs/assets/img/product_pics/unit/unit_example/RELAY/example_unit_relay_01.png differ
diff --git a/docs/assets/img/product_pics/unit/unit_extio_03.png b/docs/assets/img/product_pics/unit/unit_extio_03.png
new file mode 100644
index 00000000..14175787
Binary files /dev/null and b/docs/assets/img/product_pics/unit/unit_extio_03.png differ
diff --git a/docs/en/unit/butterfly.md b/docs/en/unit/butterfly.md
index e0399600..9e9cdad5 100644
--- a/docs/en/unit/butterfly.md
+++ b/docs/en/unit/butterfly.md
@@ -24,4 +24,6 @@ Assemble "butterfly", control the Servo Motor to **30 degree**, then bind "butte
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/docs/en/unit/earth.md b/docs/en/unit/earth.md
index 3b69e0d8..bb0ad5c8 100644
--- a/docs/en/unit/earth.md
+++ b/docs/en/unit/earth.md
@@ -56,7 +56,7 @@ void loop() {
*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/UIFlow).*
-
+
## Schematic
diff --git a/docs/en/unit/env.md b/docs/en/unit/env.md
index ee4792ef..f27e9f3f 100644
--- a/docs/en/unit/env.md
+++ b/docs/en/unit/env.md
@@ -70,7 +70,7 @@ float pressure = bme.readPressure();
*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENV/UIFlow).*
-
+
## Schematic
diff --git a/docs/en/unit/extio.md b/docs/en/unit/extio.md
index 88ad3c37..fbaff59f 100644
--- a/docs/en/unit/extio.md
+++ b/docs/en/unit/extio.md
@@ -4,7 +4,7 @@
***
-:memo:**[Description](#Description)** 🛒**[Purchase](https://pt.aliexpress.com/store/product/M5Stack-Official-Extend-Serial-IO-I-O-Unit-Grove-Cable-I2C-Interface-for-Arduino-Blockly-ESP32/3226069_32966582585.html?spm=a2g03.12010615.8148356.48.3b773d71o7oNY1)**
+:memo:**[Description](#Description)** :octocat:**[Example](#Example)** 🛒**[Purchase](https://pt.aliexpress.com/store/product/M5Stack-Official-Extend-Serial-IO-I-O-Unit-Grove-Cable-I2C-Interface-for-Arduino-Blockly-ESP32/3226069_32966582585.html?spm=a2g03.12010615.8148356.48.3b773d71o7oNY1)**
@@ -28,6 +28,59 @@ This unit connects to GRVOE A interface on M5Core, and it communicates with M5Co
- Datasheet - **[PCA9554PW](https://pdf1.alldatasheet.com/datasheet-pdf/view/86709/PHILIPS/PCA9554PW.html)**
+## Example
+
+### 1. Arduino IDE
+
+*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/Arduino)。*
+
+```arduino
+/*
+ Connect to GRVOE A on M5Core
+*/
+#include
+#include "PCA9554.h" // Load the PCA9554 Library
+
+// new a object
+PCA9554 ioCon1(0x27);
+
+uint8_t res;
+
+// initialization
+
+M5.begin();
+Wire.begin();
+ioCon1.twiWrite(21, 22); // GROVE A
+delay(10);
+res = 1;
+ioCon1.twiRead(res);
+Serial.printf("res:%d\r\n", res);
+ioCon1.portMode0(ALLOUTPUT); //Set the port as all output
+
+// set the specific pin
+ioCon1.digitalWrite0(0, HIGH);
+ioCon1.digitalWrite0(1, HIGH);
+ioCon1.digitalWrite0(2, HIGH);
+ioCon1.digitalWrite0(3, HIGH);
+ioCon1.digitalWrite0(4, HIGH);
+ioCon1.digitalWrite0(5, HIGH);
+ioCon1.digitalWrite0(6, HIGH);
+ioCon1.digitalWrite0(7, HIGH);
+
+// write 0-7 HIGHT
+Serial.println(ioCon1.digitalWritePort0(0xff));
+
+// write 0-7 LOW
+Serial.println(ioCon1.digitalWritePort0(0x00));
+```
+
+
+### 2. UIFlow
+
+*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/UIFlow).*
+
+
+
### PinMap
diff --git a/docs/en/unit/joystick.md b/docs/en/unit/joystick.md
index e124f145..b1100acc 100644
--- a/docs/en/unit/joystick.md
+++ b/docs/en/unit/joystick.md
@@ -64,7 +64,7 @@ if (Wire.available()) {
*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/UIFlow).*
-
+
## Schematic
diff --git a/docs/en/unit/light.md b/docs/en/unit/light.md
index 9f07ca02..b023659f 100644
--- a/docs/en/unit/light.md
+++ b/docs/en/unit/light.md
@@ -53,7 +53,7 @@ digitalRead_value = digitalRead(26);
*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/UIFlow).*
-
+
## Schematic
diff --git a/docs/en/unit/makey.md b/docs/en/unit/makey.md
index f1caedf7..581ba1b5 100644
--- a/docs/en/unit/makey.md
+++ b/docs/en/unit/makey.md
@@ -75,7 +75,7 @@ while (Wire.available()) {
*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/MAKEY/UIFlow).*
-
+
## Schematic
diff --git a/docs/en/unit/neopixel.md b/docs/en/unit/neopixel.md
index ccb66a4e..50933254 100644
--- a/docs/en/unit/neopixel.md
+++ b/docs/en/unit/neopixel.md
@@ -97,7 +97,7 @@ void FastLEDshowTask(void *pvParameters){
*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/UIFlow).*
-
+
diff --git a/docs/index.html b/docs/index.html
index 9fd3f91e..8b344c08 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,7 +31,7 @@
homepage : 'index.md',
loadNavbar : 'navbar.md',
loadSidebar: 'sidebar.md',
- autoHeader: true,
+ // autoHeader: true,
mergeNavbar: true, // for mobile device
nameLink: {
'/en/': '#/en/',
diff --git a/docs/ja/unit/butterfly.md b/docs/ja/unit/butterfly.md
index eade2608..82f91a90 100644
--- a/docs/ja/unit/butterfly.md
+++ b/docs/ja/unit/butterfly.md
@@ -24,4 +24,6 @@
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/docs/ja/unit/dual_button.md b/docs/ja/unit/dual_button.md
index f9a85ea3..1e99c845 100644
--- a/docs/ja/unit/dual_button.md
+++ b/docs/ja/unit/dual_button.md
@@ -45,7 +45,7 @@ M5.update();
-
+
## 回路図
diff --git a/docs/ja/unit/earth.md b/docs/ja/unit/earth.md
index 6601b0a5..74e8f985 100644
--- a/docs/ja/unit/earth.md
+++ b/docs/ja/unit/earth.md
@@ -50,7 +50,7 @@ void loop() {
*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/UIFlow).*
-
+
## 回路図
diff --git a/docs/ja/unit/env.md b/docs/ja/unit/env.md
index 37cff8e8..ec4a225a 100644
--- a/docs/ja/unit/env.md
+++ b/docs/ja/unit/env.md
@@ -67,7 +67,7 @@ float pressure = bme.readPressure();
*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENV/UIFlow).*
-
+
## 回路図
diff --git a/docs/ja/unit/extio.md b/docs/ja/unit/extio.md
index 03193661..9f166320 100644
--- a/docs/ja/unit/extio.md
+++ b/docs/ja/unit/extio.md
@@ -4,7 +4,7 @@
***
-:memo:**[概要](#概要)** 🛒**[購入リンク](https://www.aliexpress.com/item/M5Stack-Official-Extend-Serial-IO-I-O-Unit-Grove-Cable-I2C-Interface-for-Arduino-Blockly-ESP32/32966582585.html)**
+:memo:**[Description](#Description)** :octocat:**[Example](#Example)** 🛒**[Purchase](https://pt.aliexpress.com/store/product/M5Stack-Official-Extend-Serial-IO-I-O-Unit-Grove-Cable-I2C-Interface-for-Arduino-Blockly-ESP32/3226069_32966582585.html?spm=a2g03.12010615.8148356.48.3b773d71o7oNY1)**
@@ -29,6 +29,59 @@
- Datasheet
- **[PCA9554PW](https://pdf1.alldatasheet.com/datasheet-pdf/view/86709/PHILIPS/PCA9554PW.html)**
+## サンプルコード
+
+### 1. Arduino IDE
+
+*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/Arduino)。*
+
+```arduino
+/*
+ Connect to GRVOE A on M5Core
+*/
+#include
+#include "PCA9554.h" // Load the PCA9554 Library
+
+// new a object
+PCA9554 ioCon1(0x27);
+
+uint8_t res;
+
+// initialization
+
+M5.begin();
+Wire.begin();
+ioCon1.twiWrite(21, 22); // GROVE A
+delay(10);
+res = 1;
+ioCon1.twiRead(res);
+Serial.printf("res:%d\r\n", res);
+ioCon1.portMode0(ALLOUTPUT); //Set the port as all output
+
+// set the specific pin
+ioCon1.digitalWrite0(0, HIGH);
+ioCon1.digitalWrite0(1, HIGH);
+ioCon1.digitalWrite0(2, HIGH);
+ioCon1.digitalWrite0(3, HIGH);
+ioCon1.digitalWrite0(4, HIGH);
+ioCon1.digitalWrite0(5, HIGH);
+ioCon1.digitalWrite0(6, HIGH);
+ioCon1.digitalWrite0(7, HIGH);
+
+// write 0-7 HIGHT
+Serial.println(ioCon1.digitalWritePort0(0xff));
+
+// write 0-7 LOW
+Serial.println(ioCon1.digitalWritePort0(0x00));
+```
+
+
+### 2. UIFlow
+
+*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/UIFlow).*
+
+
+
### ピンマップ
diff --git a/docs/ja/unit/ir.md b/docs/ja/unit/ir.md
index 6ef281fd..ee6ad986 100644
--- a/docs/ja/unit/ir.md
+++ b/docs/ja/unit/ir.md
@@ -43,7 +43,7 @@ cur_recv_value = digitalRead(ir_recv_pin);// read the status of receiver
*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/UIFlow).*
-
+
## 回路図
diff --git a/docs/ja/unit/joystick.md b/docs/ja/unit/joystick.md
index 5f25278e..8ac93b54 100644
--- a/docs/ja/unit/joystick.md
+++ b/docs/ja/unit/joystick.md
@@ -52,7 +52,7 @@ if (Wire.available()) {
*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/UIFlow).*
-
+
## 回路図
diff --git a/docs/ja/unit/light.md b/docs/ja/unit/light.md
index df6c4154..87c70a67 100644
--- a/docs/ja/unit/light.md
+++ b/docs/ja/unit/light.md
@@ -44,7 +44,7 @@ digitalRead_value = digitalRead(26);
*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/UIFlow).*
-
+
## 回路図
diff --git a/docs/ja/unit/makey.md b/docs/ja/unit/makey.md
index 1cfb8b01..7a82b7c4 100644
--- a/docs/ja/unit/makey.md
+++ b/docs/ja/unit/makey.md
@@ -60,7 +60,7 @@ while (Wire.available()) {
*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/MAKEY/UIFlow).*
-
+
## 回路図
diff --git a/docs/ja/unit/neopixel.md b/docs/ja/unit/neopixel.md
index 637e792b..01ed3081 100644
--- a/docs/ja/unit/neopixel.md
+++ b/docs/ja/unit/neopixel.md
@@ -87,7 +87,7 @@ void FastLEDshowTask(void *pvParameters){
*特定のルーチンが必要な場合はここをクリックしてください[ルーチン](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/UIFlow)。*
-
+
### ピンマップ
diff --git a/docs/zh_CN/unit/butterfly.md b/docs/zh_CN/unit/butterfly.md
index aa6da2dc..c900fb0f 100644
--- a/docs/zh_CN/unit/butterfly.md
+++ b/docs/zh_CN/unit/butterfly.md
@@ -24,4 +24,6 @@
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/docs/zh_CN/unit/earth.md b/docs/zh_CN/unit/earth.md
index 52db727d..d5bdd52c 100644
--- a/docs/zh_CN/unit/earth.md
+++ b/docs/zh_CN/unit/earth.md
@@ -57,7 +57,7 @@ void loop() {
*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/UIFlow)。*
-
+
## 原理图
diff --git a/docs/zh_CN/unit/env.md b/docs/zh_CN/unit/env.md
index 6f4fd788..b536ae1d 100644
--- a/docs/zh_CN/unit/env.md
+++ b/docs/zh_CN/unit/env.md
@@ -93,7 +93,7 @@ void loop() {
*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENV/UIFlow)。*
-
+
## 原理图
diff --git a/docs/zh_CN/unit/extio.md b/docs/zh_CN/unit/extio.md
index 2c2c18ad..0791497c 100644
--- a/docs/zh_CN/unit/extio.md
+++ b/docs/zh_CN/unit/extio.md
@@ -4,7 +4,7 @@
***
-:memo:**[描述](#描述)** 🛒**[购买链接](https://item.taobao.com/item.htm?spm=a1z10.3-c.w4002-1172588106.15.3b86425eaoE9zU&id=585289717492)**
+:memo:**[描述](#描述)** :octocat:**[例程](#例程)** 🛒**[购买链接](https://item.taobao.com/item.htm?spm=a1z10.3-c.w4002-1172588106.15.3b86425eaoE9zU&id=585289717492)**
@@ -27,6 +27,59 @@
- 数据手册 - **[PCA9554PW](https://pdf1.alldatasheet.com/datasheet-pdf/view/86709/PHILIPS/PCA9554PW.html)**
+## 例程
+
+### 1. Arduino IDE
+
+*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/Arduino)。*
+
+```arduino
+/*
+ Connect to GRVOE A on M5Core
+*/
+#include
+#include "PCA9554.h" // Load the PCA9554 Library
+
+// new a object
+PCA9554 ioCon1(0x27);
+
+uint8_t res;
+
+// initialization
+
+M5.begin();
+Wire.begin();
+ioCon1.twiWrite(21, 22); // GROVE A
+delay(10);
+res = 1;
+ioCon1.twiRead(res);
+Serial.printf("res:%d\r\n", res);
+ioCon1.portMode0(ALLOUTPUT); //Set the port as all output
+
+// set the specific pin
+ioCon1.digitalWrite0(0, HIGH);
+ioCon1.digitalWrite0(1, HIGH);
+ioCon1.digitalWrite0(2, HIGH);
+ioCon1.digitalWrite0(3, HIGH);
+ioCon1.digitalWrite0(4, HIGH);
+ioCon1.digitalWrite0(5, HIGH);
+ioCon1.digitalWrite0(6, HIGH);
+ioCon1.digitalWrite0(7, HIGH);
+
+// write 0-7 HIGHT
+Serial.println(ioCon1.digitalWritePort0(0xff));
+
+// write 0-7 LOW
+Serial.println(ioCon1.digitalWritePort0(0x00));
+```
+
+
+### 2. UIFlow
+
+*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/UIFlow).*
+
+
+
### 管脚映射
diff --git a/docs/zh_CN/unit/joystick.md b/docs/zh_CN/unit/joystick.md
index a1e974c2..94b9298f 100644
--- a/docs/zh_CN/unit/joystick.md
+++ b/docs/zh_CN/unit/joystick.md
@@ -65,7 +65,7 @@ if (Wire.available()) {
*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/UIFlow)。*
-
+
## 原理图
diff --git a/docs/zh_CN/unit/light.md b/docs/zh_CN/unit/light.md
index 1c8acbae..ef258865 100644
--- a/docs/zh_CN/unit/light.md
+++ b/docs/zh_CN/unit/light.md
@@ -52,7 +52,7 @@ digitalRead_value = digitalRead(26);
*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/UIFlow)。*
-
+
## 原理图
diff --git a/docs/zh_CN/unit/makey.md b/docs/zh_CN/unit/makey.md
index 43001107..6021c038 100644
--- a/docs/zh_CN/unit/makey.md
+++ b/docs/zh_CN/unit/makey.md
@@ -73,7 +73,7 @@ while (Wire.available()) {
*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/MAKEY/UIFlow)。*
-
+
## 原理图
diff --git a/docs/zh_CN/unit/neopixel.md b/docs/zh_CN/unit/neopixel.md
index d4225b2f..3c746475 100644
--- a/docs/zh_CN/unit/neopixel.md
+++ b/docs/zh_CN/unit/neopixel.md
@@ -97,7 +97,7 @@ void FastLEDshowTask(void *pvParameters){
*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/UIFlow)。*
-
+