sockio-ppt icon indicating copy to clipboard operation
sockio-ppt copied to clipboard

Published 20 hours ago • verified publisher icon hisune
→

Metadata

SockIO PPT, the programmer's PPT!

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

← Metadata

21
Stars
3
Forks
Watchers

Owner

verified publisher icon hisune

Metadata

SockIO PPT, the programmer's PPT!

Back