快速实现移动端控制 web 端 PPT 展示

野狗实时通信云
4,041 阅读3分钟
原文链接： blog.csdn.net

相信大家工作这么久了，肯定会被要求做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后就能够通过鼠标的滑轮来控制页面展示

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

wilddog

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

具体步骤如下
1. 我们在wilddog注册账号后就能新建自己的免费的基于key-value的数据库，wilddog
2. 查看wilddog的数据库操作的api文档
3. 编写页面的控制器页面文件（这里只是简单的实现了上下左右的翻页指令效果，这里只是试验了想法的可行性），实现的思路就是当点击了页面真的几个button后对数据库进行set/update操作,改变数据库的某个值，reveal端接受到数据变化后进行相应的动作，




    
    
    reveal遥控器
    
    
    
    
        #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;
        }
    


    
revealPPT简易控制器

    

         left
         right
         up
         down

controller.html
4.在reveal的页面中引入wilddog
demo页面的文件




    
        

        revealPPT --control by mobile

controller.js

(function() {
    // 配置野狗
    var config = {
        //填上自己的野狗服务器标识 和在controller.html中配置相同
        authDomain: ".wilddog.com",
        syncURL: "https://.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找到

avatar
文章
阅读
粉丝