updated uiflow example screenshots

docs/en/unit/butterfly.md

@@ -24,4 +24,6 @@ Assemble "butterfly", control the Servo Motor to **30 degree**, then bind "butte
 
 <img src="assets/img/product_pics/unit/unit_butterfly_03.png" width="70%" height="70%">
 
-<img src="assets/img/product_pics/unit/unit_butterfly_05.png" width="70%" height="70%">
+<img src="assets/img/product_pics/unit/unit_butterfly_05.png" width="70%" height="70%">
+
+<img src="assets/img/product_pics/unit/unit_example/BUTTERFLY/example_unit_butterfly_04.png">

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).*
 
-<img src="assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_02.png" width="69%" height="69%">
+<img src="assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_04.png">
 
 ## Schematic
 

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).*
 
-<img src="assets/img/product_pics/unit/unit_example/ENV/example_unit_env_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/ENV/example_unit_env_02.png" width="55%" height="55%">
+<img src="assets/img/product_pics/unit/unit_example/ENV/example_unit_env_05.png">
 
 ## Schematic
 

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)**
 
 <!-- :memo:**[Description](#Description)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:octocat:**[Example](#Example)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :electric_plug:**[Schematic](#Schematic)** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;🛒**[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 <M5Stack.h>
+#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));
+```
+<img src="assets/img/product_pics/unit/unit_extio_03.png">
+
+### 2. UIFlow
+
+*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/UIFlow).*
+
+<img src="assets/img/product_pics/unit/unit_example/EXTIO/example_unit_extio_01.png">
+
 ### PinMap
 
 <table>

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).*
 
-<img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_02.png" width="58%" height="58%">
+<img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_03.png">
 
 ## Schematic
 

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).*
 
-<img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_01.png" width="28%" height="28%"> <img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_02.png" width="69%" height="69%">
+<img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_03.png">
 
 ## Schematic
 

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).*
 
-<img src="assets/img/product_pics/unit/unit_example/MAKEY/example_unit_makey_01.png" width="50%" height="50%">
+<img src="assets/img/product_pics/unit/unit_example/MAKEY/example_unit_makey_02.png">
 
 ## Schematic
 

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).*
 
-<img src="assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png" width="60%" height="60%">
+<img src="assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png">
 
 
 

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/',

docs/ja/unit/butterfly.md

@@ -24,4 +24,6 @@
 
 <img src="assets/img/product_pics/unit/unit_butterfly_03.png" width="70%" height="70%">
 
-<img src="assets/img/product_pics/unit/unit_butterfly_05.png" width="70%" height="70%">
+<img src="assets/img/product_pics/unit/unit_butterfly_05.png" width="70%" height="70%">
+
+<img src="assets/img/product_pics/unit/unit_example/BUTTERFLY/example_unit_butterfly_04.png">