-var DEFAULT_TITLE = "ppt-control"
+const DEFAULT_TITLE = "ppt-control";
+const LABEL_STOPPED = "Slideshow stopped";
+const LABEL_RUNNING = "Slideshow running";
+const LABEL_DISCONNECTED = "Disconnected";
+const LABEL_FINAL_PREFIX = "Final slide ‐ ";
+const LABEL_END_PREFIX = "End of slideshow ‐ ";
var preloaded = false;
var preload = [];
-function imageRefresh(id) {
- img = document.getElementById(id);
- var d = new Date;
- var http = img.src;
- if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; }
- img.src = http + '?t=' + d.getTime();
-}
-
-function startWebsocket() {
- ws = new WebSocket("ws://" + window.location.host + ":5678/");
- ws.onclose = function(){
- //websocket = null;
- setTimeout(function(){startWebsocket()}, 10000);
- }
- return ws;
-}
-
-var websocket = startWebsocket();
-
-var prev = document.querySelector('#prev'),
+var presentation = document.querySelector('#presentation'),
+ startBtn = document.querySelector('.start'),
+ stopBtn = document.querySelector('.stop'),
+ prev = document.querySelector('#prev'),
next = document.querySelector('#next'),
first = document.querySelector('#first'),
last = document.querySelector('#last'),
slide_label = document.querySelector('#slide_label'),
current = document.querySelector('#current'),
total = document.querySelector('#total'),
- users = document.querySelector('.users'),
+ status_text = document.querySelector('.status_text'),
+ presentation_text = document.querySelector('.presentation_text'),
current_img = document.querySelector('#current_img'),
next_img = document.querySelector('#next_img'),
current_div = document.querySelector('#current_div'),
show_next = document.querySelector('#show_next'),
shortcuts = document.querySelector('#shortcuts');
+var presentationData = {};
+var presentationOptions = {};
+
+
+function getPresentationName() {
+ if (presentation.selectedOptions.length > 0) {
+ return presentation.selectedOptions[0].innerText;
+ } else {
+ return "";
+ }
+}
+
+
+function startWebsocket() {
+ console.log("Attempting to connect")
+ ws = new WebSocket("ws://" + window.location.host + ":5678/");
+ ws.onmessage = receive_message;
+ ws.onclose = function(){
+ ws = null;
+ setTimeout(function(){websocket = startWebsocket()}, 1000);
+ }
+ if (ws.readyState !== WebSocket.OPEN) {
+ disconnect()
+ }
+ return ws;
+}
+
+var websocket = startWebsocket();
+
prev.onclick = function (event) {
- websocket.send(JSON.stringify({action: 'prev'}));
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'prev'}));
+ }
}
next.onclick = function (event) {
- websocket.send(JSON.stringify({action: 'next'}));
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'next'}));
+ }
}
first.onclick = function (event) {
- websocket.send(JSON.stringify({action: 'first'}));
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'first'}));
+ }
}
last.onclick = function (event) {
- websocket.send(JSON.stringify({action: 'last'}));
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'last'}));
+ }
}
black.onclick = function (event) {
- websocket.send(JSON.stringify({action: 'black'}));
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'black'}));
+ }
}
white.onclick = function (event) {
- websocket.send(JSON.stringify({action: 'white'}));
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'white'}));
+ }
}
current.onblur = function (event) {
- websocket.send(JSON.stringify({action: 'goto', value: current.value}));
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'goto', value: current.value}));
+ }
+}
+
+startBtn.onclick = function (event) {
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'start'}));
+ }
+}
+
+stopBtn.onclick = function (event) {
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'stop'}));
+ }
}
current.addEventListener('keyup',function(e){
if (e.which == 13) this.blur();
});
+
+presentation.addEventListener('change',function(event){
+ refreshInterface();
+});
+
current_img.onclick = function (event) {
next.click()
}
next.click()
}
+window.addEventListener('resize', function(event) {set_control_width()}, true);
+
function sync_current() {
if (show_current.checked) {
case "b":
case "B":
black.click();
+ break;
case "w":
case "W":
white.click();
}
});
-function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
+function refreshInterface() {
+ var d = new Date;
+ if (Object.keys(presentationData).length > 0) {
+ currentPresentationData = presentationData[getPresentationName()];
+ presentation_text.style.display = "block";
+ status_text.innerHTML = LABEL_RUNNING;
+ startBtn.style.display = "none";
+ stopBtn.style.display = "block";
+ if (show_current.checked) {
+ switch (currentPresentationData.visible) {
+ case 3:
+ current_img.src = "/black.jpg";
+ break;
+ case 4:
+ current_img.src = "/white.jpg";
+ break;
+ default:
+ current_img.src = "/cache/" + currentPresentationData.name + "/" + currentPresentationData.slide_current + ".jpg?t=" + d.getTime();
+ break;
+ }
+ }
+ if (currentPresentationData.slide_current == currentPresentationData.slide_total) {
+ status_text.innerHTML = LABEL_FINAL_PREFIX + LABEL_RUNNING;
+ }
+ if (currentPresentationData.slide_current == currentPresentationData.slide_total + 1) {
+ status_text.innerHTML = LABEL_END_PREFIX + LABEL_RUNNING;
+ next_img.src = "/black.jpg";
+ } else {
+ next_img.src = "/cache/" + currentPresentationData.name + "/" + (currentPresentationData.slide_current + 1) + ".jpg?t=" + d.getTime();
+ }
+ if (currentPresentationData.slide_current == 0) {
+ current_img.src = "/black.jpg";
+ next_img.src = "/black.jpg";
+ status_text.innerHTML = LABEL_STOPPED;
+ startBtn.style.display = "block";
+ stopBtn.style.display = "none";
+ }
+
+ if (document.activeElement != current) {
+ current.value = currentPresentationData.slide_current;
+ }
+ total.textContent = currentPresentationData.slide_total;
+ document.title = currentPresentationData.name;
+ } else {
+ disconnect()
+ }
}
function disconnect() {
- document.title = DEFAULT_TITLE;
+ console.log("Disconnecting")
+ document.title = DEFAULT_TITLE;
current_img.src = "/black.jpg";
next_img.src = "/black.jpg";
- users.textContent = "Connection to PowerPoint failed";
-}
-
-function update_current() {
-}
-
-function update_next() {
+ status_text.innerHTML = LABEL_DISCONNECTED;
+ total.textContent = "?";
+ current.value = "";
+ presentation_text.style.display = "none";
+ startBtn.style.display = "none";
+ stopBtn.style.display = "none";
}
-websocket.onmessage = function (event) {
+function receive_message(event) {
data = JSON.parse(event.data);
- switch (data.type) {
- case 'state':
- if (data.connected == "0" || data.connected == 0) {
- console.log("Disconnected");
- disconnect();
- break;
- }
- var d = new Date;
- if (show_current.checked) {
- switch (data.visible) {
- case 3:
- current_img.src = "/black.jpg";
- break;
- case 4:
- current_img.src = "/white.jpg";
- break;
- default:
- current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
- //current_img.src = "/cache/" + data.current + ".jpg";
- break;
- }
- }
- if (data.current == data.total + 1) {
- next_img.src = "/cache/" + (data.total + 1) + ".jpg?t=" + d.getTime();
- //next_img.src = "/cache/" + (data.total + 1) + ".jpg";
- } else {
- next_img.src = "/cache/" + (data.current + 1) + ".jpg?t=" + d.getTime();
- //next_img.src = "/cache/" + (data.current + 1) + ".jpg";
- }
-
- if (document.activeElement != current) {
- current.value = data.current;
- }
- total.textContent = data.total;
- document.title = data.name;
- break;
- default:
- console.error(
- "Unsupported event", data);
+ if (Object.keys(presentationData).includes(data.name)) {
+ // Existing presentation
+ presentationData[data.name] = {"name": data.name, "pres_open": data.pres_open, "slideshow": data.slideshow, "visible": data.visible, "slide_current": data.slide_current, "slide_total": data.slide_total, "option": presentationData[data.name].option};
+ } else {
+ console.log("Adding new presentation " + data.name);
+ var dropdownOption = document.createElement("option");
+ dropdownOption.textContent = data.name;
+ dropdownOption.value = data.name;
+ presentationData[data.name] = {"name": data.name, "pres_open": data.pres_open, "slideshow": data.slideshow, "visible": data.visible, "slide_current": data.slide_current, "slide_total": data.slide_total, "option": dropdownOption};
+ presentation.appendChild(dropdownOption);
+ }
+ if (! presentationData[data.name].pres_open) {
+ presentation.removeChild(presentationData[data.name].option);
+ delete presentationData[data.name]
+ disconnect()
+
+ //console.log("Deleting presentation data from list");
+ //delete presentationData[data.name];
+ //presentationOptions[data.name].remove()
}
+ refreshInterface()
+
if (preloaded == false && ! isNaN(total.textContent)) {
image = document.getElementById("preload_img");
for (let i=1; i<=Number(total.textContent); i++) {
- image.src = "/cache/" + i + ".jpg";
+ image.src = "/cache/" + getPresentationName() + "/" + i + ".jpg";
preload.push(image);
- console.log("Preloaded " + total.textContent);
- //sleep(0.5)
}
preloaded = true;
}