SockIO PPT, the programmer's PPT!A simple nodejs PPT service that support remote control.Write a pug
template as a online PPT!
SockIO PPT, 程序猿的PPT,支持远程控制多个PPT client端,解决远程PPT遥控问题。
不再需要人肉翻页PPT,不再需要共享屏幕。PPT书写简单快捷,只要你懂pug
模版格式就能很快的写出你的PPT!
https://hisune.com/view/42/sockio-ppt-remote-control-html-ppt
- 简单,常用PPT展示功能实现,包括翻页、点击显示、提示器。嗯,代码也很简单
- 快捷,仅需编写简单的
pug
模板即可生成PPT,特别适合程序猿 - 安全,演示端URL和控制端URL均在命令行生成,且可自定义
失效时间
,再也不怕某些国内浏览器上报你访问的URL泄漏隐私 - 智能,一个控制端URL可
实时控制
多个演示端URL,解决跨地域PPT分享痛点,再也无需在远程人肉操作PPT或共享屏幕
- 每一页PPT是如何定义的?
- 一个
.section
类即一页PPT。
- 一个
- 如何自定义我自己的样式?
- 在
views/style.pug
中定义了很多公用样式,你可以在你自己的ppt的pug文件中插入style标签定义自己的属性,例如demo中的.customer_css
- 在
- 如何实现一个提示器?
- 在你的ppt的pug文件中插入
.prompt
即可,例如demo中的第一个section中的h3.prompt
,此类中的文字将仅在手机中可见,可用作手机端的提示器 - 如果你在某一个
.section
中加入过.prompt
,请在所有.section
中加入.prompt
,sockio-ppt会将.prompt
类的出现当作启动和关闭提示器的开关
- 在你的ppt的pug文件中插入
nodejs 4.+ version
git clone https://github.com/hisune/sockio-ppt.git
cd sockio-ppt
npm install
cp config.default.js config.js # then modify your config.js
node server
Then, write a pug template and copy it to ppts
folder.
demo.pug
link(rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/androidstudio.min.css")
script(src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js")
script(src="//cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js")
style.
.customer_css {
}
.left-top-vw {
border-bottom: solid 2px #771074;
width: 100%;
text-align: left;
margin-top: 2vh;
height: 8vh;
font-size: 4vh;
}
.right-top {
height: 5vh;
margin-top: 2vh;
}
.bb1 {
background-color: #00B050;
color: #fff;
display: inline;
padding: .5vh 3vw;
width: 30vw;
}
.section
h2 滑动/滚动/上下键 翻页
h3
a(href="https://github.com/hisune/sockio-ppt" target="_blank") https://github.com/hisune/sockio-ppt
h3.prompt .prompt类起到提示器的作用,仅手机端可见,用来提示内容,例如:大家好,接下来由我来简单分享一下这次的会议内容。
.section
h2 Feature,点击/触摸显示隐藏内容
.center-table(style="max-width: 80%;")
.hidden
h3 ●简单
h4 常用PPT展示功能均已经实现。除此之外,嗯,代码也很简单;
.hidden
h3 ● 快捷
h4
| 仅需编写简单的
a(href="https://github.com/pugjs/pug" target="_blank") pug
| 模板即可生成PPT,特别适合程序猿;
.hidden
h3 ● 安全
h4 演示端URL和控制端URL均在命令行生成,且可自定义失效时间,再也不怕某些国内浏览器上报你访问的URL泄漏隐私;
.hidden
h3 ● 智能
h4 一个控制端URL可实时控制多个演示端URL,解决跨地域PPT分享痛点,再也无需在远程人肉操作PPT或共享屏幕。
.section
.left-top.left-top-vw 顶部样式是这样的
img.right-top(src="./report/mob.png")
div.center-table
h4.bb1 快使用双截棍
h5 ● 哼哼哈嘿
h4.bb1 习武之人切记
h5 ● 仁者无敌
h4.prompt
| 周杰伦
.section
h1 HTTP - ajax轮询,代码高亮
.left.hidden.center-table(style="text-indent: 8vw;")
h4 client: 有消息吗?(req)
h4 server: 木有(res)
h4 client: 有消息吗?(req)
h4 server: 木有!(res)
h4 client: 有消息吗?(req)
h4 server: 木有!!!(res)
h4 client: 有消息吗?(req)
h4 server: 。。。木有!!!(res)
.right.hidden
pre
code(style="font-size: 2vw;")
| var ajax = function()
| {
| $.ajax({
| url: 'http://xxoo.com/xxoo',
| success: function(ret){
| // ... do something
| setTimeout(ajax, 2000);
| }
| });
| };
| ajax();
.section
h2 来张图片
div(style="height: 40vh")
img(src="/demo/girl.jpg")
.section
h1 Q & A
.left
h4 PPT URL
#qrcode-ppt
.right
h4 SockIO PPT 项目地址
#qrcode-sockio
script(type='text/javascript').
var options = {
sectionsColor: ['#f2f2f2', '#4BBFC3', '#fff', '#7BAABE', 'whitesmoke']
};
hljs.initHighlightingOnLoad();
var initQrcode = function()
{
var qrcodeWidth = $(window).width() / 4;
$('#qrcode-ppt').empty().qrcode({width: qrcodeWidth,height: qrcodeWidth,text: window.location.href.split('#')[0]});
$('#qrcode-sockio').empty().qrcode({width: qrcodeWidth,height: qrcodeWidth,text: 'https://github.com/hisune/sockio-ppt'});
};
window.onresize = function(event) {
initQrcode();
};
initQrcode();
# node generate pug_name [pug or ctrl] [link number] [expire sec]
node generate demo pug 5 60 # Generate 5 client side urls whitch will expired after 1 minute
# if set `expire sec` to 0, the link will be only allowed to open once
whitch you can open it in mobile to control client side PPT
# node generate pug_name [pug or ctrl] [link number] [expire sec]
node generate demo ctrl 1 60 # Generate a client side url whitch will expired after 1 minute
server{
listen 443;
ssl on;
ssl_certificate key/sockio.crt;
ssl_certificate_key key/sockio.key;
server_name sockio.com www.sockio.com;
location / {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:3000;
}
access_log /path_to_your_log_dir/sockio.com.log access;
}
server{
listen 80;
server_name sockio.com www.sockio.com;
return 301 https://sockio.com$request_uri;
}
MIT