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

Compare commits

base: Project-Name-Here:master
Branches Tags
Project-Name-Here:master
Project-Name-Here:v1.0.8b
Project-Name-Here:v1.0.8
Project-Name-Here:v1.0.7
Project-Name-Here:v1.0.6
Project-Name-Here:v1.0.1
Project-Name-Here:v1.0.0
..
compare: Project-Name-Here:v1.0.0
Branches Tags
Project-Name-Here:master
Project-Name-Here:v1.0.8b
Project-Name-Here:v1.0.8
Project-Name-Here:v1.0.7
Project-Name-Here:v1.0.6
Project-Name-Here:v1.0.1
Project-Name-Here:v1.0.0

No commits in common. "master" and "v1.0.0" have entirely different histories.
master ... v1.0.0

47 changed files with 1719 additions and 21807 deletions
Show Stats Expand all files Collapse all files

2
.gitignore vendored
View File

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

28
README.MD
View File

@ -1,31 +1,5 @@
<img alt="openCountdown Logo" height="90px" src="https://git.project-name-here.de/Project-Name-Here/openCountdown/raw/branch/master/static/logo/logoProposal.svg">
# openCountdown # openCountdown
openCountdown is a professional software for event countdowns. It can be used in a live settings such as a music event.
Support for companion is currently being worked on [here](https://github.com/bitfocus/companion-module-pnh-opencountdown).
<a href="https://bitfocus.io/companion/?ref=pnh-Opencountdown" target="_new"><img alt="Controllable by Companion" src="https://bitfocus.io/companion-badge.png?ref=pnh-Opencountdown"></a>
# Installation
You can download complete binaries from the release tab.
## Development build
1. Download the repository
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
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
chmod +x ./build.sh
./build.sh
```
*Small disclaimer: Please do not use openCountdown for military or life-depending applications. Please also refrain from using openCountdown for launching rockets.*
# ToDo # ToDo
Endpoint documentation is currently pretty thin. This will be changed in the future. - [P] Endpoint docs
- [ ] Endpoint docs (in Progress)
- [ ] Better WS frames - [ ] Better WS frames

19
build.sh
View File

@ -1,19 +0,0 @@
#!/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

1
build.ssh Normal file
View File

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

19
build_win.sh
View File

@ -1,19 +0,0 @@
#!/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

2
electronAssets/background.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 97 KiB

222
electronAssets/index.html
View File

@ -1,222 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>openCountdown</title>
</head>
<body>
<style>
body,
html {
margin: 0;
padding: 0;
-webkit-app-region: drag;
}
body {
background-color: rgba(35, 35, 35, 1);
color: white;
font-family: 'Helvetica';
overflow: hidden;
}
#wrap {
width: 100%;
margin-top: 20px;
display: block;
text-align: center;
}
#logo {
width: 200px;
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
user-select: none;
}
#actions {
padding: 10px;
display: block;
box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.3);
padding-top: 20px;
padding-bottom: 20px;
background-color: #d40215;
background-image: url("background.svg");
background-position: 60% 60%;
user-select: none;
}
.dobutton {
font-size: 1em;
padding: 10px 20px;
border: 0px;
user-select: none;
cursor: pointer;
border-radius: 4px;
}
#launch {
background-color: rgba(255, 255, 255, 1);
margin-right: 5px;
border: 1px solid white;
}
#hide {
background-color: rgba(255, 255, 255, 0.1);
color: white;
margin-right: 5px;
border: 1px solid white;
}
#close {
background-color: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid white;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
#status,
#model {
user-select: none !important;
}
#status {
font-size: 40px;
font-weight: 100;
margin: 0;
color: rgba(255, 255, 255, 0.4);
}
#model {
font-size: 14px;
}
h1 {
font-size: 40px;
padding-top: 20px;
font-weight: 100;
}
#url {
padding-top: 5px;
padding-bottom: 10px;
-webkit-app-region: no-drag !important;
}
#meh {
background-color: #b00013;
background-image: url("background.svg");
background-position: 90% 90%;
margin-top: 30px;
padding-bottom: 10px;
}
textarea:focus,
input:focus {
outline: 0;
}
#ifs,
input[type='button'] {
-webkit-app-region: no-drag !important;
}
input {
-webkit-app-region: no-drag !important;
}
#ifp {
width: 50px;
text-align: center;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
background-color: #d40215;
font-size: 13px;
color: #fff;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid white;
border-right-width: 1px;
}
#ifpb {
cursor: pointer;
border: 1px solid #ccc;
background-color: #b00013;
color: white;
border: 1px solid white;
padding: 3px 8px;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border-left-width: 0px;
margin-top: -1px;
font-size: 13px;
}
#ifpb:hover {
background-color: #666;
}
#ift {
color: white;
-webkit-appearance: checkbox;
cursor: pointer;
}
#ifs {
background-color: #d40215;
color: #fff;
border: 1px solid white;
font-size: 12px !important;
margin-bottom: -4px;
}
#guitext {
font-size: 12px;
color: white;
padding-top: 0px;
padding-bottom: 2px;
}
#bottombuttons {
padding-bottom: 100px;
}
</style>
<div id="wrap">
<div id="topwrap">
<img id="logo" src="../static/logo/logoProposal.svg" alt="openCountdown" />
<div id="model">model_text (version_etc)</div>
</div>
<div id="meh">
<h1 id="status">Status</h1>
<div id="url">URL</div>
</div>
<div id="actions">
<p><input type="text" maxlength="5" id="ifp" value="8000" /><input type="button" id="ifpb" value="Change" /></p>
<p>
<input type="checkbox" id="ift" />
<label for="ift" style="font-size: 12px">Start minimized</label>
</p>
<div id="bottombuttons">
<input type="button" class="dobutton" value="Launch GUI" id="launch" />
<input type="button" class="dobutton" value="Hide" id="hide" />
<input type="button" class="dobutton" value="Quit" id="close" />
</div>
</div>
</div>
<script type="text/javascript" src="window.js"></script>
</body>
</html>

33
electronAssets/window.js
View File

@ -1,33 +0,0 @@
document.getElementById('launch').addEventListener('click', function () {
api.send('skeleton-launch-gui')
})
document.getElementById('hide').addEventListener('click', function () {
api.send('skeleton-minimize')
})
document.getElementById('close').addEventListener('click', function () {
api.send('skeleton-close')
})
api.receive('info', function (info) {
document.getElementById('status').innerHTML = info.appStatus
document.getElementById('url').innerHTML = info.appURL
document.getElementById('model').innerHTML = `${info.appName}`
document.getElementById('ift').checked = info.startMinimised
document.getElementById('ifp').value = configObject.port
document.title = info.appName
})
api.send('info')
document.getElementById('ifpb').addEventListener('click', function () {
var e = document.getElementById('ifp')
api.send('skeleton-bind-port', e.value)
})
document.getElementById('ift').addEventListener('click', function () {
var e = document.getElementById('ift')
api.send('skeleton-start-minimised', e.checked)
})
api.send('skeleton-ready')

12
electronAssets/windowPreload.js
View File

@ -1,12 +0,0 @@
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('api', {
send: (channel, data) => {
// whitelist channels
ipcRenderer.send(channel, data)
},
receive: (channel, func) => {
// Deliberately strip event as it includes `sender`
ipcRenderer.on(channel, (event, ...args) => func(...args))
},
})

361
index.js
View File

@ -1,14 +1,13 @@
const express = require("express"); const express = require("express");
const fs = require("fs"); const fs = require("fs");
const bodyParser = require("body-parser"); const bodyParser = require("body-parser");
const ws = require("ws"); const ws = require('ws');
const helper = require("./helpers.js"); const helper = require("./helpers.js");
const loggy = require("./logging"); const loggy = require("./logging")
const Eta = require("eta"); const Eta = require("eta");
const _ = require("underscore"); const _ = require("underscore")
const path = require("path");
loggy.init(true); loggy.init(true)
loggy.log("Preparing server", "info", "Server"); loggy.log("Preparing server", "info", "Server");
const app = express(); const app = express();
@ -25,28 +24,7 @@ app.use(
}) })
); );
// Allowed urls for requests to /assets/ let loadedData = {}
const allowsURLs = [
"bootstrap-icons/font/bootstrap-icons.css",
"js-cookie/dist/js.cookie.min.js",
"bootstrap/dist/css/bootstrap.min.css",
"mdbootstrap/css/style.css",
"bootstrap/dist/js/bootstrap.bundle.min.js",
"jquery/dist/jquery.min.js",
"darkreader/darkreader.js",
"bootstrap-duration-picker/dist/bootstrap-duration-picker.css",
"flatpickr/dist/flatpickr.min.css",
"bootstrap-duration-picker/dist/bootstrap-duration-picker-debug.js",
"flatpickr/dist/flatpickr.js",
"bootstrap-icons/font/fonts/bootstrap-icons.woff2",
"bootstrap/dist/css/bootstrap.min.css.map",
"less/dist/less.min.js",
"less/dist/less.min.js.map",
"mdbootstrap/js/mdb.min.js",
];
let loadedData = {};
let dataToBeWritten = {}
loggy.log("Loading config", "info", "Config"); loggy.log("Loading config", "info", "Config");
if (fs.existsSync("data-persistence.json")) { if (fs.existsSync("data-persistence.json")) {
@ -69,27 +47,18 @@ currentState = {
showMessage: false, showMessage: false,
messageAppearTime: 0, messageAppearTime: 0,
showProgressbar: true, showProgressbar: true,
colorSegments: { colorSegments: { 40000: "yellow", 20000: "#FFAE00", 5000: "#ff0000", "START": "green" },
40000: "yellow",
20000: "#FFAE00",
5000: "#ff0000",
START: "green",
},
textColors: {}, textColors: {},
srvTime: 0, srvTime: 0,
enableColoredText: true, enableColoredText: true,
debug: false, debug: false,
enableOverrun: true, sessionToken: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
sessionToken:
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15),
}; };
let configObject = { let configObject = {
language: "en_uk", language: "en_uk"
port: 3000, }
}; if(!fs.existsSync("config.json")) {
if (!fs.existsSync("config.json")) {
fs.writeFileSync("config.json", "{}"); fs.writeFileSync("config.json", "{}");
} }
const tempJsonText = JSON.parse(fs.readFileSync("config.json", "utf8")); const tempJsonText = JSON.parse(fs.readFileSync("config.json", "utf8"));
@ -97,9 +66,9 @@ configObject = _.extend(configObject, tempJsonText);
fs.writeFileSync("config.json", JSON.stringify(configObject)); fs.writeFileSync("config.json", JSON.stringify(configObject));
currentState = Object.assign({}, currentState, loadedData); currentState = Object.assign({}, currentState, loadedData);
currentState.textColors = currentState.colorSegments; currentState.textColors = currentState.colorSegments
loggy.log("Searching for languages", "info", "Language"); loggy.log("Searching for languages", "info", "Language")
const languagesRaw = fs.readdirSync("./lang"); const languagesRaw = fs.readdirSync("./lang");
const languages = []; const languages = [];
for (let i = 0; i < languagesRaw.length; i++) { for (let i = 0; i < languagesRaw.length; i++) {
@ -107,19 +76,19 @@ for (let i = 0; i < languagesRaw.length; i++) {
languages.push(languagesRaw[i].replace(".json", "")); languages.push(languagesRaw[i].replace(".json", ""));
} }
} }
loggy.log("Found " + languages.length + " languages", "info", "Language"); loggy.log("Found " + languages.length + " languages", "info", "Language")
loggy.log("Reading language file", "info", "Language");
let languageProfile = JSON.parse(
fs.readFileSync("lang/" + configObject.language + ".json", "utf8") loggy.log("Reading language file", "info", "Language")
); let languageProfile = JSON.parse(fs.readFileSync("lang/" + configObject.language + ".json", "utf8"));
loggy.log("Preparing websocket", "info", "Websocket"); loggy.log("Preparing websocket", "info", "Websocket");
const wsServer = new ws.Server({ noServer: true }); const wsServer = new ws.Server({ noServer: true });
wsServer.on("connection", (socket) => { wsServer.on('connection', socket => {
socket.on("message", function incoming(data) { socket.on('message', function incoming(data) {
if (data.toString() == "new client") { if (data.toString() == "new client") {
updatedData(); updatedData()
} }
}); });
}); });
@ -135,7 +104,7 @@ wsServer.broadcast = function broadcast(data) {
let updatey = undefined; let updatey = undefined;
function updatedData() { function updatedData() {
currentState.srvTime = new Date().getTime(); currentState.srvTime = new Date().getTime()
wsServer.broadcast(JSON.stringify(currentState)); wsServer.broadcast(JSON.stringify(currentState));
clearTimeout(updatey); clearTimeout(updatey);
setTimeout(updatedData, 5000); setTimeout(updatedData, 5000);
@ -149,35 +118,28 @@ app.get("/", function (req, res) {
Eta.render(data, { Eta.render(data, {
lang: languageProfile, lang: languageProfile,
additional: { additional: {
languages: languages, languages: languages
}, }
}) }));
);
} catch (e) { } catch (e) {
loggy.log("Error rendering template", "error", "Server"); loggy.log("Error rendering template", "error", "Server");
const dataN = fs.readFileSync("templates/brokenTranslation.html", "utf8"); const dataN = fs.readFileSync("templates/brokenTranslation.html", "utf8");
res.send( res.send(
Eta.render(dataN, { Eta.render(dataN, {
additional: { additional: {
languages: languages, languages: languages
}, }
}) }));
);
} }
}); });
app.get("/timer", function (req, res) { app.get("/timer", function (req, res) {
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"); const data = fs.readFileSync("templates/timerPage.html", "utf8");
res.send(data); 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);
}); });
@ -198,181 +160,158 @@ app.get("/api/v1/system", function (req, res) {
nodeEnv: process.env, nodeEnv: process.env,
nodeConfig: process.config, nodeConfig: process.config,
nodeTitle: process.title, nodeTitle: process.title,
systemVersion: tempPkgObj.version, systemVersion: tempPkgObj.version
}; }
res.json(systemData); res.json(systemData);
}); });
app.get("/api/v1/set/mode", function (req, res) { app.get("/api/v1/set/mode", function (req, res) {
currentState.mode = req.query.mode; currentState.mode = req.query.mode;
updatedData(); updatedData()
res.json({ status: "ok" }); res.json({ status: "ok" });
}); });
app.get("/api/v1/set/layout/showMillis", function (req, res) { app.get("/api/v1/set/layout/showMillis", function (req, res) {
const resy = helper.wrapBooleanConverter(req.query.show, res); const resy = helper.wrapBooleanConverter(req.query.show, res)
if (resy != undefined) { if (resy != undefined) {
currentState.showMilliSeconds = resy; currentState.showMilliSeconds = resy;
if (req.query.persist === "true") { if (req.query.persist === 'true') {
dataToBeWritten.showMilliSeconds = currentState.showMilliSeconds; dataToBeWritten.showMilliSeconds = currentState.showMilliSeconds
} }
res.json({ status: "ok" }); res.json({ status: "ok" });
} }
updatedData(); updatedData()
}); });
app.get("/api/v1/set/timerGoal", function (req, res) { app.get("/api/v1/set/timerGoal", function (req, res) {
currentState.countdownGoal = new Date(parseInt(req.query.time)).getTime(); // ToDO error handling currentState.countdownGoal = new Date(parseInt(req.query.time)).getTime(); // ToDO error handling
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/set/addMillisToTimer", function (req, res) { app.get("/api/v1/set/addMillisToTimer", function (req, res) {
currentState.timeAmountInital = req.query.time; currentState.timeAmountInital = req.query.time;
currentState.countdownGoal = new Date().getTime() + parseInt(req.query.time); currentState.countdownGoal = new Date().getTime() + parseInt(req.query.time)
currentState.pauseMoment = new Date().getTime(); currentState.pauseMoment = new Date().getTime();
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
});
app.get("/api/v1/set/relativAddMillisToTimer", function (req, res) {
currentState.timeAmountInital = parseInt(req.query.time) + parseInt(currentState.timeAmountInital);
currentState.countdownGoal = currentState.countdownGoal + parseInt(req.query.time);
// currentState.pauseMoment = new Date().getTime();
res.json({ status: "ok" });
updatedData();
}); });
app.get("/api/v1/ctrl/timer/pause", function (req, res) { app.get("/api/v1/ctrl/timer/pause", function (req, res) {
currentState.timerRunState = false; currentState.timerRunState = false;
currentState.pauseMoment = new Date().getTime(); currentState.pauseMoment = new Date().getTime();
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/ctrl/timer/play", function (req, res) { app.get("/api/v1/ctrl/timer/play", function (req, res) {
if (currentState.timerRunState == false) { if (currentState.timerRunState == false) {
currentState.timerRunState = true; currentState.timerRunState = true
currentState.countdownGoal += currentState.countdownGoal += new Date().getTime() - currentState.pauseMoment;
new Date().getTime() - currentState.pauseMoment;
} }
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/ctrl/timer/restart", function (req, res) { app.get("/api/v1/ctrl/timer/restart", function (req, res) {
currentState.countdownGoal = currentState.countdownGoal = new Date().getTime() + parseInt(currentState.timeAmountInital)
new Date().getTime() + parseInt(currentState.timeAmountInital);
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/set/layout/showTime", function (req, res) { app.get("/api/v1/set/layout/showTime", function (req, res) {
const resy = helper.wrapBooleanConverter(req.query.show, res); const resy = helper.wrapBooleanConverter(req.query.show, res)
if (resy != undefined) { if (resy != undefined) {
currentState.showTimeOnCountdown = resy; currentState.showTimeOnCountdown = resy;
if (req.query.persist === "true") { if (req.query.persist === 'true') {
dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown; dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown
} }
res.json({ status: "ok" }); res.json({ status: "ok" });
} }
updatedData(); updatedData()
});
app.get("/api/v1/set/enableOverrun", function (req, res) {
const resy = helper.wrapBooleanConverter(req.query.enable, res);
if (resy != undefined) {
currentState.enableOverrun = resy;
if (req.query.persist === "true") {
dataToBeWritten.enableOverrun = currentState.enableOverrun;
}
res.json({ status: "ok" });
}
updatedData();
}); });
app.get("/api/v1/set/progressbar/show", function (req, res) { app.get("/api/v1/set/progressbar/show", function (req, res) {
currentState.showProgressbar = req.query.show === "true"; currentState.showProgressbar = (req.query.show === 'true');
if (req.query.persist === "true") { if (req.query.persist === 'true') {
dataToBeWritten.showProgressbar = currentState.showProgressbar; dataToBeWritten.showProgressbar = currentState.showProgressbar
} }
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/set/progressbar/colors", function (req, res) { app.get("/api/v1/set/progressbar/colors", function (req, res) {
try { try {
let data = req.query.colors; let data = req.query.colors
if (req.query.isBase64 === "true") { if (req.query.isBase64 === "true") {
let buff = new Buffer(data, 'base64'); data = atob(data)
data = buff.toString('ascii');
} }
currentState.colorSegments = JSON.parse(data); currentState.colorSegments = JSON.parse(data);
if (req.query.persist === "true") { if (req.query.persist === 'true') {
dataToBeWritten.colorSegments = currentState.colorSegments; dataToBeWritten.colorSegments = currentState.colorSegments
} }
res.json({ status: "ok" }); res.json({ status: "ok" });
} catch (error) { } catch (error) {
res.json({ status: "error", message: error }); res.json({ status: "error", message: error });
console.error(error); console.error(error)
} }
updatedData(); updatedData()
}); });
app.get("/api/v1/set/text/colors", function (req, res) { app.get("/api/v1/set/text/colors", function (req, res) {
try { try {
if (req.query.copy === "true") { if (req.query.copy === "true") {
currentState.textColors = currentState.colorSegments; currentState.textColors = currentState.colorSegments
res.json({ status: "ok" }); res.json({ status: "ok" });
} else { } else {
let data = req.query.colors; let data = req.query.colors
if (req.query.isBase64 === "true") { if (req.query.isBase64 === "true") {
let buff = new Buffer(data, 'base64'); data = atob(data)
let data = buff.toString('ascii');
} }
console.debug(data); console.debug(data)
currentState.textColors = JSON.parse(data); currentState.textColors = JSON.parse(data);
if (req.query.persist === "true") { if (req.query.persist === 'true') {
dataToBeWritten.textColors = currentState.textColors; dataToBeWritten.textColors = currentState.textColors
} }
} }
res.json({ status: "ok" }); res.json({ status: "ok" });
} catch (error) { } catch (error) {
res.json({ status: "error", message: error }); res.json({ status: "error", message: error });
console.error(error); console.error(error)
} }
updatedData(); updatedData()
}); });
app.get("/api/v1/set/text/enableColoring", function (req, res) { app.get("/api/v1/set/text/enableColoring", function (req, res) {
currentState.enableColoredText = req.query.enable === "true"; currentState.enableColoredText = (req.query.enable === 'true');
if (req.query.persist === "true") { if (req.query.persist === 'true') {
dataToBeWritten.enableColoredText = currentState.enableColoredText; dataToBeWritten.enableColoredText = currentState.enableColoredText
} }
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/ctrl/message/show", function (req, res) { app.get("/api/v1/ctrl/message/show", function (req, res) {
currentState.message = req.query.msg; currentState.message = req.query.msg
currentState.showMessage = true; currentState.showMessage = true
currentState.messageAppearTime = new Date().getTime(); currentState.messageAppearTime = new Date().getTime()
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/debug", function (req, res) { app.get("/api/v1/debug", function (req, res) {
currentState.debug = req.query.enable === "true"; currentState.debug = (req.query.enable === 'true');
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/ctrl/message/hide", function (req, res) { app.get("/api/v1/ctrl/message/hide", function (req, res) {
currentState.showMessage = false; currentState.showMessage = false
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData(); updatedData()
}); });
app.get("/api/v1/storage/commit", function (req, res) { app.get("/api/v1/storage/commit", function (req, res) {
@ -383,9 +322,10 @@ app.get("/api/v1/storage/commit", function (req, res) {
} catch (error) { } catch (error) {
res.json({ status: "error", reason: error }); res.json({ status: "error", reason: error });
} }
updatedData(); updatedData()
}); });
app.get("/api/v1/storage/delete", function (req, res) { app.get("/api/v1/storage/delete", function (req, res) {
if (req.query.delete === "true") { if (req.query.delete === "true") {
if (fs.existsSync("data-persistence.json")) { if (fs.existsSync("data-persistence.json")) {
@ -394,159 +334,114 @@ app.get("/api/v1/storage/delete", function (req, res) {
} else { } else {
res.json({ status: "error", reason: "No persistence data was found" }); res.json({ status: "error", reason: "No persistence data was found" });
} }
} else { } else {
}
res.json({ status: "error", reason: "Missing delete argument" }); } res.json({ status: "error", reason: "Missing delete argument" });
updatedData(); updatedData()
}); });
// UI Routes // UI Routes
// Returns an object containg all available languages // Returns an object containg all available languages
app.get("/api/ui/v1/lang/list", function handleLangList(req, res) { app.get("/api/ui/v1/lang/list", function handleLangList(req, res){
const tempRespObject = { const tempRespObject = {
status: "ok", status: "ok",
languages: languages, languages: languages
}; }
res.json(tempRespObject); res.json(tempRespObject);
}); })
app.get("/api/ui/v1/lang/set", function (req, res) { app.get("/api/ui/v1/lang/set", function (req, res) {
if (req.query.lang == undefined || req.query.lang == "") { if(req.query.lang == undefined || req.query.lang == ""){
res.json({ status: "error", reason: "Missing language" }); res.json({ status: "error", reason: "Missing language" });
return; return;
} }
const testLang = req.query.lang; const testLang = req.query.lang;
loggy.log("Reloading language file", "info", "Language"); loggy.log("Reloading language file", "info", "Language")
if (!fs.existsSync("lang/" + testLang + ".json")) { if(!fs.existsSync("lang/" + testLang + ".json")){
loggy.log( loggy.log("Language reload failed, file does not exist", "error", "Language")
"Language reload failed, file does not exist", res.status(500).json({ status: "error", reason: "Language file not found" });
"error", return
"Language"
);
res
.status(500)
.json({ status: "error", reason: "Language file not found" });
return;
} }
const tempLang = fs.readFileSync("lang/" + testLang + ".json", "utf8"); const tempLang = fs.readFileSync("lang/" + testLang + ".json", "utf8");
const tempLangObj = helper.tryToParseJson(tempLang); const tempLangObj = helper.tryToParseJson(tempLang);
if (!tempLangObj) { if(!tempLangObj){
loggy.log("Language reload failed, file is not valid", "error", "Language"); loggy.log("Language reload failed, file is not valid", "error", "Language")
res res.status(500).json({ status: "error", reason: "Language file is not valid" });
.status(500) return
.json({ status: "error", reason: "Language file is not valid" });
return;
} }
if (tempLangObj._metadata == undefined) { if(tempLangObj._metadata == undefined){
loggy.log( loggy.log("Language reload failed, file is not valid, metadata missing", "error", "Language")
"Language reload failed, file is not valid, metadata missing", res.status(500).json({ status: "error", reason: "Language file is not valid" });
"error", return
"Language"
);
res
.status(500)
.json({ status: "error", reason: "Language file is not valid" });
return;
} }
loggy.log( loggy.log("Language reloaded, loaded " + tempLangObj._metadata.lang + "@" + tempLangObj._metadata.version, "info", "Language")
"Language reloaded, loaded " +
tempLangObj._metadata.lang +
"@" +
tempLangObj._metadata.version,
"info",
"Language"
);
configObject.language = req.query.lang; configObject.language = req.query.lang;
languageProfile = tempLangObj; languageProfile = tempLangObj;
res.status(200).json({ status: "ok" }); res.status(200).json({ status: "ok" });
fs.writeFileSync("config.json", JSON.stringify(configObject)); fs.writeFileSync("config.json", JSON.stringify(configObject));
}); });
app.use("/assets/*", function handleModuleFiles(req, res) {
if (allowsURLs.indexOf(req.params[0]) > -1) {
res.sendFile(path.join(__dirname, "node_modules", req.params[0]));
} else {
loggy.log(
"Attempt to access restricted asset file " + req.params[0],
"error",
"Security"
);
res.status(403).json({
status: "error",
reason: "Access to restricted asset file denied",
});
}
// console.log(recordedURLs)
});
app.use(function (req, res, next) { app.use(function (req, res, next) {
res.status(404); res.status(404);
loggy.log("Server responded with 404 error", "warn", "Server", true); loggy.log("Server responded with 404 error", "warn", "Server", true);
// respond with html page // respond with html page
if (req.accepts("html")) { if (req.accepts('html')) {
const data = fs.readFileSync("templates/errorPages/404.html", "utf8"); const data = fs.readFileSync("templates/errorPages/404.html", "utf8");
res.status(404); res.status(404)
res.send(data); res.send(data);
return; return;
} }
// respond with json // respond with json
if (req.accepts("json")) { if (req.accepts('json')) {
res.json({ error: "Not found" }); res.json({ error: 'Not found' });
return; return;
} }
// default to plain-text. send() // default to plain-text. send()
res.type("txt").send("Not found"); res.type('txt').send('Not found');
}); });
/*app.use(function(err, req, res, next) { /*app.use(function(err, req, res, next) {
console.error(err.stack); console.error(err.stack);
if(String(err.stack).includes("TypeError: Cannot read properties of undefined")) { if(String(err.stack).includes("TypeError: Cannot read properties of undefined")) {
const data = fs.readFileSync("templates/brokenTranslation.html", "utf8"); const data = fs.readFileSync("templates/brokenTranslation.html", "utf8");
res.send(data); res.send(data);
}else{ }else{
res.status(500).send('Something broke!'); res.status(500).send('Something broke!');
} }
});*/ });*/
loggy.log("Starting server", "info", "Server"); loggy.log("Starting server", "info", "Server");
const port = configObject.port; const port = 3005;
process.on("SIGINT", function () { process.on('SIGINT', function () {
loggy.log( loggy.log("Caught interrupt signal and shutting down gracefully", "info", "Shutdown");
"Caught interrupt signal and shutting down gracefully",
"info",
"Shutdown"
);
server.close(); // Make the express server stop server.close(); // Make the express server stop
loggy.log("Goodbye! 👋", "magic", "Shutdown", true); loggy.log("Goodbye! 👋", "magic", "Shutdown", true)
loggy.close(); // Close and write log loggy.close(); // Close and write log
process.exit(); // Quit the application process.exit(); // Quit the application
}); });
const server = app.listen(port); const server = app.listen(port);
server.on("upgrade", (request, socket, head) => { server.on('upgrade', (request, socket, head) => {
wsServer.handleUpgrade(request, socket, head, (socket) => { wsServer.handleUpgrade(request, socket, head, socket => {
wsServer.emit("connection", socket, request); wsServer.emit('connection', socket, request);
}); });
}); });
loggy.log("=======================", "info", "", true); loggy.log("=======================", "info", "", true);
loggy.log("Server running on port " + port, "magic", "", true); loggy.log("Server running on port " + port, "magic", "", true);
loggy.log( loggy.log("Visit http://localhost:" + port + "/timer for the timer view", "magic", "", true);
"Visit http://localhost:" + port + "/timer for the timer view", loggy.log("Visit http://localhost:" + port + " for the admin view", "magic", "", true);
"magic",
"",
true
);
loggy.log(
"Visit http://localhost:" + port + " for the admin view",
"magic",
"",
true
);
loggy.log("=======================", "info", "", true); loggy.log("=======================", "info", "", true);

8
lang/de_de.json
View File

@ -30,9 +30,8 @@
{ {
"timer": "Timer", "timer": "Timer",
"clock": "Uhr", "clock": "Uhr",
"black": "Leer", "black": "Schwarz",
"test": "Testbild", "test": "Testbild"
"screensaver": "Bildschirmschoner"
}, },
"labels": "labels":
{ {
@ -46,8 +45,7 @@
"enableTextClrs": "Text Farben aktivieren:", "enableTextClrs": "Text Farben aktivieren:",
"textClrs": "Text Farben", "textClrs": "Text Farben",
"addRow": "Neue Zeile", "addRow": "Neue Zeile",
"timeVar": "Aktiviere zeitabweichungs display:", "timeVar": "Aktiviere zeitabweichungs display:"
"allowOverrun": "Überlauf erlauben: "
}, },
"untis": "untis":
{ {

6
lang/en_uk.json
View File

@ -32,8 +32,7 @@
"timer": "Timer", "timer": "Timer",
"clock": "Clock", "clock": "Clock",
"black": "Black", "black": "Black",
"test": "Testimage", "test": "Testimage"
"screensaver": "Screensaver"
}, },
"labels": "labels":
{ {
@ -49,8 +48,7 @@
"addRow": "Add Row", "addRow": "Add Row",
"timeVar": "Enable time variance display:", "timeVar": "Enable time variance display:",
"language": "Select a language", "language": "Select a language",
"apply": "Apply", "apply": "Apply"
"allowOverrun": "Allow overrun:"
}, },
"untis": "untis":
{ {

6
lang/proto_black.json
View File

@ -31,8 +31,7 @@
"timer": "████", "timer": "████",
"clock": "█████", "clock": "█████",
"black": "████", "black": "████",
"test": "███████", "test": "███████"
"screensaver": "████████"
}, },
"labels": "labels":
{ {
@ -46,8 +45,7 @@
"enableTextClrs": "██████ ████ ███████:", "enableTextClrs": "██████ ████ ███████:",
"textClrs": "████ ██████", "textClrs": "████ ██████",
"addRow": "███ ███", "addRow": "███ ███",
"timeVar": "██████ ████ ███████ ███████:", "timeVar": "██████ ████ ███████ ███████:"
"allowOverrun": "██████ ████████:"
}, },
"untis": "untis":
{ {

1
log-journal.json Normal file
View File

@ -0,0 +1 @@
[{"timestamp":"2022-07-12 18:45:39.044","level":"info","module":"Logging","message":"2022-07-12 18:45:39.044 [info] [Logging] Logging initialized"},{"timestamp":"2022-07-12 18:45:39.046","level":"info","module":"Server","message":"2022-07-12 18:45:39.046 [info] [Server] Preparing server"},{"timestamp":"2022-07-12 18:45:39.047","level":"info","module":"Server","message":"2022-07-12 18:45:39.047 [info] [Server] Preparing static routes"},{"timestamp":"2022-07-12 18:45:39.048","level":"info","module":"Server","message":"2022-07-12 18:45:39.048 [info] [Server] Preparing middlewares"},{"timestamp":"2022-07-12 18:45:39.049","level":"info","module":"Config","message":"2022-07-12 18:45:39.049 [info] [Config] Loading config"},{"timestamp":"2022-07-12 18:45:39.052","level":"info","module":"Language","message":"2022-07-12 18:45:39.052 [info] [Language] Searching for languages"},{"timestamp":"2022-07-12 18:45:39.053","level":"info","module":"Language","message":"2022-07-12 18:45:39.053 [info] [Language] Found 3 languages"},{"timestamp":"2022-07-12 18:45:39.053","level":"info","module":"Language","message":"2022-07-12 18:45:39.053 [info] [Language] Reading language file"},{"timestamp":"2022-07-12 18:45:39.053","level":"info","module":"Websocket","message":"2022-07-12 18:45:39.053 [info] [Websocket] Preparing websocket"},{"timestamp":"2022-07-12 18:45:39.054","level":"info","module":"Server","message":"2022-07-12 18:45:39.054 [info] [Server] Preparing routes"},{"timestamp":"2022-07-12 18:45:39.055","level":"info","module":"Server","message":"2022-07-12 18:45:39.055 [info] [Server] Starting server"},{"timestamp":"2022-07-12 18:54:44.820","level":"info","module":"Language","message":"2022-07-12 18:54:44.820 [info] [Language] Reloading language file"},{"timestamp":"2022-07-12 18:54:44.823","level":"info","module":"Language","message":"2022-07-12 18:54:44.823 [info] [Language] Language reloaded, loaded en@1.0.0"},{"timestamp":"2022-07-12 18:54:48.364","level":"info","module":"Language","message":"2022-07-12 18:54:48.364 [info] [Language] Reloading language file"},{"timestamp":"2022-07-12 18:54:48.365","level":"info","module":"Language","message":"2022-07-12 18:54:48.365 [info] [Language] Language reloaded, loaded none@1.0.0"},{"timestamp":"2022-07-12 18:54:53.171","level":"info","module":"Language","message":"2022-07-12 18:54:53.171 [info] [Language] Reloading language file"},{"timestamp":"2022-07-12 18:54:53.172","level":"info","module":"Language","message":"2022-07-12 18:54:53.172 [info] [Language] Language reloaded, loaded en@1.0.0"},{"timestamp":"2022-07-12 19:47:47.709","level":"info","module":"Shutdown","message":"2022-07-12 19:47:47.709 [info] [Shutdown] Caught interrupt signal and shutting down gracefully"}]

4
logging.js
View File

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

7756
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

64
package.json
View File

@ -1,39 +1,29 @@
{ {
"name": "opencountdown", "name": "opencountdown",
"version": "1.0.7", "version": "1.0.1",
"description": "An opensource countdown", "description": "An opensource countdown",
"main": "startHandler.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"start": "electron startHandler.js" "build": "nexe index.js --build"
}, },
"author": "TheGreydiamond", "author": "TheGreydiamond",
"license": "LGPL-3.0", "license": "LGPL-3.0",
"dependencies": { "dependencies": {
"body-parser": "^1.20.2", "body-parser": "^1.19.2",
"bootstrap": "^5.3.1", "bootstrap": "^5.1.3",
"bootstrap-duration-picker": "^2.1.3", "bootstrap-duration-picker": "^2.1.3",
"bootstrap-icons": "^1.10.5", "bootstrap-icons": "^1.8.1",
"colors": "^1.4.0", "colors": "^1.4.0",
"darkreader": "^4.9.58", "darkreader": "^4.9.44",
"eta": "^1.14.2", "eta": "^1.12.3",
"express": "^4.19.2", "express": "^4.17.3",
"flatpickr": "^4.6.13", "flatpickr": "^4.6.11",
"jquery": "^3.7.0", "jquery": "^3.6.0",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"less": "^4.1.3", "less": "^3.13",
"mdbootstrap": "^4.20.0", "mdbootstrap": "^4.20.0",
"open": "^8.4.0", "underscore": "^1.13.3",
"underscore": "^1.13.6", "ws": "^8.5.0"
"ws": "^8.18.0" }
},
"devDependencies": {
"electron": "^25.9.8",
"electron-builder": "^24.6.3"
},
"build": {
"extraMetadata": {
"main": "startHandler.js"
}
}
} }

226
startHandler.js
View File

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

1
static/bootstrap-duration-picker Symbolic link
View File

@ -0,0 +1 @@
../node_modules/bootstrap-duration-picker/dist/

1
static/bootstrap/dist Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/bootstrap/dist

1
static/colorpicker/css Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/bootstrap-colorpicker/dist/css

1
static/colorpicker/js Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/bootstrap-colorpicker/dist/js

1
static/css/bootstrap-icons.css vendored Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/bootstrap-icons/font/bootstrap-icons.css

1
static/css/fonts/bootstrap-icons.woff Symbolic link
View File

@ -0,0 +1 @@
../../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff

1
static/css/fonts/bootstrap-icons.woff2 Symbolic link
View File

@ -0,0 +1 @@
../../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2

4
static/css/smallerTextMod.css
View File

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

44
static/css/styles.css
View File

@ -111,47 +111,3 @@ animation:fade 1000ms infinite;
font-size: x-large; font-size: x-large;
font-family: sans-serif; 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); }
}

1
static/favicon.svg
View File

@ -1 +0,0 @@
logo/faviconLogo.svg

1
static/flatpickr/dist Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/flatpickr/dist/

1
static/js/cookie.js Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/js-cookie/dist/js.cookie.min.js

1
static/js/darkreader.js Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/darkreader/darkreader.js

8
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", "screensaver"] const modes = ["timer", "clock", "black", "test"]
let selectPresetTime = 0; let selectPresetTime = 0;
if (Cookies.get("interfaceColor") != undefined) { if (Cookies.get("interfaceColor") != undefined) {
@ -131,7 +131,6 @@ $(function () {
$("#showMillis")[0].checked = jsonResult.showMilliSeconds; $("#showMillis")[0].checked = jsonResult.showMilliSeconds;
$("#progBarShow")[0].checked = jsonResult.showProgressbar; $("#progBarShow")[0].checked = jsonResult.showProgressbar;
$("#textColors")[0].checked = jsonResult.enableColoredText; $("#textColors")[0].checked = jsonResult.enableColoredText;
$("#allowOverrun")[0].checked = jsonResult.enableOverrun;
console.log(document.getElementById("tableCopySource")) console.log(document.getElementById("tableCopySource"))
let tableEntryDom = document.getElementById("tableCopySource").cloneNode(true) let tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
@ -267,7 +266,6 @@ $(function () {
const showMillisB = $("#showMillis")[0].checked const showMillisB = $("#showMillis")[0].checked
const progBarShowB = $("#progBarShow")[0].checked const progBarShowB = $("#progBarShow")[0].checked
const textColorsB = $("#textColors")[0].checked const textColorsB = $("#textColors")[0].checked
const allowOverrun = $("#allowOverrun")[0].checked
const colors = convertColorSegments("colors1") const colors = convertColorSegments("colors1")
const colors2 = convertColorSegments("colors2") const colors2 = convertColorSegments("colors2")
@ -278,8 +276,6 @@ $(function () {
allPathes.push("/api/v1/set/text/enableColoring?enable=" + textColorsB) allPathes.push("/api/v1/set/text/enableColoring?enable=" + textColorsB)
allPathes.push("/api/v1/set/progressbar/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors))) allPathes.push("/api/v1/set/progressbar/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors)))
allPathes.push("/api/v1/set/text/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors2))) allPathes.push("/api/v1/set/text/colors?isBase64=true&colors=" + btoa(JSON.stringify(colors2)))
allPathes.push("/api/v1/set/enableOverrun?enable=" + allowOverrun)
for (pI in allPathes) { for (pI in allPathes) {
@ -305,13 +301,11 @@ $(function () {
const showMillisB = $("#showMillis")[0].checked const showMillisB = $("#showMillis")[0].checked
const progBarShowB = $("#progBarShow")[0].checked const progBarShowB = $("#progBarShow")[0].checked
const textColorsB = $("#textColors")[0].checked const textColorsB = $("#textColors")[0].checked
const allowOverrun = $("#allowOverrun")[0].checked
allPathes.push("/api/v1/set/layout/showTime?persist=true&show=" + showTimeB) allPathes.push("/api/v1/set/layout/showTime?persist=true&show=" + showTimeB)
allPathes.push("/api/v1/set/layout/showMillis?persist=true&show=" + showMillisB) allPathes.push("/api/v1/set/layout/showMillis?persist=true&show=" + showMillisB)
allPathes.push("/api/v1/set/progressbar/show?persist=true&show=" + progBarShowB) allPathes.push("/api/v1/set/progressbar/show?persist=true&show=" + progBarShowB)
allPathes.push("/api/v1/set/text/enableColoring?persist=true&enable=" + textColorsB) allPathes.push("/api/v1/set/text/enableColoring?persist=true&enable=" + textColorsB)
allPathes.push("/api/v1/set/enableOverrun?persist=true&enable=" + allowOverrun)
for (pI in allPathes) { for (pI in allPathes) {
const path = allPathes[pI]; const path = allPathes[pI];

1
static/js/jquery.min.js vendored Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/jquery/dist/jquery.min.js

1
static/js/less.min.js vendored Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/less/dist/less.min.js

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
} }

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

@ -1,284 +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://" + location.hostname + ":" + 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%";
if(!dataFrame.enableOverrun) {
timer.innerHTML = "00:00:00";
}
}
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)
}
}

BIN
static/logo/faviconLogo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

4578
static/logo/faviconLogo.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 151 KiB

4631
static/logo/logoProposal-invert.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 145 KiB

4631
static/logo/logoProposal.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 145 KiB

1
static/mdbootstrap/css Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/mdbootstrap/css/

1
static/mdbootstrap/js Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/mdbootstrap/js

33
templates/brokenTranslation.html
View File

@ -10,27 +10,26 @@
<meta name="author" content="TheGreydiamond"> <meta name="author" content="TheGreydiamond">
<link rel="stylesheet" href="/assets/bootstrap-icons/font/bootstrap-icons.css"> <link rel="stylesheet" href="/css/bootstrap-icons.css">
<link rel="stylesheet" href="/assets/mdbootstrap/css/style.css"> <link rel="stylesheet" href="/mdbootstrap/css/style.css">
<script src="/assets/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/jquery/dist/jquery.min.js"></script> <script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/mdbootstrap/js/mdb.min.js"></script> <script type="text/javascript" src="/mdbootstrap/js/mdb.min.js"></script>
<script type="text/javascript" src="/js/darkreader.js"></script> <script type="text/javascript" src="/js/darkreader.js"></script>
<script type="text/javascript" src="/assets/js-cookie/dist/js.cookie.min.js"></script> <script type="text/javascript" src="/js/cookie.js"></script>
<link href="/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/mainStyle.css" rel="stylesheet"> <link href="/css/mainStyle.css" rel="stylesheet">
<link rel="stylesheet" href="/coloris/coloris.min.css" /> <link rel="stylesheet" href="/coloris/coloris.min.css" />
<link rel="stylesheet" href="/assets/bootstrap-duration-picker/dist/bootstrap-duration-picker.css" /> <link rel="stylesheet" href="/bootstrap-duration-picker/bootstrap-duration-picker.css" />
<link rel="stylesheet" href="/assets/flatpickr/dist/flatpickr.min.css" /> <link rel="stylesheet" href="/flatpickr/dist/flatpickr.min.css" />
<script src="/assets/bootstrap-duration-picker/dist/bootstrap-duration-picker-debug.js"></script> <script src="/bootstrap-duration-picker/bootstrap-duration-picker-debug.js"></script>
<script src="/coloris/coloris.min.js"></script> <script src="/coloris/coloris.min.js"></script>
<script type="text/javascript" src="/assets/flatpickr/dist/flatpickr.js"> </script> <script type="text/javascript" src="/flatpickr/dist/flatpickr.js"> </script>
<link rel="stylesheet" href="/css/bootstrap-icons.css">
<link rel="icon" href="/logo/favicon.svg" type="image/svg+xml">
</head> </head>
<body> <body>
@ -116,9 +115,17 @@
</page> </page>
</pages> </pages>
</main> </main>
<script type="text/javascript" src="/js/jsonview.js"></script> <script type="text/javascript" src="js/jsonview.js"></script>
<script type="text/javascript" src="/js/interface.js"> </script> <script type="text/javascript" src="/js/interface.js"> </script>
<script type="text/javascript"> <script type="text/javascript">
Coloris({
el: '.coloris',
alpha: false,
});
$(function () {
$('[data-toggle="tooltip"]').tooltip({ container: "body" })
})
$("#applyLang").on("click", function (event) { $("#applyLang").on("click", function (event) {
const lang = $("#lang").val() const lang = $("#lang").val()
saveOption("/api/ui/v1/lang/set?lang=" + lang, function handleLangSelect(event, xmlHttp) { saveOption("/api/ui/v1/lang/set?lang=" + lang, function handleLangSelect(event, xmlHttp) {

8
templates/errorPages/404.html
View File

@ -9,8 +9,8 @@
<meta name="description" content="openCountdown"> <meta name="description" content="openCountdown">
<meta name="author" content="TheGreydiamond"> <meta name="author" content="TheGreydiamond">
<script type="text/javascript" src="/assets/js-cookie/dist/js.cookie.min.js"></script> <script type="text/javascript" src="/js/cookie.js"></script>
<link rel="stylesheet" href="/assets/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet/less" type="text/css" href="/css/errorPage/styles.less" /> <link rel="stylesheet/less" type="text/css" href="/css/errorPage/styles.less" />
@ -19,9 +19,11 @@
javascriptEnabled: true javascriptEnabled: true
}; };
</script> </script>
<script src="/assets/less/dist/less.min.js"></script> <script src="/js/less.min.js"></script>
<link rel="stylesheet" href="/css/errorPage/style.css"> <link rel="stylesheet" href="/css/errorPage/style.css">
<link rel="stylesheet" href="/css/bootstrap-icons.css">
</head> </head>
<body> <body>

45
templates/newAdminPanel.html
View File

@ -10,27 +10,26 @@
<meta name="author" content="TheGreydiamond"> <meta name="author" content="TheGreydiamond">
<link rel="stylesheet" href="/assets/bootstrap-icons/font/bootstrap-icons.css"> <link rel="stylesheet" href="/css/bootstrap-icons.css">
<link rel="stylesheet" href="/assets/mdbootstrap/css/style.css"> <link rel="stylesheet" href="/mdbootstrap/css/style.css">
<script src="/assets/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/jquery/dist/jquery.min.js"></script> <script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/mdbootstrap/js/mdb.min.js"></script> <script type="text/javascript" src="/mdbootstrap/js/mdb.min.js"></script>
<script type="text/javascript" src="/assets/darkreader/darkreader.js"></script> <script type="text/javascript" src="/js/darkreader.js"></script>
<script type="text/javascript" src="/assets/js-cookie/dist/js.cookie.min.js"></script> <script type="text/javascript" src="/js/cookie.js"></script>
<link href="/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/mainStyle.css" rel="stylesheet"> <link href="/css/mainStyle.css" rel="stylesheet">
<link rel="stylesheet" href="/coloris/coloris.min.css" /> <link rel="stylesheet" href="/coloris/coloris.min.css" />
<link rel="stylesheet" href="/assets/bootstrap-duration-picker/dist/bootstrap-duration-picker.css" /> <link rel="stylesheet" href="/bootstrap-duration-picker/bootstrap-duration-picker.css" />
<link rel="stylesheet" href="/assets/flatpickr/dist/flatpickr.min.css" /> <link rel="stylesheet" href="/flatpickr/dist/flatpickr.min.css" />
<script src="/assets/bootstrap-duration-picker/dist/bootstrap-duration-picker-debug.js"></script> <script src="/bootstrap-duration-picker/bootstrap-duration-picker-debug.js"></script>
<script src="/coloris/coloris.min.js"></script> <script src="/coloris/coloris.min.js"></script>
<script type="text/javascript" src="/assets/flatpickr/dist/flatpickr.js"> </script> <script type="text/javascript" src="/flatpickr/dist/flatpickr.js"> </script>
<link rel="stylesheet" href="/css/bootstrap-icons.css">
<link rel="icon" href="/logo/faviconLogo.svg" type="image/svg+xml">
</head> </head>
<body> <body>
@ -39,12 +38,10 @@
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark trans" style="width: 250px;" <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark trans" style="width: 250px;"
id="navbarToggleExternalContent"> id="navbarToggleExternalContent">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<center> <svg class="bi me-2" width="40" height="32">
<img class="bi me-2" width="200" height="128" src="/logo/logoProposal.svg"> <use xlink:href="#bootstrap" />
</svg>
</img > <span class="fs-4">Sidebar</span>
</center>
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
@ -156,9 +153,6 @@
<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>
@ -262,9 +256,6 @@
<label for="progBarShow"><%= it.lang.labels.showProgress %></label> <label for="progBarShow"><%= it.lang.labels.showProgress %></label>
<input type="checkbox" name="progBarShow" id="progBarShow"><br> <input type="checkbox" name="progBarShow" id="progBarShow"><br>
<label for="allowOverrun"><%= it.lang.labels.allowOverrun %></label>
<input type="checkbox" name="allowOverrun" id="allowOverrun"><br>
<details> <details>
<summary><%= it.lang.labels.progbarColors %></summary> <summary><%= it.lang.labels.progbarColors %></summary>
<p> <p>
@ -434,7 +425,7 @@
</page> </page>
</pages> </pages>
</main> </main>
<script type="text/javascript" src="/js/jsonview.js"></script> <script type="text/javascript" src="js/jsonview.js"></script>
<script type="text/javascript" src="/js/interface.js"> </script> <script type="text/javascript" src="/js/interface.js"> </script>
<script type="text/javascript"> <script type="text/javascript">

64
templates/ng-timerview.html
View File

@ -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>

3
templates/timerPage.html
View File

@ -6,13 +6,12 @@
<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 - Timerpage</title> <title>openCountdown</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()">