mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
add page PDF download function
This commit is contained in:
Gitshaoxiang
Vendored
+11
-4
@@ -1045,7 +1045,7 @@ mark {
|
||||
}
|
||||
|
||||
.easyloader-box p {
|
||||
margin: 0 15px;
|
||||
margin: 10px 25px;
|
||||
color: white
|
||||
}
|
||||
|
||||
@@ -1063,8 +1063,15 @@ mark {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
|
||||
.easyloader-mask a{
|
||||
margin-top:50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video_play {
|
||||
bottom: -100%
|
||||
bottom: -100%;
|
||||
|
||||
}
|
||||
|
||||
.easyloader-btn {
|
||||
@@ -1072,8 +1079,8 @@ mark {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
bottom: 6%;
|
||||
width: 100%
|
||||
bottom: 7%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.easyloader-btn a {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
+4947
-4947
File diff suppressed because it is too large
Load Diff
Vendored
+441
-2
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
# ATOM Lite{docsify-ignore-all}
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/atom/atom_lite_01.webp" width="350" height="350"><img src="assets/img/product_pics/core/minicore/atom/atom_lite_02.webp" width="350" height="350"><img src="assets/img/product_pics/core/minicore/atom/atom_lite_06.webp" width="350" height="350">
|
||||
<img src="assets/img/product_pics/core/minicore/atom/atom_lite_01.webp" width="30%"><img src="assets/img/product_pics/core/minicore/atom/atom_lite_02.webp" width="30%" ><img src="assets/img/product_pics/core/minicore/atom/atom_lite_06.webp" width="30%" >
|
||||
|
||||
|
||||
## Description
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# ATOM Matrix {docsify-ignore-all}
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/atom/atom_matrix_01.webp" width="350" height="350"><img src="assets/img/product_pics/core/minicore/atom/atom_matrix_02.webp" width="350" height="350"><img src="assets/img/product_pics/core/minicore/atom/atom_matrix_06.webp" width="350" height="350">
|
||||
<img src="assets/img/product_pics/core/minicore/atom/atom_matrix_01.webp" width="30%" ><img src="assets/img/product_pics/core/minicore/atom/atom_matrix_02.webp" width="30%" ><img src="assets/img/product_pics/core/minicore/atom/atom_matrix_06.webp" width="30%" >
|
||||
|
||||
|
||||
## Description
|
||||
@@ -12,9 +12,6 @@
|
||||
<img src="assets/img/product_pics/core/minicore/atom/atom_matrix_03.webp" width="30%" height="30%">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Product Features
|
||||
|
||||
- USB Type-C
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/8Servos_hat.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="easyloader-mask">
|
||||
<a style="text-align: center;">
|
||||
<a>
|
||||
<svg id="play-btn" t="1583228776634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4152" width="75" height="75"><path d="M512 0C229.216 0 0 229.216 0 512s229.216 512 512 512 512-229.216 512-512S794.784 0 512 0z m0 928C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416zM384 288l384 224-384 224z" p-id="4153" fill="#007aff"></path></svg></a>
|
||||
<p>Description:</p>
|
||||
<p>This test program will test whether the drive servo function of each port of the 8Servos HAT module is normal.</p>
|
||||
|
||||
+65
-469
File diff suppressed because one or more lines are too long
+70
-6
@@ -47,6 +47,9 @@
|
||||
|
||||
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
|
||||
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -93,6 +96,7 @@
|
||||
<a href="https://www.facebook.com/M5Stack" target="view_window"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/facebook.jpg"></a>
|
||||
<a href="https://www.youtube.com/m5stack" target="view_window"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/youtube.jpg"></a>
|
||||
<a href="https://github.com/m5stack" target="view_window"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/github.jpg"></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 href="https://github.com/m5stack" target="view_window" onclick="(function(){$('html, body').animate({scrollTop: 0}, 500);})()"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/to-top.jpg"></div>
|
||||
</div>
|
||||
<div id="app">loading...</div>
|
||||
@@ -360,7 +364,7 @@
|
||||
var Label2 = '<span style="padding: 8px 0px;">here is the anchor_name</span></a>';
|
||||
function anchor_create(anchor_name,anchor_id){
|
||||
var Part_A = Label1.replace(/here is the anchor_id/, anchor_id);
|
||||
var Part_B = Label2.replace(/here is the anchor_name/, anchor_name);
|
||||
var Part_B = Label2.replace(/here is the anchor_name/, anchor_name.toUpperCase());
|
||||
if((anchor_name == "DESCRIPTION")||(anchor_name == "描述")){
|
||||
$(".anchor-box").append(Part_A+description_icon+Part_B);
|
||||
}
|
||||
@@ -373,11 +377,21 @@
|
||||
else if((anchor_name == "VIDEO")||(anchor_name == "相关视频")){
|
||||
$(".anchor-box").append(Part_A+video_icon+Part_B);
|
||||
}
|
||||
else if((anchor_name == "QUICK START")||(anchor_name == "快速上手")){
|
||||
$(".anchor-box").append(Part_A+quickstart_icon+Part_B);
|
||||
}
|
||||
else if(icon_list.hasOwnProperty(anchor_name)){
|
||||
$(".anchor-box").append(Part_A+"<img src="+icon_list[anchor_name]+">"+Part_B);
|
||||
if (anchor_name == "EASYLOADER"){
|
||||
if(("#example_video").length >0)
|
||||
$("#play-btn").on("click",function(ev){
|
||||
ev.stopPropagation();
|
||||
$(".easyloader-mask").toggleClass('video_play');
|
||||
$("#example_video")[0].play();
|
||||
})
|
||||
$("#example_video").on("click",function(ev){
|
||||
ev.preventDefault();
|
||||
$(".easyloader-mask").toggleClass('video_play');
|
||||
$("#example_video")[0].pause();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
function anchor_search(purchase_link="none",quickstart_link="none"){
|
||||
@@ -399,8 +413,8 @@
|
||||
var quickstart_name = "快速上手"
|
||||
}
|
||||
else {
|
||||
var purchase_name = "Purchase"
|
||||
var quickstart_name = "Quick Start"
|
||||
var purchase_name = "PURCHASE"
|
||||
var quickstart_name = "QUICK START"
|
||||
}
|
||||
}
|
||||
if(purchase_link!="none"){
|
||||
@@ -457,4 +471,54 @@
|
||||
window.onscroll = scrollFunc;
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
function creat_pdf() {
|
||||
$(".anchor-box").css("display","none");
|
||||
$(".related_links").css("display","none");
|
||||
var target = document.getElementsByClassName("#main")[0];
|
||||
html2canvas(target, {
|
||||
onrendered:function(canvas) {
|
||||
var contentWidth = canvas.width;
|
||||
var contentHeight = canvas.height;
|
||||
//一页pdf显示html页面生成的canvas高度;
|
||||
var pageHeight = contentWidth / 592.28 * 841.89;
|
||||
//未生成pdf的html页面高度
|
||||
var leftHeight = contentHeight;
|
||||
//页面偏移
|
||||
var position = 0;
|
||||
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
|
||||
var imgWidth = 595.28;
|
||||
var imgHeight = 592.28/contentWidth * contentHeight;
|
||||
|
||||
var pageData = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
var pdf = new jsPDF('', 'pt', 'a4');
|
||||
|
||||
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
|
||||
//当内容未超过pdf一页显示的范围，无需分页
|
||||
if (leftHeight < pageHeight) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
|
||||
} else {
|
||||
while(leftHeight > 0) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
leftHeight -= pageHeight;
|
||||
position -= 841.89;
|
||||
//避免添加空白页
|
||||
if(leftHeight > 0) {
|
||||
pdf.addPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
var page_url = window.location.href;
|
||||
var a = page_url.indexOf('#')
|
||||
var pdf_name = page_url.slice(a+2);
|
||||
pdf.save(pdf_name+".pdf");
|
||||
}
|
||||
})
|
||||
$(".anchor-box").removeAttr("style");
|
||||
$(".related_links").removeAttr("style");
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -58,7 +58,7 @@
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Core/ATOM_LITE.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="easyloader-mask">
|
||||
<a style="text-align: center;">
|
||||
<a>
|
||||
<svg id="play-btn" t="1583228776634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4152" width="75" height="75"><path d="M512 0C229.216 0 0 229.216 0 512s229.216 512 512 512 512-229.216 512-512S794.784 0 512 0z m0 928C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416zM384 288l384 224-384 224z" p-id="4153" fill="#007aff"></path></svg></a>
|
||||
<p>案例描述:</p>
|
||||
<p>通过变色呼吸灯程序，测试RGB LED与按键是否工作正常.</p>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Core/ATOM_MATRIX.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="easyloader-mask">
|
||||
<a style="text-align: center;">
|
||||
<a>
|
||||
<svg id="play-btn" t="1583228776634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4152" width="75" height="75"><path d="M512 0C229.216 0 0 229.216 0 512s229.216 512 512 512 512-229.216 512-512S794.784 0 512 0z m0 928C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416zM384 288l384 224-384 224z" p-id="4153" fill="#007aff"></path></svg></a>
|
||||
<p>案例描述:</p>
|
||||
<p>通过矩阵屏幕文字滚屏显示与按键计数功能,测试RGB LED与按键是否工作正常.</p>
|
||||
|
||||
@@ -59,16 +59,29 @@ M5Stack Basic 由两个可分离部分堆叠组成. 顶部放置了电路板，
|
||||
|
||||
## EasyLoader
|
||||
|
||||
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
|
||||
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/M5Core/BASIC/EasyLoader_M5Core_BASIC_FactoryTest.exe"><button type="button" class="btn btn-primary">点击下载EasyLoader</button></a>
|
||||
|
||||
>1.EasyLoader是一个简洁快速的程序烧录器，每一个产品页面里的EasyLoader都提供了一个与产品相关的案例程序.**(目前EasyLoader仅适用于Windows操作系统)**
|
||||
|
||||
>2.下载软件后，双击运行应用程序，将M5设备通过数据线连接至电脑,选择端口参数，点击 **"Burn"** 即可开始烧录
|
||||
|
||||
!>3.EasyLoader烧录前需要安装有CP210X（USB驱动程序），[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
|
||||
>EasyLoader是一个简洁快速的程序烧录器，每一个产品页面里的EasyLoader都提供了一个与产品相关的案例程序，通过简单步骤将其烧录至主控，能够进行一系列的功能验证.**(目前EasyLoader仅适用于Windows操作系统)**
|
||||
|
||||
<div class="easyloader-box">
|
||||
<div style="background-color:white;">
|
||||
<div><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/easyloader_intro.jpg"></div>
|
||||
<div class="easyloader-btn">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Windows/CORE/EasyLoader_M5Core_FactoryTest.exe">Windows</a>
|
||||
<!-- <a>Linux</a>
|
||||
<a>MacOS</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<video id="example_video" controls>
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Core/BASIC.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="easyloader-mask">
|
||||
<a>
|
||||
<svg id="play-btn" t="1583228776634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4152" width="75" height="75"><path d="M512 0C229.216 0 0 229.216 0 512s229.216 512 512 512 512-229.216 512-512S794.784 0 512 0z m0 928C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416zM384 288l384 224-384 224z" p-id="4153" fill="#007aff"></path></svg></a>
|
||||
<p>案例描述:</p>
|
||||
<p>该案例将执行喇叭，wifi，按键，加速计，SD卡，屏幕等硬件运行测试.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 外设的管脚映射
|
||||
|
||||
|
||||
@@ -79,18 +79,31 @@
|
||||
|
||||
<img src="assets/img/product_pics/core/faces_kit/faces_kit.png">
|
||||
|
||||
|
||||
## EasyLoader
|
||||
|
||||
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
|
||||
>EasyLoader是一个简洁快速的程序烧录器，每一个产品页面里的EasyLoader都提供了一个与产品相关的案例程序，通过简单步骤将其烧录至主控，能够进行一系列的功能验证.**(烧录前请安装CP210X驱动程序)**
|
||||
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/M5Core/Faces_kit/EasyLoader_Faces_kit.exe"><button type="button" class="btn btn-primary">点击下载EasyLoader</button></a>
|
||||
|
||||
>1.EasyLoader是一个简洁快速的程序烧录器，每一个产品页面里的EasyLoader都提供了一个与产品相关的案例程序.**(目前EasyLoader仅适用于Windows操作系统)**
|
||||
|
||||
>2.下载软件后，双击运行应用程序，将M5设备通过数据线连接至电脑,选择端口参数，点击 **"Burn"** 即可开始烧录
|
||||
|
||||
!>3.EasyLoader烧录前需要安装有CP210X（USB驱动程序），[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)，在为Faces烧录固件前，请点击"Erase"进行一次内存擦除.
|
||||
<div class="easyloader-box">
|
||||
<div style="background-color:white;">
|
||||
<div><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/easyloader_intro.jpg"></div>
|
||||
<div class="easyloader-btn">
|
||||
<a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Windows/CORE/EasyLoader_FACES_FactoryTest.exe">Windows</a>
|
||||
<!-- <a>Linux</a>
|
||||
<a>MacOS</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<video id="example_video" controls>
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Core/FACES.mp4">
|
||||
</video>
|
||||
<div class="easyloader-mask">
|
||||
<a>
|
||||
<svg id="play-btn" t="1583228776634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4152" width="75" height="75"><path d="M512 0C229.216 0 0 229.216 0 512s229.216 512 512 512 512-229.216 512-512S794.784 0 512 0z m0 928C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416zM384 288l384 224-384 224z" p-id="4153" fill="#007aff"></path></svg></a>
|
||||
<p>案例描述:</p>
|
||||
<p>该案例将默认运行FACES键盘输入测试程序，重启选择程序列表可以切换不同的面板测试项.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
### 相关链接
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
# M5StickT {docsify-ignore-all}
|
||||
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_01.jpg" width="30%" height="30%">
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_03.webp" width="30%" height="30%">
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_04.webp" width="30%" height="30%">
|
||||
<img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_03.webp" width="30%" height="30%"><img src="assets/img/product_pics/core/minicore/m5stickt/m5stick_T_04.webp" width="30%" height="30%">
|
||||
|
||||
|
||||
|
||||
@@ -104,7 +102,7 @@ M5StickT仅支持WIN10&Linux&MAC(10.15以下）免驱，其余操作系统则需
|
||||
<source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Core/StickT.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="easyloader-mask">
|
||||
<a style="text-align: center;">
|
||||
<a>
|
||||
<svg id="play-btn" t="1583228776634" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4152" width="75" height="75"><path d="M512 0C229.216 0 0 229.216 0 512s229.216 512 512 512 512-229.216 512-512S794.784 0 512 0z m0 928C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416zM384 288l384 224-384 224z" p-id="4153" fill="#007aff"></path></svg></a>
|
||||
<p>案例描述:</p>
|
||||
<p>热成像操作说明：A键切换跟踪模式，B键切换显示模式，拨轮调整灵敏度.</p>
|
||||
|
||||
Reference in New Issue
Block a user