---
title: Control Panel
description: This is a page that controls which texts will scroll
---

This is a page that controls which texts will scroll 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>

## Styling
<form class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
    <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="font-size" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Font-size (in EMs)
    </label>
    <input id="fontSize" name="fontSize" 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="containerWidth" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Container width (in EMs)
    </label>
    <input id="containerWidth" name="containerWidth" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="15" step="0.25" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="container-height" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Container height (in EMs)
    </label>
    <input id="containerHeight" name="containerHeight" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="6" step="0.1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="containerBackgroundColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Container background color
    </label>
    <input id="containerBackgroundColor" name="containerBackgroundColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="transparent" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="containerBorderColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Container border color
    </label>
    <input id="containerBorderColor" name="containerBorderColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#FFFFFF" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="cardBackgroundColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Card background color
    </label>
    <input id="cardBackgroundColor" name="cardBackgroundColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#0000007F" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="cardPadding" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Card padding (in EMs)
    </label>
    <input id="cardPadding" name="cardPadding" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.3" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="cardMargin" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Card margin (in EMs)
    </label>
    <input id="cardMargin" name="cardMargin" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.1" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="cardBorderRadius" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Card border radius (in EMs)
    </label>
    <input id="cardBorderRadius" name="cardBorderRadius" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.2" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="cardNextSize" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Next card size (in %)
    </label>
    <input id="cardNextSize" name="cardNextSize" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="50" step="1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="cardNextOpacity" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Next card opacity (0 = transparent; 1 = opaque)
    </label>
    <input id="cardNextOpacity" name="cardNextOpacity" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.7" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="textColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Text color
    </label>
    <input id="textColor" name="textColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#000000" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="textPadding" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Text padding (in EMs)
    </label>
    <input id="textPadding" name="textPadding" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.1" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="subtextOpacity" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Subtext opacity (0 = transparent; 1 = opaque)
    </label>
    <input id="subtextOpacity" name="subtextOpacity" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.7" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="subtextSize" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Subtext size (in %, relative to title size)
    </label>
    <input id="subtextSize" name="subtextSize" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="70" step="1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
</form>

## Content
<form class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
    <label for="cardTimeout" class="f6 b db mb1 mt3 sans-serif mid-gray">
        How much time a text will be on screen (in seconds)
    </label>
    <input id="cardTimeout" name="cardTimeout" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="5" step="0.1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="transitionDuration" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Transition duration (in milliseconds)
    </label>
    <input id="transitionDuration" name="transitionDuration" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="500" step="10" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="cardDirection" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Scrolling direction
    </label>
    <div id="cardDirection">
        <div>
            <input type="radio" name="cardDirection" id="cardDirectionU" value="row" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()" checked>
            <label for="cardDirectionU" class="f6 mb1 mt3 sans-serif mid-gray">
                Top to bottom
            </label>
        </div>
        <div>
            <input type="radio" name="cardDirection" id="cardDirectionD" value="row-reverse" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
            <label for="cardDirectionD" class="f6 mb1 mt3 sans-serif mid-gray">
                Bottom to top
            </label>
        </div>
        <div>
            <input type="radio" name="cardDirection" id="cardDirectionL" value="column" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
            <label for="cardDirectionL" class="f6 mb1 mt3 sans-serif mid-gray">
                Left to right
            </label>
        </div>
        <div>
            <input type="radio" name="cardDirection" id="cardDirectionR" value="column-reverse" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
            <label for="cardDirectionR" class="f6 mb1 mt3 sans-serif mid-gray">
                Right to left
            </label>
        </div>
    </div>
    <label for="displayContent" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Texts to show as cards (leave an empty line between cards)
    </label>
    <textarea name="displayContent" class="w-100 f5 pv3 ph3 bg-light-gray bn" style="display: none;"></textarea>
    <textarea name="displayContentVisible" class="w-100 f5 pv3 ph3 bg-light-gray bn" style="resize: none;" onkeyup="compareDisplayContentTextAreas()" onkeydown="compareDisplayContentTextAreas()" onchange="compareDisplayContentTextAreas()"></textarea>
    <input id="btn-update-dc-internal" type="button" class="w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" style="display: none;" value="Send changes to screen" style="cursor: pointer;" onclick="return updateInternalDisplayContent();">
</form>

## Currently on screen
<form id="currentForm" class="black-80 sans-serif w-100" onsubmit="return false;"></form>