Merge pull request 'Rewrite of timerpage' (#7) from better-timer-page into master

Reviewed-on: #7

.gitignore

@@ -8,3 +8,5 @@ bom.json
 log-journal.json
 openCountdown
 openCountdown.exe
+buildout
+package-lock.json

README.MD

@@ -10,19 +10,19 @@ Support for companion is currently being worked on [here](https://github.com/bit
 You can download complete binaries from the release tab.
 ## Development build
 1. Download the repository
-2. `npm install` to install dependecies
+2. `npm install` to install dependencies
 3. `npm start` to launch
 
 ### Startup Arguments
 One can pass a `--headless` argument to start the server in headless mode. This will disable the GUI.
 ## Packaging
-This is more a comment for the future version of me. There is one command for packaging using nexe.
+We've introduced a new packaging system. It is based on [electron-builder](https://www.electron.build/). This allows for easy packaging of the application for different platforms.
 ```bash
-npx nexe index.js --build --python python3 --resource "./{lang,templates,static}/**/*" --ouput "openCountdown.exe”
+chmod +x ./build.sh
+./build.sh
 ```
-Where `--python` is only needed in some envoirments for some reason. Also  adjust `--output` for your target OS.
 
-> Binary Builds may be faulty or non-working. They are not offically supported.
+> Binary Builds may be faulty or non-working. They are not officially supported.
 *Small disclaimer: Please do not use openCountdown for military or life-depending applications. Please also refrain from using openCountdown for launching rockets.*
 
 

build.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+#npx electron-packager . --platform=win32 --overwrite --out=./buildout
+npx electron-packager . --platform=win32,linux --overwrite --out=./buildout
+cd "./buildout/" || exit 1
+
+resources=(
+        "electronAssets"
+        "lang"
+        "static"
+        "templates"
+        "package.json"
+)
+
+for dir in */; do
+        for i in "${resources[@]}"; do
+                echo "$dir -> $i"
+                cp -r "$dir/resources/app/$i" "$dir"
+        done
+done

build.ssh

@@ -1 +0,0 @@
-nexe index.js --build --python python3 --resource "./static/*" --resource "./templates/*"

build_win.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+#npx electron-packager . --platform=win32 --overwrite --out=./buildout
+npx electron-packager . --platform=win32,linux --overwrite --out=./buildout
+cd "./buildout/" || exit 1
+
+resources=(
+        "electronAssets"
+        "lang"
+        "static"
+        "templates"
+        "package.json"
+)
+
+for dir in */; do
+        for i in "${resources[@]}"; do
+                echo "$dir -> $i"
+                cp -r "$dir\resources/app/$i" "$dir"
+        done
+done

index.js

@@ -156,10 +156,15 @@ app.get("/", 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);
 });
 
+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);

lang/de_de.json

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

lang/en_uk.json

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

lang/proto_black.json

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

logging.js

@@ -25,7 +25,7 @@ function close(){
 /**
  * A simple logging function
  * @param {String} message A messaged to be logged
- * @param {String} level  Logleve, may either be warn, error, magic or info
+ * @param {String} level  Loglevel, may either be warn, error, magic or info
  * @param {String} module Kinda the source
  */
 function log(message, level, module, ignore = false) {
@@ -58,4 +58,4 @@ function log(message, level, module, ignore = false) {
   }
 }
 
-module.exports = { log, init, close};
+module.exports = { log, init, close };

newStartHandler.js

@@ -1,191 +0,0 @@
-const { app, BrowserWindow, ipcMain, Tray, Menu, nativeImage, MenuItem, dialog } = require('electron')
-const path = require('path')
-const fs = require('fs')
-const _ = require("underscore")
-const open = require('open');
-const childProcess = require('child_process');
-
-const packageJson = JSON.parse(fs.readFileSync("package.json"))
-
-// a minimal config
-let configObject = {
-    language: "en_uk",
-    startMinimised: false,
-    port: 3000
-}
-if (!fs.existsSync("config.json")) {
-    fs.writeFileSync("config.json", "{}");
-}
-const tempJsonText = JSON.parse(fs.readFileSync("config.json", "utf8"));
-configObject = _.extend(configObject, tempJsonText);
-fs.writeFileSync("config.json", JSON.stringify(configObject));
-
-const processArgs = process.argv;
-// Check if --headless is passed as an argument
-if (processArgs.includes("--headless")) {
-    startServer()
-
-} else {
-    // Start electron 
-    app.whenReady().then(() => {
-        startServer()
-        createTray()
-        createWindow()
-    })
-    
-    ipcMain.on('info', function () {
-        if (win) {
-            win.webContents.send('info', { "appStatus": "Testing", "appURL": "http://127.0.0.1:" + configObject.port, "appName": "openCountdown " + packageJson.version, "startMinimised": configObject.startMinimised, "port": configObject.port })
-        }
-    })
-    
-    ipcMain.on('skeleton-close', function (req, cb) {
-        trayQuit()
-    })
-    
-    ipcMain.on('skeleton-minimize', function (req, cb) {
-        win.hide()
-    })
-    
-    ipcMain.on('skeleton-launch-gui', function () {
-        launchUI()
-    })
-    
-    ipcMain.on('skeleton-start-minimised', function (e, msg) {
-        configObject.startMinimised = msg
-        fs.writeFileSync("config.json", JSON.stringify(configObject));
-    })
-    
-    ipcMain.on('skeleton-bind-port', function (e, msg) {
-        configObject.port = msg
-        console.log("Update port")
-        fs.writeFileSync("config.json", JSON.stringify(configObject));
-        dialog.showMessageBoxSync({
-            message: "Port changed. Restart openCountdown to apply change.",
-            buttons: ["OK"]})
-    })
-}
-
-var win, tray = null;
-
-
-const createWindow = () => {
-    win = new BrowserWindow({
-        width: 370,
-        height: 500,
-        transparent: true,
-        frame: false,
-        resizable: false,
-        icon: path.join(__dirname, 'static/logo/faviconLogo.svg'),
-        webPreferences: {
-            pageVisibility: true,
-            nodeIntegration: true,
-            contextIsolation: true,
-            preload: path.join(__dirname, 'electronAssets/windowPreload.js'),
-        }
-    })
-
-
-
-
-    win.loadFile('electronAssets/index2.html')
-    if (configObject.startMinimised) {
-        win.hide()
-    }
-}
-
-function createTray() {
-    tray = new Tray('static/logo/faviconLogo.png')
-    tray.setIgnoreDoubleClickEvents(true)
-
-    const menu = new Menu()
-	menu.append(
-		new MenuItem({
-			label: 'Show window',
-			click: showScreen,
-		})
-	)
-	menu.append(
-		new MenuItem({
-			label: 'Launch GUI',
-			click: launchUI,
-		})
-	)
-	menu.append(
-		new MenuItem({
-			label: 'Quit',
-            accelerator: 'Command+Q',
-			click: trayQuit,
-		})
-	)
-
-    tray.setToolTip('openCountdown ' + packageJson.version)
-    tray.setContextMenu(menu)
-
-    tray.on('click', function (e) {
-        if (win.isVisible()) {
-            win.hide()
-        } else {
-            win.show()
-        }
-    });
-}
-
-function showScreen(){
-    win.show()
-}
-
-function launchUI(){
-    open("http://127.0.0.1:" + configObject.port)
-}
-
-function trayQuit(){
-    let options  = {
-        buttons: ["Yes","No"],
-        message: "Do you really want to quit openCountdown?"
-       }
-    let response = dialog.showMessageBoxSync(options)
-    if(response == 0){
-        srvProc.kill("SIGINT")
-        setTimeout(app.quit, 1000)
-    }
-}
-
-
-// taken from https://stackoverflow.com/a/22649812/11317151
-function runScript(scriptPath, callback, valueCb) {
-
-    // keep track of whether callback has been invoked to prevent multiple invocations
-    var invoked = false;
-
-    var process = childProcess.fork(scriptPath);
-
-    valueCb(process)
-    // listen for errors as they may prevent the exit event from firing
-    process.on('error', function (err) {
-        if (invoked) return;
-        invoked = true;
-        callback(err);
-    });
-    // execute the callback once the process has finished running
-    process.on('exit', function (code) {
-        if (invoked) return;
-        invoked = true;
-        // var err = code === 0 ? null : new Error('exit code ' + code);
-        callback(code);
-    });
-
-
-}
-
-srvProc = null;
-
-function setServer(process){
-    srvProc = process
-}
-
-function startServer(){
-    runScript(path.join(__dirname, 'index.js'), function (err) {
-        if (err) throw err;
-    }, setServer)
-}

package.json

@@ -1,34 +1,39 @@
 {
-  "name": "opencountdown",
-  "version": "1.0.3",
-  "description": "An opensource countdown",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "nexe index.js --build",
-    "start": "electron newStartHandler.js"
-  },
-  "author": "TheGreydiamond",
-  "license": "LGPL-3.0",
-  "dependencies": {
-    "body-parser": "^1.19.2",
-    "bootstrap": "^5.1.3",
-    "bootstrap-duration-picker": "^2.1.3",
-    "bootstrap-icons": "^1.8.1",
-    "colors": "^1.4.0",
-    "darkreader": "^4.9.44",
-    "eta": "^1.12.3",
-    "express": "^4.17.3",
-    "flatpickr": "^4.6.11",
-    "jquery": "^3.6.0",
-    "js-cookie": "^3.0.1",
-    "less": "^3.13",
-    "mdbootstrap": "^4.20.0",
-    "open": "^8.4.0",
-    "underscore": "^1.13.3",
-    "ws": "^8.5.0"
-  },
-  "devDependencies": {
-    "electron": "^20.0.3"
-  }
+	"name": "opencountdown",
+	"version": "1.0.6",
+	"description": "An opensource countdown",
+	"main": "startHandler.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"start": "electron startHandler.js"
+	},
+	"author": "TheGreydiamond",
+	"license": "LGPL-3.0",
+	"dependencies": {
+		"body-parser": "^1.20.1",
+		"bootstrap": "^5.2.2",
+		"bootstrap-duration-picker": "^2.1.3",
+		"bootstrap-icons": "^1.10.1",
+		"colors": "^1.4.0",
+		"darkreader": "^4.9.58",
+		"eta": "^1.12.3",
+		"express": "^4.18.2",
+		"flatpickr": "^4.6.13",
+		"jquery": "^3.6.1",
+		"js-cookie": "^3.0.1",
+		"less": "^4.1.3",
+		"mdbootstrap": "^4.20.0",
+		"open": "^8.4.0",
+		"underscore": "^1.13.6",
+		"ws": "^8.11.0"
+	},
+	"devDependencies": {
+		"electron": "^21.2.3",
+		"electron-builder": "^23.6.0"
+	},
+	"build": {
+		"extraMetadata": {
+			"main": "startHandler.js"
+		}
+	}
 }

startHandler.js

@@ -0,0 +1,226 @@
+const { app, BrowserWindow, ipcMain, Tray, Menu, MenuItem, dialog } = require('electron')
+const path = require('path')
+const fs = require('fs')
+const _ = require("underscore")
+const open = require('open');
+const childProcess = require('child_process');
+const http = require('http');
+
+
+const packageJson = JSON.parse(fs.readFileSync("package.json"))
+
+// a minimal config
+let configObject = {
+	language: "en_uk",
+	startMinimised: false,
+	port: 3000
+}
+if (!fs.existsSync("config.json")) {
+	fs.writeFileSync("config.json", "{}");
+}
+const tempJsonText = JSON.parse(fs.readFileSync("config.json", "utf8"));
+configObject = _.extend(configObject, tempJsonText);
+fs.writeFileSync("config.json", JSON.stringify(configObject));
+
+// Set a serverStatus
+let serverStatus = "Starting"
+
+// Check if --headless is passed as an argument
+const processArgs = process.argv;
+if (processArgs.includes("--headless")) {
+	startServer()
+} else {
+	// Start electron 
+	app.whenReady().then(() => {
+		startServer()
+		createTray()
+		createWindow()
+		setInterval(() => {
+			// Check if the server is running
+			http.get('http://127.0.0.1:' + configObject.port + "/api/v1/system", (resp) => {
+				let data = '';
+
+				// A chunk of data has been received.
+				resp.on('data', (chunk) => {
+					data += chunk;
+				});
+
+				// The whole response has been received. Print out the result.
+				resp.on('end', () => {
+					// If we have a valid response, set the serverStatus to "Running"
+					let parsed = JSON.parse(data)
+					console.log(parsed)
+					serverStatus = "Running"
+					// Send the serverStatus to the window
+					if (win) {
+						win.webContents.send('info', { "appStatus": serverStatus, "appURL": "http://127.0.0.1:" + configObject.port, "appName": "openCountdown " + packageJson.version, "startMinimised": configObject.startMinimised, "port": configObject.port })
+					}
+				});
+			}).on("error", (err) => {
+				console.log("Error: " + err.message);
+			});
+		}, 2000);
+	})
+
+	ipcMain.on('info', function () {
+		// Send inital data to the window
+		if (win) {
+			win.webContents.send('info', { "appStatus": serverStatus, "appURL": "http://127.0.0.1:" + configObject.port, "appName": "openCountdown " + packageJson.version, "startMinimised": configObject.startMinimised, "port": configObject.port })
+		}
+	})
+
+	ipcMain.on('skeleton-close', function (req, cb) {
+		trayQuit()
+	})
+
+	ipcMain.on('skeleton-minimize', function (req, cb) {
+		win.hide()
+	})
+
+	ipcMain.on('skeleton-launch-gui', function () {
+		launchUI()
+	})
+
+	ipcMain.on('skeleton-start-minimised', function (e, msg) {
+		configObject.startMinimised = msg
+		fs.writeFileSync("config.json", JSON.stringify(configObject));
+	})
+
+	ipcMain.on('skeleton-bind-port', function (e, msg) {
+		configObject.port = msg
+		console.log("Update port")
+		fs.writeFileSync("config.json", JSON.stringify(configObject));
+		dialog.showMessageBoxSync({
+			message: "Port changed. Restart openCountdown to apply change.",
+			buttons: ["OK"]
+		})
+	})
+}
+
+var win, tray = null;
+
+
+const createWindow = () => {
+	win = new BrowserWindow({
+		width: 370,
+		height: 500,
+		transparent: true,
+		frame: false,
+		resizable: false,
+		icon: path.join(__dirname, 'static/logo/faviconLogo.svg'),
+		webPreferences: {
+			pageVisibility: true,
+			nodeIntegration: true,
+			contextIsolation: true,
+			preload: path.join(__dirname, 'electronAssets/windowPreload.js'),
+		}
+	})
+
+
+
+
+	win.loadFile('electronAssets/index.html')
+	if (configObject.startMinimised) {
+		win.hide()
+	}
+}
+
+function createTray() {
+	tray = new Tray('static/logo/faviconLogo.png')
+	tray.setIgnoreDoubleClickEvents(true)
+
+	const menu = new Menu()
+	menu.append(
+		new MenuItem({
+			label: 'Show window',
+			click: showScreen,
+		})
+	)
+	menu.append(
+		new MenuItem({
+			label: 'Launch GUI',
+			click: launchUI,
+		})
+	)
+	menu.append(
+		new MenuItem({
+			label: 'Quit',
+			accelerator: 'Command+Q',
+			click: trayQuit,
+		})
+	)
+
+	tray.setToolTip('openCountdown ' + packageJson.version)
+	tray.setContextMenu(menu)
+
+	tray.on('click', function (e) {
+		if (win.isVisible()) {
+			win.hide()
+		} else {
+			win.show()
+		}
+	});
+}
+
+function showScreen() {
+	win.show()
+}
+
+function launchUI() {
+	open("http://127.0.0.1:" + configObject.port)
+}
+
+function trayQuit() {
+	let options = {
+		buttons: ["Yes", "No"],
+		message: "Do you really want to quit openCountdown?"
+	}
+	let response = dialog.showMessageBoxSync(options)
+	if (response == 0) {
+		serverStatus = "Stopping"
+		if (win) {
+			win.webContents.send('info', { "appStatus": serverStatus, "appURL": "http://127.0.0.1:" + configObject.port, "appName": "openCountdown " + packageJson.version, "startMinimised": configObject.startMinimised, "port": configObject.port })
+		}
+		srvProc.kill("SIGINT")
+		setTimeout(app.quit, 1000)
+	}
+}
+
+
+// taken from https://stackoverflow.com/a/22649812/11317151
+function runScript(scriptPath, callback, valueCb) {
+
+	// keep track of whether callback has been invoked to prevent multiple invocations
+	var invoked = false;
+
+	var process = childProcess.fork(scriptPath);
+
+	valueCb(process)
+	// listen for errors as they may prevent the exit event from firing
+	process.on('error', function (err) {
+		if (invoked) return;
+		invoked = true;
+		callback(err);
+	});
+	// execute the callback once the process has finished running
+	process.on('exit', function (code) {
+		if (invoked) return;
+		invoked = true;
+		// var err = code === 0 ? null : new Error('exit code ' + code);
+		callback(code);
+	});
+
+
+}
+
+srvProc = null;
+
+function setServer(process) {
+	srvProc = process
+}
+
+function startServer() {
+	runScript(path.join(__dirname, 'index.js'), function (err) {
+		if (err) throw err;
+	}, setServer)
+}

static/css/smallerTextMod.css

@@ -1,3 +1,7 @@
 body {
     font-size:0.3em;
+}
+
+.moverLogo {
+    height: 80px !important;
 }

static/css/styles.css

@@ -110,4 +110,48 @@ 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); }
+      }

static/js/interface.js

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

static/js/script.js

@@ -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);
- 
-  if (data.debug) {
-    document.getElementById("timediff").style.display = "block";
-  } else {
-    document.getElementById("timediff").style.display = "none";
-  }
+	var data = dataFame;
+	document.getElementById("incomeData").innerHTML = JSON.stringify(data)
+	document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime);
 
-  if (data.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true") && allowFullscreen) {
-    enterFullscreen(document.documentElement);
-    document.getElementById("initalDate").innerHTML = "false"
-  }
+	if (data.debug) {
+		document.getElementById("timediff").style.display = "block";
+	} else {
+		document.getElementById("timediff").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.defaultFullScreen && document.getElementById("initalDate").innerHTML.includes("true") && allowFullscreen) {
+		enterFullscreen(document.documentElement);
+		document.getElementById("initalDate").innerHTML = "false"
+	}
 
-  if (data.showTimeOnCountdown && data.mode == "timer") {
-    document.getElementById("clockSec").innerHTML = getTime();
-  } else {
-    document.getElementById("clockSec").innerHTML = "";
-  }
+	if (data.showMessage) {
+		document.getElementById("overlay").style.display = "block";
+		document.getElementById("text").innerHTML = data.message
+	} else {
+		document.getElementById("overlay").style.display = "none";
+	}
 
-  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.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 (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";
-    }
-    
-    const now = new Date()
+	} else if (data.mode == "timer") {
+		if (data.showProgressbar) {
+			document.getElementById("wholeProgBar").style.display = "block";
+		} else {
+			document.getElementById("wholeProgBar").style.display = "none";
+		}
 
-    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%";
-      }
+		const now = new Date()
 
-      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 (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 (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"
-      }
+		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%";
+			}
 
-    } 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 = "";
+			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 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 {
+			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 = "";
+	}
 }
 
 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
 }

static/js/timer/timerview.js

@@ -0,0 +1,281 @@
+
+
+// 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)
+	}
+}

templates/newAdminPanel.html

@@ -156,6 +156,9 @@
 
                                 <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>

templates/ng-timerview.html

@@ -0,0 +1,64 @@
+<!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>

templates/timerPage.html

@@ -6,12 +6,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>openCountdown</title>
+    <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()">