SockIO PPT, the programmer's PPT!
Switch branches/tags
Nothing to show
Clone or download
Latest commit 0128cdb Mar 29, 2017
Permalink
Failed to load latest commit information.
generate
ppts
public
views
.gitattributes
.gitignore
LICENSE
README.md
config.default.js
generate.js
package.json
server.js

README.md

sockio-ppt

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

Online demo

Feature

  • 简单,常用PPT展示功能实现,包括翻页、点击显示、提示器。嗯,代码也很简单
  • 快捷,仅需编写简单的pug模板即可生成PPT,特别适合程序猿
  • 安全,演示端URL和控制端URL均在命令行生成,且可自定义失效时间,再也不怕某些国内浏览器上报你访问的URL泄漏隐私
  • 智能,一个控制端URL可实时控制多个演示端URL,解决跨地域PPT分享痛点,再也无需在远程人肉操作PPT或共享屏幕

QA

  • 每一页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类的出现当作启动和关闭提示器的开关

Requirement

nodejs 4.+ version

How to use it?

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();

Generate a client side online PPT url

# 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 

Generate a control side online PPT url

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

Use nginx SSL

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;
}

About author

Hisune

Offical site

SockIO

License

MIT