fix pdf func CROS and add V-function tutorial

docs/assets/js/custom.js

@@ -35,13 +35,13 @@ var header = new Vue({
         anchor: [],
         platform:{},
         activeIndex: '1',
-        activeIndex2: '1'
+        pdf_notify: ''
     },
     methods: {
-            loading() {
+            loading(str) {
                 const loading = this.$loading({
                 lock: true,
-                text: 'Loading',
+                text: str,
                 spinner: 'el-icon-loading',
                 background: 'rgba(0, 0, 0, 0.7)'
                 });
@@ -52,7 +52,7 @@ var header = new Vue({
             }
         },
     mounted(){
-        this.loading()
+        this.loading('Loading')
     }
 })
 
@@ -389,6 +389,7 @@ function change_title(language) {
         header.platform_list_title = "Platform|API";
         header.faq_title = "FAQ";
         header.case_title = "Cases";
+        header.pdf_notify = "Creating PDF.....";
     } 
     if(language == "zh_CN"){
         header.platform = {
@@ -407,6 +408,7 @@ function change_title(language) {
         header.platform_list_title = "编程平台|API";
         header.faq_title = "常见问题";
         header.case_title = "社区案例";
+        header.pdf_notify = "正在生成PDF，请稍等。";
     }
 }
 function language(language) {
@@ -507,12 +509,22 @@ page_loading();
 
 
 function creat_pdf() {
+    window.header.loading(window.header.pdf_notify);
+    window.header.$notify({
+        title: 'M5Stack-Docs',
+        message: window.header.pdf_notify,
+        offset: 150
+      });
     $('html, body').animate({scrollTop: 0}, 0); 
     $(".anchor-box").css("display","none");
     $(".related_links").css("display","none");
     $(".easyloader-box").css("display","none");
-    var target = document.getElementsByClassName("#main")[0];
+    var target = document.getElementsByTagName('body');
     html2canvas(target, {
+        useCORS: true,
+        logging:true,
+        scale: 2,
+        background: '#FFFFFF',
         onrendered:function(canvas) {
             var contentWidth = canvas.width;
             var contentHeight = canvas.height;
@@ -547,6 +559,9 @@ function creat_pdf() {
         $(".anchor-box").removeAttr("style");
         $(".related_links").removeAttr("style");
         $(".easyloader-box").removeAttr("style");
+        setTimeout(function(){
+            window.header.done();
+        },600)
     }
 
 $(document).on("keypress", "form", function(event) { return event.keyCode != 13;});

docs/assets/js/docify.js

@@ -441,18 +441,13 @@
     !barEl && init();
   
     if (step) {
-      num = parseInt(barEl.style.width || 0, 10) + step;
+      // num = parseInt(barEl.style.width || 0, 10) + step;
+      num = num + step;
       num = num > 80 ? 80 : num;
     } else {
       num = Math.floor(loaded / total * 100);
     }
 
-
-    // ProgressBar.percentage = num >= 95 ? '100' : num;
-    // barE2.style.display = "block";
-    // barEl.style.opacity = 1;
-    // barEl.style.width = num >= 95 ? '100%' : num + '%';
-
     if (num == Infinity) {
       // barEl.innerText = "100%";
     }else {

docs/assets/js/docify.min.js

@@ -36,7 +36,7 @@ var innerHTML='';toc.forEach(function(node){innerHTML+="<li><a class=\"section-l
 function helper(className,content){return("<p class=\""+className+"\">"+(content.slice(5).trim())+"</p>")}
 function theme(color){return("<style>:root{--theme-color: "+color+";}</style>")}
 var barEl;var timeId;function init(){}
-function progressbar(ref){var loaded=ref.loaded;var total=ref.total;var step=ref.step;var num;!barEl&&init();if(step){num=parseInt(barEl.style.width||0,10)+step;num=num>80?80:num;}else{num=Math.floor(loaded/total*100);}
+function progressbar(ref){var loaded=ref.loaded;var total=ref.total;var step=ref.step;var num;!barEl&&init();if(step){num=num+step;num=num>80?80:num;}else{num=Math.floor(loaded/total*100);}
 if(num==Infinity){}else{}
 if(num>=95){clearTimeout(timeId);timeId=setTimeout(function(_){window.header.done();isSupportWebp();img_zoom();},200);}}
 var cache={};function get(url,hasBar,headers){if(hasBar===void 0)hasBar=false;if(headers===void 0)headers={};var xhr=new XMLHttpRequest();var on=function(){xhr.addEventListener.apply(xhr,arguments);};var cached$$1=cache[url];if(cached$$1){return{then:function(cb){return cb(cached$$1.content,cached$$1.opt);},abort:noop}}

docs/en/atom/atomfly.md

@@ -10,7 +10,7 @@
 
 ## USAGE
 
-<img src="assets/img/product_pics/atom_base/atomFly/atomfly_01.webp" width = "10%">
+<img src="assets/img/product_pics/atom_base/atomFly/atomfly_01.webp" width = "40%">
 
 All hardware functions of the AtomFLY Kit are tested before leaving the factory. Atom Lite does not have any built-in firmware. The programs provided below only provide basic function tests. You need to program yourself to achieve the purpose of remote control flight. Please pay attention to safety during the test and keep your body away from the propeller to prevent accidents. Lithium battery is charged using the supplied charging cable, and the battery charging status is observed through the indicator lights. Red led means charging, and green led means already fully charged(About 30 minutes). Unplug the charger in time after the battery is full to prevent damage caused by overcharging the battery.
 

docs/en/core/m5stickv.md

@@ -4,6 +4,10 @@
 
 <div class="product_pic"><img src="assets\img\product_pics\core\minicore\m5stickv/m5stickv_01.webp"><img src="assets\img\product_pics\core\minicore\m5stickv/m5stickv_02.webp"></div>
 
+<a href="#/en/quick_start/unitv/v_function"><h2>V-Function</h2></a>
+
+V-Function is a series of **visual recognition** function firmware developed by the M5Stack team for V series devices. Click the V-Funciton title to view the instructions.
+
 ## Description
 
 M5Stack recently launched the new AIoT(AI+IoT) Camera powered by Kendryte K210 -an edge computing system-on-chip(SoC) with dual-core 64bit RISC-V CPU and advanced neural network processor..

docs/en/quick_start/m5stickv/m5stickv_quick_start.md

@@ -195,6 +195,10 @@ Linux command line to run permissions, then execute commands
 <a href="#/en/related_documents/v-training"><button type="button" class="btn btn-primary">V-Training Document</button></a>
 
 
+<a href="#/en/quick_start/unitv/v_function"><h2>V-Function</h2></a>
+
+V-Function is a series of **visual recognition** function firmware developed by the M5Stack team for V series devices. Click the V-Funciton title to view the instructions.
+
 
 **Video Tutorial**
 

docs/en/quick_start/unitv/unitv_quick_start.md

@@ -281,6 +281,11 @@ In the library documentation, you can find more APIs to help you build a variety
 <a href="https://github.com/sipeed/MaixPy/tree/master/projects/maixpy_m5stickv"><button type="button" class="btn btn-primary">Github</button></a>
 
 
+<a href="#/en/quick_start/unitv/v_function"><h2>V-Function</h2></a>
+
+V-Function is a series of **visual recognition** function firmware developed by the M5Stack team for V series devices. Click the V-Funciton title to view the instructions.
+
+
 <script>
    anchor_search();
    scrollFunc();

docs/en/quick_start/unitv/v_function.md

@@ -0,0 +1,160 @@
+# V-function
+
+?>This tutorial applies to M5StickV/UnitV
+
+<el-steps :active="5" simple>
+  <el-step onclick="page_move('description')" title="Description" icon="el-icon-guide"></el-step>
+  <el-step onclick="page_move('burn-firmware')" title="Burn firmware" icon="el-icon-download"></el-step>
+  <el-step onclick="page_move('uiflow-usage')" title="UIFlow Usage" icon="el-icon-monitor"></el-step>
+  <el-step onclick="page_move('example')" title="Example" icon="el-icon-s-promotion"></el-step>
+  <el-step onclick="page_move('protocol')" title="Protocol" icon="el-icon-tickets"></el-step>
+</el-steps>
+
+
+## Description
+
+V-Function is a series of **visual recognition** functional firmware developed by the M5Stack team for V series devices. Based on different functional firmware (target trace, motion detection, etc.), users can quickly build visual recognition functions. This tutorial will show you how to burn firmware into your device and call it through UIFlow graphical programming.
+
+<el-card class="box-card" style="margin-bottom:20px">
+    <div slot="header" class="clearfix">
+        <span>Firmware List</span>
+        <i class="el-icon-s-management" style="float: right;"></i>
+    </div>
+    <div style="margin: 0px 10px 10px 0px ;display:inline-block;">
+        <el-tag onclick="page_move('motion-detect')">Motion detect</el-tag>
+        <el-tag onclick="page_move('target-trace')">Target Trace</el-tag>
+    </div>
+</el-card>
+
+
+## Burn firmware
+
+>Please download the corresponding M5Burner firmware burning tool according to the operating system you are using. Unzip and open the application.
+
+<div class="files_download">
+   <p class="item">
+      <a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/M5Burner.zip">
+      <img src="/image/base/Windows_logo.webp" width="50">
+      <span class="item-title">Windows10</span>
+      </a>
+   </p>
+
+   <p class="item">
+      <a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/M5Burner_MacOS.zip">
+      <img src="/image/base/MacOS_logo.webp" width="50"> 
+      <span class="item-title">MacOS</span>
+      </a>
+   </p>
+
+   <p class="item">
+      <a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/software/M5Burner_Linux.zip">
+      <img src="/image/base/Linux_logo.webp" width="50"> 
+      <span class="item-title">Linux</span>
+      </a>
+   </p>
+</div>
+
+
+<img src="assets/img/getting_started_pics/how_to_burn_firmware/M5Burner/M5Burner_01.webp">
+
+?>Note: After the installation of MacOS users, please put the application into the Application folder, as shown below.
+
+><img src="/image/base/application.webp" width="70%"> 
+
+?>Note: For Linux users, please switch to the decompressed file path and run `./M5Burner` in the terminal to run the application.
+
+
+>Select the device as M5StickV/UnitV in the device bar on the left, and select the corresponding function firmware according to the usage requirements to download. Connect the device to the computer through the data cable, select the corresponding port, and click Burn to start burning.
+
+<img src="assets\img\quick_start\v_function\v_function01.webp" width="80%"> 
+
+> When the burning log prompts `Burn Successfully`, it means that the firmware has been burned.
+
+<img src="assets\img\quick_start\v_function\v_function02.webp" width="80%"> 
+
+
+## UIFlow Usage
+
+### Usage
+
+> The M5StickV/UnitV with the function firmware burned will be used as a slave device in the form of Unit, so users need to use other M5 host devices to interact with it. For the basic usage and operation of UIFlow of other master products, please visit the corresponding product documentation page to obtain it.
+
+>Visit https://flow.m5stack.com/ to enter UIFlow. Click the Unit add button in the function panel on the right and select UnitV extension to add it. When adding, please configure according to the actual port used. Click ok to add.
+
+<img src="assets\img\quick_start\v_function\v_function03.webp" width="100%"> 
+
+>After the addition is complete, you can find the included function block in the Unit option in the function block menu. Drag and drop it to the programming area on the right to use it. For more details, please see the case program below.
+
+<img src="assets\img\quick_start\v_function\v_function04.webp" width="80%"> 
+
+### Precautions
+
+>After using the slave device (M5StickV/UnitV) to connect to the main control, if there is a situation where the main control end cannot obtain data, please restart M5StickV/UnitV. Wait for the firmware to start successfully and try to connect again.
+
+## Example
+
+
+### Motion detect
+
+>Detect the change of the picture on the view, and judge whether there is motion of the target in the detection area.
+
+<img src="assets\img\quick_start\v_function\motion_detect.webp" width="50%"> 
+
+>Program block introduction
+
+- `init`
+   + initialization
+
+- `Set detect threshold`
+   + Set the change rate threshold: When the pixel whose change is less than this value is not considered to have changed, its change is not included in the total rate of difference.
+
+- `Set detect mode`
+   + dynamic： Dynamic detection mode, after configuration will continuous to take pictures, compare the changes between the two frames before and after
+   + static：In static detection mode, a reference picture will be taken and saved after execution, and subsequent pictures will be continuously compared with this picture. If you need to take a new reference picture, you need to switch back to the motion detection mode first, and then perform the static detection mode setting again.
+
+- `Get rate of difference`
+   + rate of difference : Detect the change amount of changed pixels between two frames before and after comparison. Assuming that 2 pixels have changed, pixel A has changed by 27, and pixel B has changed by 10, then the change value is 27+10=37. The sum of the differences of the R.G.B components of the two pixels is the amount of change.
+
+- `Get max difference`
+   + max difference: the amount of change in the pixel that changes most drastically. 
+
+>Program case: Enable the dynamic detection mode, and determine whether there is movement of the target in the screen by reading the maximum change rate value of the screen. When the change rate value is greater than the expected value, "Moved" is displayed, otherwise "Not Move" is displayed. The screen displays the current maximum rate of change value.
+
+<img src="assets\img\quick_start\v_function\motion_detect_example_01.webp" width="100%">
+
+<img src="assets\img\quick_start\v_function\motion_detect_example_02.webp" width="100%">
+
+
+
+### Target Trace
+
+>Set the tracking target to obtain the position information of the target target in the screen in real time.
+
+<img src="assets\img\quick_start\v_function\target_detect.webp" width="50%">
+
+>Program block introduction
+
+- `init`
+   + initialization
+
+- `Set trace area`
+   + Set the frame selection target, the parameter is the position of the current target on the image (select as far as possible the target with significant color characteristics)
+
+- `Get trace area coordinate`
+   + Read the coordinates of the image on which the marquee selection target is located, the return value is a list, which contains the coordinates of the upper left corner of the marquee x, y and the width and height of the marquee
+
+- `Get trace area center coordinate`
+   + Read the center coordinates of the image where the frame selection target is located, and the return value is in the form of a list, which contains the center coordinates x, y of the frame selection.
+
+>Program case: Set the frame selection target by pressing button A, read the target coordinate value, used to control the movement of rectangular elements on the screen, and simulate the display of the target's trajectory
+
+<img src="assets\img\quick_start\v_function\target_detect_example_01.webp" width="100%">
+
+<img src="assets\img\quick_start\v_function\target_detect_example_02.webp" width="100%">
+
+
+## Protocol
+
+>Click the button below to download the Protocol format table. The user can use it to analyze the data format and connect the V-function to other programming platforms.
+
+<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/V-Function%20Data%20Packet%20%20format.xlsx"><el-button type="primary">Download Protocol table</el-button></a>