add desktop ide tutorial

This commit is contained in:
vany5921
2020-03-11 14:52:41 +08:00
16 changed files with 717 additions and 214 deletions
+53
View File
@@ -1106,3 +1106,56 @@ mark {
width: 100%
}
}
.platform-box {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.platform-item {
position: relative;
overflow: hidden;
margin: 20px;
box-shadow: 0px 0px 5px 0px #dbdbdb;
border-radius: 15px;
}
.platform-item h3 {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 20px;
font-weight: normal;
color: #fff;
z-index: 11;
}
.platform-tag{
position: absolute;
top: 50%;
left: 45%;
width: 150px;
height: 150px;
margin: -60px 0 0 -60px;
background: #333;
opacity: .8;
border-radius: 50%;
z-index: 10;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .5s cubic-bezier(0.23, 0.53, 0.22, 0.93);
}
.platform-item a:hover .platform-tag{
transform: scale(4.3, 4.3);
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

@@ -1,31 +1,20 @@
# M5Core Get Started {docsify-ignore-all}
<!-- **Choose the development platform**
|<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">|
|:---:|:---:|:---:|
|[Arduino-MacOS](en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Arduino-Windows](en/quick_start/m5core/m5stack_core_get_started_Arduino_Windows) | [UIFlow (Blockly & Micropython)](en/quick_start/m5core/m5stack_core_get_started_MicroPython)| -->
## Choose the development platform
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<img src="assets/img/macos-logo.png" height="170px" style="margin:15px">
<a href="#en/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">Arduino-MacOS</button></a>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-body">
<img src="assets/img/windows-logo.png" height="170px" style="margin:15px">
<a href="#en/quick_start/m5core/m5stack_core_get_started_Arduino_Windows" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">Arduino-Windows</button></a>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-body">
<img src="assets/img/uiflow-logo.png" height="150px" style="margin:25px">
<a href="#en/quick_start/m5core/m5stack_core_get_started_MicroPython" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">UIFlow</button></a>
</div>
</div>
</div>
<div class="platform-box">
<div class="platform-item">
<img src="assets\img\arduino-card.jpg" width="300px">
<a href="/#/en/arduino/arduino_development">
<h3>Arduino IDE</h3>
<div class="platform-tag"></div>
</a>
</div>
<div class="platform-item">
<img src="assets\img\uiflow-card.jpg" width="300px">
<a href="/#/en/uiflow/introduction">
<h3>UIFlow</h3>
<div class="platform-tag"></div>
</a>
</div>
</div>
@@ -1,37 +1,27 @@
# M5StickC Quick Start {docsify-ignore-all}
<!-- **Choose the development platform**
|<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">|
|:---:|:---:|:---:|
|[Arduino-MacOS](en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS) | [Arduino-Windows](en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows) | [UIFlow](en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow)| -->
## Choose the development platform
<div class="container">
<div class="card-deck mb-4 text-center">
<div class="card mb-3 shadow-sm">
<div class="card-body">
<img src="assets/img/macos-logo.png" height="170px" style="margin:15px">
<a href="#en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">Arduino-MacOS</button></a>
</div>
</div>
<div class="card mb-3 shadow-sm">
<div class="card-body">
<img src="assets/img/windows-logo.png" height="170px" style="margin:15px">
<a href="#en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">Arduino-Windows</button></a>
</div>
</div>
<div class="card mb-3 shadow-sm">
<div class="card-body">
<img src="assets/img/uiflow-logo.png" height="150px" style="margin:25px">
<a href="#en/quick_start/m5stickc/m5stickc_quick_start_with_uiflow" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">UIFlow</button></a>
</div>
</div>
<div class="card mb-3 shadow-sm">
<div class="card-body">
<img src="assets/img/aws-logo.png" height="150px" style="margin:25px">
<a href="#en/quick_start/m5stickc/m5stickc_quick_start_with_AWS-FreeRTOS_Windows" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">FreeRTOS</button></a>
</div>
</div>
</div>
<div class="platform-box">
<div class="platform-item">
<img src="assets\img\arduino-card.jpg" width="300px">
<a href="/#/en/arduino/arduino_development">
<h3>Arduino IDE</h3>
<div class="platform-tag"></div>
</a>
</div>
<div class="platform-item">
<img src="assets\img\uiflow-card.jpg" width="300px">
<a href="/#/en/uiflow/introduction">
<h3>UIFlow</h3>
<div class="platform-tag"></div>
</a>
</div>
<div class="platform-item">
<img src="assets\img\aws-freertos-card.jpg" width="300px">
<a href="/#/en/quick_start/m5stickc/m5stickc_quick_start_with_AWS-FreeRTOS_Windows">
<h3>AWS FreeRTOS</h3>
<div class="platform-tag"></div>
</a>
</div>
</div>
Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

+524 -64
View File
File diff suppressed because one or more lines are too long
+26 -21
View File
@@ -363,6 +363,7 @@
var Label1 = '<a onclick="page_move(\'here is the anchor_id\')">';
var Label2 = '<span style="padding: 8px 0px;">here is the anchor_name</span></a>';
function anchor_create(anchor_name,anchor_id){
var page_url = window.location.href;
var Part_A = Label1.replace(/here is the anchor_id/, anchor_id);
var Part_B = Label2.replace(/here is the anchor_name/, anchor_name.toUpperCase());
if((anchor_name == "DESCRIPTION")||(anchor_name == "描述")){
@@ -392,38 +393,37 @@
$("#example_video")[0].pause();
})
}
}else if(page_url.indexOf(/uiflow/) != -1){
$(".anchor-box").append(Part_A+quickstart_icon+Part_B);
}
}
function anchor_search(purchase_link="none",quickstart_link="none"){
var page_url = window.location.href;
if((page_url.slice(-4) == "/en/")||(page_url.slice(-7)== "/zh_CN/")||(page_url.slice(-3)== "/#/")){
$("#search_note").eq(0).after("<div class='anchor-box'></div>");
var anchor_list= $(".product_page > div:gt(1)");
for (var i=0; i< anchor_list.length ; i++){
anchor_create(anchor_list[i].id.toUpperCase(), anchor_list[i].id);
var page_url = window.location.href;
if((page_url.slice(-4) == "/en/")||(page_url.slice(-7)== "/zh_CN/")||(page_url.slice(-3)== "/#/")){
$("#search_note").eq(0).after("<div class='anchor-box'></div>");
var anchor_list= $(".product_page > div:gt(1)");
}
else{
$("h2").eq(0).before("<div class='anchor-box'></div>");
var anchor_list= $("#main h2");
}
}
else{
$("h2").eq(0).before("<div class='anchor-box'></div>");
var anchor_list= $("#main h2");
for (var i=0; i< anchor_list.length ; i++){
anchor_create(anchor_list[i].id.toUpperCase(), anchor_list[i].id);
if(page_url.indexOf(/zh_CN/) != -1) {
var purchase_name = "购买链接"
var quickstart_name = "快速上手"
}
else {
var purchase_name = "PURCHASE"
var quickstart_name = "QUICK START"
}
anchor_create(anchor_list[i].id.toUpperCase(), anchor_list[i].id);
}
if(page_url.indexOf(/zh_CN/) != -1) {
var purchase_name = "购买链接"
var quickstart_name = "快速上手"
}
else {
var purchase_name = "PURCHASE"
var quickstart_name = "QUICK START"
}
if(purchase_link!="none"){
$(".anchor-box").append('<a href='+purchase_link+' onclick="select(this)" target="view_window">'+purchase_icon+'<span style="padding: 8px 0px;">'+purchase_name+'</span>'+'</a>');
}
if(quickstart_link!="none"){
$(".anchor-box").append('<a href='+quickstart_link+' onclick="select(this)" target="view_window">'+quickstart_icon+'<span style="padding: 8px 0px;">'+quickstart_name+'</span>'+'</a>');
}
}
}
}
function anchor_scroll(anchor_name,anchor_id,anchor_length){
@@ -473,7 +473,11 @@
<script>
function creat_pdf() {
$('html, body').animate({scrollTop: 0}, 0);
$(".anchor-box").css("display","none");
$(".related_links").css("display","none");
var target = document.getElementsByClassName("#main")[0];
@@ -481,6 +485,7 @@ function creat_pdf() {
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
+2 -2
View File
@@ -59,7 +59,7 @@ M5Stack Basic 由两个可分离部分堆叠组成. 顶部放置了电路板,
## EasyLoader
>EasyLoader是一个简洁快速的程序烧录器,每一个产品页面里的EasyLoader都提供了一个产品相关的案例程序,通过简单步骤将其烧录至主控,能够进行一系列的功能验证.**(目前EasyLoader仅适用于Windows操作系统)**
>EasyLoader是一个简洁快速的程序烧录器,其内置了一个产品相关的案例程序,通过简单步骤将其烧录至主控,即可进行一系列的功能验证.**(程序烧录前,请根据设备类型安装相应驱动程序. M5Core型主机[请点击此处查看CP210X驱动安装教程](zh_CN/arduino/arduino_development?id=安装串口驱动)M5StickC/V/T/ATOM系列可免驱动使用)**
<div class="easyloader-box">
<div style="background-color:white;">
@@ -277,7 +277,7 @@ M5Stack Basic 由两个可分离部分堆叠组成. 顶部放置了电路板,
var purchase_link = 'https://m5stack.com/collections/m5-core/products/basic-core-iot-development-kit';
var quickstart_link = 'https://docs.m5stack.com/#/zh_CN/quick_start/m5core/m5stack_core_quick_start';
var quickstart_link = '/#/zh_CN/quick_start/m5core/m5stack_core_quick_start';
anchor_search(purchase_link,quickstart_link);
scrollFunc();
@@ -72,3 +72,20 @@
- [Lite Example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Core/Atom/Atom%20Lite)
<!-- <div class="platform-box">
<div class="platform-item">
<img src="assets\img\arduino-card.jpg" width="300px">
<a href="#zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_Windows">
<h3>Arduino IDE</h3>
<div class="platform-tag"></div>
</a>
</div>
<div class="platform-item">
<img src="assets\img\uiflow-card.jpg" width="300px">
<a href="#/zh_CN/uiflow/introduction">
<h3>UIFlow</h3>
<div class="platform-tag"></div>
</a>
</div>
</div> -->
@@ -184,4 +184,12 @@ lcd.print("Hello M5Stack")
}
</style>
</style>
<script>
anchor_search();
scrollFunc();
</script>
@@ -2,24 +2,19 @@
## 选择您使用的开发平台
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<img src="assets/img/macos-logo.png" height="170px" style="margin:15px">
<a href="#zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">Arduino-MacOS</button></a>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-body">
<img src="assets/img/windows-logo.png" height="170px" style="margin:15px">
<a href="#zh_CN/quick_start/m5core/m5stack_core_get_started_Arduino_Windows" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">Arduino-Windows</button></a>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-body">
<img src="assets/img/uiflow-logo.png" height="150px" style="margin:25px">
<a href="#zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">UIFlow</button></a>
</div>
</div>
</div>
<div class="platform-box">
<div class="platform-item">
<img src="assets\img\arduino-card.jpg" width="300px">
<a href="/#/zh_CN/arduino/arduino_development">
<h3>Arduino IDE</h3>
<div class="platform-tag"></div>
</a>
</div>
<div class="platform-item">
<img src="assets\img\uiflow-card.jpg" width="300px">
<a href="/#/zh_CN/uiflow/introduction">
<h3>UIFlow</h3>
<div class="platform-tag"></div>
</a>
</div>
</div>
@@ -1,40 +1,27 @@
# M5StickC 上手指南 {docsify-ignore-all}
<!-- ## 选择您需要的编程语言
|<img src="assets/img/windows-logo.png"> | <img src="assets/img/uiflow-logo.png">|
|:---:|:---:|
|[Arduino-Windows](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows) | [UIFlow](zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_uiflow)| -->
## 选择您使用的开发平台
<div class="container">
<div class="card-deck mb-4 text-center">
<div class="card mb-3 shadow-sm">
<div class="card-body">
<img src="assets/img/macos-logo.png" height="170px" style="margin:15px">
<a href="#zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">Arduino-MacOS</button></a>
</div>
</div>
<div class="card mb-3 shadow-sm">
<div class="card-body">
<img src="assets/img/windows-logo.png" height="170px" style="margin:15px">
<a href="#zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">Arduino-Windows</button></a>
</div>
</div>
<div class="card mb-3 shadow-sm">
<div class="card-body">
<img src="assets/img/uiflow-logo.png" height="150px" style="margin:25px">
<a href="#zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_uiflow" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">UIFlow</button></a>
</div>
</div>
<div class="card mb-3 shadow-sm">
<div class="card-body">
<img src="assets/img/aws-logo.png" height="150px" style="margin:25px">
<a href="#zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_AWS-FreeRTOS_Windows" style="text-decoration:none"><button type="button" class="btn btn-lg btn-block btn-outline-primary">FreeRTOS</button></a>
</div>
</div>
<div class="platform-box">
<div class="platform-item">
<img src="assets\img\arduino-card.jpg" width="300px">
<a href="/#/zh_CN/arduino/arduino_development">
<h3>Arduino IDE</h3>
<div class="platform-tag"></div>
</a>
</div>
<div class="platform-item">
<img src="assets\img\uiflow-card.jpg" width="300px">
<a href="/#/zh_CN/uiflow/introduction">
<h3>UIFlow</h3>
<div class="platform-tag"></div>
</a>
</div>
<div class="platform-item">
<img src="assets\img\aws-freertos-card.jpg" width="300px">
<a href="/#/zh_CN/quick_start/m5stickc/m5stickc_quick_start_with_AWS-FreeRTOS_Windows">
<h3>AWS FreeRTOS</h3>
<div class="platform-tag"></div>
</a>
</div>
</div>
+9 -10
View File
@@ -9,7 +9,7 @@
5. [UIFlow教程](#UIFlow教程)
## 安装UIFlow固件
## UIFlow固件
* __下载驱动程序__
@@ -101,6 +101,7 @@
>Atom的APIKey可以通过web配网页面查看,或通过串口工具查看
<<<<<<< HEAD
><img src="assets/img/product_pics/core/minicore/atom/apikey.png" width="50%"><img src="assets/img/product_pics/core/minicore/atom/serialtool.png" width="50%">
@@ -155,20 +156,18 @@
><img src="/image/base/usbmode.jpg" width="50%" height="50%">
## UIFlow教程
=======
## 相关教材
>>>>>>> 3cd56af95d6b315f183720dac88d2b3e42c9401e
* [M5StickC物联网入门教程](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/M5StickC_Guide.pdf)
* [M5GO编程入门教程](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/UIFlow-Book-zh_cn.pdf)
<script>
<style>
.link a{
padding-left: 13%;
}
</style>
anchor_search();
scrollFunc();
</script>