site-progress-bar/content/control.md

---
title: Control Panel
description: This is a page that controls the progress bar
---

This is a page that controls the progress bar and how it 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="fontSize" 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="1" step="0.1" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="totalSizeWidth" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Total size width (in PXs)
    </label>
    <input id="totalSizeWidth" name="totalSizeWidth" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="350" step="0.25" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="totalSizeHeight" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Total size height (in PXs)
    </label>
    <input id="totalSizeHeight" name="totalSizeHeight" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="150" 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="barBorderColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Bar border color
    </label>
    <input id="barBorderColor" name="barBorderColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#D073F4" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="barBorderWidth" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Bar border width (in EMs)
    </label>
    <input id="barBorderWidth" name="barBorderWidth" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.085" step="0.005" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="barBorderRadius" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Bar border radius (in EMs)
    </label>
    <input id="barBorderRadius" name="barBorderRadius" 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="barInactiveColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Bar inactive color
    </label>
    <input id="barInactiveColor" name="barInactiveColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#000E68" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="barActiveColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Bar active color
    </label>
    <input id="barActiveColor" name="barActiveColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#3B49B6" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="fontColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Font color
    </label>
    <input id="fontColor" name="fontColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#FFFFFF" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="fontWeight" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Font weight
    </label>
    <input id="fontWeight" name="fontWeight" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="300" step="100" value="#FFFFFF" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="fontStrokeColor" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Font stroke color
    </label>
    <input id="fontStrokeColor" name="fontStrokeColor" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="#000000" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="fontStrokeWidth" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Font stroke width (in EMs)
    </label>
    <input id="fontStrokeWidth" name="fontStrokeWidth" 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="transitionsDuration" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Transitions duration (in ms)
    </label>
    <input id="transitionsDuration" name="transitionsDuration" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="300" step="10" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="diffOpacity" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Diff's opacity (0 is transparent; 1 is opaque)
    </label>
    <input id="diffOpacity" name="diffOpacity" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0.75" step="0.05" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="diffDuration" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Diff's on-screen duration (in seconds)
    </label>
    <input id="diffDuration" name="diffDuration" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="2" step="0.25" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
</form>

## Content

<form class="form" class="black-80 sans-serif w-100" onsubmit="return false;">
    <label for="contentFormat" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Content format
    </label>
    <input type="radio" name="currency" value="brl" checked> BRL <br>
    <input type="radio" name="currency" value="custom"> Custom: <br>
    <input id="contentFormat" name="contentFormat" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="$ %.2f" onkeyup="broadcastChanges()" onkeydown="broadcastChanges()" onchange="broadcastChanges()">
    <label for="currentValueVisible" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Current value
    </label>
    <input id="currentValueVisible" name="currentValueVisible" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="0" onkeyup="compareDisplayContent()" onkeydown="compareDisplayContent()" onchange="compareDisplayContent()" step="0.01">
    <input type="hidden" id="currentValue" name="currentValue" style="display: none;" class="lazyInput">
    <label for="targetValueVisible" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Target value
    </label>
    <input id="targetValueVisible" name="targetValueVisible" type="number" class="w-100 f5 pv3 ph3 bg-light-gray bn" value="1000" onkeyup="compareDisplayContent()" onkeydown="compareDisplayContent()" onchange="compareDisplayContent()" step="0.01">
    <input type="hidden" id="targetValue" name="targetValue" style="display: none;" class="lazyInput">
    <input id="btn-update-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>

### Incremental change

<form class="form" class="black-80 sans-serif w-100" onsubmit="doIncrement(); return false;">
    <input id="incrementValue" name="incrementValue" type="number" class="w-50 f5 pv3 ph3 bg-light-gray bn unsynced" value="0" step="0.01">
    <input id="btn-update-internal" type="button" class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" value="Increment" style="cursor: pointer;" onclick="return doIncrement();">
</form>

## Currently on screen

<iframe id="preview_frame" class="w-100 f5 bg-light-gray bn" src="" title="Preview" style="height: 75vh;"></iframe>