Tooloop/Tooloop-Kiosk-Browser
2
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

arg, forgotten files…

Browse Source
This commit is contained in:
Daniel Stock
2024-06-03 12:16:11 +02:00
parent 0b76d1a624
commit 0a7f5407d8
7 changed files with 1283 additions and 2747 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/config.html
+93
View File
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Config</title>
<style>
html,
body {
background-color: hsl(0, 0%, 12%);
color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16px;
padding: 1rem;
}
h1 {
font-weight: 500;
font-size: 1.333rem;
margin-bottom: 2em;
}
label {
color: #ccc;
text-align: right;
line-height: 2.333;
}
.config {
display: grid;
gap: 1rem;
padding: 2rem;
grid-template-columns: max-content auto;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.25rem;
background-color: rgba(255, 255, 255, 0.05);
}
input,
textarea {
font-family: monospace;
padding: 0 0.666em;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.25rem;
}
textarea:focus,
input:focus {
outline: none;
}
.buttons {
grid-column: 2;
display: flex;
gap: 1rem;
margin-top: 2rem;
}
button {
background-color: hsl(0, 0%, 50%);
/* border: 1px solid rgba(255, 255, 255, 0.12); */
border-width: 1px;
border-radius: 0.25rem;
line-height: 1.5;
padding: 0 0.666em;
color: white;
}
</style>
</head>
<body>
<h1>Config</h1>
<div class="config">
<label for="url">Url</label>
<input type="text" id="url" value="file:///assets/data/index.html">
<label for="whitelist">Allowed Domains</label>
<textarea name="whitelist" id="whitelist"></textarea>
<label for="logPath">Logging Path</label>
<input type="text" id="logPath" value="/assets/logs/tooloop-kiosk-browser.log">
</div>
<div class="buttons">
<button>Save</button>
<button>Cancel</button>
</div>
</body>
</html>
html/onboarding.html
+2 -2
View File
@@ -23,7 +23,7 @@
html { html {
/* background-color: #000; */ /* background-color: #000; */
background-image: url('images/icon-512.png'); background-image: url('../images/icon-512.png');
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
@@ -139,7 +139,7 @@
<main id="info"> <main id="info">
<div id="header" role="banner"> <div id="header" role="banner">
<img src="images/icon-512.png" alt="Application Icon" role="presentation"> <img src="../images/icon-512.png" alt="Application Icon" role="presentation">
<h1>Tooloop Kiosk Browser</h1> <h1>Tooloop Kiosk Browser</h1>
</div> </div>
js/config.js
+29
View File
@@ -0,0 +1,29 @@
class Config {
constructor() {
this.config = {
"url": "https://www.tooloop.de",
"allowedDomains": [
"tooloop.de",
"www.tooloop.de"
],
"logPath": "tooloop-kiosk-browser.log"
};
}
}
let config = {
"url": "https://www.tooloop.de",
"allowedDomains": [
"tooloop.de",
"www.tooloop.de"
],
"logPath": "tooloop-kiosk-browser.log"
};
exports.config = config;
exports.load = () => {
console.log(config);
};
js/preload.js
+1 -9
View File
@@ -1,10 +1,2 @@
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => { });
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
main.js
+47 -15
View File
@@ -1,10 +1,12 @@
const { app, BrowserWindow, nativeTheme, Menu, MenuItem } = require('electron/main'); const { app, BrowserWindow, BaseWindow, nativeTheme, Menu, MenuItem } = require('electron/main');
const path = require('node:path'); const path = require('node:path');
const fs = require('fs'); const fs = require('fs');
const os = require('os'); const os = require('os');
const log = require('electron-log/main'); const log = require('electron-log/main');
const { linkExists } = require('link-exists'); const { linkExists } = require('link-exists');
const isReachable = require('is-reachable');
const { setInterval } = require('node:timers/promises'); const { setInterval } = require('node:timers/promises');
const configModule = require('./js/config.js');
const isMac = process.platform === 'darwin'; const isMac = process.platform === 'darwin';
@@ -13,6 +15,7 @@ const isMac = process.platform === 'darwin';
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
let config; let config;
let configWindow;
let win; let win;
let menu; let menu;
@@ -66,7 +69,7 @@ function loadConfig() {
/** /**
* Creates the browser window * Creates the browser window
*/ */
function createWindow() { function createMainWindow() {
win = new BrowserWindow({ win = new BrowserWindow({
width: 1920, width: 1920,
height: 1080, height: 1080,
@@ -74,7 +77,7 @@ function createWindow() {
icon: 'images/icon-512.png', icon: 'images/icon-512.png',
autoHideMenuBar: true, autoHideMenuBar: true,
webPreferences: { webPreferences: {
preload: path.join(__dirname, 'preload.js'), preload: path.join(__dirname, './js/preload.js'),
webSecurity: false, webSecurity: false,
disableDialogs: true disableDialogs: true
}, },
@@ -95,12 +98,13 @@ function createWindow() {
} }
return { action: 'deny' }; return { action: 'deny' };
}); });
win.on("page-title-updated", (event) => event.preventDefault());
// show black window
win.setKiosk(true); // show initial black window
// win.setKiosk(true);
win.show(); win.show();
// Load page from config file // Load page from config file
if (config != undefined && 'url' in config) { if (config != undefined && 'url' in config) {
loadUrlAsync(config.url); loadUrlAsync(config.url);
@@ -111,11 +115,27 @@ function createWindow() {
win.loadFile('/assets/data/index.html'); win.loadFile('/assets/data/index.html');
} catch { } catch {
// Load fallback page // Load fallback page
win.loadFile('index.html'); win.loadFile('./html/onboarding.html');
} }
} }
} }
/**
* Creates a modal config view and attaches as to the main window
*/
function createConfigWindow() {
configWindow = new BrowserWindow({
parent: win,
modal: true,
width: 640,
height: 460,
show: false,
backgroundColor: '#1f1f1f'
});
configWindow.loadFile('./html/config.html');
}
/** /**
* Creates all available keyboard shortcuts * Creates all available keyboard shortcuts
@@ -131,8 +151,13 @@ function createMenu() {
accelerator: isMac ? 'Cmd+F' : 'Ctrl+F', accelerator: isMac ? 'Cmd+F' : 'Ctrl+F',
click: () => { win.setKiosk(!win.kiosk); } click: () => { win.setKiosk(!win.kiosk); }
}, },
{ role: 'reload', }, { role: 'reload' },
{ role: 'quit', } { role: 'quit' },
{
label: 'Config',
accelerator: isMac ? 'Cmd+,' : 'Ctrl+,',
click: () => { configWindow.isVisible() ? configWindow.hide() : configWindow.show(); }
}
] ]
})); }));
@@ -172,9 +197,9 @@ async function loadUrlAsync(testurl) {
try { try {
let url = new URL(testurl); let url = new URL(testurl);
// If it’s an online url, test whether it’s reachable // If it’s an online url, test whether it’s reachable
if (['https:', 'http:', 'https', 'http'].includes(url.protocol) && if (['https:', 'http:', 'https', 'http'].includes(url.protocol)) {
!['127.0.0.1', 'localhost'].includes(url.host)) {
reachable = await linkExists(url.href); reachable = await isReachable(url.href);
if (reachable) { if (reachable) {
log.info("Successfull access to " + url.hostname); log.info("Successfull access to " + url.hostname);
log.info("Loading " + config.url); log.info("Loading " + config.url);
@@ -183,7 +208,7 @@ async function loadUrlAsync(testurl) {
log.warn("Could not reach " + url.hostname); log.warn("Could not reach " + url.hostname);
for await (_ of setInterval(1000)) { for await (_ of setInterval(1000)) {
reachable = await linkExists(url.href); reachable = await isReachable(url.href);
if (reachable) { if (reachable) {
log.info("Successfull access to " + url.hostname); log.info("Successfull access to " + url.hostname);
log.info("Loading " + config.url); log.info("Loading " + config.url);
@@ -194,6 +219,7 @@ async function loadUrlAsync(testurl) {
log.warn("Could not reach " + url.hostname); log.warn("Could not reach " + url.hostname);
} }
} }
} }
} }
@@ -212,7 +238,12 @@ async function loadUrlAsync(testurl) {
// Init electron app // Init electron app
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// https://github.com/electron/electron/issues/17972
app.commandLine.appendSwitch('--no-sandbox');
app.whenReady().then(() => { app.whenReady().then(() => {
// configModule.load();
console.log(configModule.config);
loadConfig(); loadConfig();
log.initialize(); log.initialize();
@@ -224,12 +255,13 @@ app.whenReady().then(() => {
log.info('Starting Tooloop Kiosk Browser...'); log.info('Starting Tooloop Kiosk Browser...');
createMenu(); createMenu();
createWindow(); createMainWindow();
createConfigWindow()
}); });
app.on('activate', () => { app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) { if (BrowserWindow.getAllWindows().length === 0) {
createWindow(); createMainWindow();
} }
}) })
package-lock.json
Generated
+1108 -2718
View File
File diff suppressed because it is too large Load Diff
package.json
+1 -1
View File
@@ -3,7 +3,7 @@
"electron-icon-builder": "^2.0.1", "electron-icon-builder": "^2.0.1",
"electron-log": "^5.1.5", "electron-log": "^5.1.5",
"electron-squirrel-startup": "^1.0.1", "electron-squirrel-startup": "^1.0.1",
"link-exists": "^1.2.2" "is-reachable": "^5.2.1"
}, },
"name": "Tooloop Kiosk Browser", "name": "Tooloop Kiosk Browser",
"version": "1.0.0", "version": "1.0.0",