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 +30 -46
2 changed files with 30 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0bf867daf6 - Show all commits

74
static/js/timer/timerview.js
View File

@ -1,10 +1,4 @@
// 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 // References to the HTML elements
let warningBox = document.getElementById("warningBanner"); let warningBox = document.getElementById("warningBanner");
@ -27,10 +21,21 @@ let ackSessionTokenChange = false; // Wether the user has acknowledged the sessi
let dataFrame = {}; let dataFrame = {};
let timeDiffToServer = 0; let timeDiffToServer = 0;
let sessionToken = ""; // Our current session token 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 // Handle the screensaver to fit the screen
setTimeout(handleDVD, 200); setTimeout(handleDVD, 200);
window.addEventListener("resize", handleDVD); setTimeout(handleDVD, 400);
document.body.onresize = handleDVD;
// Handle connection event // Handle connection event
socket.onopen = function (e) { socket.onopen = function (e) {
@ -144,6 +149,7 @@ function findProgessColor(colors, value) {
} }
function handleUpdate() { function handleUpdate() {
defaultToFullscreen = dataFrame.defaultFullScreen;
switch (dataFrame.mode) { switch (dataFrame.mode) {
case "timer": case "timer":
// Timer mode // Timer mode
@ -237,6 +243,7 @@ function handleUpdate() {
} else { } else {
overlay.style.display = "none"; overlay.style.display = "none";
} }
// This will result in the text fading in and out when the message changes // This will result in the text fading in and out when the message changes
if (new Date().getTime() - dataFrame.messageAppearTime < 5000) { if (new Date().getTime() - dataFrame.messageAppearTime < 5000) {
if (!overlayText.classList.contains('blink')) { if (!overlayText.classList.contains('blink')) {
@ -250,48 +257,25 @@ function handleUpdate() {
} }
function handleDVD() { function handleDVD() {
console.info("Recalculating screensaver size")
const objHeight = document.body.offsetHeight - screensaverText.offsetHeight; const objHeight = document.body.offsetHeight - screensaverText.offsetHeight;
const objWidth = document.body.offsetWidth - screensaverText.offsetWidth; const objWidth = document.body.offsetWidth - screensaverText.offsetWidth;
document.documentElement.style.setProperty('--my-end-left', objWidth + "px"); document.documentElement.style.setProperty('--my-end-left', objWidth + "px");
document.documentElement.style.setProperty('--my-end-top', objHeight + "px"); document.documentElement.style.setProperty('--my-end-top', objHeight + "px");
} }
function enterFullscreen(element) {
/** if (element.requestFullscreen) {
Additional documentation element.requestFullscreen();
} else if (element.msRequestFullscreen) {
{ element.msRequestFullscreen();
"mode": "clock", } else if (element.webkitRequestFullscreen) {
"countdownGoal": 1668368090542, element.webkitRequestFullscreen();
"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: function updateFullscreen() {
const modes = ["timer", "clock", "black", "test"] if (defaultToFullscreen && allowFullscreen) {
enterFullscreen(document.documentElement)
*/ }
}

2
templates/ng-timerview.html
View File

@ -15,7 +15,7 @@
<link rel="icon" href="/logo/faviconLogo.svg" type="image/svg+xml"> <link rel="icon" href="/logo/faviconLogo.svg" type="image/svg+xml">
</head> </head>
<body onclick="updateFullscreen()"> <body onclick="updateFullscreen()" onresize="handleDVD()">
<div id="overlay"> <div id="overlay">
<div id="text">Message here</div> <div id="text">Message here</div>
</div> </div>