change uiflow example pictures for some units

docs/en/unit/angle.md

@@ -49,7 +49,7 @@ cur_sensorValue = analogRead(sensorPin);
 
 *If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/UIFlow).*
 
-<img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_02.png" width="69%" height="69%">
+<img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_03.png">
 
 ## Schematic
 

docs/en/unit/button.md

@@ -1,4 +1,4 @@
-# Unit BUTTON
+# BUTTON
 
 <img src="assets/img/product_pics/unit/M5GO_Unit_button.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_button_grove_b.png" width="30%" height="30%">
 
@@ -48,7 +48,7 @@ M5.update();
 
 <!-- <img src="assets/img/product_pics/unit/unit_example/DUAL_BUTTON/1.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/DUAL_BUTTON/2.png" width="55%" height="55%"><img src="assets/img/product_pics/unit/unit_example/DUAL_BUTTON/3.png" width="55%" height="55%"> -->
 
-<img src="assets/img/product_pics/unit/unit_example/BUTTON/example_unit_button_04.png" width="55%" height="55%">
+<img src="assets/img/product_pics/unit/unit_example/BUTTON/example_unit_button_03.png">
 
  <!-- width="30%" height="30%" -->
 

docs/en/unit/ir.md

@@ -57,7 +57,7 @@ cur_recv_value = digitalRead(ir_recv_pin);// read the status of receiver
 
 *If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/UIFlow).*
 
-<img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_01.png"  width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_02.png"  width="50%" height="50%">
+<img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_03.png">
 
 ## Schematic
 

docs/en/unit/ncir.md

@@ -49,7 +49,7 @@ uint16_t result;
 float temperature;
 
 // initialization
-Wire.begin();
+Wire.begin();\
 M5.begin();
 
 // read data
@@ -62,11 +62,11 @@ result |= Wire.read() << 8;// Receive DATA
 temperature = result * 0.02 - 273.15;
 ```
 
-<!-- ### 2. UIFlow
+### 2. UIFlow
 
-<img src="assets/img/product_pics/unit/unit_example/example_unit_ncir_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/example_unit_ncir_02.png" width="55%" height="55%">
+*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NCIR/UIFlow).*
 
-*If you want the complete code, please click [here](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">
 
 ## Schematic
 

docs/en/unit/pir.md

@@ -46,7 +46,7 @@ M5.update();
 
 If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/UIFlow).
 
-<img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_02.png" width="65%" height="65%">
+<img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_03.png">
 
 ## Schematic
 

docs/ja/unit/angle.md

@@ -42,7 +42,7 @@ cur_sensorValue = analogRead(sensorPin);
 
 *特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/UIFlow).*
 
-<img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_02.png" width="69%" height="69%">
+<img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_03.png">
 
 ## 回路図
 

docs/ja/unit/button.md

@@ -19,18 +19,38 @@
 
 ### 1. Arduino IDE
 
+*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/Arduino)。*
+
+```arduino
+#include <M5Stack.h>
+
+// declaration
+int cur_value = 0;
+
+// initialization
+M5.begin();// init
+pinMode(36, INPUT);// BUTTON Pin
+
+// read data
+cur_value = digitalRead(36);// read the value of BUTTON
+M5.update();
+```
 
 ### 2. UIFlow
 
+*特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/UIFlow)。*
+
+<img src="assets/img/product_pics/unit/unit_example/BUTTON/example_unit_button_03.png">
+
 ## 回路図
 
-<!-- <img src="assets/img/product_pics/unit/button_sch.JPG"> -->
+<img src="assets/img/product_pics/unit/button_sch.JPG">
 
 ### ピンマッピング
 
 <table>
  <tr><td>M5Core(GROVEインターフェースB)</td><td>GPIO36</td><td>GPIO26</td><td>5V</td><td>GND</td></tr>
- <tr><td>BUTTON Unit</td><td>GPIO36</td><td>GPIO26</td><td>5V</td><td>GND</td></tr>
+ <tr><td>BUTTON Unit</td><td>Button Pin</td><td> </td><td>5V</td><td>GND</td></tr>
 </table>
 
 ## 関連リンク

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).*
 
-<img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_01.png"  width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_02.png"  width="50%" height="50%">
+<img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_03.png"  width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_02.png"  width="50%" height="50%">
 
 ## 回路図
 

docs/ja/unit/ncir.md

@@ -54,6 +54,12 @@ result |= Wire.read() << 8;// Receive DATA
 temperature = result * 0.02 - 273.15;
 ```
 
+### 2. 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">
+
 ## 回路図
 
 <img src="assets/img/product_pics/unit/ncir_sch.JPG">

docs/ja/unit/pir.md

@@ -38,7 +38,7 @@ M5.update();
 
 *特定のルーチンについてはここをクリックしてください[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/UIFlow).*
 
-<img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_02.png" width="65%" height="65%">
+<img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_03.png">
 
 ## 回路図
 

docs/zh_CN/unit/angle.md

@@ -48,7 +48,7 @@ cur_sensorValue = analogRead(sensorPin);
 
 *具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/UIFlow)。*
 
-<img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_02.png" width="69%" height="69%">
+<img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_03.png">
 
 ## 原理图
 

docs/zh_CN/unit/button.md

@@ -49,7 +49,7 @@ M5.update();
 
 <!-- <img src="assets/img/product_pics/unit/unit_example/DUAL_BUTTON/1.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/DUAL_BUTTON/2.png" width="55%" height="55%"><img src="assets/img/product_pics/unit/unit_example/DUAL_BUTTON/3.png" width="55%" height="55%"> -->
 
-<img src="assets/img/product_pics/unit/unit_example/BUTTON/example_unit_button_04.png" width="55%" height="55%">
+<img src="assets/img/product_pics/unit/unit_example/BUTTON/example_unit_button_03.png">
 
  <!-- width="30%" height="30%" -->
 

docs/zh_CN/unit/ir.md

@@ -51,7 +51,7 @@ cur_recv_value = digitalRead(ir_recv_pin);// read the status of receiver
 
 *具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/UIFlow)。*
 
-<img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_01.png"  width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_02.png"  width="50%" height="50%">
+<img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_03.png">
 
 ## 原理图
 

docs/zh_CN/unit/ncir.md

@@ -62,11 +62,11 @@ result |= Wire.read() << 8;// Receive DATA
 temperature = result * 0.02 - 273.15;
 ```
 
-<!-- ### 2. UIFlow
+### 2. UIFlow
 
-<img src="assets/img/product_pics/unit/unit_example/example_unit_ncir_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/example_unit_ncir_02.png" width="55%" height="55%">
+*具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NCIR/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">
 
 ## 原理图
 

docs/zh_CN/unit/pir.md

@@ -47,7 +47,7 @@ M5.update();
 
 *具体例程请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/UIFlow)。*
 
-<img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_02.png" width="65%" height="65%">
+<img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_03.png">
 
 ## 原理图