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