fix threading bugs, add further HTML controls
[ppt-control.git] / index.html
index d9522b9c923365fec2e58f7905cec2eb534480e0..a1a4c3ff1f419e85b2be66faf94c5b9b254a660e 100755 (executable)
@@ -1,97 +1,40 @@
 <!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
+       <div id="img_container">\r
+               <div id="current_div">\r
+                       <h1>Current slide</h1>\r
+                       <img id="current_img" src="/black.jpg" />\r
+               </div>\r
+               <div id="next_div">\r
+                       <h1>Next slide</h1>\r
+                       <img id="next_img" src="/black.jpg" />\r
+               </div>\r
         </div>\r
-        <div>\r
-        <h1>Next slide</h1>\r
-        <img id="next_img" src="/next.jpg" />\r
+\r
+               <div id="controls_container">\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
+                       <button id="black">Black</button>\r
+                       <button id="white">White</button>\r
+                               <span id="count"><span id="slide_label">Current: </span><input type="text" id="current"></input>/<span id="total">?</span></span>\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
+\r
+               <p class="users">Not connected</p>\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