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

    xiaoxiao2023-02-02  27

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

    大家可以用pc端打开www.wenlong.date/ppt/demo.html 页面,然后用手机上的浏览器打开 www.wenlong.date/ppt/controller.html 页面(其实用pc端打开这个页面也能控制PPT的展示) 通过点击页面中的按钮来查看pc端页面的切换变化

    所有的源码可以在我的github上找到

    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

    其实我这里只是使用了它一个比较强大的功能————实时数据同步和通信,我们在页面中加入了野狗后,当数据库中的数据发生变化的时候我们就能够实时的在demo.html页面中获取并根据数据的变化来进行相应的ppt切换动作。实现手机端控制pc端ppt页面展示的关键点就在手机打开controller.html页面对野狗中自己的数据库进行数据的改变操作,这样demo.html拿到更新的数据并实现相应的切换动作

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

    <!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> <script type="text/javascript" src="js/jquery.min.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> <!-- <button id="clean">clean</button> --> <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 上右下左 $('#up').on('click', function() { changeData(1); }); $('#right').on('click', function() { changeData(2); }); $('#down').on('click', function() { changeData(3); }); $('#left').on('click', function() { changeData(4); }); // 设置向野狗更新数据 function changeData(status) { var time = String((new Date()).getTime()).slice(0,11); var data = { status: status, time: time }; ref.set(data); } // 转换数据成野狗能正常保存的数据 // function transData(orgdata) { // return JSON.parse(JSON.stringify(orgdata)); // } } </script> </body> </html>

    4.在demo.html的页面中引入wilddog 和 controller.js demo.html

    <!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移动端控制浏览器端的展示。

    转载请注明原文地址: https://ju.6miu.com/read-1138595.html
    最新回复(0)