SockIO PPT, the programmer's PPT!支持远程控制的html ppt开源了

Posted on 2016-08-02 12:49:33 | 6 comments | 3956℃ | Javascript

关于SockIO PPT

https://hisune.com/view/42/sockio-ppt-remote-control-html-ppt

Online demo

有句话叫做，不会写PPT的程序猿不是一个好美工，那么究竟怎么样才能做一个高逼格的PPT呢？

为了做一个公司内部的PPT，我花了几个小时写了个简单的html版的PPT，那么他有什么特性呢？

特性

简单，常用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/[我](https://hisune.com)/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/[我](https://hisune.com)/sockio-ppt" target="_blank") https://github.com/[我](https://hisune.com)/sockio-ppt
    h3.prompt .prompt类起到提示器的作用，仅手机端可见，用来提示内容，例如：大家好，接下来由[我](https://hisune.com)来简单分享一下这次的会议内容。
.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/[我](https://hisune.com)/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;
}