171 lines
10 KiB
Markdown
171 lines
10 KiB
Markdown
---
|
|
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>
|