This commit is contained in:
vany5921
2020-07-08 10:30:58 +08:00
14 changed files with 919 additions and 473 deletions
+1 -3
View File
File diff suppressed because one or more lines are too long
+149 -40
View File
@@ -2,12 +2,16 @@
--theme-color: hsl(204,90%,45%)
}
@font-face {
/* @font-face {
font-family: Montserrat;
font-style: normal;
src: url("/assets/font/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2") format("woff2")
}
} */
* {
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
a {
text-decoration: none !important
}
@@ -27,6 +31,110 @@ img {
}
}
#mb_header {
display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
#mb_header {
position: fixed;
top: 50%;
transform: translateY(-50%);
box-shadow: -5px 1px 20px 0px #e7e5e5;
z-index: 999;
border-radius: 10px;
right: 0;
}
#mb_header .el-menu {
border-right: none;
border-radius: 10px;
}
#mb_header .el-submenu__title,.el-menu-item {
padding: 0px 10px !important;
text-align: center;
}
#mb_header .el-menu-item div {
padding: 0px 10px !important;
}
#mb_header .el-menu-item li {
height: 30px;
}
#pc_header {
position: fixed;
z-index: 999;
left: 0px;
top: 0px;
right: 0px;
background-color: white;
box-shadow: 0px 0px 10px #ddd;
padding: 0px 20px;
display: flex;
justify-content: space-between;
}
#pc_header .el-menu {
display: inline-block;
padding: 10px 0px 0px 0px;
border-bottom: 0px;
}
/* .goBack_header {
display: none;
}
@media screen and (max-width:768px) {
.goBack_header {
display: block;
}
body[data-page="index.md"] .goBack_header {
display: none;
}
body[data-page="en/faq.md"] .goBack_header {
display: none;
}
body[data-page="zh_CN/README.md"] .goBack_header {
display: none;
}
body[data-page="zh_CN/faq.md"] .goBack_header {
display: none;
}
} */
#progressbar {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: white;
bottom: 0px;
z-index: 99999;
}
#progressbar .el-progress {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.markdown-section {
max-width: 75%;
margin-top: 50px;
@@ -37,26 +145,6 @@ img {
color: hsl(211, 100%, 50%);
}
body[data-page="zh_CN/uiflow/uiflow_home_page.md"] article.markdown-section {
max-width: 100%;
padding: 0
}
body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
max-width: 100%;
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
}
body[data-page="en/quick_start/m5stickc/m5stickc_quick_start.md"] article.markdown-section {
max-width: 100%;
}
@@ -136,10 +224,13 @@ body[data-page="zh_CN/quick_start/m5stickc/m5stickc_quick_start.md"] article.mar
}
.related_links a:nth-child(4) {
border-bottom-left-radius: 3px;
background-color: #1f1a17
}
.related_links a:nth-child(5) {
border-bottom-left-radius: 3px;
}
.related_links a:hover {
width: 90px
}
@@ -239,7 +330,7 @@ body[data-page="zh_CN/quick_start/m5stickc/m5stickc_quick_start.md"] article.mar
top: 0;
left: 0;
width: 150px;
height: 206px;
height: 100%;
background: rgba(0, 0, 0, 0.83);
color: #fff;
opacity: 0
@@ -259,7 +350,8 @@ body[data-page="zh_CN/quick_start/m5stickc/m5stickc_quick_start.md"] article.mar
left: 30px;
border: none;
width: 90px;
background-color: #007bffc7;
background-color: #007bffc7;
color: white;
}
.mask-btn2 {
@@ -268,7 +360,8 @@ body[data-page="zh_CN/quick_start/m5stickc/m5stickc_quick_start.md"] article.mar
left: 30px;
border: none;
width: 90px;
background-color: #007bffc7;
background-color: #007bffc7;
color: white;
}
.product_list div.btn-group-vertical {
@@ -350,8 +443,8 @@ div.card-img-overlay:hover {
display: none;
position: fixed;
z-index: 10001;
top: 25px;
left: 20%;
top: 22px;
left: 260px;
padding: 0 20px
}
@@ -409,9 +502,6 @@ body[data-page="en/faq.md"] .search {
display: inline-block
}
body[data-page="index.md"] .markdown-section {
margin-top: 25px
}
body[data-page="zh_CN/README.md"] .search {
display: inline-block
@@ -421,6 +511,11 @@ body[data-page="zh_CN/faq.md"] .search {
display: inline-block
}
body[data-page="index.md"] .markdown-section {
margin-top: 25px
}
body[data-page="zh_CN/README.md"] .markdown-section {
margin-top: 25px
}
@@ -430,8 +525,16 @@ body[data-page="zh_CN/README.md"] .markdown-section {
display: block
}
#mb_header {
display: block;
}
#pc_header {
display: none;
}
.d-flex {
/* display: none !important */
display: none !important;
left: auto;
transition: all .25s ease;
top: 50px;
@@ -508,7 +611,7 @@ body[data-page="zh_CN/README.md"] .markdown-section {
.markdown-section {
max-width: 100%;
margin-top: 50px;
margin-top: 0px;
padding-left: 45px;
padding-right: 45px
}
@@ -569,7 +672,7 @@ body[data-page="zh_CN/README.md"] .markdown-section {
.nav-content {
position: fixed;
top: 50px;
left: 0;
left: 0;color: white;
right: 0;
z-index: 999
}
@@ -577,8 +680,9 @@ body[data-page="zh_CN/README.md"] .markdown-section {
.search {
position: fixed;
z-index: 10001;
top: 6px;
left: -2px
top: 15px;
left: 50%;
transform: translateX(-50%);
}
.mask {
@@ -590,13 +694,13 @@ body[data-page="zh_CN/README.md"] .markdown-section {
.mask-btn1 {
position: relative;
top: 50px;
left: 23px
left: 23px;
}
.mask-btn2 {
position: relative;
top: 75px;
left: 23px
left: 23px;
}
.video_size {
@@ -665,6 +769,10 @@ mark {
padding-right: 30px !important
}
.faq-title.open{
max-height: 600px;
}
.faq-title::before {
background-color: #007bff;
content: "";
@@ -844,7 +952,7 @@ mark {
@media screen and (max-width:1460px) {
.anchor-box {
left: 0px
left: 0px;
}
}
@@ -869,7 +977,8 @@ mark {
display: -webkit-flex;
display: flex;
flex-direction: column;
z-index: 9999
z-index: 9999;
display: none;
}
.anchor-active {
File diff suppressed because one or more lines are too long
+1 -52
View File
File diff suppressed because one or more lines are too long
+13 -43
View File
@@ -425,41 +425,8 @@
* Init progress component
*/
function init() {
var progress_bg = create('div');
var progress_title = create('h2');
var progress_box = create('div');
var progress_bar = create('div');
var div = create('div');
progress_title.innerText = "Loading...."
progress_title.style.textAlign = "center"
progress_title.style.marginTop = "-50px"
progress_bg.style.position = "fixed";
progress_bg.style.top = "0px";
progress_bg.style.left = "0px";
progress_bg.style.width = "100%";
progress_bg.style.height = "100%";
progress_bg.style.background = "white";
progress_bg.style.zIndex = "9999";
progress_bar.classList.add('progress');
progress_bar.style.width = "100%";
progress_bar.style.height = "50px";
progress_bar.style.borderRadius = "50px";
// div.classList.add('progress');
div.classList.add('progress-bar');
div.classList.add('progress-bar-striped');
div.classList.add('progress-bar-animated');
progress_box.style.position = "fixed";
progress_box.style.top = "50%";
progress_box.style.left = "50%";
progress_box.style.width = "50%";
progress_box.style.transform = "translate(-50%,-50%)";
appendTo(progress_bar, div);
appendTo(progress_box, progress_title);
appendTo(progress_box, progress_bar);
appendTo(progress_bg, progress_box);
appendTo(body, progress_bg);
barEl = div;
barE2 = progress_bg;
// barEl = div;
barE2 = document.getElementById('progressbar');
}
/**
* Render progress bar
@@ -479,19 +446,22 @@
} else {
num = Math.floor(loaded / total * 100);
}
barE2.style.display = "block";
barEl.style.opacity = 1;
barEl.style.width = num >= 95 ? '100%' : num + '%';
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%";
// barEl.innerText = "100%";
}else {
barEl.innerText = num + "%";
// barEl.innerText = num + "%";
}
if (num >= 95) {
clearTimeout(timeId);
timeId = setTimeout(function (_) {
barEl.style.opacity = 0;
barEl.style.width = '0%';
ProgressBar.percentage = 0
barE2.style.display = "none";
isSupportWebp();
}, 200);
@@ -5169,4 +5139,4 @@
*/
ready(function (_) { return new Docsify(); });
}());
}());
+1 -1
View File
File diff suppressed because one or more lines are too long
+79 -30
View File
@@ -1,34 +1,83 @@
<div class="container uiflow_banner">
<div>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/arduino_home_page.webp">
</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>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/arduino_home_page.webp">
</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>
<br><br><br><br>
<div id='arduino_home_page'>
<el-card class="box-card" v-for="(item,index) in list" :key="index" style="margin-bottom:20px">
<div slot="header" class="clearfix">
<span>{{item.title}}</span>
<i class="el-icon-s-management" style="float: right;"></i>
</div>
<div v-for="(href,name) in item.item" :key="name" style="margin: 0px 10px 10px 0px ;display:inline-block;">
<a :href='href'><el-tag>{{name}}</el-tag></a>
</div>
</el-card>
</div>
<script>
const quickstart = {
'title':"Quick Start",
'item':{
'BASIC / M5GO / FIRE / FACES':'#/en/arduino/arduino_development',
'M5StickC':'#/en/arduino/arduino_development',
'M5Stick':'#/en/arduino/arduino_development',
'ATOM Lite / Matrix':'#/en/arduino/arduino_development'
}
};
const m5core_api = {
'title':"M5Core API",
'item':{
'System':'#/en/api/system',
'Speaker':'#/en/api/speaker',
'LCD':'#/en/api/lcd',
'Button':'#/en/api/button',
'IMU Sensor(MPU9250)':'#/en/api/mpu9250',
'Button':'#/en/api/button',
'TF Card':'#/en/api/tf',
'Power':'#/en/api/power',
'I/O':'#/en/api/gpio',
'I2C':'#/en/api/commutil',
'WIFI':'#/en/api/wifi',
'Timer':'#/en/api/ticker',
}
};
const m5stickc_api = {
'title':"M5StickC API",
'item':{
'System':'#/en/api/system_m5stickc',
'AXP192':'#/en/api/axp192_m5stickc',
'TFT-SCREEN':'#/en/api/lcd_m5stickc',
'IMU':'#/en/api/imu',
'RTC':'#/en/api/rtc'
}
};
var arduino_home_page = new Vue({
el:'#arduino_home_page',
data() {
return {
list: {
quickstart: quickstart,
m5core_api: m5core_api,
m5stickc_api: m5stickc_api
}
};
}
})
</script>
+5 -5
View File
@@ -301,10 +301,10 @@
</div>
<script>
$(".faq-item .faq-title").on('click', function() {
$(this).toggleClass('open');
});
$(document).ready(function() {
$(".faq-item .faq-title").on('click', function() {
$(this).toggleClass('open');
});
});
</script>
+190 -74
View File
@@ -6,84 +6,200 @@
<h1 class="jumbotron-heading">UIFlow</h1>
<p class="lead text-muted">A Web IoT programming platform using Blockly+Python.</p>
<p>
<a href="http://flow.m5stack.com/" target="view_window" class="btn btn-primary my-2" style="color:white;text-decoration:none">Go to UIFlow</a>
<a class="btn btn-secondary my-2" style="color:white;text-decoration:none" onclick= page_move("tutorial")>Tutorial</a>
<a href="http://flow.m5stack.com/" target="view_window" class="btn btn-primary my-2" style="color:white;text-decoration:none"><el-button type="primary">Go to UIFlow</el-button></a>
</p>
</div>
</div>
<div class="container" style="margin-top:60px" id="tutorial">
<div class="row">
<div class="col-md-4">
<h2>Quick Start</h2>
<p class="uiflow_p">Explain several preparations before using UIFlow, including programming and network configuration of UIFlow firmware, as well as some program basics. </p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
View details »
</button>
<div>
<a class="dropdown-item" href="#/en/quick_start/m5core/m5stack_core_get_started_MicroPython" style="color:black">BASIC/FACES/FIRE/M5GO</a>
<a class="dropdown-item" href="#/en/quick_start/m5stickc/m5stickc_quick_start" style="color:black">M5StickC</a>
<a class="dropdown-item" href="#/en/quick_start/m5stick/m5stick_quick_start_with_uiflow" style="color:black">M5Stick</a>
<a class="dropdown-item" href="#/en/quick_start/atom/atom_quick_start_uiflow" style="color:black">ATOM</a>
</div>
</div>
</div>
<div class="col-md-4">
<h2>Hardware</h2>
<p class="uiflow_p">Some basic control of device hardware in UIFlow, and information acquisition.</p>
<p><a class="btn btn-secondary" href="#/en/uiflow/hardware" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>UI simulator</h2>
<p class="uiflow_p">UIFlow display control for characters and graphics, as well as image upload and drawing functions.</p>
<p><a class="btn btn-secondary" href="#/en/uiflow/ui_simulator" role="button">View details »</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Data structure</h2>
<p class="uiflow_p">Introduction to data types in UIFlow, including constants, variables, characters, random numbers, lists, etc.</p>
<p><a class="btn btn-secondary" href="#/en/uiflow/data_structure" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Logic</h2>
<p class="uiflow_p">The use of logic judgments, operations, and conditional loops, iterations, functions, etc. in UIFlow. </p>
<p><a class="btn btn-secondary" href="#/en/uiflow/logic" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Advanced</h2>
<p class="uiflow_p">The higher-level functions in UIFlow involve remote functions and the use of MQTT communication.</p>
<p><a class="btn btn-secondary" href="#/en/uiflow/advanced" role="button">View details »</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Units</h2>
<p class="uiflow_p">Introduction to how to use unit devices, such as ToF, ENV, Realy, inlucde I/O,UART,I2C,etc.</p>
<p><a class="btn btn-secondary" href="#/en/uiflow/Units" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Modules</h2>
<p class="uiflow_p">Introduce some useful modules block add to your project in UIFlow. </p>
<p><a class="btn btn-secondary" href="#/en/uiflow/Modules" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>FACES</h2>
<p class="uiflow_p">UIFlow uses FACES panel for interface interaction or data manipulation help you to improve input efficiency.</p>
<p><a class="btn btn-secondary" href="#/en/uiflow/FACES" role="button">View details »</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Custom</h2>
<p class="uiflow_p">The creation and use of UIFlow custom program blocks. </p>
<p><a class="btn btn-secondary" href="#/en/uiflow/blockly_custom" role="button">View details »</a></p>
</div>
</div>
<div id='uiflow_home_page'>
<el-card class="box-card" v-for="(item,index) in list" :key="index" style="margin-bottom:20px">
<div slot="header" class="clearfix">
<span>{{item.title}}</span>
<i class="el-icon-s-management" style="float: right;"></i>
</div>
<div v-for="(href,name) in item.item" :key="name" style="margin: 0px 10px 10px 0px ;display:inline-block;">
<a :href='href'><el-tag>{{name}}</el-tag></a>
</div>
</el-card>
</div>
<br><br><br><br>
<script>
const quickstart = {
'title':"Quick Start",
'item':{
'BASIC / M5GO / FIRE / FACES':'#/en/quick_start/m5core/m5stack_core_get_started_MicroPython',
'M5StickC':'#/en/quick_start/m5stickc/m5stickc_quick_start',
'M5Stick':'#/en/quick_start/m5stick/m5stick_quick_start_with_uiflow',
'ATOM Echo':'#/en/quick_start/atom/atom_echo_quick_start',
'ATOM Lite / Matrix':'#/en/quick_start/atom/atom_quick_start_uiflow'
}
};
const hardware = {
'title':"Hardware",
'item':{
'RGB Bar':'#/en/uiflow/hardware?id=rgb',
'Speaker':'#/en/uiflow/hardware?id=speaker',
'IMU':'#/en/uiflow/hardware?id=imu-internal-measurement-unit',
'POWER':'#/en/uiflow/hardware?id=power-m5stack'
}
};
const uielements = {
'title':"UI simulator",
'item':{
'UI Elements':'#/en/uiflow/ui_simulator?id=ui-elements',
'Unicode':'#/en/uiflow/ui_simulator?id=unicode',
'Image':'#/en/uiflow/ui_simulator?id=displaying-images',
'Screen':'#/en/uiflow/ui_simulator?id=screenF'
}
};
const datastructure = {
'title':"Data structure",
'item':{
'variables':'#/en/uiflow/data_structure?id=introducing-variables',
'Basic operation':'#/en/uiflow/data_structure?id=basic-operation',
'Random':'#/en/uiflow/data_structure?id=random-number',
'Array':'#/en/uiflow/data_structure?id=introducing-an-array',
'Map':'#/en/uiflow/data_structure?id=introducing-a-map',
'JSON':'#/en/uiflow/data_structure?id=introducing-json',
'text':'#/en/uiflow/data_structure?id=introducing-text'
}
};
const logic = {
'title':"Logic",
'item':{
'if':'#/en/uiflow/logic?id=if-condition',
'Logic Operator':'#/en/uiflow/logic?id=logic-operator',
'Repeat':'#/en/uiflow/logic?id=conditional-loop',
'Iteration':'#/en/uiflow/logic?id=data-iteration',
'Functions':'#/en/uiflow/logic?id=functions'
}
};
const advanced = {
'title':"Advanced",
'item':{
'Remote':'#/en/uiflow/advanced?id=remote',
'ESP-NOW':'#/en/uiflow/advanced?id=esp-now',
'MQTT':'#/en/uiflow/advanced?id=mqtt-communication',
'WiFi':'#/en/uiflow/advanced?id=wifi',
'P2P':'#/en/uiflow/advanced?id=p2p',
'Easy I/O':'#/en/uiflow/advanced?id=easy-i%2fo',
'PIN':'#/en/uiflow/advanced?id=pin',
'PWM':'#/en/uiflow/advanced?id=pwm',
'ADC':'#/en/uiflow/advanced?id=adc',
'DAC':'#/en/uiflow/advanced?id=dac',
'UART':'#/en/uiflow/advanced?id=uart',
'I2C':'#/en/uiflow/advanced?id=i2c',
'Excute':'#/en/uiflow/advanced?id=excute',
'SDCard':'#/en/uiflow/advanced?id=sdcard',
'Http':'#/en/uiflow/advanced?id=http',
'Modbus':'#/en/uiflow/advanced?id=modbus-master',
'BLE UART':'#/en/uiflow/advanced?id=ble-uartsupport-m5stack-fire-only',
'Blynk':'#/en/uiflow/advanced?id=blynksupport-m5stack-fire-only',
'Echo STT':'#/en/uiflow/advanced?id=echo-stt'
}
};
const unit = {
'title':"Units",
'item':{
'ENV':'#/en/uiflow/Units?id=env',
'PIR':'#/en/uiflow/Units?id=pir',
'RGB LED':'#/en/uiflow/Units?id=rgb-led',
'Joystick':'#/en/uiflow/Units?id=joystick',
'MAKEY':'#/en/uiflow/Units?id=makey',
'SERVO':'#/en/uiflow/Units?id=servo',
'WEIGHT':'#/en/uiflow/Units?id=weight',
'TRACE':'#/en/uiflow/Units?id=trace',
'BUTTON':'#/en/uiflow/Units?id=button',
'Dual-BUTTON':'#/en/uiflow/Units?id=dual-button',
'RGB':'#/en/uiflow/Units?id=rgb',
'REALY':'#/en/uiflow/Units?id=realy',
'ADC':'#/en/uiflow/Units?id=adc',
'DAC':'#/en/uiflow/Units?id=dac',
'NCIR':'#/en/uiflow/Units?id=ncir',
'IR':'#/en/uiflow/Units?id=ir',
'EXT.IO':'#/en/uiflow/Units?id=extio',
'ANGLE':'#/en/uiflow/Units?id=angle',
'LIGHT':'#/en/uiflow/Units?id=light',
'EARTH':'#/en/uiflow/Units?id=earth',
'ToF':'#/en/uiflow/Units?id=tof',
'COLOR':'#/en/uiflow/Units?id=color',
'RFID':'#/en/uiflow/Units?id=rfid',
'FINGER':'#/en/uiflow/Units?id=finger',
'CardKB':'#/en/uiflow/Units?id=cardkb',
'Pb.HUB':'#/en/uiflow/Units?id=pbhub',
'Pa.HUB':'#/en/uiflow/Units?id=pahub',
'THERMAL':'#/en/uiflow/Units?id=thermal',
'GPS':'#/en/uiflow/Units?id=gps'
}
};
const modules = {
'title':"Modules",
'item':{
'LidarBOT':'#/en/uiflow/Modules?id=lidarbot',
'STEPMOTOR':'#/en/uiflow/Modules?id=stepmotor',
'SERVO':'#/en/uiflow/Modules?id=servo',
'Bala Motor':'#/en/uiflow/Modules?id=bala-motor',
'Bala':'#/en/uiflow/Modules?id=bala',
'LEGO+':'#/en/uiflow/Modules?id=lego',
'PM2.5':'#/en/uiflow/Modules?id=pm25',
'BaseX':'#/en/uiflow/Modules?id=basex',
'PLUS':'#/en/uiflow/Modules?id=plus',
'GoPlus':'#/en/uiflow/Modules?id=goplus',
'GPS':'#/en/uiflow/Modules?id=gps'
}
};
const faces = {
'title':"FACES",
'item':{
'Calculator':'#/en/uiflow/FACES?id=calculator',
'Encoder':'#/en/uiflow/FACES?id=encoder',
'FINGER':'#/en/uiflow/FACES?id=finger',
'GameBoy':'#/en/uiflow/FACES?id=gameboy',
'Joystick':'#/en/uiflow/FACES?id=joystick',
'KeyBoard':'#/en/uiflow/FACES?id=keyboard',
'RFID':'#/en/uiflow/FACES?id=rfid'
}
};
const custom = {
'title':"Block Custom",
'item':{
'Create block':'#/en/uiflow/blockly_custom?id=create-block',
'Code-Parameter':'#/en/uiflow/blockly_custom?id=code-parameter',
'Save and Changes':'#/en/uiflow/blockly_custom?id=save-and-changes',
'Using program block':'#/en/uiflow/blockly_custom?id=using-program-block'
}
};
var uiflow_home_page = new Vue({
el:'#uiflow_home_page',
data() {
return {
list: {
quickstart: quickstart,
hardware: hardware,
uielements: uielements,
datastructure: datastructure,
logic: logic,
advanced: advanced,
unit: unit,
modules:modules,
faces:faces,
custom:custom
}
};
}
})
</script>
+5 -1
View File
File diff suppressed because one or more lines are too long
+112 -44
View File
File diff suppressed because one or more lines are too long
+79 -30
View File
@@ -1,34 +1,83 @@
<div class="container uiflow_banner">
<div>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/arduino_home_page.webp">
</div>
<div style="margin-top:30px">
<h1 class="jumbotron-heading">Arduino IDE</h1>
<p class="lead text-muted">电子发烧友们较为熟悉的编程平台之一.</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中文论坛</a>
<a class="btn btn-secondary my-2" style="color:white;text-decoration:none" onclick= page_move("tutorial")>查看教程</a>
</p>
</div>
</div>
<div class="container" style="margin-top:60px" id="tutorial">
<div class="row">
<div class="col-md-4">
<h2>入门介绍</h2>
<p class="uiflow_p">讲解使用Arduino前的几个准备工作,包括Arduino IDE的软件下载,以及相关环境配置. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/arduino/arduino_development" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Arduino API</h2>
<p class="uiflow_p">M5Stack所提供的Arduino函数库. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/arduino/arduino_api" role="button">View details »</a></p>
</div>
</div>
<div>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/arduino_home_page.webp">
</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>
<br><br><br><br>
<div id='arduino_home_page'>
<el-card class="box-card" v-for="(item,index) in list" :key="index" style="margin-bottom:20px">
<div slot="header" class="clearfix">
<span>{{item.title}}</span>
<i class="el-icon-s-management" style="float: right;"></i>
</div>
<div v-for="(href,name) in item.item" :key="name" style="margin: 0px 10px 10px 0px ;display:inline-block;">
<a :href='href'><el-tag>{{name}}</el-tag></a>
</div>
</el-card>
</div>
<script>
const quickstart = {
'title':"快速上手",
'item':{
'BASIC / M5GO / FIRE / FACES':'#/zh_CN/arduino/arduino_development',
'M5StickC':'#/zh_CN/arduino/arduino_development',
'M5Stick':'#/zh_CN/arduino/arduino_development',
'ATOM Lite / Matrix':'#/zh_CN/arduino/arduino_development'
}
};
const m5core_api = {
'title':"M5Core API",
'item':{
'System':'#/zh_CN/api/system',
'Speaker':'#/zh_CN/api/speaker',
'LCD':'#/zh_CN/api/lcd',
'Button':'#/zh_CN/api/button',
'IMU Sensor(MPU9250)':'#/zh_CN/api/mpu9250',
'Button':'#/zh_CN/api/button',
'TF Card':'#/zh_CN/api/tf',
'Power':'#/zh_CN/api/power',
'I/O':'#/zh_CN/api/gpio',
'I2C':'#/zh_CN/api/commutil',
'WIFI':'#/zh_CN/api/wifi',
'Timer':'#/zh_CN/api/ticker',
}
};
const m5stickc_api = {
'title':"M5StickC API",
'item':{
'System':'#/zh_CN/api/system_m5stickc',
'AXP192':'#/zh_CN/api/axp192_m5stickc',
'TFT-SCREEN':'#/zh_CN/api/lcd_m5stickc',
'IMU':'#/zh_CN/api/imu',
'RTC':'#/zh_CN/api/rtc'
}
};
var arduino_home_page = new Vue({
el:'#arduino_home_page',
data() {
return {
list: {
quickstart: quickstart,
m5core_api: m5core_api,
m5stickc_api: m5stickc_api
}
};
}
})
</script>
+5 -5
View File
@@ -301,10 +301,10 @@
</div>
<script>
$(".faq-item .faq-title").on('click', function() {
$(this).toggleClass('open');
});
$(document).ready(function() {
$(".faq-item .faq-title").on('click', function() {
$(this).toggleClass('open');
});
});
</script>
+201 -89
View File
@@ -1,93 +1,205 @@
<div class="container uiflow_banner">
<div>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/uiflow_home_page.webp">
</div>
<div style="margin-top:30px">
<h1 class="jumbotron-heading">UIFlow</h1>
<p class="lead text-muted">一个采用Blockly+Python的Web物联网编程平台.</p>
<p>
<a href="http://flow.m5stack.com/" target="view_window" class="btn btn-primary my-2" style="color:white;text-decoration:none">访问UIFlow</a>
<a class="btn btn-secondary my-2" style="color:white;text-decoration:none" onclick= page_move("tutorial")>查看教程</a>
</p>
</div>
</div>
<div class="container" style="margin-top:60px" id="tutorial">
<div class="row">
<div class="col-md-4">
<h2>快速上手</h2>
<p class="uiflow_p">在使用UIFlow之前进行的一些准备工作,包括UIFlow固件的烧录和网络配置以及一些基础内容。 </p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
View details »
</button>
<div>
<a class="dropdown-item" href="#/zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython" style="color:black">BASIC/FACES/FIRE/M5GO</a>
<a class="dropdown-item" href="#/zh_CN/quick_start/m5stickc/m5stickc_quick_start" style="color:black">M5StickC</a>
<a class="dropdown-item" href="#/zh_CN/quick_start/m5stick/m5stick_quick_start_with_uiflow" style="color:black">M5Stick</a>
<a class="dropdown-item" href="#/zh_CN/quick_start/atom/atom_quick_start_uiflow" style="color:black">ATOM</a>
</div>
</div>
</div>
<div class="col-md-4">
<h2>硬件控制</h2>
<p class="uiflow_p">UIFlow中关于设备硬件的一些基本控制,与信息获取. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/hardware" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>UI模拟器</h2>
<p class="uiflow_p">UIFlow中关于字符与图形的显示控制,以及图片上传与绘图功能. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/ui_simulator" role="button">View details »</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>数据类型</h2>
<p class="uiflow_p">UIFlow中关于数据类型的简介,包括常量、变量、字符、随机数、列表等. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/data_structure" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>逻辑循环</h2>
<p class="uiflow_p">UIFlow中关于逻辑判断、运算,以及条件循环、迭代、函数等功能的使用. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/logic" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>高级功能</h2>
<p class="uiflow_p">UIFlow中较为高阶的功能,涉及远程功能、MQTT通信的使用.</p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/advanced" role="button">View details »</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Units</h2>
<p class="uiflow_p">UIFlow相关的Units使用方法,如ToF,ENV,Realy等模块,包含I/O类和I2C及UART接口的硬件. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/Units" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Modules</h2>
<p class="uiflow_p">UIFlow中配合Modules使用的操作说明. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/Modules" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>FACES</h2>
<p class="uiflow_p">UIFlow中使用FACES面板进行界面交互或数据操作,提高输入效率.</p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/FACES" role="button">View details »</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Custom</h2>
<p class="uiflow_p">UIFlow自定义程序块的创建与使用. </p>
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/blockly_custom" role="button">View details »</a></p>
</div>
</div>
<div>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/uiflow_home_page.webp">
</div>
<div style="margin-top:30px">
<h1 class="jumbotron-heading">UIFlow</h1>
<p class="lead text-muted">A Web IoT programming platform using Blockly+Python.</p>
<p>
<a href="http://flow.m5stack.com/" target="view_window" class="btn btn-primary my-2" style="color:white;text-decoration:none"><el-button type="primary">Go to UIFlow</el-button></a>
</p>
</div>
</div>
<br><br><br><br>
<div id='uiflow_home_page'>
<el-card class="box-card" v-for="(item,index) in list" :key="index" style="margin-bottom:20px">
<div slot="header" class="clearfix">
<span>{{item.title}}</span>
<i class="el-icon-s-management" style="float: right;"></i>
</div>
<div v-for="(href,name) in item.item" :key="name" style="margin: 0px 10px 10px 0px ;display:inline-block;">
<a :href='href'><el-tag>{{name}}</el-tag></a>
</div>
</el-card>
</div>
<script>
const quickstart = {
'title':"快速上手",
'item':{
'BASIC / M5GO / FIRE / FACES':'#/zh_CN/quick_start/m5core/m5stack_core_get_started_MicroPython',
'M5StickC':'#/zh_CN/quick_start/m5stickc/m5stickc_quick_start',
'M5Stick':'#/zh_CN/quick_start/m5stick/m5stick_quick_start_with_uiflow',
'ATOM Echo':'#/zh_CN/quick_start/atom/atom_echo_quick_start',
'ATOM Lite / Matrix':'#/zh_CN/quick_start/atom/atom_quick_start_uiflow'
}
};
const hardware = {
'title':"硬件控制",
'item':{
'RGB Bar':'#/zh_CN/uiflow/hardware?id=rgb',
'Speaker':'#/zh_CN/uiflow/hardware?id=speaker',
'IMU':'#/zh_CN/uiflow/hardware?id=imu-internal-measurement-unit',
'POWER':'#/zh_CN/uiflow/hardware?id=power-m5stack'
}
};
const uielements = {
'title':"UI绘图",
'item':{
'UI Elements':'#/zh_CN/uiflow/ui_simulator?id=ui-elements',
'Unicode':'#/zh_CN/uiflow/ui_simulator?id=unicode',
'Image':'#/zh_CN/uiflow/ui_simulator?id=displaying-images',
'Screen':'#/zh_CN/uiflow/ui_simulator?id=screenF'
}
};
const datastructure = {
'title':"数据类型",
'item':{
'variables':'#/zh_CN/uiflow/data_structure?id=introducing-variables',
'Basic operation':'#/zh_CN/uiflow/data_structure?id=basic-operation',
'Random':'#/zh_CN/uiflow/data_structure?id=random-number',
'Array':'#/zh_CN/uiflow/data_structure?id=introducing-an-array',
'Map':'#/zh_CN/uiflow/data_structure?id=introducing-a-map',
'JSON':'#/zh_CN/uiflow/data_structure?id=introducing-json',
'text':'#/zh_CN/uiflow/data_structure?id=introducing-text'
}
};
const logic = {
'title':"逻辑判断",
'item':{
'if':'#/zh_CN/uiflow/logic?id=if-condition',
'Logic Operator':'#/zh_CN/uiflow/logic?id=logic-operator',
'Repeat':'#/zh_CN/uiflow/logic?id=conditional-loop',
'Iteration':'#/zh_CN/uiflow/logic?id=data-iteration',
'Functions':'#/zh_CN/uiflow/logic?id=functions'
}
};
const advanced = {
'title':"高级功能",
'item':{
'Remote':'#/zh_CN/uiflow/advanced?id=remote',
'ESP-NOW':'#/zh_CN/uiflow/advanced?id=esp-now',
'MQTT':'#/zh_CN/uiflow/advanced?id=mqtt-communication',
'WiFi':'#/zh_CN/uiflow/advanced?id=wifi',
'P2P':'#/zh_CN/uiflow/advanced?id=p2p',
'Easy I/O':'#/zh_CN/uiflow/advanced?id=easy-i%2fo',
'PIN':'#/zh_CN/uiflow/advanced?id=pin',
'PWM':'#/zh_CN/uiflow/advanced?id=pwm',
'ADC':'#/zh_CN/uiflow/advanced?id=adc',
'DAC':'#/zh_CN/uiflow/advanced?id=dac',
'UART':'#/zh_CN/uiflow/advanced?id=uart',
'I2C':'#/zh_CN/uiflow/advanced?id=i2c',
'Excute':'#/zh_CN/uiflow/advanced?id=excute',
'SDCard':'#/zh_CN/uiflow/advanced?id=sdcard',
'Http':'#/zh_CN/uiflow/advanced?id=http',
'Modbus':'#/zh_CN/uiflow/advanced?id=modbus-master',
'BLE UART':'#/zh_CN/uiflow/advanced?id=ble-uartsupport-m5stack-fire-only',
'Blynk':'#/zh_CN/uiflow/advanced?id=blynksupport-m5stack-fire-only',
'Echo STT':'#/zh_CN/uiflow/advanced?id=echo-stt'
}
};
const unit = {
'title':"Units",
'item':{
'ENV':'#/zh_CN/uiflow/Units?id=env',
'PIR':'#/zh_CN/uiflow/Units?id=pir',
'RGB LED':'#/zh_CN/uiflow/Units?id=rgb-led',
'Joystick':'#/zh_CN/uiflow/Units?id=joystick',
'MAKEY':'#/zh_CN/uiflow/Units?id=makey',
'SERVO':'#/zh_CN/uiflow/Units?id=servo',
'WEIGHT':'#/zh_CN/uiflow/Units?id=weight',
'TRACE':'#/zh_CN/uiflow/Units?id=trace',
'BUTTON':'#/zh_CN/uiflow/Units?id=button',
'Dual-BUTTON':'#/zh_CN/uiflow/Units?id=dual-button',
'RGB':'#/zh_CN/uiflow/Units?id=rgb',
'REALY':'#/zh_CN/uiflow/Units?id=realy',
'ADC':'#/zh_CN/uiflow/Units?id=adc',
'DAC':'#/zh_CN/uiflow/Units?id=dac',
'NCIR':'#/zh_CN/uiflow/Units?id=ncir',
'IR':'#/zh_CN/uiflow/Units?id=ir',
'EXT.IO':'#/zh_CN/uiflow/Units?id=extio',
'ANGLE':'#/zh_CN/uiflow/Units?id=angle',
'LIGHT':'#/zh_CN/uiflow/Units?id=light',
'EARTH':'#/zh_CN/uiflow/Units?id=earth',
'ToF':'#/zh_CN/uiflow/Units?id=tof',
'COLOR':'#/zh_CN/uiflow/Units?id=color',
'RFID':'#/zh_CN/uiflow/Units?id=rfid',
'FINGER':'#/zh_CN/uiflow/Units?id=finger',
'CardKB':'#/zh_CN/uiflow/Units?id=cardkb',
'Pb.HUB':'#/zh_CN/uiflow/Units?id=pbhub',
'Pa.HUB':'#/zh_CN/uiflow/Units?id=pahub',
'THERMAL':'#/zh_CN/uiflow/Units?id=thermal',
'GPS':'#/zh_CN/uiflow/Units?id=gps'
}
};
const modules = {
'title':"Modules",
'item':{
'LidarBOT':'#/zh_CN/uiflow/Modules?id=lidarbot',
'STEPMOTOR':'#/zh_CN/uiflow/Modules?id=stepmotor',
'SERVO':'#/zh_CN/uiflow/Modules?id=servo',
'Bala Motor':'#/zh_CN/uiflow/Modules?id=bala-motor',
'Bala':'#/zh_CN/uiflow/Modules?id=bala',
'LEGO+':'#/zh_CN/uiflow/Modules?id=lego',
'PM2.5':'#/zh_CN/uiflow/Modules?id=pm25',
'BaseX':'#/zh_CN/uiflow/Modules?id=basex',
'PLUS':'#/zh_CN/uiflow/Modules?id=plus',
'GoPlus':'#/zh_CN/uiflow/Modules?id=goplus',
'GPS':'#/zh_CN/uiflow/Modules?id=gps'
}
};
const faces = {
'title':"FACES",
'item':{
'Calculator':'#/zh_CN/uiflow/FACES?id=calculator',
'Encoder':'#/zh_CN/uiflow/FACES?id=encoder',
'FINGER':'#/zh_CN/uiflow/FACES?id=finger',
'GameBoy':'#/zh_CN/uiflow/FACES?id=gameboy',
'Joystick':'#/zh_CN/uiflow/FACES?id=joystick',
'KeyBoard':'#/zh_CN/uiflow/FACES?id=keyboard',
'RFID':'#/zh_CN/uiflow/FACES?id=rfid'
}
};
const custom = {
'title':"自定义Block",
'item':{
'Create block':'#/zh_CN/uiflow/blockly_custom?id=create-block',
'Code-Parameter':'#/zh_CN/uiflow/blockly_custom?id=code-parameter',
'Save and Changes':'#/zh_CN/uiflow/blockly_custom?id=save-and-changes',
'Using program block':'#/zh_CN/uiflow/blockly_custom?id=using-program-block'
}
};
var uiflow_home_page = new Vue({
el:'#uiflow_home_page',
data() {
return {
list: {
quickstart: quickstart,
hardware: hardware,
uielements: uielements,
datastructure: datastructure,
logic: logic,
advanced: advanced,
unit: unit,
modules:modules,
faces:faces,
custom:custom
}
};
}
})
</script>