Compare commits

..

31 Commits

Author SHA1 Message Date
b21bbb7e3e fixed some vulns 2024-08-18 22:27:27 +02:00
f32790706e - fixed issue with faulty progress bar
- fixed issue with config-safe-states
2023-08-09 15:25:29 +02:00
cec31d81f0 inital fix for misbehaviour of relativAdd 2023-08-08 21:42:46 +02:00
704ecb4249 finally introduced CNTDWN-1 (allow/disallow overrun) 2023-08-07 16:59:38 +02:00
5398817a1e - fixed issue #8 2022-11-19 15:49:46 +01:00
1fc16fdc14 „README.MD“ ändern 2022-11-15 20:50:12 +01:00
b04a376b1d Merge pull request 'Rewrite of timerpage' (#7) from better-timer-page into master
Reviewed-on: #7
2022-11-15 18:48:57 +01:00
0bf867daf6 fix onresize issue 2022-11-15 18:46:06 +01:00
2e1fc97f6f Merge pull request 'Add proper Electron launcher and building process' (#6) from electron into master
Reviewed-on: #6
2022-11-15 18:28:59 +01:00
cee06bbe11 add windows build script 2022-11-15 18:26:50 +01:00
1423f51104 improved screen saver 2022-11-14 19:37:20 +01:00
389d9a9b13 bump version in package.json 2022-11-13 21:58:25 +01:00
7dd2438881 - rewrote timerview
- added new timerview mode
2022-11-13 21:57:01 +01:00
94c81ee76d some cleanup and fixes 2022-11-13 20:01:41 +01:00
59aa625a6d version increment 2022-11-13 19:15:19 +01:00
de22ec5c3a added proper status message 2022-11-13 19:12:33 +01:00
811d96f5fa small cleanup 2022-11-13 00:46:18 +01:00
3eab7cc6eb add electron packaging 2022-11-13 00:30:42 +01:00
4e28df6eea „README.MD“ ändern 2022-10-28 18:43:08 +02:00
013ad881d3 - add gui electron application
! sometimes the tray icon does not open it's context menu
2022-08-18 22:00:24 +02:00
16a2549942 Merge branch 'master' of https://git.project-name-here.de/Project-Name-Here/openCountdown 2022-08-18 18:16:58 +02:00
92a3d94429 - removed symblic links 2022-08-18 18:15:36 +02:00
f3114e7cd6 - removal of most symblic links (works better on windows) 2022-08-18 18:15:24 +02:00
6479979293 „README.MD“ ändern 2022-07-23 18:15:14 +02:00
4ed8ad2dd3 „README.MD“ ändern 2022-07-23 18:15:01 +02:00
f65bf30809 - introduction of logo 2022-07-23 18:12:32 +02:00
91d8e0135d „README.MD“ ändern 2022-07-15 23:59:48 +02:00
20bf5b133b „README.MD“ ändern 2022-07-15 18:40:30 +02:00
32e0c707be „README.MD“ ändern 2022-07-15 17:32:12 +02:00
f73155ab01 „README.MD“ ändern 2022-07-15 17:30:03 +02:00
a0602a3b9b „README.MD“ ändern 2022-07-15 17:29:43 +02:00
47 changed files with 21804 additions and 1724 deletions

2
.gitignore vendored
View File

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

View File

@ -1,5 +1,31 @@
<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
- [P] Endpoint docs Endpoint documentation is currently pretty thin. This will be changed in the future.
- [ ] Endpoint docs (in Progress)
- [ ] Better WS frames - [ ] Better WS frames

19
build.sh Executable file
View File

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

View File

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

19
build_win.sh Normal file
View File

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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 97 KiB

222
electronAssets/index.html Normal file
View File

@ -0,0 +1,222 @@
<!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 Normal file
View File

@ -0,0 +1,33 @@
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')

View File

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

343
index.js
View File

@ -1,13 +1,14 @@
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();
@ -24,7 +25,28 @@ app.use(
}) })
); );
let loadedData = {} // Allowed urls for requests to /assets/
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")) {
@ -47,17 +69,26 @@ currentState = {
showMessage: false, showMessage: false,
messageAppearTime: 0, messageAppearTime: 0,
showProgressbar: true, showProgressbar: true,
colorSegments: { 40000: "yellow", 20000: "#FFAE00", 5000: "#ff0000", "START": "green" }, colorSegments: {
40000: "yellow",
20000: "#FFAE00",
5000: "#ff0000",
START: "green",
},
textColors: {}, textColors: {},
srvTime: 0, srvTime: 0,
enableColoredText: true, enableColoredText: true,
debug: false, debug: false,
sessionToken: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) enableOverrun: true,
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", "{}");
} }
@ -66,9 +97,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++) {
@ -76,19 +107,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(
loggy.log("Reading language file", "info", "Language") fs.readFileSync("lang/" + configObject.language + ".json", "utf8")
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();
} }
}); });
}); });
@ -104,7 +135,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);
@ -118,28 +149,35 @@ 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);
}); });
@ -160,166 +198,181 @@ 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) { app.get("/api/v1/set/relativAddMillisToTimer", function (req, res) {
currentState.timeAmountInital = req.query.time;
currentState.countdownGoal = currentState.countdownGoal + parseInt(req.query.time) currentState.timeAmountInital = parseInt(req.query.time) + parseInt(currentState.timeAmountInital);
currentState.pauseMoment = new Date().getTime(); currentState.countdownGoal = currentState.countdownGoal + parseInt(req.query.time);
// currentState.pauseMoment = new Date().getTime();
res.json({ status: "ok" }); res.json({ status: "ok" });
updatedData() 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 += new Date().getTime() - currentState.pauseMoment; currentState.countdownGoal +=
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 = new Date().getTime() + parseInt(currentState.timeAmountInital) currentState.countdownGoal =
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") {
data = atob(data) let buff = new Buffer(data, 'base64');
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") {
data = atob(data) let buff = new Buffer(data, 'base64');
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) {
@ -330,10 +383,9 @@ 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")) {
@ -342,11 +394,10 @@ 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
@ -354,10 +405,10 @@ app.get("/api/v1/storage/delete", function (req, res) {
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 == "") {
@ -365,56 +416,91 @@ app.get("/api/ui/v1/lang/set", function (req, res) {
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("Language reload failed, file does not exist", "error", "Language") loggy.log(
res.status(500).json({ status: "error", reason: "Language file not found" }); "Language reload failed, file does not exist",
return "error",
"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.status(500).json({ status: "error", reason: "Language file is not valid" }); res
return .status(500)
.json({ status: "error", reason: "Language file is not valid" });
return;
} }
if (tempLangObj._metadata == undefined) { if (tempLangObj._metadata == undefined) {
loggy.log("Language reload failed, file is not valid, metadata missing", "error", "Language") loggy.log(
res.status(500).json({ status: "error", reason: "Language file is not valid" }); "Language reload failed, file is not valid, metadata missing",
return "error",
"Language"
);
res
.status(500)
.json({ status: "error", reason: "Language file is not valid" });
return;
} }
loggy.log("Language reloaded, loaded " + tempLangObj._metadata.lang + "@" + tempLangObj._metadata.version, "info", "Language") loggy.log(
"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")) {
@ -426,30 +512,41 @@ app.use(function (req, res, next) {
});*/ });*/
loggy.log("Starting server", "info", "Server"); loggy.log("Starting server", "info", "Server");
const port = 3005; const port = configObject.port;
process.on('SIGINT', function () { process.on("SIGINT", function () {
loggy.log("Caught interrupt signal and shutting down gracefully", "info", "Shutdown"); loggy.log(
"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("Visit http://localhost:" + port + "/timer for the timer view", "magic", "", true); loggy.log(
loggy.log("Visit http://localhost:" + port + " for the admin view", "magic", "", true); "Visit http://localhost:" + port + "/timer for the timer view",
"magic",
"",
true
);
loggy.log(
"Visit http://localhost:" + port + " for the admin view",
"magic",
"",
true
);
loggy.log("=======================", "info", "", true); loggy.log("=======================", "info", "", true);

View File

@ -30,8 +30,9 @@
{ {
"timer": "Timer", "timer": "Timer",
"clock": "Uhr", "clock": "Uhr",
"black": "Schwarz", "black": "Leer",
"test": "Testbild" "test": "Testbild",
"screensaver": "Bildschirmschoner"
}, },
"labels": "labels":
{ {
@ -45,7 +46,8 @@
"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":
{ {

View File

@ -32,7 +32,8 @@
"timer": "Timer", "timer": "Timer",
"clock": "Clock", "clock": "Clock",
"black": "Black", "black": "Black",
"test": "Testimage" "test": "Testimage",
"screensaver": "Screensaver"
}, },
"labels": "labels":
{ {
@ -48,7 +49,8 @@
"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":
{ {

View File

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

View File

@ -1 +0,0 @@
[{"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"}]

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 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 * @param {String} module Kinda the source
*/ */
function log(message, level, module, ignore = false) { function log(message, level, module, ignore = false) {

5648
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

226
startHandler.js Normal file
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -111,3 +111,47 @@ 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 Symbolic link
View File

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

View File

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

View File

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

View File

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

View File

@ -25,7 +25,7 @@ function convertColorSegments(elementId) {
$(function () { $(function () {
// $(".numVal").bind("DOMSubtreeModified", alert); // $(".numVal").bind("DOMSubtreeModified", alert);
const modes = ["timer", "clock", "black", "test"] const modes = ["timer", "clock", "black", "test", "screensaver"]
let selectPresetTime = 0; let selectPresetTime = 0;
if (Cookies.get("interfaceColor") != undefined) { if (Cookies.get("interfaceColor") != undefined) {
@ -131,6 +131,7 @@ $(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)
@ -266,6 +267,7 @@ $(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")
@ -276,6 +278,8 @@ $(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) {
@ -301,11 +305,13 @@ $(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];

View File

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

View File

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

View File

@ -0,0 +1,284 @@
// 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 Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

4578
static/logo/faviconLogo.svg Normal file

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 151 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 145 KiB

4631
static/logo/logoProposal.svg Normal file

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 145 KiB

View File

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

View File

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

View File

@ -10,26 +10,27 @@
<meta name="author" content="TheGreydiamond"> <meta name="author" content="TheGreydiamond">
<link rel="stylesheet" href="/css/bootstrap-icons.css"> <link rel="stylesheet" href="/assets/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="/mdbootstrap/css/style.css"> <link rel="stylesheet" href="/assets/mdbootstrap/css/style.css">
<script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/assets/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/jquery.min.js"></script> <script src="/assets/jquery/dist/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="/js/cookie.js"></script> <script type="text/javascript" src="/assets/js-cookie/dist/js.cookie.min.js"></script>
<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/assets/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="/bootstrap-duration-picker/bootstrap-duration-picker.css" /> <link rel="stylesheet" href="/assets/bootstrap-duration-picker/dist/bootstrap-duration-picker.css" />
<link rel="stylesheet" href="/flatpickr/dist/flatpickr.min.css" /> <link rel="stylesheet" href="/assets/flatpickr/dist/flatpickr.min.css" />
<script src="/bootstrap-duration-picker/bootstrap-duration-picker-debug.js"></script> <script src="/assets/bootstrap-duration-picker/dist/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="/flatpickr/dist/flatpickr.js"> </script> <script type="text/javascript" src="/assets/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>
@ -115,17 +116,9 @@
</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) {

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="/js/cookie.js"></script> <script type="text/javascript" src="/assets/js-cookie/dist/js.cookie.min.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,11 +19,9 @@
javascriptEnabled: true javascriptEnabled: true
}; };
</script> </script>
<script src="/js/less.min.js"></script> <script src="/assets/less/dist/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>

View File

@ -10,26 +10,27 @@
<meta name="author" content="TheGreydiamond"> <meta name="author" content="TheGreydiamond">
<link rel="stylesheet" href="/css/bootstrap-icons.css"> <link rel="stylesheet" href="/assets/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="/mdbootstrap/css/style.css"> <link rel="stylesheet" href="/assets/mdbootstrap/css/style.css">
<script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/assets/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/jquery.min.js"></script> <script src="/assets/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/mdbootstrap/js/mdb.min.js"></script> <script type="text/javascript" src="/assets/mdbootstrap/js/mdb.min.js"></script>
<script type="text/javascript" src="/js/darkreader.js"></script> <script type="text/javascript" src="/assets/darkreader/darkreader.js"></script>
<script type="text/javascript" src="/js/cookie.js"></script> <script type="text/javascript" src="/assets/js-cookie/dist/js.cookie.min.js"></script>
<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/assets/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="/bootstrap-duration-picker/bootstrap-duration-picker.css" /> <link rel="stylesheet" href="/assets/bootstrap-duration-picker/dist/bootstrap-duration-picker.css" />
<link rel="stylesheet" href="/flatpickr/dist/flatpickr.min.css" /> <link rel="stylesheet" href="/assets/flatpickr/dist/flatpickr.min.css" />
<script src="/bootstrap-duration-picker/bootstrap-duration-picker-debug.js"></script> <script src="/assets/bootstrap-duration-picker/dist/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="/flatpickr/dist/flatpickr.js"> </script> <script type="text/javascript" src="/assets/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>
@ -38,10 +39,12 @@
<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">
<svg class="bi me-2" width="40" height="32"> <center>
<use xlink:href="#bootstrap" /> <img class="bi me-2" width="200" height="128" src="/logo/logoProposal.svg">
</svg>
<span class="fs-4">Sidebar</span> </img >
</center>
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
@ -153,6 +156,9 @@
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off"> <input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio4"><%= it.lang.others.test %></label> <label class="btn btn-outline-primary" for="btnradio4"><%= it.lang.others.test %></label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio5"><%= it.lang.others.screensaver %></label>
</div> </div>
<br> <br>
<br> <br>
@ -256,6 +262,9 @@
<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>
@ -425,7 +434,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">

View File

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

View File

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