docs/index_source.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Arduino. The tutorials for M5Burner, Firmware, Burning, programming. ESP32,M5StickC,StickV, StickT,M5ATOM.">
    <meta name="google-site-verification" content="sYDlVf68aDW21U32H46j1P4YDSimljEGHBEMi4JRxQ8" />
    <title>M5Stack Docs - The reference docs for M5Stack products.</title>
    <base target="_blank">
    <link rel="icon" href="./assets/img/favicon.ico">
    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0.7.2/dist/css/theme-simple.css" title="Simple">
    <!-- <link rel="stylesheet" href="./assets/css/main.css"> -->
    <link rel="stylesheet" href="https://static-cdn.m5stack.com/resource/docs/assets/main-min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
</head>

<body id="body">
    <div id="search">
        <div class="search">
            <form action="" method="get" accept-charset="utf-8">
                <input ref="InputTarget" type="text" placeholder="Search" :style="SearchInputClass" v-model="SearchKW">
                <a @click="InputTaggle()" id="search_button" class="search-btn"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"></circle><path d="M21 21l-5.2-5.2"></path></svg></a>
            </form>
        </div>
        <div id="search_cover" v-show="InputShowStatus" @click="InputTaggle">
            <div id="search_contant_box" @click.stop="">
                <div id="close_search" @click="InputTaggle">
                    <i class="el-icon-circle-close" style="color: rgb(15 16 16 / 78%);border-radius: 50%;"></i>
                </div>
                <el-tabs v-model="activeName">
                    <el-tab-pane :label="current_page_title" name="first">
                        <div id="product_result"></div>
                    </el-tab-pane>
                    <el-tab-pane :label="related_page_title" name="second" >
                        <div :key='index' v-for='(key,index) in contant_result'>
                            <a :href='key.url'><span v-html='key.name'></span><span v-html='key.contant' style="color: #47a1fe;"></span></a>
                            <el-divider></el-divider>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
    <transition id="zoom_image" name="el-zoom-in-bottom">
    <div v-show="show" v-cloak class="demo-image__preview" style="position: fixed;z-index: 9999;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 100%;height: 100%;">
        <transition name="el-zoom-in-bottom">
        <div tabindex="-1" v-show="show" class="el-image-viewer__wrapper transition-box" style="z-index: 2000;">
            <div class="el-image-viewer__mask" @click="close()"></div>
                <span class="el-image-viewer__btn el-image-viewer__close" @click="close()" style="z-index: 2000;">
                    <i class="el-icon-circle-close" style="color: #00ff5ac7;box-shadow: 0 0 10px #00ff5ac7; border-radius: 50%;"></i>
                </span>
                <span class="el-image-viewer__btn el-image-viewer__prev" @click="prev" style="z-index: 2000;">
                    <i class="el-icon-arrow-left"></i>
                </span>
                <span class="el-image-viewer__btn el-image-viewer__next" @click="next()" style="z-index: 2000;">
                    <i class="el-icon-arrow-right"></i>
                </span>
                    <div class="el-image-viewer__btn el-image-viewer__actions" style="z-index: 2000;">
                        <div class="el-image-viewer__actions__inner">
                            <i @click="zoom_out" class="el-icon-zoom-out"></i>
                            <i @click="zoom_in" class="el-icon-zoom-in"></i>
                            <i class="el-image-viewer__actions__divider"></i>
                            <i @click="full" class="el-icon-full-screen"></i>
                            <i class="el-image-viewer__actions__divider"></i>
                            <i @click="left" class="el-icon-refresh-left"></i>
                            <i @click="right" class="el-icon-refresh-right"></i>
                        </div>
                    </div>
            <div class="el-image-viewer__canvas" @mousewheel="rollImg(this)">
                <img :src="url" class="el-image-viewer__img" :style="img_style" draggable="false" @mousedown="startDrag(this)" @mouseup="dragImgEnd(this)" @mousemove="dragImg(this)">
            </div>
        </div>
        </transition>
    </div>
</transition>

<div id='header'>
    <div id="pc_header">
        <header>
            <div class="container" v-cloak>
                <div class="logo">
                    <a :href="CurrentLanguage.nav[0].link">
                        <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/LOGO.jpg" alt="logo">
                    </a>
                </div>
                <ul class="header-nav" @mouseleave="panelHide">
                    <li :key='index+item' v-for='(item,index) in CurrentLanguage.nav' @mouseover.stop="panelShow($event)">
                            <a :id="index" :href="item.link">
                                {{item.title.toUpperCase()}}
                            </a>
                    </li>
                    <div :class="{'nav-dropdown':DropdownStatus}">
                        <div class="dropdown-container" v-if="DropdownStatus">
                            <div class="dropdown-title">{{CurrentPanel.title}}</div>
                            <div class="dropdown-content" v-if="CurrentPanel.contents.type == 'list'">
                                <div class="dropdown-content-box" style="width: 800px;">
                                    <a :href="item.link" class="dropdown-item" :key='index+item' v-for="(item,index) in CurrentPanel.contents.items">
                                        <div>
                                            <img :src="item.icon" :alt="item.name">
                                        </div>
                                        <p>{{item.name}}</p>
                                    </a>
                                </div>
                            </div>
                            <div class="dropdown-content" v-else-if="CurrentPanel.contents.type == 'container'">
                                <div class="dropdown-content-box" style="justify-content: space-around;">
                                    <div v-for="(item,index) in CurrentPanel.contents.items">
                                        <div style="margin: 5px 10px 5px 10px" class="dropdown-item2">
                                            <img :src="item.icon" :alt="item.name">
                                            <p>{{item.name}}</p>
                                        </div>
                                        <ul>
                                            <li class="dropdown-category" :key='index+item' v-for="(item,index) in item.category">
                                                <a :href="item.link"><p>{{item.name}}</p></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ul>
                <button class="shop-btn"><a href="https://m5stack.com/collections/m5stack-new-arrival"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/SHOP.png" /></a></button>
                <button class="user-btn"><a href="https://m5stack-store.myshopify.com/account/login"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/USER.png" /></a></button>
                <button class="language-btn" @click="changeLanguage">
                    <img :src='CurrentLanguage.LanguageIcon'/></a>
                </button>
            </div>
        </div>
        <div id="mb_header">
            <div :class='mobileNavClass' @click="mobileNavToggle"></div>
            <a :href="CurrentLanguage.nav[0].link">
                <img class="mblogo" src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/LOGO.jpg" alt="logo">
            </a>
            <transition name="el-zoom-in-top">
                <div v-show="MobileNavStatus" class="transition-box mobile-nav-list">
                    <template v-if="item.title != CurrentLanguage.nav[1].title" :key='index+item' v-for='(item,index) in CurrentLanguage.nav'>
                        <li class="mobile-nav-item" @click="mobilePanelToggle(item.title.toUpperCase())" :id="item.title.toUpperCase()">
                                {{item.title.toUpperCase()}}
                                <span :class="['mobile-nav-btn',{'mobile-nav-active': MobileCurrentPanel==item.title.toUpperCase()}]" v-if="item.contents != undefined" class="mobile-nav-btn"></span>
                            <el-collapse-transition>
                                <div v-show="MobileCurrentPanel==item.title.toUpperCase()?true:false" v-if="item.contents != undefined" class="transition-box mobile-nav-contents" >
                                    <a :href="content.link" :key='index+content' v-for="(content,index) in item.contents.items">
                                        <p>{{content.name.toUpperCase()}}</p>
                                    </a>
                                </div>
                            </el-collapse-transition>
                        </li>
                    </template>
                    <template v-else v-for="(content,index) in item.contents.items">
                        <li class="mobile-nav-item" :id="content.name.toUpperCase()" @click="mobilePanelToggle(content.name.toUpperCase())">
                            {{content.name.toUpperCase()}}
                            <span :class="['mobile-nav-btn',{'mobile-nav-active': MobileCurrentPanel==content.name.toUpperCase()}]"></span>
                            <el-collapse-transition>
                                <div v-show="MobileCurrentPanel==content.name.toUpperCase()?true:false" class="transition-box mobile-nav-contents">
                                    <a :href="content.link" :key='index+content' v-for="(content,index) in content.category">
                                        <p>{{content.name.toUpperCase()}}</p>
                                    </a>
                                </div>
                            </el-collapse-transition>
                        </li>
                    </template>
                    <button class="shop-btn"><a href="https://m5stack.com/collections/m5stack-new-arrival"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/SHOP.png" /></a></button>
                    <button class="user-btn"><a href="https://m5stack-store.myshopify.com/account/login"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/USER.png" /></a></button>
                    <button class="language-btn" @click="changeLanguage">
                        <img :src='CurrentLanguage.LanguageIcon'/></a>
                    </button>
                </div>
            </transition>
    
      </div>
    </header>
    <div id="pc_anchor">
        <el-col :span="12" v-cloak>
            <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              unique-opened = "true"
              style="min-height:auto">
              <el-submenu v-if="anchors.expand.length > 0" :index="index" :key='index' v-for='(anchors, index) in anchorList'>
                <template slot="title">
                    <div  @click='page_move(anchors.name.toLowerCase())'>
                        <span :title="anchors.name.toUpperCase()">{{anchors.name.toUpperCase()}}</span>
                    </div>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="index" v-for='(anchor, index) in anchors.expand' @click='page_move(anchor.id.toLowerCase())' style="text-align: left; padding-left: 40px !important;;">

                        <span :title="anchor.name.toUpperCase()">{{anchor.name.toUpperCase()}}</span>
                    </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <template v-else>
                <a v-if="anchors.link != undefined" :href="anchors.link" style="color:#303133;">
                    <el-menu-item  :index="index" :key='index' style="text-align: left;padding-left: 20px !important;">
                        <img else v-if="anchors.icon.indexOf('http') != -1" :src="anchors.icon">
                        <i v-else-if="anchors.icon.indexOf('el-icon') != -1" :class="anchors.icon"></i>
                        <i v-else class="el-icon-location"></i>
                        <span :title="anchors.name.toUpperCase()">{{anchors.name.toUpperCase()}}</span>
                  </el-menu-item>
                </a>
                <template v-else>
                    <el-menu-item  :index="index" :key='index' @click='page_move(anchors.name.toLowerCase())' style="text-align: left;padding-left: 20px !important;">
                        <img else v-if="anchors.icon.indexOf('http') != -1" :src="anchors.icon">
                        <i v-else-if="anchors.icon.indexOf('el-icon') != -1" :class="anchors.icon"></i>
                        <i v-else class="el-icon-location"></i>
                        <span :title="anchors.name.toUpperCase()">{{anchors.name.toUpperCase()}}</span>
                    </el-menu-item>
                </template>
            </template>
            </el-menu>
          </el-col>
    </div>
    <div class="related_links">
        <a href="https://twitter.com/M5Stack" target="view_window"><img src="https://static-cdn.m5stack.com/image/twitter.webp"></a>
        <a href="https://www.facebook.com/M5Stack" target="view_window"><img src="https://static-cdn.m5stack.com/image/facebook.webp"></a>
        <a href="https://www.youtube.com/m5stack" target="view_window"><img src="https://static-cdn.m5stack.com/image/youtube.webp"></a>
        <a href="https://github.com/m5stack" target="view_window"><img src="https://static-cdn.m5stack.com/image/github.webp"></a>
        <a onclick="creat_pdf()" style="background-color: #0062cc;"><svg t="1583466910393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2343" width="50" height="50"><path d="M410.2 430.6h-4.8v91.6h4.8c24 0 41-11 41-46.4s-17-45.2-41-45.2zM282.6 430.4H268v43h15.6c17.4 0 25.8-8.2 25.8-22.8 0-15-9.6-20.2-26.8-20.2z" fill="#ffffff" p-id="2344"></path><path d="M791.94 155.36H332.48c-42.23 0-76.54 34.31-76.54 76.54v76.55h-51.03c-28.16 0-51.04 22.87-51.04 51.03v261.37c0 28.15 22.88 51.02 51.04 51.02h51.03v121.54c0 42.24 34.32 76.55 76.54 76.55h459.46c42.23 0 76.54-34.32 76.54-76.54V231.9c0.1-42.24-34.31-76.54-76.54-76.54zM268 501.6V551h-35.8V402.2h52.2c32.8 0 59.8 11.6 59.8 48.4 0 35.4-27.4 51-58.8 51H268z m549.45 291.9c-0.02 14.09-11.43 25.5-25.52 25.51H332.48c-14.09-0.01-25.5-11.43-25.51-25.51V671.96h306.21c28.15 0 51.03-22.88 51.03-51.03v-6.03h76.69c14.09-0.01 25.51-11.43 25.52-25.52-0.02-14.09-11.43-25.5-25.52-25.51h-76.69v-51.03h76.69c14.09-0.01 25.51-11.43 25.52-25.52-0.01-14.09-11.43-25.5-25.52-25.52h-76.69v-51.03h76.69c14.09-0.01 25.51-11.43 25.52-25.51-0.01-14.09-11.43-25.51-25.52-25.52h-76.69c0-28.16-22.89-51.03-51.03-51.03H306.97v-76.54c0.01-14.09 11.43-25.5 25.51-25.52h459.46c14.08 0.01 25.5 11.43 25.51 25.52V793.5zM369.6 551V402.2h42.8c45.4 0 75.4 21.8 75.4 73.6s-30 75.2-73.4 75.2h-44.8zM602 464.4v29.8h-50.8V551h-35.8V402.2h95v29.6h-59.2v32.6H602z" fill="#ffffff" p-id="2345"></path></svg></a>
        <div target="view_window" onclick="(function(){$('html, body').animate({scrollTop: 0}, 500);})()"><img src="https://static-cdn.m5stack.com/image/to-top.webp"></div>
    </div>
</div>
    <div id="app"></div>
    <script>
        window.$docsify = {
            name: 'M5Stack docs',
            // repo: 'https://github.com/m5stack/m5-docs',
            homepage: 'index.md',
            // loadNavbar: 'navbar.md',
            // loadSidebar: 'sidebar.md',
            autoHeader: true,
            mergeNavbar: true, // for mobile device
            nameLink: {
                '/en/': '#/en/',
                '/zh_CN/': '#/zh_CN/',
                '/ja/': '#/ja/',
                '/': '/'
            },
            // NAVIGATION
            // -----------------------------------------------------------------
            alias: { //重定向
                '/en/sidebar.md': '/sidebar.md',
                '/en/.*/sidebar.md': '/sidebar.md',
                '/zh_CN/.*/sidebar.md': '/zh_CN/sidebar.md',
                '/ja/.*/sidebar.md': '/ja/sidebar.md',
                '/.*/navbar.md': '/navbar.md',
                '/en/': '/',
            },
            auto2top: true,
            mergeNavbar: true,
            maxLevel: 4,
            subMaxLevel: 3,
            basePath: '/',
            formatUpdated: '{MM}/{DD} {HH}:{mm}',
            executeScript: true,
            ga: 'UA-131246469-2'
        };
    </script>
    <!-- <script src="./assets/js/custom.js"></script> -->
    <script src="https://static-cdn.m5stack.com/resource/docs/assets/custom.min.js"></script>
    <!-- <script src="./assets/js/docify.min.js"></script> -->
    <script src="https://static-cdn.m5stack.com/resource/docs/assets/docify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2.1.0/dist/docsify-copy-code.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/docsify@4.10.2/lib/plugins/external-script.min.js"></script>
</body>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138139529-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-138139529-2');
</script>

<!-- Baidu auto submit link -->
<script>
	(function(){
		var canonicalURL, curProtocol;
		var x=document.getElementsByTagName("link");
		if(x.length > 0){
			for (i=0;i<x.length;i++){
				if(x[i].rel.toLowerCase() == 'canonical' && x[i].href){
					canonicalURL=x[i].href;
				}
			}
		}
	    if (!canonicalURL){
	    	curProtocol = window.location.protocol.split(':')[0];
	    }
	    else{
	    	curProtocol = canonicalURL.split(':')[0];
	    }
	    if (!canonicalURL) canonicalURL = window.location.href;
    	!function(){var e=/([http|https]:\/\/[a-zA-Z0-9\_\.]+\.baidu\.com)/gi,r=canonicalURL,t=document.referrer;if(!e.test(r)){var n=(String(curProtocol).toLowerCase() === 'https')?"https://sp0.baidu.com/9_Q4simg2RQJ8t7jm9iCKT-xh_/s.gif":"//api.share.baidu.com/s.gif";t?(n+="?r="+encodeURIComponent(document.referrer),r&&(n+="&l="+r)):r&&(n+="?l="+r);var i=new Image;i.src=n}}(window);})();
</script>
<script src="https://static-cdn.m5stack.com/resource/docs/assets/html2canvas.js"></script>
<script src="https://static-cdn.m5stack.com/resource/docs/assets/jspdf.debug.js"></script>
</html>