Merge branch 'master' of https://github.com/m5stack/m5-docs

docs/assets/css/main.css

@@ -2,9 +2,14 @@
     --theme-color: hsl(204, 90%, 45%);
 }
 
+a {
+    text-decoration: none !important;  
+}
+
+
 .markdown-section {
     max-width: 80%;
-    margin-top: 50px;
+    margin-top: 25px;
 }
 
 .markdown-section a {
@@ -26,6 +31,17 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
     padding: 0;
 }
 
+
+body[data-page="zh_CN/arduino/arduino_home_page.md"] article.markdown-section {
+    max-width: 100%;
+    padding: 0;
+}
+
+body[data-page="en/arduino/arduino_home_page.md"] article.markdown-section {
+    max-width: 100%;
+    padding: 0;
+}
+
 .pic{
     width:30%; 
 }
@@ -70,42 +86,78 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
 .related_links {
 
     position: fixed;
-    top:20%;
-    right: 4%;
-    z-index: 9999;
+    top:35%;
+    right: 0px;
+    z-index: 900;
+    width: 50px;
 }
 
 
 .related_links a {
     display: block;
-    background-color: #041e36;
-    width: 80px;
-    height: 80px;
+    /* background-color: #555555; */
+    width: 50px;
+    height: 50px;
     text-decoration:none;
+    transition:all .25s ease;
+    float: right;
 }
 
+
+.related_links a:first-child {
+    border-top-left-radius: 3px;
+    background-color: #76c5f0;
+}
+
+.related_links a:nth-child(2) {
+    background-color: #007cc2;
+}
+
+.related_links a:nth-child(3) {
+    background-color: #dc214c;
+}
+
+.related_links a:nth-child(4) {
+    border-bottom-left-radius: 3px;
+    background-color: #1f1a17;
+}
+
+
+
 .related_links a:hover {
-    background-color: #007bff;
+    width: 90px;
 }
 
-.related_links img {
 
+.related_links a img {
     position: relative;
-    top:12px;
-    left: 22px;
-    width: 36px;
+    top:5px;
+    left: 5px;
+    width: 40px;
 }
 
-.related_links div {
+.related_links a:nth-child(4) img{
+    top:3.5px;
+    left: 3.5px; 
+    width: 43px;
+}
 
+
+.related_links div img {
     position: relative;
-    top:15px;
-    width: 80px;
-    color: white;
-    text-align: center;
-    
+    top:10px;
+    left: 0px;
+    width: 50px;
+    /* background-color:red ; */
+    transition: all .25s ease;
 }
 
+.related_links div img:hover {
+    transform: scale(1.05);
+}
+
+
+
 @media screen and (max-width: 768px) {
     .related_links {
         display: none;
@@ -164,6 +216,7 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
 .dropdown{
     display: inline-block;
     transition:all .25s ease;
+    color: #343a40;
 }
 
 .dropdown div{
@@ -174,19 +227,20 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
     /* border: 1px solid rgba(0,0,0,.15);
     border-radius: .25rem; */
     transition:all .25s ease;
-    left: -60px;
+    left: -44px;
     text-align: center;
-    top: 50px;
+    top: 40px;
+    z-index: 1001;
+    
 }
 
 .dropdown:hover {
     box-shadow: 0px 2px 0 0 #007bff;
+    color: #007bff;
 }
 
 
 .dropdown:hover div{
-
-    will-change: transform;
     min-width: 10rem;
     padding: .5rem 0;
     margin: .125rem 0 0;
@@ -195,12 +249,17 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
     list-style: none;
     background-clip: padding-box;
     height: max-content;
+    box-shadow: 0px 12px 11px 0px #888888;
 }
 
 
+.dropdown div a:hover{
+    color:#007bff !important;
+}
 
-
-
+.dropdown div a:active{
+    background-color:#cccccc !important;
+}
 
 
 

docs/en/arduino/arduino_api.md

@@ -1,21 +1,21 @@
-# Arduino API {docsify-ignore-all}
-
-## M5Core
-
-|||
-|:---:|:---:|
-|**[System](en/api/system)** | **[Speaker](en/api/speaker)** |
-|**[LCD](en/api/lcd)** | **[Button](en/api/button)** |
-|**[IMU Sensor(MPU9250)](en/api/mpu9250)** | **[TF Card](en/api/tf)** |
-|**[Power](en/api/power)** |**[I/O](en/api/gpio)** |
-|**[I2C Communication](en/api/commutil)** | **[WIFI](en/api/wifi)**|
-|**[Timer](en/api/ticker)**|
-
-
-## M5StickC
-
-|||
-|:---:|:---:|
-|**[System](en/api/system_m5stickc)** | **[Power Management(AXP192)](en/api/axp192_m5stickc)** |
-|**[TFT Screen](en/api/lcd_m5stickc)** | **[IMU(SH200Q)](en/api/sh200q_m5stickc)** |
-|**[RTC](en/api/rtc)**|
+# Arduino API {docsify-ignore-all}
+
+## M5Core
+
+|||
+|:---:|:---:|
+|**[System](en/api/system)** | **[Speaker](en/api/speaker)** |
+|**[LCD](en/api/lcd)** | **[Button](en/api/button)** |
+|**[IMU Sensor(MPU9250)](en/api/mpu9250)** | **[TF Card](en/api/tf)** |
+|**[Power](en/api/power)** |**[I/O](en/api/gpio)** |
+|**[I2C Communication](en/api/commutil)** | **[WIFI](en/api/wifi)**|
+|**[Timer](en/api/ticker)**|
+
+
+## M5StickC
+
+|||
+|:---:|:---:|
+|**[System](en/api/system_m5stickc)** | **[Power Management(AXP192)](en/api/axp192_m5stickc)** |
+|**[TFT Screen](en/api/lcd_m5stickc)** | **[IMU(SH200Q)](en/api/sh200q_m5stickc)** |
+|**[RTC](en/api/rtc)**|

docs/en/arduino/arduino_development.md

@@ -0,0 +1,101 @@
+# Arduino IDE Development{docsify-ignore-all}
+
+
+1. [Install Arduino-IDE](#Install-Arduino-IDE)
+
+2. [Install ESP32 Board](#Install-ESP32-Board)
+
+3. [Install M5Stack Library](#Install-M5Stack-Library)
+
+4. [Install USB Driver](#Install-USB-Driver)
+
+## Install Arduino-IDE
+
+
+>[Click here to visit Arduino's official website](https://www.arduino.cc/en/Main/Software),Select the installation package for your own operating system to download.
+
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_install.jpg">
+
+
+## Install ESP32 Board
+
+>1.Open up Arduino IDE, navigate to `File`->`Peferences`->`Settings`
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_1.jpg">
+
+>2.Copy the following ESP32 Boards Manager url to `Additional Boards Manager URLs:`
+
+**https://dl.espressif.com/dl/package_esp32_index.json**
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_2.jpg">
+
+>3.Navigate to `Tools`->`Board:`->`Boards Manager...`
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_3.jpg">
+
+>4.Search `ESP32` in the pop-up window, find it and  click `Install`
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_4.jpg">
+
+>5.select `Tools`->`Board:`->`ESP32`
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_5.jpg">
+
+## Install M5Stack Library
+
+>Different hardware devices, with different case libraries, please choose to download according to the device you use..Open Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_6.jpg">
+
+### For M5Core and M5Stick
+
+?>Search `M5Stack`  , find it and click `Install`
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_7.jpg">
+
+### For M5Stick-C
+
+?>Search `M5StickC` , find it and click `Install`
+
+<img src="assets/img/related_documents/Arduino_IDE/Arduino_8.jpg">
+
+## Install USB Driver
+
+>1.Click on the CP210X driver for your operating system below to download.
+
+<div class="link">
+
+ <h4><span>CP210X Driver:</span></h4>
+    <p>
+    <a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/drivers/CP210x_VCP_Windows.zip" target="_blank" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/0056/7689/2250/files/windows_89cc6ea0-2a3c-4327-97e5-8f51f448c38b_icon.png?v=1557026574" alt="">Windows</a>
+    <a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/drivers/CP210x_VCP_MacOS.zip" target="_blank" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/0056/7689/2250/files/mac_large.png?v=1557026570" alt="">MacOS</a>
+    <a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/drivers/CP210x_VCP_Linux.zip" target="_blank" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/0056/7689/2250/files/linux_icon.png?v=1557026584" alt="">Linux</a>
+    </p>
+</div>
+
+
+
+### For Windows
+
+>Unzip the downloaded driver package, select the installer for your operating system, and double-click to install.
+
+<img src="assets/img/related_documents/Arduino_IDE/CP210X_WIN.jpg">
+
+
+### For Mac
+
+>Unzip the downloaded driver package, install the program, double-click the image file to start the installation..
+
+<img src="assets/img/related_documents/Arduino_IDE/CP210X_MAC.png">
+
+
+<style>
+
+.link a{
+
+    padding-left: 13%;
+
+}
+
+</style>s

docs/en/arduino/arduino_home_page.md

@@ -0,0 +1,34 @@
+<div class="container uiflow_banner">
+      <div>
+        <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/arduino_home_page.jpg">
+      </div>
+      <div style="margin-top:30px">
+        <h1 class="jumbotron-heading">Arduino IDE</h1>
+        <p class="lead text-muted">A familiar development platform for electronic enthusiasts</p>
+        <p>
+          <a href="https://www.arduino.cn/forum-152-1.html" target="view_window" class="btn btn-primary my-2" style="color:white;text-decoration:none">Arduino forum</a>
+          <a class="btn btn-secondary my-2" style="color:white;text-decoration:none" onclick= page_move("tutorial")>Tutorial</a>
+        </p>
+      </div>
+  </div>
+
+
+
+<div class="container" style="margin-top:60px" id="tutorial">
+<div class="row">
+          <div class="col-md-4">
+            <h2>Introduction</h2>
+            <p class="uiflow_p">Explain several preparations before using Arduino, including software download of Arduino IDE, and related environment configuration. </p>
+            <p><a class="btn btn-secondary" href="#/en/arduino/arduino_development" role="button">View details »</a></p>
+          </div>
+          <div class="col-md-4">
+            <h2>Arduino API</h2>
+            <p class="uiflow_p">The Arduino function library provided by M5Stack. </p>
+            <p><a class="btn btn-secondary" href="#/en/arduino/arduino_api" role="button">View details »</a></p>
+          </div>
+  </div>
+
+</div>
+
+
+<br><br><br><br>

docs/en/case.md

@@ -1,6 +1,6 @@
 # M5Stack Cases {docsify-ignore-all}
 
-## M5Stack Awesome
+## M5Stack User Cases
 
 * [M5Stack-SD-Updater](https://github.com/tobozo/M5Stack-SD-Updater) - Customizable menu system for M5Stack - loads apps from the Micro SD card
 

docs/en/core/basic.md

@@ -10,10 +10,10 @@
 
 **M5Stack BASIC Kit**, like its namesake, is a starter kit among the M5Stack development kit series.  Its modular, stackable, scalable, and portable device is powered with an ESP-32 core,  which makes it open source, low cost, full-function, and easy for developers to handle new product development on all stages include circuit design, PCB design, software, mold design and production. This Basic kit provides a friendly price and full-featured resources which makes it a good starter kit for you to explore IoT.
 
-*Ever wanted to explore the fastest way of IoT prototyping, M5Stack development board is the perfect solution. Not like others, M5Stack development board is highly productlized, covered with industrial grade case, and **ESP32-based** development board. **ESP32** is a hybid Wi-Fi & Bluetooth chip contains a dual-core and 4MB of SPI Flash . Together with 30+ M5Stack [stackable modules](https://docs.m5stack.com/#/en/?id=module) , 40+ [extendable units](https://docs.m5stack.com/#/en/?id=unit), and different levels of program language, you can create and verify your IoT product in a very short time.
-Supported development platforms and program languages: Arduino, Blockly language with [UIFlow](http://flow.m5stack.com), [Micropython](http://www.micropython.org). Regardless of what level program skill you have, M5Stack would guide you in every step of the way to realize your idea as well as to the final productilization.*
+Ever wanted to explore the fastest way of IoT prototyping, M5Stack development board is the perfect solution. Not like others, M5Stack development board is highly productlized, covered with industrial grade case, and **ESP32-based** development board. **ESP32** is a hybid Wi-Fi & Bluetooth chip contains a dual-core and 4MB of SPI Flash . Together with 30+ M5Stack [stackable modules](https://docs.m5stack.com/#/en/?id=module) , 40+ [extendable units](https://docs.m5stack.com/#/en/?id=unit), and different levels of program language, you can create and verify your IoT product in a very short time.
+Supported development platforms and program languages: Arduino, Blockly language with [UIFlow](http://flow.m5stack.com), [Micropython](http://www.micropython.org). Regardless of what level program skill you have, M5Stack would guide you in every step of the way to realize your idea as well as to the final productilization.
 
-*If you ever played with ESP8266, you would realize that ESP32 is a perfect upgrade from ESP8266. In comparison, ESP32 is full-feathered with more GPIO, plenty of analog inputs and two analog outputs, multiple extra perpherials( like a spare UART ). Official development platform ESP-IDF have planted with FreeRTOS. With dual-core and real time OS you can get more organized code and much high speed processor.*
+If you ever played with ESP8266, you would realize that ESP32 is a perfect upgrade from ESP8266. In comparison, ESP32 is full-feathered with more GPIO, plenty of analog inputs and two analog outputs, multiple extra perpherials( like a spare UART ). Official development platform ESP-IDF have planted with FreeRTOS. With dual-core and real time OS you can get more organized code and much high speed processor.
 
 M5Stack Basic is consist with two separable parts. the upside part has all kinds of processor, chips and some other slot components.  The [bottom](https://docs.m5stack.com/#/en/base/core_bottom) part has a lithium battery, [M-BUS](https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_schematic/M-BUS.png) socket and extendable pins on both sides.
 

docs/en/core/face_kit.md

@@ -1,6 +1,6 @@
 # FACES Kit {docsify-ignore-all}
 
-<img src="assets/img/product_pics/core/faces_kit/face_01.jpg" width="30%" height="30%" ><img src="assets/img/product_pics/core/faces_kit/face_02.jpg" width="30%" height="30%" ><img src="assets/img/product_pics/core/faces_kit/face_03.jpg" width="30%" height="30%" >
+<img src="assets/img/product_pics/core/faces_kit/face_01.webp" width="30%"><img src="assets/img/product_pics/core/faces_kit/face_02.jpg" width="30%"><img src="assets/img/product_pics/core/faces_kit/face_03.jpg" width="30%">
 
 :memo:**[Description](#Description)**&nbsp;&nbsp;&nbsp;:bulb:**[Quick Start](en/quick_start/m5core/m5stack_core_quick_start)**&nbsp;&nbsp;&nbsp;:octocat:**[Example](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/FACES)**&nbsp;&nbsp;&nbsp;:electric_plug:**[Schematic](https://github.com/m5stack/M5-Schematic/blob/master/Core/Basic/M5-Core-Schematic(20171206).pdf)**&nbsp;&nbsp;&nbsp;🛒**[Purchase](https://m5stack.com/collections/m5-core/products/face)**&nbsp;&nbsp;&nbsp;
 

docs/en/core/fire.md

@@ -1,12 +1,12 @@
 # FIRE {docsify-ignore-all}
 
-<img src="assets/img/product_pics/core/fire/product_pic_fire.png" alt="fire_01" width="350" height="350"> <img src="assets/img/product_pics/core/fire/m5_fire_01.png" width="350" height="350">
+<img src="assets/img/product_pics/core/fire/product_pic_fire.png" alt="fire_01" width="350" height="350"> <img src="assets/img/product_pics/core/fire/m5_fire_01.webp" width="350" height="350">
 
 * * *
 
 :memo:**[Description](#Description)**&nbsp;&nbsp;&nbsp;:bulb:**[Quick Start](en/quick_start/m5core/m5stack_core_quick_start)**&nbsp;&nbsp;&nbsp;:octocat:**[Example](https://github.com/m5stack/M5Stack/tree/master/examples/Basics)**&nbsp;&nbsp;&nbsp;:electric_plug:**[Schematic](https://github.com/m5stack/M5-Schematic/blob/master/Core/Basic/M5-Core-Schematic(20171206).pdf)**&nbsp;&nbsp;&nbsp;🛒**[Purchase](https://m5stack.com/collections/m5-core/products/fire-iot-development-kit)**&nbsp;&nbsp;&nbsp;:clapper:**[Related Video](#Related-Video)**
 
-## Description
+## Description 
 
 **M5Stack FIRE Kit** is a upgrade from the Gray kits,except the 9-Axis IMU sensor. It provides more hardware resources : 16M Flash + 4M PSRAM , enhanced Base (M5GO Base and M5GO CHG Base), larger battery, etc.
 
@@ -49,7 +49,7 @@ The GPIO 16 / 17 in Fire is connected to the PSRAM by default, so when you conne
 - Case Material: PC + ABS
 - 16 MB Flash
 - 4 MB PSRAM
-- BMM150 + SH200Q/MPU6886
+- BMM150 + MPU6886
 - Speaker, 3 Buttons, LCD(320*240), 1 Reset
 - 2.4G Antenna: Proant 440
 - TF card slot (16G Maximum size)