visual improvements and close window when a browser is launched to improve performance (?)
This commit is contained in:
parent
eab9bc5805
commit
e0acb9f448
10 changed files with 82 additions and 45 deletions
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset='utf-8'>
|
||||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
|
||||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||||
|
|
||||||
<title>app</title>
|
<title>app</title>
|
||||||
|
|
|
@ -1,11 +0,0 @@
|
||||||
import { spawnBrowser } from "../appruntime";
|
|
||||||
|
|
||||||
const app = {
|
|
||||||
name: "duckduckgo",
|
|
||||||
component: null,
|
|
||||||
async open() {
|
|
||||||
await spawnBrowser("https://duckduckgo.com/");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default app;
|
|
|
@ -1,12 +0,0 @@
|
||||||
import env from '../env';
|
|
||||||
|
|
||||||
const { spawn } = require('child_process');
|
|
||||||
|
|
||||||
export function spawnBrowser(url, params=[]) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const browserProcess = spawn(env.browserLaunch.browserBinary, [...env.browserLaunch.params, ...params, url]);
|
|
||||||
|
|
||||||
browserProcess.on("spawn", () => resolve(browserProcess));
|
|
||||||
browserProcess.on("error", e => reject(e));
|
|
||||||
});
|
|
||||||
}
|
|
5
src/appmanager/apputils.js
Normal file
5
src/appmanager/apputils.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import env from '../env';
|
||||||
|
|
||||||
|
export function spawnBrowser(url, params=[]) {
|
||||||
|
window._$waffletvapi.spawnAndSuspendRendering(env.browserLaunch.browserBinary, [...env.browserLaunch.params, ...params, url]);
|
||||||
|
};
|
|
@ -1,8 +1,23 @@
|
||||||
import duckduckgo from "./applications/duckduckgo";
|
|
||||||
|
/*
|
||||||
|
Example of an app tile definition:
|
||||||
|
|
||||||
|
const myApp = {
|
||||||
|
name: "App",
|
||||||
|
style: {
|
||||||
|
backgroundImageExt: `url("http://example.com/my-app-logo.svg")`,
|
||||||
|
backgroundColor: "#ffffff"
|
||||||
|
},
|
||||||
|
component: null,
|
||||||
|
async open() {
|
||||||
|
await spawnBrowser("https://example.com");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
const provider = {
|
const provider = {
|
||||||
repository: [
|
repository: [
|
||||||
duckduckgo
|
/* app tile repository to be filled by user */
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -6,18 +6,29 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button on:click={ open } class="app-tile">
|
<button
|
||||||
{ app.name }
|
on:click={ open }
|
||||||
|
class="app-tile"
|
||||||
|
style="--current-tile-bg-color: { app.style.backgroundColor || '#000000' }; --current-tile-bg-image: { app.style.backgroundImageExt || 'unset' }"
|
||||||
|
>
|
||||||
|
{ app.style.backgroundImageExt ? "" : app.name }
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.app-tile {
|
.app-tile {
|
||||||
padding: 0.5rem;
|
padding: 2.5rem;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
background-color: var(--fuzzy-wuzzy);
|
background-color: var(--current-tile-bg-color);
|
||||||
|
background-image: var(--current-tile-bg-image);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position-y: center;
|
||||||
|
background-position-x: center;
|
||||||
|
background-origin: content-box;
|
||||||
|
background-size: contain;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
min-width: 5rem;
|
min-width: 300px;
|
||||||
min-height: 5rem;
|
min-height: 100px;
|
||||||
|
max-height: 200px;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 2.7em;
|
font-size: 2.7em;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
@ -27,7 +38,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-tile:hover {
|
.app-tile:hover {
|
||||||
background-color: var(--old-rose);
|
|
||||||
transform: scale(1.087);
|
transform: scale(1.087);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,16 @@
|
||||||
{#each applicationRepository as app}
|
{#each applicationRepository as app}
|
||||||
<AppTile app={app} />
|
<AppTile app={app} />
|
||||||
{/each}
|
{/each}
|
||||||
|
{#if applicationRepository.length < 1}
|
||||||
|
<div class="no-apps-heads-up">
|
||||||
|
<h1>
|
||||||
|
Nothing to see here!
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
You must first specify which apps tiles to have on the home screen by editing `appmanager/provider.js`. This will be easier in the future.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -18,11 +28,9 @@
|
||||||
grid-template-rows: 1fr 1fr 1fr;
|
grid-template-rows: 1fr 1fr 1fr;
|
||||||
gap: 0px 0px;
|
gap: 0px 0px;
|
||||||
grid-auto-flow: row dense;
|
grid-auto-flow: row dense;
|
||||||
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
width: clamp(10%, 90%, 100%);
|
||||||
width: clamp(10%, 1000px, 90%);
|
min-height: 100%;
|
||||||
height: 100%;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 5%;
|
margin-top: 5%;
|
||||||
padding: 2.5em;
|
padding: 2.5em;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
const env = {
|
const env = {
|
||||||
browserLaunch: {
|
browserLaunch: {
|
||||||
browserBinary: "chromium",
|
browserBinary: "firefox",
|
||||||
params: ["-kiosk"]
|
params: []
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
24
src/index.js
24
src/index.js
|
@ -1,20 +1,32 @@
|
||||||
const { app, BrowserWindow } = require('electron');
|
const { app, BrowserWindow, ipcMain } = require('electron');
|
||||||
const { session } = require('electron')
|
const { spawn } = require('child_process');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
|
let mainWindow;
|
||||||
|
|
||||||
const createWindow = () => {
|
const createWindow = () => {
|
||||||
const mainWindow = new BrowserWindow({
|
mainWindow = new BrowserWindow({
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600,
|
height: 600,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
nodeIntegration: true,
|
nodeIntegration: true,
|
||||||
contextIsolation: false,
|
preload: path.join(__dirname, 'preload.js'),
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
mainWindow.setMenuBarVisibility(false);
|
mainWindow.setMenuBarVisibility(false);
|
||||||
mainWindow.loadFile(path.join(__dirname, '../public/index.html'));
|
mainWindow.loadFile(path.join(__dirname, '../public/index.html'));
|
||||||
mainWindow.webContents.openDevTools();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ipcMain.on("spawnAndSuspendRendering", (event, process, args) => {
|
||||||
|
const proc = spawn(process, args);
|
||||||
|
|
||||||
|
mainWindow.destroy();
|
||||||
|
|
||||||
|
proc.on("close", () => {
|
||||||
|
createWindow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.on("window-all-closed", () => {});
|
||||||
app.on('ready', createWindow);
|
app.on('ready', createWindow);
|
||||||
|
|
10
src/preload.js
Normal file
10
src/preload.js
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
const { contextBridge, ipcRenderer } = require("electron");
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld(
|
||||||
|
"_$waffletvapi",
|
||||||
|
{
|
||||||
|
spawnAndSuspendRendering(process, args) {
|
||||||
|
ipcRenderer.send("spawnAndSuspendRendering", process, args);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
Reference in a new issue