211 lines
13 KiB
Markdown
211 lines
13 KiB
Markdown
---
|
|
title: Control Panel
|
|
description: This is a page that controls the manual notifications
|
|
---
|
|
|
|
This is a page that controls the manual notifications and how they will look like.
|
|
|
|
<div style="text-align: center;">
|
|
<div class="w-30 reveal-on-hover pixelated" style="display: inline-block;" id="qrcode"></div>
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
Hover your mouse over the square to reveal the QR Code
|
|
</div>
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
It contains the link to this page
|
|
</div>
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
Scan with your phone's camera
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function addJS(name) {
|
|
var node=document.createElement('script');
|
|
node.setAttribute('type','text/javascript');
|
|
node.setAttribute('src', name);
|
|
document.head.appendChild(node);
|
|
}
|
|
function addCSS(name) {
|
|
var node=document.createElement('link');
|
|
node.setAttribute('rel', 'stylesheet');
|
|
node.setAttribute('type', 'text/css');
|
|
node.setAttribute('href', name);
|
|
document.head.appendChild(node);
|
|
}
|
|
addCSS('/css/control.css');
|
|
addJS('/js/qrcode.js');
|
|
addJS('/js/sharedWebSocket.js');
|
|
addJS('/js/control.js');
|
|
var qr;
|
|
function keepQrCodeUpdated(){
|
|
if(!window.QRCode) setTimeout(keepQrCodeUpdated, 10);
|
|
else {
|
|
qr = new QRCode(document.getElementById('qrcode'));
|
|
qr.makeCode(window.document.location.toString());
|
|
}
|
|
}
|
|
setTimeout(keepQrCodeUpdated, 10);
|
|
</script>
|
|
|
|
## Settings' persistence
|
|
<form id="persistence" class="black-80 sans-serif w-100" onsubmit="return false;">
|
|
<label for="btn-save" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Export current settings to a file
|
|
</label>
|
|
<input id="btn-save" type="button" class="w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" value="Save" style="cursor: pointer;" onclick="return saveSettings();">
|
|
<label for="btn-load" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Load previous settings from a file
|
|
</label>
|
|
<input id="btn-load" type="file" class="w-90 f5 pv3 ph3 bg-light-gray bn" style="cursor: pointer;" onchange="return loadSettings(this);">
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
Drag-and-drop is supported
|
|
</div>
|
|
</form>
|
|
|
|
## Background
|
|
<form id="backgroundForm" class="black-80 sans-serif w-100" onsubmit="return false;">
|
|
<label for="backgroundColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Color:
|
|
</label>
|
|
<input id="backgroundColor" name="backgroundColor" type="text" class="w-90 f5 pv3 ph3 bg-light-gray bn" value="transparent" onkeyup="updateMediaPreviewAfterChange(); broadcastBackgroundChanges()" onkeydown="updateMediaPreviewAfterChange(); broadcastBackgroundChanges()" onchange="updateMediaPreviewAfterChange(); broadcastBackgroundChanges()">
|
|
<label for="backgroundMedia" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Media:
|
|
</label>
|
|
<input id="backgroundMedia" type="file" class="w-90 f5 pv3 ph3 bg-light-gray bn" style="cursor: pointer;" onchange="return loadBackgroundMedia(this);">
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
Drag-and-drop is supported
|
|
</div>
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
Goes over the color
|
|
</div>
|
|
<input id="backgroundMediaHidden" type="hidden" class="w-90 f5 pv3 ph3 bg-light-gray bn" name="backgroundMediaHidden">
|
|
<button id="backgroundMediaRemover" class="w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" style="cursor: pointer;" onclick="loadBackgroundMedia(false)">
|
|
Remove any existing media
|
|
</button>
|
|
<label for="mediaPreview" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Preview:
|
|
</label>
|
|
<div id="mediaPreview" style="width: 100%; padding: 2em; border: 1px solid black; border-radius: 0.25em;"></div>
|
|
</form>
|
|
|
|
|
|
## Styling
|
|
<form class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
|
|
<label for="containerWidth" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Container width (in PXs)
|
|
</label>
|
|
<input id="containerWidth" name="containerWidth" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="350" step="1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="containerHeight" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Container height (in PXs)
|
|
</label>
|
|
<input id="containerHeight" name="containerHeight" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="150" step="1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="transitionDuration" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Transition durations (in milliseconds)
|
|
</label>
|
|
<input id="transitionDuration" name="transitionDuration" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="300" step="10" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="onScreenDuration" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
On-screen duration (in seconds)
|
|
</label>
|
|
<input id="onScreenDuration" name="onScreenDuration" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="7" step="0.25" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="fontFamily" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Font-family
|
|
</label>
|
|
<input id="fontFamily" name="fontFamily" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="sans-serif" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="horizontalPadding" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Horizontal padding (in EMs)
|
|
</label>
|
|
<input id="horizontalPadding" name="horizontalPadding" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="3" step="0.25" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
</form>
|
|
|
|
### Primary text
|
|
<form class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
|
|
<label for="fontSizePrimary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Font-size (in EMs)
|
|
</label>
|
|
<input id="fontSizePrimary" name="fontSizePrimary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="3" step="0.1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="fontWeightPrimary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Font-weight
|
|
</label>
|
|
<input id="fontWeightPrimary" name="fontWeightPrimary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="300" step="100" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="colorBasePrimary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Color base
|
|
</label>
|
|
<input id="colorBasePrimary" name="colorBasePrimary" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#FFFFFF" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="colorTemplatedPrimary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Color templated
|
|
</label>
|
|
<input id="colorTemplatedPrimary" name="colorTemplatedPrimary" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#8CD5FC" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="strokeColorPrimary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Stroke color
|
|
</label>
|
|
<input id="strokeColorPrimary" name="strokeColorPrimary" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#000000" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="strokeWeightPrimary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Stroke weight (in EMs)
|
|
</label>
|
|
<input id="strokeWeightPrimary" name="strokeWeightPrimary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.1" step="0.005" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="marginTopPrimary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Top margin (in EMs)
|
|
</label>
|
|
<input id="marginTopPrimary" name="marginTopPrimary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="lineHeightPrimary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Spacing between lines
|
|
</label>
|
|
<input id="lineHeightPrimary" name="lineHeightPrimary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="1" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
</form>
|
|
|
|
### Secondary text
|
|
<form class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
|
|
<label for="fontSizeSecondary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Font-size (in EMs)
|
|
</label>
|
|
<input id="fontSizeSecondary" name="fontSizeSecondary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="3" step="0.1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="fontWeightSecondary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Font-weight
|
|
</label>
|
|
<input id="fontWeightSecondary" name="fontWeightSecondary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="300" step="100" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="colorBaseSecondary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Color base
|
|
</label>
|
|
<input id="colorBaseSecondary" name="colorBaseSecondary" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#FFFFFF" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="colorTemplatedSecondary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Color templated
|
|
</label>
|
|
<input id="colorTemplatedSecondary" name="colorTemplatedSecondary" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#8CD5FC" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="strokeColorSecondary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Stroke color
|
|
</label>
|
|
<input id="strokeColorSecondary" name="strokeColorSecondary" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#000000" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="strokeWeightSecondary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Stroke weight (in EMs)
|
|
</label>
|
|
<input id="strokeWeightSecondary" name="strokeWeightSecondary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.1" step="0.005" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="marginTopSecondary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Top margin (in EMs)
|
|
</label>
|
|
<input id="marginTopSecondary" name="marginTopSecondary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
<label for="lineHeightSecondary" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Spacing between lines
|
|
</label>
|
|
<input id="lineHeightSecondary" name="lineHeightSecondary" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="1" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
|
|
</form>
|
|
|
|
## Content
|
|
<form id="form_content" class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
|
|
<label for="primaryText" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Primary text
|
|
</label>
|
|
<input id="primaryText" name="primaryText" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="{name} has donated {amount} for charity!" onkeyup="updateSendFields(); broadcastChanges()" onkeydown="updateSendFields(); broadcastChanges()" onchange="updateSendFields(); broadcastChanges()">
|
|
<label for="secondaryText" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Secondary text
|
|
</label>
|
|
<input id="secondaryText" name="secondaryText" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="{message}" onkeyup="updateSendFields(); broadcastChanges()" onkeydown="updateSendFields(); broadcastChanges()" onchange="updateSendFields(); broadcastChanges()">
|
|
</form>
|
|
|
|
|
|
## Send
|
|
<form id="form_send" class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
|
|
<div id="form_send_fields"></div>
|
|
<input type="button" class="w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" value="Send to display" style="cursor: pointer;" onclick="return sendToDisplay();">
|
|
<iframe id="preview_frame" class="w-100 f5 bg-light-gray bn" src="" title="Preview" style="height: 75vh;"></iframe>
|
|
</form>
|