使用reveal.js和wilddog实现移动端控制web端PPT展示
相信大家工作这么久了，肯定会被要求做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页面接受到数据变化后进行相应的动作
<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> leftbutton>
<button class="ui left labeled icon button secondary" id="right"><i class="right arrow circle icon">i> rightbutton>
<button class="ui left labeled icon button secondary" id="up"><i class="up arrow circle icon">i> upbutton>
<button class="ui left labeled icon button secondary" id="down"><i class="down arrow circle icon">i> downbutton>
div>
<script type="text/javascript">
window.onload = function() {
// 配置野狗
var config = {
//填上自己的野狗服务器标识
authDomain: ".wilddog.com" ,
syncURL: "https://.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
<html lang="en">
<head>
<meta charset="utf-8">
<title>revealPPT --control by mobiletitle>
<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">
<link rel="stylesheet" href="lib/css/zenburn.css">
<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>
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: ".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移动端控制浏览器端的展示。