<!DOCTYPE html>\r
<html>\r
- <head>\r
-<style>\r
-img {\r
- #width: 100%;\r
- border: 3px solid #000;\r
-}\r
-h1 {\r
- font-size: 20px;\r
- font-weight: 300;\r
- margin-bottom: 0;\r
-}\r
-#slide_label {\r
- float: right;\r
- font-size: 16px;\r
-}\r
-::-webkit-scrollbar { \r
- display: none; \r
-}\r
-body {\r
- background: #3a393a;\r
- color: #efefef;\r
- font-family: sans-serif;\r
- #max-width: 500px;\r
-}\r
-</style>\r
- <title>WebSocket demo</title>\r
+ <head>\r
+ <link href="style.css" rel="stylesheet" type="text/css" media="all" />\r
+ <script src="settings.js"></script>\r
+ <title>ppt-control</title>\r
</head>\r
- <body>\r
- <div>\r
- <h1>Current slide</h1>\r
- <img id="current_img" src="/current.jpg" />\r
+ <body onload="initSettings();">\r
+\r
+ <div id="img_container">\r
+\r
+ <div id="current_div">\r
+ <h1>Current slide</h1>\r
+ <img id="current_img" src="/black.jpg" />\r
+ </div>\r
+\r
+ <div id="next_div">\r
+ <h1>Next slide</h1>\r
+ <img id="next_img" src="/black.jpg" />\r
+ </div>\r
+\r
</div>\r
- <div>\r
- <h1>Next slide</h1>\r
- <img id="next_img" src="/next.jpg" />\r
+\r
+ <div id="controls_container">\r
+ <div id="controls_container_inner">\r
+ <p>\r
+ <img class="icon" id="first" src="icons/first.svg" />\r
+ <img class="icon" id="prev" src="icons/left.svg" />\r
+ <img class="icon" id="next" src="icons/right.svg" />\r
+ <img class="icon" id="last" src="icons/last.svg" />\r
+ <span id="count"><span id="slide_label">Current: </span><input type="text" id="current"></input>/<span id="total">?</span></span>\r
+ <button id="black">Black</button>\r
+ <button id="white">White</button>\r
+ </p>\r
+\r
+ <input type="checkbox" checked="true" id="show_current">Show current slide</input>\r
+ <input type="checkbox" checked="true" id="show_next">Show next slide</input>\r
+ <input type="checkbox" checked="true" id="shortcuts">Keyboard shortcuts</input>\r
+\r
+ <p class="users">Not connected</p>\r
+ </div>\r
</div>\r
- <p>\r
- <button id="prev">Prev</button>\r
- <button id="next">Next</button>\r
- <button id="first">First</button>\r
- <button id="last">Last</button>\r
- <span id="slide_label">Current: <span id="slide"></span>\r
- </p>\r
- <div class="state">\r
- <span class="users">?</span>\r
- </div>\r
- \r
- <script>\r
- function imageRefresh(id) {\r
- img = document.getElementById(id);\r
- var d = new Date;\r
- var http = img.src;\r
- if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; } \r
- img.src = http + '?t=' + d.getTime();\r
- }\r
- var prev = document.querySelector('#prev'),\r
- next = document.querySelector('#next'),\r
- first = document.querySelector('#first'),\r
- last = document.querySelector('#last'),\r
- slide = document.querySelector('#slide'),\r
- users = document.querySelector('.users'),\r
- websocket = new WebSocket("ws://" + window.location.host + ":5678/");\r
- prev.onclick = function (event) {\r
- websocket.send(JSON.stringify({action: 'prev'}));\r
- }\r
- next.onclick = function (event) {\r
- websocket.send(JSON.stringify({action: 'next'}));\r
- }\r
- first.onclick = function (event) {\r
- websocket.send(JSON.stringify({action: 'first'}));\r
- }\r
- last.onclick = function (event) {\r
- websocket.send(JSON.stringify({action: 'last'}));\r
- }\r
- websocket.onmessage = function (event) {\r
- data = JSON.parse(event.data);\r
- switch (data.type) {\r
- case 'state':\r
- slide.textContent = data.value;\r
- imageRefresh("current_img");\r
- imageRefresh("next_img");\r
- break;\r
- case 'users':\r
- users.textContent = (\r
- data.count.toString() + " client" +\r
- (data.count == 1 ? "" : "s"));\r
- break;\r
- default:\r
- console.error(\r
- "unsupported event", data);\r
- }\r
- };\r
- </script>\r
+\r
+ <script src="ppt-control.js"></script>\r
+\r
</body>\r
-</html>
\ No newline at end of file
+</html>\r