使用reveal.js和wilddog实现移动端控制web端PPT展示

相信大家工作这么久了,肯定会被要求做PPT等一系列报告,作为前端开发的熊孩子,我们肯定是喜欢折腾的,想想能够用web页面做一份PPT是不是很酷炫,其实在github已经有一个不错的开源的The HTML Presentation Framework,reveal.js,上面会有相应的文档说明,好了现在有前人已经造好的轮子可以直接用了,我们是否可以再加上点什么,能不能用手机端控制网页版的PPT播放?下面就是我使用reveal.js,wilddog来实现的用手机端控制PPT展示的小demo.

get reveal.js

查看reveal.js上面的文档说明,然后下载到本地,我们可以根据文档和我们想要实现的效果直接修改目录中的index.html文件,写完我们的reveal版的PPT后其实就已经完成了80%了,因为你完全可以发布到服务器上直接访问,并且有很多快捷键:F11我们可以全屏查看整个PPT ,ESC 我们能看到所有的幻灯片,S另开一个窗口并有相应的功能,B能暂时隐藏当前展示的内容,当开启mouseWheel: true后就能够通过鼠标的滑轮来控制页面展示。

reveal.js示例图

使用revea.js的优势
1. 使用前端技术来实现PPT,能够锻炼前端技术,充分发挥自己的能力
2. 支持多端展示
3. 支持markdown语法,代码高亮,PDF导出等功能
4. 能够自定义背景为图片,视频,GIF等,能够对背景的切换动画自定义展示
5. …
pretty cool!
更多的内容可以查看demo

wilddog

其实我这里只是使用了它一个比较强大的功能————实时数据同步和通信,在我们在页面中加入了野狗后,当数据库中的数据发生变化的时候我们就能够实现的在页面中展示。实现手机web端控制页面展示的关键点就在手机打开页面对野狗中自己的数据库进行数据的改变操作,这样能够同步到reveal.js展示的页面中。

具体步骤如下 :

创建野狗应用

  1. 我们在wilddog注册账号后就能新建自己的免费的基于key-value的数据库,wilddog
  2. 查看wilddog的数据库操作的api文档
  3. 编写页面的控制器页面文件(这里只是简单的实现了上下左右的翻页指令效果,这里只是试验了想法的可行性),实现的思路就是当点击了页面真的几个button后对数据库进行set/update操作,改变数据库的某个值,reveal端接受到数据变化后进行相应的动作,
        <!DOCTYPE html>
                <html lang="en">
                <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
                        <title>reveal遥控器</title>
                        <script type="text/javascript" src="js/wilddog.js"></script>
                        <script type="text/javascript" src="js/wilddog-sync.js"></script>
                        <link rel="stylesheet" href="css/semantic.css">
                        <style type="text/css">
                                #left, #right, #up, #down {
                                        width: 100px;
                                        position: absolute;
                                }
                                #left{
                                        left: 10%;
                                        top: 20%;
                                }
                                #right{
                                        right: 10%;
                                        top: 20%;
                                }
                                #up{
                                        left: 50%;
                                        top: 10%;
                                        margin-left: -50px;
                                }
                                #down{
                                        left: 50%;
                                        top: 30%;
                                        margin-left: -50px;
                                }
                                h2{
                                        text-align: center;
                                }
                        </style>
                </head>
                <body>
                        <h2 class="ui header">revealPPT简易控制器</h2>
                        <div>
                                <button class="ui left labeled icon button secondary" id="left"><i class="left arrow circle icon"></i> left</button>
                                <button class="ui left labeled icon button secondary" id="right"><i class="right arrow circle icon"></i> right</button>
                                <button class="ui left labeled icon button secondary" id="up"><i class="up arrow circle icon"></i> up</button>
                                <button class="ui left labeled icon button secondary" id="down"><i class="down arrow circle icon"></i> down</button>
                        </div>
                        <script type="text/javascript">
                                window.onload = function() {
                                        // 配置野狗
                                        var config = {
                                                //填上自己的野狗服务器标识
                                                authDomain: "<appId>.wilddog.com",
                                                syncURL: "https://<appId>.wilddogio.com"
                                        };
                                        wilddog.initializeApp(config);
                                        var ref = wilddog.sync().ref("reveal");
                                        // 1234 上右下左
                                        var $ = function(dom) {
                                                return document.getElementById(dom);
                                        }
                                        $('up').onclick = function(){
                                                changeData(1);
                                        }
                                        $('right').onclick = function(){
                                                changeData(2);
                                        }
                                        $('down').onclick = function(){
                                                changeData(3);
                                        }
                                        $('left').onclick = function(){
                                                changeData(4);
                                        }
                                        // 设置向野狗更新数据
                                        function changeData(status) {
                                                //增加时间戳
                                                var time = String((new Date()).getTime()).slice(0,11);
                                                var data = {
                                                        status: status,
                                                        time: time
                                                };
                                                ref.set(data);
                                        }
                                }
                        </script>
                </body>
                </html>
    

做完之后是这样子的

4.在reveal的页面中引入wilddog

demo页面的文件

    <!doctype html>
<html lang="en">

        <head>
                <meta charset="utf-8">

                <title>revealPPT --control by mobile</title>

                <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
                <meta name="author" content="Hakim El Hattab">

                <meta name="apple-mobile-web-app-capable" content="yes">
                <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

                <link rel="stylesheet" href="css/reveal.css">
                <link rel="stylesheet" href="css/theme/black.css" id="theme">

                <!-- Theme used for syntax highlighting of code -->
                <link rel="stylesheet" href="lib/css/zenburn.css">

                <!-- Printing and PDF exports -->
                <script>
                        var link = document.createElement( 'link' );
                        link.rel = 'stylesheet';
                        link.type = 'text/css';
                        link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
                        document.getElementsByTagName( 'head' )[0].appendChild( link );
                </script>

                <!--[if lt IE 9]>
                <script src="lib/js/html5shiv.js"></script>
                <![endif]-->
        </head>

        <body>



                <script src="lib/js/head.min.js"></script>
                <script src="js/reveal.js"></script>

                <script>

                        // More info https://github.com/hakimel/reveal.js#configuration
                        Reveal.initialize({
                                controls: true,
                                progress: true,
                                history: true,
                                center: true,

                                transition: 'slide', // none/fade/slide/convex/concave/zoom

                                // More info https://github.com/hakimel/reveal.js#dependencies
                                dependencies: [
                                        { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                                        { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                                        { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                                        { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                                        { src: 'plugin/zoom-js/zoom.js', async: true },
                                        { src: 'plugin/notes/notes.js', async: true }
                                ]
                        });

                </script>
                <script type="text/javascript" src="js/wilddog.js"></script>
                <script type="text/javascript" src="js/wilddog-sync.js"></script>
                <script type="text/javascript" src="js/controller.js"></script>

        </body>
</html>

controller.js

    (function() {
// 配置野狗
var config = {
    //填上自己的野狗服务器标识 和在controller.html中配置相同
    authDomain: "<appId>.wilddog.com",
    syncURL: "https://<appId>.wilddogio.com"
};
wilddog.initializeApp(config);
wilddog.sync().goOffline();
wilddog.sync().goOnline();
var ref = wilddog.sync().ref("reveal");
// 客户端每次刷新都清除数据库
ref.set(null);
ref.on("value", function(snapshot, error) {
    if(snapshot.val() != null) {
        var backValue = snapshot.val();
        switch(backValue.status) {
            case 1:
                Reveal.up();
                break;
            case 2:
                Reveal.right();
                break;
            case 3:
                Reveal.down();
                break;
            case 4:
                Reveal.left();
                break;
            default:
        }                       
    }
})
}())

最后当我们点击controller.html的相应的按钮时,wilddog中的数据发生变化,同步到reveal的页面中实现相关的操作,实现web移动端控制浏览器端的展示。
所有的源码可以在github找到。

原文链接:http://blog.csdn.net/ntoskiking/article/details/52564538

发表评论

电子邮件地址不会被公开。