Compare commits
No commits in common. "b04a376b1dd1500029adfa7158d7418aead65ff7" and "2e1fc97f6f0c75a17391a72c8d359a540a2968d1" have entirely different histories.
b04a376b1d
...
2e1fc97f6f
7
index.js
7
index.js
@ -156,15 +156,10 @@ app.get("/", function (req, res) {
|
||||
});
|
||||
|
||||
app.get("/timer", function (req, res) {
|
||||
const data = fs.readFileSync("templates/ng-timerview.html", "utf8");
|
||||
const data = fs.readFileSync("templates/timerPage.html", "utf8");
|
||||
res.send(data);
|
||||
});
|
||||
|
||||
app.get("/timer-old", function (req, res) {
|
||||
const data = fs.readFileSync("templates/timerPage.html", "utf8");
|
||||
res.send(data);
|
||||
});
|
||||
|
||||
app.get("/api/v1/data", function (req, res) {
|
||||
currentState.srvTime = new Date().getTime()
|
||||
res.json(currentState);
|
||||
|
||||
@ -30,9 +30,8 @@
|
||||
{
|
||||
"timer": "Timer",
|
||||
"clock": "Uhr",
|
||||
"black": "Leer",
|
||||
"test": "Testbild",
|
||||
"screensaver": "Bildschirmschoner"
|
||||
"black": "Schwarz",
|
||||
"test": "Testbild"
|
||||
},
|
||||
"labels":
|
||||
{
|
||||
|
||||
@ -32,8 +32,7 @@
|
||||
"timer": "Timer",
|
||||
"clock": "Clock",
|
||||
"black": "Black",
|
||||
"test": "Testimage",
|
||||
"screensaver": "Screensaver"
|
||||
"test": "Testimage"
|
||||
},
|
||||
"labels":
|
||||
{
|
||||
|
||||
@ -31,8 +31,7 @@
|
||||
"timer": "████",
|
||||
"clock": "█████",
|
||||
"black": "████",
|
||||
"test": "███████",
|
||||
"screensaver": "████████"
|
||||
"test": "███████"
|
||||
},
|
||||
"labels":
|
||||
{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "opencountdown",
|
||||
"version": "1.0.6",
|
||||
"version": "1.0.5",
|
||||
"description": "An opensource countdown",
|
||||
"main": "startHandler.js",
|
||||
"scripts": {
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
body {
|
||||
font-size:0.3em;
|
||||
}
|
||||
|
||||
.moverLogo {
|
||||
height: 80px !important;
|
||||
}
|
||||
@ -110,48 +110,4 @@ animation:fade 1000ms infinite;
|
||||
width: 100vw;
|
||||
font-size: x-large;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--my-end-left: 99%;
|
||||
--my-end-top: 99%;
|
||||
}
|
||||
|
||||
|
||||
#moveClock {
|
||||
font-size: 6em;
|
||||
font-family: sans-serif;
|
||||
position: absolute;
|
||||
-webkit-animation: moveX 40s linear 0s infinite alternate, moveY 45s linear 0s infinite alternate;
|
||||
-moz-animation: moveX 40s linear 0s infinite alternate, moveY 45s linear 0s infinite alternate;
|
||||
-o-animation: moveX 40s linear 0s infinite alternate, moveY 45s linear 0s infinite alternate;
|
||||
animation: moveX 40s linear 0s infinite alternate, moveY 45s linear 0s infinite alternate;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes moveX {
|
||||
from { left: 0; } to { left: var(--my-end-left) }
|
||||
}
|
||||
@-moz-keyframes moveX {
|
||||
from { left: 0; } to { left: var(--my-end-left); }
|
||||
}
|
||||
@-o-keyframes moveX {
|
||||
from { left: 0; } to { left: var(--my-end-left); }
|
||||
}
|
||||
@keyframes moveX {
|
||||
from { left: 0; } to { left: var(--my-end-left); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes moveY {
|
||||
from { top: 0; } to { top: var(--my-end-top); }
|
||||
}
|
||||
@-moz-keyframes moveY {
|
||||
from { top: 0; } to { top: var(--my-end-top); }
|
||||
}
|
||||
@-o-keyframes moveY {
|
||||
from { top: 0; } to { top: var(--my-end-top); }
|
||||
}
|
||||
@keyframes moveY {
|
||||
from { top: 0; } to { top: var(--my-end-top); }
|
||||
}
|
||||
}
|
||||
@ -25,7 +25,7 @@ function convertColorSegments(elementId) {
|
||||
$(function () {
|
||||
// $(".numVal").bind("DOMSubtreeModified", alert);
|
||||
|
||||
const modes = ["timer", "clock", "black", "test", "screensaver"]
|
||||
const modes = ["timer", "clock", "black", "test"]
|
||||
let selectPresetTime = 0;
|
||||
|
||||
if (Cookies.get("interfaceColor") != undefined) {
|
||||
|
||||
@ -13,44 +13,44 @@ let lastTime = "00:00:00";
|
||||
let timerCountdownFirst = true;
|
||||
|
||||
socket.onopen = function (e) {
|
||||
// alert("[open] Connection established");
|
||||
//alert("Sending to server");
|
||||
socket.send("new client");
|
||||
// alert("[open] Connection established");
|
||||
//alert("Sending to server");
|
||||
socket.send("new client");
|
||||
};
|
||||
|
||||
socket.onmessage = function (event) {
|
||||
// alert(`[message] Data received from server: ${event.data}`);
|
||||
let inData = JSON.parse(event.data)
|
||||
if (isFirstPacket) {
|
||||
isFirstPacket = false
|
||||
dataFame = JSON.parse(event.data);
|
||||
timeDiff = new Date().getTime() - dataFame.srvTime
|
||||
} else {
|
||||
if (inData.sessionToken == dataFame.sessionToken) {
|
||||
dataFame = JSON.parse(event.data);
|
||||
timeDiff = new Date().getTime() - dataFame.srvTime
|
||||
} else {
|
||||
if (ackdSessionToken == false) {
|
||||
// alert(`[message] Data received from server: ${event.data}`);
|
||||
let inData = JSON.parse(event.data)
|
||||
if (isFirstPacket) {
|
||||
isFirstPacket = false
|
||||
dataFame = JSON.parse(event.data);
|
||||
timeDiff = new Date().getTime() - dataFame.srvTime
|
||||
} else {
|
||||
if (inData.sessionToken == dataFame.sessionToken) {
|
||||
dataFame = JSON.parse(event.data);
|
||||
timeDiff = new Date().getTime() - dataFame.srvTime
|
||||
} else {
|
||||
if (ackdSessionToken == false) {
|
||||
|
||||
ackdSessionToken = true
|
||||
ackdSessionToken = true
|
||||
|
||||
if (confirm("Session token mismatch, reload the page?")) {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (confirm("Session token mismatch, reload the page?")) {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
socket.onclose = function (event) {
|
||||
if (event.wasClean) {
|
||||
console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
|
||||
} else {
|
||||
// e.g. server process killed or network down
|
||||
// event.code is usually 1006 in this case
|
||||
console.error('[close] Connection died');
|
||||
}
|
||||
if (event.wasClean) {
|
||||
console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
|
||||
} else {
|
||||
// e.g. server process killed or network down
|
||||
// event.code is usually 1006 in this case
|
||||
console.error('[close] Connection died');
|
||||
}
|
||||
};
|
||||
|
||||
allowFullscreen = true
|
||||
@ -58,229 +58,229 @@ let dataFame = {}
|
||||
let timeDiff = 0
|
||||
|
||||
function enterFullscreen(element) {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen();
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
}
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen();
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function returnData() {
|
||||
return (JSON.parse(document.getElementById("incomeData").innerHTML))
|
||||
return (JSON.parse(document.getElementById("incomeData").innerHTML))
|
||||
}
|
||||
|
||||
function percentage(partialValue, totalValue) {
|
||||
return (100 * partialValue) / totalValue;
|
||||
return (100 * partialValue) / totalValue;
|
||||
}
|
||||
|
||||
function updateFullscreen() {
|
||||
if (JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen && allowFullscreen) {
|
||||
enterFullscreen(document.documentElement)
|
||||
}
|
||||
if (JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen && allowFullscreen) {
|
||||
enterFullscreen(document.documentElement)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function msToTime(s, data) {
|
||||
isSmallerThenZero = false
|
||||
if (s < 0) {
|
||||
isSmallerThenZero = true
|
||||
}
|
||||
isSmallerThenZero = false
|
||||
if (s < 0) {
|
||||
isSmallerThenZero = true
|
||||
}
|
||||
|
||||
var ms = s % 1000;
|
||||
s = (s - ms) / 1000;
|
||||
var secs = s % 60;
|
||||
s = (s - secs) / 60;
|
||||
var mins = s % 60;
|
||||
var hrs = (s - mins) / 60;
|
||||
let out = ""
|
||||
var ms = s % 1000;
|
||||
s = (s - ms) / 1000;
|
||||
var secs = s % 60;
|
||||
s = (s - secs) / 60;
|
||||
var mins = s % 60;
|
||||
var hrs = (s - mins) / 60;
|
||||
let out = ""
|
||||
|
||||
if (!data.showMilliSeconds) {
|
||||
out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00' + Math.abs(mins)).slice(-2) + ':' + ('00' + Math.abs(secs)).slice(-2)
|
||||
} else {
|
||||
out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00' + Math.abs(mins)).slice(-2) + ':' + ('00' + Math.abs(secs)).slice(-2) + '.' + ('000' + Math.abs(ms)).slice(-3)
|
||||
}
|
||||
if (!data.showMilliSeconds) {
|
||||
out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00' + Math.abs(mins)).slice(-2) + ':' + ('00' + Math.abs(secs)).slice(-2)
|
||||
} else {
|
||||
out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00' + Math.abs(mins)).slice(-2) + ':' + ('00' + Math.abs(secs)).slice(-2) + '.' + ('000' + Math.abs(ms)).slice(-3)
|
||||
}
|
||||
|
||||
if (isSmallerThenZero) {
|
||||
out = "-" + out
|
||||
}
|
||||
return out;
|
||||
if (isSmallerThenZero) {
|
||||
out = "-" + out
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function findProgessColor(colors, value) {
|
||||
const allColors = Object.keys(colors);
|
||||
let resColor = colors["START"]
|
||||
for (let color in allColors) {
|
||||
const currColor = allColors[color]
|
||||
// console.log(color, currColor, parseInt(currColor), value, colors[String(currColor)], resColor)
|
||||
if (value <= parseInt(currColor)) {
|
||||
resColor = colors[String(currColor)]
|
||||
break
|
||||
}
|
||||
}
|
||||
return (resColor)
|
||||
const allColors = Object.keys(colors);
|
||||
let resColor = colors["START"]
|
||||
for (let color in allColors) {
|
||||
const currColor = allColors[color]
|
||||
// console.log(color, currColor, parseInt(currColor), value, colors[String(currColor)], resColor)
|
||||
if (value <= parseInt(currColor)) {
|
||||
resColor = colors[String(currColor)]
|
||||
break
|
||||
}
|
||||
}
|
||||
return (resColor)
|
||||
}
|
||||
|
||||
function requestBackend() {
|
||||
resp = httpGet("/api/v1/data");
|
||||
resp.onloadend = function (e) {
|
||||
if (resp.status == 200) {
|
||||
resp = resp.responseText;
|
||||
var data = JSON.parse(resp);
|
||||
timeDiff = new Date().getTime() - data.srvTime
|
||||
dataFame = data;
|
||||
}
|
||||
}
|
||||
resp = httpGet("/api/v1/data");
|
||||
resp.onloadend = function (e) {
|
||||
if (resp.status == 200) {
|
||||
resp = resp.responseText;
|
||||
var data = JSON.parse(resp);
|
||||
timeDiff = new Date().getTime() - data.srvTime
|
||||
dataFame = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let isSlowed = false
|
||||
|
||||
function handleRecovery() {
|
||||
var img = document.body.appendChild(document.createElement("img"));
|
||||
img.onload = function () {
|
||||
location.reload();
|
||||
};
|
||||
img.src = "SMPTE_Color_Bars.svg";
|
||||
var img = document.body.appendChild(document.createElement("img"));
|
||||
img.onload = function () {
|
||||
location.reload();
|
||||
};
|
||||
img.src = "SMPTE_Color_Bars.svg";
|
||||
}
|
||||
|
||||
let recoInter = -1
|
||||
|
||||
function handleUpdate() {
|
||||
var data = dataFame;
|
||||
document.getElementById("incomeData").innerHTML = JSON.stringify(data)
|
||||
document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime);
|
||||
var data = dataFame;
|
||||
document.getElementById("incomeData").innerHTML = JSON.stringify(data)
|
||||
document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime);
|
||||
|
||||
if (data.debug) {
|
||||
document.getElementById("timediff").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("timediff").style.display = "none";
|
||||
}
|
||||
|
||||
if (data.debug) {
|
||||
document.getElementById("timediff").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("timediff").style.display = "none";
|
||||
}
|
||||
if (data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true") && allowFullscreen) {
|
||||
enterFullscreen(document.documentElement);
|
||||
document.getElementById("initalDate").innerHTML = "false"
|
||||
}
|
||||
|
||||
if (data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true") && allowFullscreen) {
|
||||
enterFullscreen(document.documentElement);
|
||||
document.getElementById("initalDate").innerHTML = "false"
|
||||
}
|
||||
if (data.showMessage) {
|
||||
document.getElementById("overlay").style.display = "block";
|
||||
document.getElementById("text").innerHTML = data.message
|
||||
} else {
|
||||
document.getElementById("overlay").style.display = "none";
|
||||
}
|
||||
|
||||
if (data.showMessage) {
|
||||
document.getElementById("overlay").style.display = "block";
|
||||
document.getElementById("text").innerHTML = data.message
|
||||
} else {
|
||||
document.getElementById("overlay").style.display = "none";
|
||||
}
|
||||
if (data.showTimeOnCountdown && data.mode == "timer") {
|
||||
document.getElementById("clockSec").innerHTML = getTime();
|
||||
} else {
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
}
|
||||
|
||||
if (data.showTimeOnCountdown && data.mode == "timer") {
|
||||
document.getElementById("clockSec").innerHTML = getTime();
|
||||
} else {
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
}
|
||||
|
||||
if (new Date().getTime() - data.messageAppearTime < 5000) {
|
||||
if (!document.getElementById("text").classList.contains('blink')) {
|
||||
document.getElementById("text").classList.add("blink")
|
||||
}
|
||||
} else {
|
||||
if (document.getElementById("text").classList.contains('blink')) {
|
||||
document.getElementById("text").classList.remove("blink")
|
||||
}
|
||||
}
|
||||
if (new Date().getTime() - data.messageAppearTime < 5000) {
|
||||
if (!document.getElementById("text").classList.contains('blink')) {
|
||||
document.getElementById("text").classList.add("blink")
|
||||
}
|
||||
} else {
|
||||
if (document.getElementById("text").classList.contains('blink')) {
|
||||
document.getElementById("text").classList.remove("blink")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (data.mode == "clock") {
|
||||
document.getElementById("timer").innerHTML = getTime();
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
document.getElementById("wholeProgBar").style.display = "none";
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
document.getElementById("timer").style.color = "white"
|
||||
timerCountdownFirst = true;
|
||||
if (data.mode == "clock") {
|
||||
document.getElementById("timer").innerHTML = getTime();
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
document.getElementById("wholeProgBar").style.display = "none";
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
document.getElementById("timer").style.color = "white"
|
||||
timerCountdownFirst = true;
|
||||
|
||||
} else if (data.mode == "timer") {
|
||||
if (data.showProgressbar) {
|
||||
document.getElementById("wholeProgBar").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("wholeProgBar").style.display = "none";
|
||||
}
|
||||
} else if (data.mode == "timer") {
|
||||
if(data.showProgressbar) {
|
||||
document.getElementById("wholeProgBar").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("wholeProgBar").style.display = "none";
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
|
||||
const now = new Date()
|
||||
if(timerCountdownFirst){
|
||||
const diff = data.countdownGoal - now.getTime()
|
||||
timerCountdownFirst = false
|
||||
document.getElementById("timer").innerHTML = msToTime(diff, data);
|
||||
if (diff > 0) {
|
||||
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
|
||||
} else {
|
||||
document.getElementById("progBar").style.width = "0%";
|
||||
}
|
||||
|
||||
if (timerCountdownFirst) {
|
||||
const diff = data.countdownGoal - now.getTime()
|
||||
timerCountdownFirst = false
|
||||
document.getElementById("timer").innerHTML = msToTime(diff, data);
|
||||
if (diff > 0) {
|
||||
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
|
||||
} else {
|
||||
document.getElementById("progBar").style.width = "0%";
|
||||
}
|
||||
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
if (data.enableColoredText) {
|
||||
document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
|
||||
} else {
|
||||
document.getElementById("timer").style.color = "white"
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
if (data.enableColoredText) {
|
||||
document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
|
||||
} else {
|
||||
document.getElementById("timer").style.color = "white"
|
||||
}
|
||||
}
|
||||
if (data.timerRunState) {
|
||||
const diff = data.countdownGoal - now.getTime()
|
||||
document.getElementById("timer").innerHTML = msToTime(diff, data);
|
||||
lastTime = msToTime(diff, data);
|
||||
if (diff > 0) {
|
||||
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
|
||||
} else {
|
||||
document.getElementById("progBar").style.width = "0%";
|
||||
}
|
||||
|
||||
if (data.timerRunState) {
|
||||
const diff = data.countdownGoal - now.getTime()
|
||||
document.getElementById("timer").innerHTML = msToTime(diff, data);
|
||||
lastTime = msToTime(diff, data);
|
||||
if (diff > 0) {
|
||||
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
|
||||
} else {
|
||||
document.getElementById("progBar").style.width = "0%";
|
||||
}
|
||||
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
if (data.enableColoredText) {
|
||||
document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
|
||||
} else {
|
||||
document.getElementById("timer").style.color = "white"
|
||||
}
|
||||
|
||||
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
if (data.enableColoredText) {
|
||||
document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
|
||||
} else {
|
||||
document.getElementById("timer").style.color = "white"
|
||||
}
|
||||
} else {
|
||||
document.getElementById("timer").innerHTML = lastTime
|
||||
}
|
||||
} else if (data.mode == "black") {
|
||||
timerCountdownFirst = true;
|
||||
document.getElementById("timer").innerHTML = "";
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
document.getElementById("wholeProgBar").style.display = "none";
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
|
||||
} else {
|
||||
document.getElementById("timer").innerHTML = lastTime
|
||||
}
|
||||
} else if (data.mode == "black") {
|
||||
timerCountdownFirst = true;
|
||||
document.getElementById("timer").innerHTML = "";
|
||||
document.getElementById("testImg").style.display = "none";
|
||||
document.getElementById("wholeProgBar").style.display = "none";
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
|
||||
} else if (data.mode == "test") {
|
||||
timerCountdownFirst = true;
|
||||
document.getElementById("timer").innerHTML = "";
|
||||
document.getElementById("testImg").style.display = "block";
|
||||
document.getElementById("progBar").style.display = "none";
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
}
|
||||
} else if (data.mode == "test") {
|
||||
timerCountdownFirst = true;
|
||||
document.getElementById("timer").innerHTML = "";
|
||||
document.getElementById("testImg").style.display = "block";
|
||||
document.getElementById("progBar").style.display = "none";
|
||||
document.getElementById("clockSec").innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
function httpGet(theUrl) {
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.open("GET", theUrl, true); // false for synchronous request
|
||||
xmlHttp.send(null);
|
||||
xmlHttp.onerror = function (e) {
|
||||
console.log(e);
|
||||
};
|
||||
return xmlHttp;
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.open("GET", theUrl, true); // false for synchronous request
|
||||
xmlHttp.send(null);
|
||||
xmlHttp.onerror = function (e) {
|
||||
console.log(e);
|
||||
};
|
||||
return xmlHttp;
|
||||
}
|
||||
|
||||
function getTime() {
|
||||
var date = new Date();
|
||||
var h = date.getHours(); // 0 - 23
|
||||
var m = date.getMinutes(); // 0 - 59
|
||||
var s = date.getSeconds(); // 0 - 59
|
||||
var date = new Date();
|
||||
var h = date.getHours(); // 0 - 23
|
||||
var m = date.getMinutes(); // 0 - 59
|
||||
var s = date.getSeconds(); // 0 - 59
|
||||
|
||||
h = h < 10 ? "0" + h : h;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
s = s < 10 ? "0" + s : s;
|
||||
h = h < 10 ? "0" + h : h;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
s = s < 10 ? "0" + s : s;
|
||||
|
||||
var time = h + ":" + m + ":" + s;
|
||||
return time;
|
||||
var time = h + ":" + m + ":" + s;
|
||||
return time;
|
||||
}
|
||||
|
||||
|
||||
@ -291,7 +291,7 @@ let temp = new URLSearchParams(window.location.search).get("smaller");
|
||||
|
||||
|
||||
if (temp == "true") {
|
||||
var cssURL = '/css/smallerTextMod.css';
|
||||
document.head.innerHTML += '<link rel="stylesheet" href="' + cssURL + '"/>'
|
||||
allowFullscreen = false
|
||||
var cssURL = '/css/smallerTextMod.css';
|
||||
document.head.innerHTML += '<link rel="stylesheet" href="' + cssURL + '"/>'
|
||||
allowFullscreen = false
|
||||
}
|
||||
|
||||
@ -1,281 +0,0 @@
|
||||
|
||||
|
||||
// References to the HTML elements
|
||||
let warningBox = document.getElementById("warningBanner");
|
||||
let timer = document.getElementById("timer");
|
||||
let testImage = document.getElementById("testImg");
|
||||
let clockSec = document.getElementById("clockSec");
|
||||
let timeDiffContainer = document.getElementById("timediff");
|
||||
let wholeProgressBar = document.getElementById("wholeProgBar");
|
||||
let progressBar = document.getElementById("progBar");
|
||||
let overlay = document.getElementById("overlay");
|
||||
let overlayText = document.getElementById("text");
|
||||
let screensaverText = document.getElementById("moveClock");
|
||||
let screensaverClock = document.getElementById("screensaverClock");
|
||||
|
||||
// Prepare connection to backend
|
||||
let socket = new ReconnectingWebSocket("ws://127.0.0.1:" + location.port);
|
||||
|
||||
// State variables
|
||||
let ackSessionTokenChange = false; // Wether the user has acknowledged the session token mismatch
|
||||
let dataFrame = {};
|
||||
let timeDiffToServer = 0;
|
||||
let sessionToken = ""; // Our current session token
|
||||
let defaultToFullscreen = false;
|
||||
let allowFullscreen = true; // If the system is allowed to go fullscreen
|
||||
|
||||
// Scale down the interface if the smaller parameter is set
|
||||
let smallerFlag = new URLSearchParams(window.location.search).get("smaller");
|
||||
if (smallerFlag == "true") {
|
||||
var cssURL = '/css/smallerTextMod.css';
|
||||
document.head.innerHTML += '<link rel="stylesheet" href="' + cssURL + '"/>';
|
||||
allowFullscreen = false;
|
||||
}
|
||||
|
||||
// Handle the screensaver to fit the screen
|
||||
setTimeout(handleDVD, 200);
|
||||
setTimeout(handleDVD, 400);
|
||||
document.body.onresize = handleDVD;
|
||||
|
||||
// Handle connection event
|
||||
socket.onopen = function (e) {
|
||||
socket.send("new client");
|
||||
};
|
||||
|
||||
// Handle connection close event
|
||||
socket.onclose = function (event) {
|
||||
warningBox.style.display = "block"; // Show warning banner
|
||||
if (event.wasClean) {
|
||||
console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
|
||||
} else {
|
||||
// e.g. server process killed or network down
|
||||
// event.code is usually 1006 in this case
|
||||
console.error('[close] Connection died');
|
||||
}
|
||||
};
|
||||
|
||||
// Handle incoming data
|
||||
socket.onmessage = function (event) {
|
||||
// Parse the incoming data as JSON
|
||||
const inData = JSON.parse(event.data);
|
||||
// Check if the backend has restarted in the background
|
||||
if (inData.sessionToken == sessionToken || sessionToken == "") {
|
||||
dataFrame = JSON.parse(event.data);
|
||||
// Time difference between the client and the server
|
||||
timeDiffToServer = new Date().getTime() - dataFrame.srvTime;
|
||||
|
||||
if(dataFrame.debug) {
|
||||
console.log(dataFrame)
|
||||
timeDiffContainer.innerHTML = timeDiffToServer
|
||||
timeDiffContainer.style.display = "block"
|
||||
} else {
|
||||
timeDiffContainer.style.display = "none"
|
||||
}
|
||||
|
||||
// Process the data
|
||||
handleUpdate();
|
||||
} else {
|
||||
// If the user has not acknowledged the session token mismatch, show a warning
|
||||
if (!ackSessionTokenChange) {
|
||||
ackSessionTokenChange = true;
|
||||
if (confirm("Session token mismatch, reload the page?")) {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Update timer data regularly (every 20ms)
|
||||
let updateIntervalReference = setInterval(handleUpdate, 20);
|
||||
|
||||
// Helper functions
|
||||
|
||||
// Get the current time in a HH:MM:SS format
|
||||
function getTime() {
|
||||
var date = new Date();
|
||||
var h = date.getHours(); // 0 - 23
|
||||
var m = date.getMinutes(); // 0 - 59
|
||||
var s = date.getSeconds(); // 0 - 59
|
||||
|
||||
h = h < 10 ? "0" + h : h;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
s = s < 10 ? "0" + s : s;
|
||||
|
||||
var time = h + ":" + m + ":" + s;
|
||||
return time;
|
||||
}
|
||||
|
||||
function percentage(partialValue, totalValue) {
|
||||
return (100 * partialValue) / totalValue;
|
||||
}
|
||||
|
||||
function msToTime(s, data) {
|
||||
isSmallerThenZero = false
|
||||
if (s < 0) {
|
||||
isSmallerThenZero = true
|
||||
}
|
||||
|
||||
var ms = s % 1000;
|
||||
s = (s - ms) / 1000;
|
||||
var secs = s % 60;
|
||||
s = (s - secs) / 60;
|
||||
var mins = s % 60;
|
||||
var hrs = (s - mins) / 60;
|
||||
let out = ""
|
||||
|
||||
if (!data.showMilliSeconds) {
|
||||
out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00' + Math.abs(mins)).slice(-2) + ':' + ('00' + Math.abs(secs)).slice(-2)
|
||||
} else {
|
||||
out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00' + Math.abs(mins)).slice(-2) + ':' + ('00' + Math.abs(secs)).slice(-2) + '.' + ('000' + Math.abs(ms)).slice(-3)
|
||||
}
|
||||
|
||||
if (isSmallerThenZero) {
|
||||
out = "-" + out
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function findProgessColor(colors, value) {
|
||||
const allColors = Object.keys(colors);
|
||||
let resColor = colors["START"]
|
||||
for (let color in allColors) {
|
||||
const currColor = allColors[color]
|
||||
if (value <= parseInt(currColor)) {
|
||||
resColor = colors[String(currColor)]
|
||||
break
|
||||
}
|
||||
}
|
||||
return (resColor)
|
||||
}
|
||||
|
||||
function handleUpdate() {
|
||||
defaultToFullscreen = dataFrame.defaultFullScreen;
|
||||
switch (dataFrame.mode) {
|
||||
case "timer":
|
||||
// Timer mode
|
||||
timer.style.display = "block";
|
||||
testImage.style.display = "none";
|
||||
screensaverText.style.display = "none";
|
||||
|
||||
if(dataFrame.showTimeOnCountdown) {
|
||||
// Show time on countdown
|
||||
clockSec.innerHTML = getTime();
|
||||
clockSec.style.display = "block";
|
||||
} else {
|
||||
clockSec.style.display = "none";
|
||||
}
|
||||
if(dataFrame.showProgressbar) {
|
||||
// Show progressbar
|
||||
wholeProgressBar.style.display = "block";
|
||||
} else {
|
||||
wholeProgressBar.style.display = "none";
|
||||
}
|
||||
// Calculate the time difference between the goal and the current time
|
||||
const now = new Date();
|
||||
let diff = 0;
|
||||
if(dataFrame.timerRunState) {
|
||||
diff = dataFrame.countdownGoal - now.getTime()
|
||||
} else {
|
||||
diff = (now.getTime() - dataFrame.pauseMoment) + dataFrame.countdownGoal - now.getTime()
|
||||
}
|
||||
|
||||
timer.innerHTML = msToTime(diff, dataFrame);
|
||||
|
||||
// Handle the progressbar
|
||||
if (diff >= 0) {
|
||||
progressBar.style.width = percentage(diff, dataFrame.timeAmountInital) + "%";
|
||||
} else {
|
||||
progressBar.style.width = "0%";
|
||||
}
|
||||
progressBar.style.backgroundColor = findProgessColor(dataFrame.colorSegments, diff)
|
||||
|
||||
// Handle the text color
|
||||
if (dataFrame.enableColoredText) {
|
||||
timer.style.color = findProgessColor(dataFrame.textColors, diff)
|
||||
} else {
|
||||
timer.style.color = "white"
|
||||
}
|
||||
break;
|
||||
case "clock":
|
||||
// Clock mode
|
||||
timer.innerHTML = getTime();
|
||||
testImage.style.display = "none";
|
||||
clockSec.style.display = "none";
|
||||
wholeProgressBar.style.display = "none";
|
||||
timer.style.display = "block";
|
||||
screensaverText.style.display = "none";
|
||||
timer.style.color = "white";
|
||||
break;
|
||||
case "black":
|
||||
// Black screen mode
|
||||
testImage.style.display = "none";
|
||||
clockSec.style.display = "none";
|
||||
wholeProgressBar.style.display = "none";
|
||||
timer.style.display = "none";
|
||||
screensaverText.style.display = "none";
|
||||
timer.style.color = "white";
|
||||
break;
|
||||
case "test":
|
||||
// Test image mode
|
||||
testImage.style.display = "block";
|
||||
clockSec.style.display = "none";
|
||||
wholeProgressBar.style.display = "none";
|
||||
timer.style.display = "none";
|
||||
screensaverText.style.display = "none";
|
||||
timer.style.color = "white";
|
||||
break;
|
||||
case "screensaver":
|
||||
// Screensaver mode
|
||||
testImage.style.display = "none";
|
||||
clockSec.style.display = "none";
|
||||
wholeProgressBar.style.display = "none";
|
||||
timer.style.display = "none";
|
||||
timer.style.color = "white";
|
||||
screensaverText.style.display = "block";
|
||||
screensaverClock.innerHTML = getTime();
|
||||
break;
|
||||
}
|
||||
|
||||
// Handle the message overlay
|
||||
if (dataFrame.showMessage) {
|
||||
overlay.style.display = "block";
|
||||
overlayText.innerHTML = dataFrame.message
|
||||
} else {
|
||||
overlay.style.display = "none";
|
||||
}
|
||||
|
||||
// This will result in the text fading in and out when the message changes
|
||||
if (new Date().getTime() - dataFrame.messageAppearTime < 5000) {
|
||||
if (!overlayText.classList.contains('blink')) {
|
||||
overlayText.classList.add("blink")
|
||||
}
|
||||
} else {
|
||||
if (overlayText.classList.contains('blink')) {
|
||||
overlayText.classList.remove("blink")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleDVD() {
|
||||
console.info("Recalculating screensaver size")
|
||||
const objHeight = document.body.offsetHeight - screensaverText.offsetHeight;
|
||||
const objWidth = document.body.offsetWidth - screensaverText.offsetWidth;
|
||||
document.documentElement.style.setProperty('--my-end-left', objWidth + "px");
|
||||
document.documentElement.style.setProperty('--my-end-top', objHeight + "px");
|
||||
}
|
||||
|
||||
function enterFullscreen(element) {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen();
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function updateFullscreen() {
|
||||
if (defaultToFullscreen && allowFullscreen) {
|
||||
enterFullscreen(document.documentElement)
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 145 KiB |
@ -156,9 +156,6 @@
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio4"><%= it.lang.others.test %></label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio5"><%= it.lang.others.screensaver %></label>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>openCountdown - Timerpage</title>
|
||||
<meta name="description" content="openCountdown">
|
||||
<meta name="author" content="TheGreydiamond">
|
||||
|
||||
<link rel="stylesheet" href="css/styles.css?v=1.1">
|
||||
|
||||
<link rel="icon" href="/logo/faviconLogo.svg" type="image/svg+xml">
|
||||
</head>
|
||||
|
||||
<body onclick="updateFullscreen()" onresize="handleDVD()">
|
||||
<div id="overlay">
|
||||
<div id="text">Message here</div>
|
||||
</div>
|
||||
|
||||
<!-- Collection of warning and errors -->
|
||||
<noscript>
|
||||
<div class="connectionWarning">
|
||||
Javascript is disabled. Please enable it to use openCountdown.
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<div class="connectionWarning" id="warningBanner" style="display: none;">
|
||||
Connection lost. Trying to reconnect...
|
||||
</div>
|
||||
|
||||
<!-- Color Bar Image -->
|
||||
<img src='SMPTE_Color_Bars.svg' class='testImg' id="testImg" style="display: none;">
|
||||
</img>
|
||||
|
||||
<div class="container">
|
||||
<div class="progWrapper" id="wholeProgBar">
|
||||
<div class="progBar" id="progBar"></div>
|
||||
</div>
|
||||
<div class="timer" id="timer">
|
||||
00:00:00
|
||||
</div>
|
||||
<div class="clockSec" id="clockSec">
|
||||
</div>
|
||||
<div class="clockSec" id="timediff">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="moveClock" style="display: none;">
|
||||
<img src="logo/logoProposal-invert.svg" alt="openCountdown" height="180px" class="moverLogo" >
|
||||
<center><div id="screensaverClock">
|
||||
00:00:00
|
||||
</div>
|
||||
</center>
|
||||
|
||||
</div>
|
||||
<!-- Load scripts -->
|
||||
<script src="js/reconnecting-websocket.min.js"></script>
|
||||
<script src="js/timer/timerview.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -6,13 +6,12 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>openCountdown - Timerpage</title>
|
||||
<title>openCountdown</title>
|
||||
<meta name="description" content="openCountdown">
|
||||
<meta name="author" content="TheGreydiamond">
|
||||
|
||||
<link rel="stylesheet" href="css/styles.css?v=1.1">
|
||||
|
||||
<link rel="icon" href="/logo/faviconLogo.svg" type="image/svg+xml">
|
||||
</head>
|
||||
|
||||
<body onclick="updateFullscreen()">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user