Project-Name-Here/openCountdown
3
0
Fork 0
Code Issues Pull Requests Releases 6 Wiki Activity

Rewrite of timerpage #7

Merged
grey merged 4 commits from better-timer-page into master 2022-11-15 18:48:57 +01:00
Conversation 0 Commits 4 Files Changed 14 +606 -210
11 changed files with 606 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7dd2438881 - Show all commits

7
index.js
View File

@ -156,10 +156,15 @@ app.get("/", function (req, res) {
}); });
app.get("/timer", function (req, res) { app.get("/timer", function (req, res) {
const data = fs.readFileSync("templates/timerPage.html", "utf8"); const data = fs.readFileSync("templates/ng-timerview.html", "utf8");
res.send(data); 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) { app.get("/api/v1/data", function (req, res) {
currentState.srvTime = new Date().getTime() currentState.srvTime = new Date().getTime()
res.json(currentState); res.json(currentState);

5
lang/de_de.json
View File

@ -30,8 +30,9 @@
{ {
"timer": "Timer", "timer": "Timer",
"clock": "Uhr", "clock": "Uhr",
"black": "Schwarz", "black": "Leer",
"test": "Testbild" "test": "Testbild",
"screensaver": "Bildschirmschoner"
}, },
"labels": "labels":
{ {

3
lang/en_uk.json
View File

@ -32,7 +32,8 @@
"timer": "Timer", "timer": "Timer",
"clock": "Clock", "clock": "Clock",
"black": "Black", "black": "Black",
"test": "Testimage" "test": "Testimage",
"screensaver": "Screensaver"
}, },
"labels": "labels":
{ {

3
lang/proto_black.json
View File

@ -31,7 +31,8 @@
"timer": "████", "timer": "████",
"clock": "█████", "clock": "█████",
"black": "████", "black": "████",
"test": "███████" "test": "███████",
"screensaver": "████████"
}, },
"labels": "labels":
{ {

37
static/css/styles.css
View File

@ -111,3 +111,40 @@ animation:fade 1000ms infinite;
font-size: x-large; font-size: x-large;
font-family: sans-serif; font-family: sans-serif;
} }
#moveClock {
font-size: xx-large;
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;
}
@-webkit-keyframes moveX {
from { left: 0; } to { left: 100%; }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: 100%; }
}
@-o-keyframes moveX {
from { left: 0; } to { left: 100%; }
}
@keyframes moveX {
from { left: 0; } to { left: 100%; }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: 100%; }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: 100%; }
}
@-o-keyframes moveY {
from { top: 0; } to { top: 100%; }
}
@keyframes moveY {
from { top: 0; } to { top: 100%; }
}

2
static/js/interface.js
View File

@ -25,7 +25,7 @@ function convertColorSegments(elementId) {
$(function () { $(function () {
// $(".numVal").bind("DOMSubtreeModified", alert); // $(".numVal").bind("DOMSubtreeModified", alert);
const modes = ["timer", "clock", "black", "test"] const modes = ["timer", "clock", "black", "test", "screensaver"]
let selectPresetTime = 0; let selectPresetTime = 0;
if (Cookies.get("interfaceColor") != undefined) { if (Cookies.get("interfaceColor") != undefined) {

400
static/js/script.js
View File

@ -13,44 +13,44 @@ let lastTime = "00:00:00";
let timerCountdownFirst = true; let timerCountdownFirst = true;
socket.onopen = function (e) { socket.onopen = function (e) {
// alert("[open] Connection established"); // alert("[open] Connection established");
//alert("Sending to server"); //alert("Sending to server");
socket.send("new client"); socket.send("new client");
}; };
socket.onmessage = function (event) { socket.onmessage = function (event) {
// alert(`[message] Data received from server: ${event.data}`); // alert(`[message] Data received from server: ${event.data}`);
let inData = JSON.parse(event.data) let inData = JSON.parse(event.data)
if (isFirstPacket) { if (isFirstPacket) {
isFirstPacket = false isFirstPacket = false
dataFame = JSON.parse(event.data); dataFame = JSON.parse(event.data);
timeDiff = new Date().getTime() - dataFame.srvTime timeDiff = new Date().getTime() - dataFame.srvTime
} else { } else {
if (inData.sessionToken == dataFame.sessionToken) { if (inData.sessionToken == dataFame.sessionToken) {
dataFame = JSON.parse(event.data); dataFame = JSON.parse(event.data);
timeDiff = new Date().getTime() - dataFame.srvTime timeDiff = new Date().getTime() - dataFame.srvTime
} else { } else {
if (ackdSessionToken == false) { if (ackdSessionToken == false) {
ackdSessionToken = true ackdSessionToken = true
if (confirm("Session token mismatch, reload the page?")) { if (confirm("Session token mismatch, reload the page?")) {
location.reload(); location.reload();
} }
} }
} }
} }
}; };
socket.onclose = function (event) { socket.onclose = function (event) {
if (event.wasClean) { if (event.wasClean) {
console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`); console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else { } else {
// e.g. server process killed or network down // e.g. server process killed or network down
// event.code is usually 1006 in this case // event.code is usually 1006 in this case
console.error('[close] Connection died'); console.error('[close] Connection died');
} }
}; };
allowFullscreen = true allowFullscreen = true
@ -58,229 +58,229 @@ let dataFame = {}
let timeDiff = 0 let timeDiff = 0
function enterFullscreen(element) { function enterFullscreen(element) {
if (element.requestFullscreen) { if (element.requestFullscreen) {
element.requestFullscreen(); element.requestFullscreen();
} else if (element.msRequestFullscreen) { } else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) { } else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); element.webkitRequestFullscreen();
} }
} }
function returnData() { function returnData() {
return (JSON.parse(document.getElementById("incomeData").innerHTML)) return (JSON.parse(document.getElementById("incomeData").innerHTML))
} }
function percentage(partialValue, totalValue) { function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue; return (100 * partialValue) / totalValue;
} }
function updateFullscreen() { function updateFullscreen() {
if (JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen && allowFullscreen) { if (JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen && allowFullscreen) {
enterFullscreen(document.documentElement) enterFullscreen(document.documentElement)
} }
} }
function msToTime(s, data) { function msToTime(s, data) {
isSmallerThenZero = false isSmallerThenZero = false
if (s < 0) { if (s < 0) {
isSmallerThenZero = true isSmallerThenZero = true
} }
var ms = s % 1000; var ms = s % 1000;
s = (s - ms) / 1000; s = (s - ms) / 1000;
var secs = s % 60; var secs = s % 60;
s = (s - secs) / 60; s = (s - secs) / 60;
var mins = s % 60; var mins = s % 60;
var hrs = (s - mins) / 60; var hrs = (s - mins) / 60;
let out = "" let out = ""
if (!data.showMilliSeconds) { if (!data.showMilliSeconds) {
out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00' + Math.abs(mins)).slice(-2) + ':' + ('00' + Math.abs(secs)).slice(-2) out = ('00' + Math.abs(hrs)).slice(-2) + ':' + ('00' + Math.abs(mins)).slice(-2) + ':' + ('00' + Math.abs(secs)).slice(-2)
} else { } 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) 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) { if (isSmallerThenZero) {
out = "-" + out out = "-" + out
} }
return out; return out;
} }
function findProgessColor(colors, value) { function findProgessColor(colors, value) {
const allColors = Object.keys(colors); const allColors = Object.keys(colors);
let resColor = colors["START"] let resColor = colors["START"]
for (let color in allColors) { for (let color in allColors) {
const currColor = allColors[color] const currColor = allColors[color]
// console.log(color, currColor, parseInt(currColor), value, colors[String(currColor)], resColor) // console.log(color, currColor, parseInt(currColor), value, colors[String(currColor)], resColor)
if (value <= parseInt(currColor)) { if (value <= parseInt(currColor)) {
resColor = colors[String(currColor)] resColor = colors[String(currColor)]
break break
} }
} }
return (resColor) return (resColor)
} }
function requestBackend() { function requestBackend() {
resp = httpGet("/api/v1/data"); resp = httpGet("/api/v1/data");
resp.onloadend = function (e) { resp.onloadend = function (e) {
if (resp.status == 200) { if (resp.status == 200) {
resp = resp.responseText; resp = resp.responseText;
var data = JSON.parse(resp); var data = JSON.parse(resp);
timeDiff = new Date().getTime() - data.srvTime timeDiff = new Date().getTime() - data.srvTime
dataFame = data; dataFame = data;
} }
} }
} }
let isSlowed = false let isSlowed = false
function handleRecovery() { function handleRecovery() {
var img = document.body.appendChild(document.createElement("img")); var img = document.body.appendChild(document.createElement("img"));
img.onload = function () { img.onload = function () {
location.reload(); location.reload();
}; };
img.src = "SMPTE_Color_Bars.svg"; img.src = "SMPTE_Color_Bars.svg";
} }
let recoInter = -1 let recoInter = -1
function handleUpdate() { function handleUpdate() {
var data = dataFame; var data = dataFame;
document.getElementById("incomeData").innerHTML = JSON.stringify(data) document.getElementById("incomeData").innerHTML = JSON.stringify(data)
document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime); document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime);
if (data.debug) { if (data.debug) {
document.getElementById("timediff").style.display = "block"; document.getElementById("timediff").style.display = "block";
} else { } else {
document.getElementById("timediff").style.display = "none"; document.getElementById("timediff").style.display = "none";
} }
if (data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true") && allowFullscreen) { if (data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true") && allowFullscreen) {
enterFullscreen(document.documentElement); enterFullscreen(document.documentElement);
document.getElementById("initalDate").innerHTML = "false" document.getElementById("initalDate").innerHTML = "false"
} }
if (data.showMessage) { if (data.showMessage) {
document.getElementById("overlay").style.display = "block"; document.getElementById("overlay").style.display = "block";
document.getElementById("text").innerHTML = data.message document.getElementById("text").innerHTML = data.message
} else { } else {
document.getElementById("overlay").style.display = "none"; document.getElementById("overlay").style.display = "none";
} }
if (data.showTimeOnCountdown && data.mode == "timer") { if (data.showTimeOnCountdown && data.mode == "timer") {
document.getElementById("clockSec").innerHTML = getTime(); document.getElementById("clockSec").innerHTML = getTime();
} else { } else {
document.getElementById("clockSec").innerHTML = ""; document.getElementById("clockSec").innerHTML = "";
} }
if (new Date().getTime() - data.messageAppearTime < 5000) { if (new Date().getTime() - data.messageAppearTime < 5000) {
if (!document.getElementById("text").classList.contains('blink')) { if (!document.getElementById("text").classList.contains('blink')) {
document.getElementById("text").classList.add("blink") document.getElementById("text").classList.add("blink")
} }
} else { } else {
if (document.getElementById("text").classList.contains('blink')) { if (document.getElementById("text").classList.contains('blink')) {
document.getElementById("text").classList.remove("blink") document.getElementById("text").classList.remove("blink")
} }
} }
if (data.mode == "clock") { if (data.mode == "clock") {
document.getElementById("timer").innerHTML = getTime(); document.getElementById("timer").innerHTML = getTime();
document.getElementById("testImg").style.display = "none"; document.getElementById("testImg").style.display = "none";
document.getElementById("wholeProgBar").style.display = "none"; document.getElementById("wholeProgBar").style.display = "none";
document.getElementById("clockSec").innerHTML = ""; document.getElementById("clockSec").innerHTML = "";
document.getElementById("timer").style.color = "white" document.getElementById("timer").style.color = "white"
timerCountdownFirst = true; timerCountdownFirst = true;
} else if (data.mode == "timer") { } else if (data.mode == "timer") {
if(data.showProgressbar) { if (data.showProgressbar) {
document.getElementById("wholeProgBar").style.display = "block"; document.getElementById("wholeProgBar").style.display = "block";
} else { } else {
document.getElementById("wholeProgBar").style.display = "none"; document.getElementById("wholeProgBar").style.display = "none";
} }
const now = new Date() const now = new Date()
if(timerCountdownFirst){ if (timerCountdownFirst) {
const diff = data.countdownGoal - now.getTime() const diff = data.countdownGoal - now.getTime()
timerCountdownFirst = false timerCountdownFirst = false
document.getElementById("timer").innerHTML = msToTime(diff, data); document.getElementById("timer").innerHTML = msToTime(diff, data);
if (diff > 0) { if (diff > 0) {
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%"; document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
} else { } else {
document.getElementById("progBar").style.width = "0%"; document.getElementById("progBar").style.width = "0%";
} }
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff) document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
document.getElementById("testImg").style.display = "none"; document.getElementById("testImg").style.display = "none";
if (data.enableColoredText) { if (data.enableColoredText) {
document.getElementById("timer").style.color = findProgessColor(data.textColors, diff) document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
} else { } else {
document.getElementById("timer").style.color = "white" document.getElementById("timer").style.color = "white"
} }
} }
if (data.timerRunState) { if (data.timerRunState) {
const diff = data.countdownGoal - now.getTime() const diff = data.countdownGoal - now.getTime()
document.getElementById("timer").innerHTML = msToTime(diff, data); document.getElementById("timer").innerHTML = msToTime(diff, data);
lastTime = msToTime(diff, data); lastTime = msToTime(diff, data);
if (diff > 0) { if (diff > 0) {
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%"; document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
} else { } else {
document.getElementById("progBar").style.width = "0%"; document.getElementById("progBar").style.width = "0%";
} }
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff) document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
document.getElementById("testImg").style.display = "none"; document.getElementById("testImg").style.display = "none";
if (data.enableColoredText) { if (data.enableColoredText) {
document.getElementById("timer").style.color = findProgessColor(data.textColors, diff) document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
} else { } else {
document.getElementById("timer").style.color = "white" document.getElementById("timer").style.color = "white"
} }
} else { } else {
document.getElementById("timer").innerHTML = lastTime document.getElementById("timer").innerHTML = lastTime
} }
} else if (data.mode == "black") { } else if (data.mode == "black") {
timerCountdownFirst = true; timerCountdownFirst = true;
document.getElementById("timer").innerHTML = ""; document.getElementById("timer").innerHTML = "";
document.getElementById("testImg").style.display = "none"; document.getElementById("testImg").style.display = "none";
document.getElementById("wholeProgBar").style.display = "none"; document.getElementById("wholeProgBar").style.display = "none";
document.getElementById("clockSec").innerHTML = ""; document.getElementById("clockSec").innerHTML = "";
} else if (data.mode == "test") { } else if (data.mode == "test") {
timerCountdownFirst = true; timerCountdownFirst = true;
document.getElementById("timer").innerHTML = ""; document.getElementById("timer").innerHTML = "";
document.getElementById("testImg").style.display = "block"; document.getElementById("testImg").style.display = "block";
document.getElementById("progBar").style.display = "none"; document.getElementById("progBar").style.display = "none";
document.getElementById("clockSec").innerHTML = ""; document.getElementById("clockSec").innerHTML = "";
} }
} }
function httpGet(theUrl) { function httpGet(theUrl) {
var xmlHttp = new XMLHttpRequest(); var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, true); // false for synchronous request xmlHttp.open("GET", theUrl, true); // false for synchronous request
xmlHttp.send(null); xmlHttp.send(null);
xmlHttp.onerror = function (e) { xmlHttp.onerror = function (e) {
console.log(e); console.log(e);
}; };
return xmlHttp; return xmlHttp;
} }
function getTime() { function getTime() {
var date = new Date(); var date = new Date();
var h = date.getHours(); // 0 - 23 var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59 var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59 var s = date.getSeconds(); // 0 - 59
h = h < 10 ? "0" + h : h; h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m; m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s; s = s < 10 ? "0" + s : s;
var time = h + ":" + m + ":" + s; var time = h + ":" + m + ":" + s;
return time; return time;
} }
@ -291,7 +291,7 @@ let temp = new URLSearchParams(window.location.search).get("smaller");
if (temp == "true") { if (temp == "true") {
var cssURL = '/css/smallerTextMod.css'; var cssURL = '/css/smallerTextMod.css';
document.head.innerHTML += '<link rel="stylesheet" href="' + cssURL + '"/>' document.head.innerHTML += '<link rel="stylesheet" href="' + cssURL + '"/>'
allowFullscreen = false allowFullscreen = false
} }

285
static/js/timer/timerview.js Normal file
View File

@ -0,0 +1,285 @@
// 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;
}
// 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
// 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() {
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")
}
}
}
/**
Additional documentation
{
"mode": "clock",
"countdownGoal": 1668368090542,
"showMilliSeconds": false,
"defaultFullScreen": true,
"timeAmountInital": 0,
"timerRunState": false,
"pauseMoment": 0,
"showTimeOnCountdown": true,
"message": "",
"showMessage": false,
"messageAppearTime": 0,
"showProgressbar": true,
"colorSegments": {
"5000": "#ff0000",
"20000": "#FFAE00",
"40000": "yellow",
"START": "green"
},
"textColors": {
"5000": "#ff0000",
"20000": "#FFAE00",
"40000": "yellow",
"START": "green"
},
"srvTime": 1668369368722,
"enableColoredText": true,
"debug": false,
"sessionToken": "c184x6on5yb99lkq3ola"
}
Possible modes:
const modes = ["timer", "clock", "black", "test"]
*/

3
templates/newAdminPanel.html
View File

@ -156,6 +156,9 @@
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off"> <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> <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> </div>
<br> <br>
<br> <br>

62
templates/ng-timerview.html Normal file
View File

@ -0,0 +1,62 @@
<!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()">
<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;">
<div id="screensaverClock">
00:00:00
</div>
openCountdown
</div>
<!-- Load scripts -->
<script src="js/reconnecting-websocket.min.js"></script>
<script src="js/timer/timerview.js"></script>
</body>
</html>

3
templates/timerPage.html
View File

@ -6,12 +6,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>openCountdown</title> <title>openCountdown - Timerpage</title>
<meta name="description" content="openCountdown"> <meta name="description" content="openCountdown">
<meta name="author" content="TheGreydiamond"> <meta name="author" content="TheGreydiamond">
<link rel="stylesheet" href="css/styles.css?v=1.1"> <link rel="stylesheet" href="css/styles.css?v=1.1">
<link rel="icon" href="/logo/faviconLogo.svg" type="image/svg+xml">
</head> </head>
<body onclick="updateFullscreen()"> <body onclick="updateFullscreen()">