mirror of
https://github.com/btclock/btclock_v3.git
synced 2024-11-19 02:10:00 +01:00
UI improvements
This commit is contained in:
Djuri Baars
parent
8d8785df1d
commit
07144f6b6a
@ -17,6 +17,8 @@ $form-range-track-bg: #fff;
|
||||
@import "../node_modules/bootstrap/scss/grid";
|
||||
@import "../node_modules/bootstrap/scss/forms";
|
||||
@import "../node_modules/bootstrap/scss/buttons";
|
||||
@import "../node_modules/bootstrap/scss/button-group";
|
||||
|
||||
@import "../node_modules/bootstrap/scss/navbar";
|
||||
@import "../node_modules/bootstrap/scss/nav";
|
||||
@import "../node_modules/bootstrap/scss/card";
|
||||
@ -54,6 +56,24 @@ nav {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div#output .btclock {
|
||||
border: 1px solid darkgray;
|
||||
background: #000;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
|
||||
.digit,
|
||||
.splitText
|
||||
{
|
||||
border: 2px solid gold;
|
||||
border-radius: 8px;
|
||||
min-width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btclock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -96,9 +116,9 @@ nav {
|
||||
}
|
||||
|
||||
.splitText {
|
||||
font-size: 2.2rem;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 1.8rem;
|
||||
padding-top: 19px !important;
|
||||
padding-bottom: 20px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<div class="entry">
|
||||
<h1>Status</h1>
|
||||
<div class="body">
|
||||
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<div class="btn-group btn-group-sm"" role="group" aria-label="Screens toggle button group">
|
||||
{{#each screens }}
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio{{ @index }}" autocomplete="off" {{#ifEquals @index ../currentScreen }} checked {{/ifEquals}} onclick="changeScreen({{ @index }})">
|
||||
<label class="btn btn-outline-primary" for="btnradio{{ @index }}">{{ this }}</label>
|
||||
@ -96,7 +96,7 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="h-100 p-3 border bg-light">
|
||||
<div class="p-3 border bg-light">
|
||||
<h1>Custom text</h1>
|
||||
<form name="customText" id="customTextForm">
|
||||
<div class="row">
|
||||
@ -133,7 +133,7 @@
|
||||
<button type="button" class="btn btn-warning" id="forceFullRefresh">Force full refresh</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-sm-5">
|
||||
<div id="output" class="p-3 border bg-light">Loading, please wait...</div>
|
||||
@ -143,48 +143,56 @@
|
||||
<h1>Settings</h1>
|
||||
<form method="post" action="/api/settings" name="settings" id="settingsForm">
|
||||
<div class="row">
|
||||
<label for="fgColor" class="col-sm-6 col-form-label">Text color</label>
|
||||
<label for="fgColor" class="col-sm-6 col-form-label col-form-label-sm">Text color</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-select" id="fgColor" name="fgColor">
|
||||
<option value="0xF800">Red</option>
|
||||
<select class="form-select form-select-sm" id="fgColor" name="fgColor">
|
||||
<option value="0xFFFF">White</option>
|
||||
<option value="0x0">Black</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="bgColor" class="col-sm-6 col-form-label">Background color</label>
|
||||
<label for="bgColor" class="col-sm-6 col-form-label col-form-label-sm">Background color</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-select" id="bgColor" name="bgColor">
|
||||
<option value="0xF800">Red</option>
|
||||
<select class="form-select form-select-sm" id="bgColor" name="bgColor">
|
||||
<option value="0xFFFF">White</option>
|
||||
<option value="0x0">Black</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="timePerScreen" class="col-sm-6 col-form-label">Time per screen</label>
|
||||
<label for="timePerScreen" class="col-sm-6 col-form-label col-form-label-sm">Time per screen</label>
|
||||
<div class="col-sm-6">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" name="timePerScreen" id="timePerScreen" class="form-control">
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="number" min="1" name="timePerScreen" id="timePerScreen" class="form-control">
|
||||
<span class="input-group-text">minutes</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="fullRefreshMin" class="col-sm-6 col-form-label">Full refresh every</label>
|
||||
<label for="fullRefreshMin" class="col-sm-6 col-form-label col-form-label-sm">Full refresh every</label>
|
||||
<div class="col-sm-6">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" name="fullRefreshMin" id="fullRefreshMin" class="form-control">
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="number" min="1" name="fullRefreshMin" id="fullRefreshMin" class="form-control">
|
||||
<span class="input-group-text">minutes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="tzOffset" class="col-sm-6 col-form-label">Timezone offset</label>
|
||||
<label for="minSecPriceUpd" class="col-sm-6 col-form-label col-form-label-sm">Time between price updates</label>
|
||||
<div class="col-sm-6 mb-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="number" name="minSecPriceUpd" min="1" id="minSecPriceUpd" class="form-control">
|
||||
<span class="input-group-text">seconds</span>
|
||||
</div>
|
||||
<div class="form-text">Short amounts might shorten lifespan.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="tzOffset" class="col-sm-6 col-form-label col-form-label-sm">Timezone offset</label>
|
||||
<div class="col-sm-6">
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="number" name="tzOffset" id="tzOffset" class="form-control">
|
||||
<span class="input-group-text">min</span>
|
||||
<button class="btn btn-outline-secondary" type="button" id="getTzOffsetBtn">Auto</button>
|
||||
@ -192,14 +200,18 @@
|
||||
<div class="form-text">A restart is required to apply TZ offset.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label for="minSecPriceUpd" class="col-sm-6 col-form-label">Time between price updates</label>
|
||||
<div class="col-sm-6 mb-3">
|
||||
<div class="input-group">
|
||||
<input type="number" name="minSecPriceUpd" id="minSecPriceUpd" class="form-control">
|
||||
<span class="input-group-text">sec</span>
|
||||
</div>
|
||||
<div class="form-text">Short amounts might shorten lifespan.</div>
|
||||
<label class="col-sm-6 col-form-label col-form-label-sm" for="ledBrightness">LED brightness</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
|
||||
max="255">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="mempoolInstance" class="col-sm-6 col-form-label col-form-label-sm">Mempool Instance</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" name="mempoolInstance" id="mempoolInstance" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -221,7 +233,8 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="stealFocusOnBlock" name="stealFocusOnBlock" value="1">
|
||||
<input class="form-check-input" type="checkbox" id="stealFocusOnBlock" name="stealFocusOnBlock"
|
||||
value="1">
|
||||
<label class="form-check-label" for="stealFocusOnBlock">Steal focus on new block</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -249,35 +262,30 @@
|
||||
<label class="form-check-label" for="mdnsEnabled">mDNS (restart required)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label class="col-sm-6 col-form-label" for="ledBrightness">LED brightness</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
|
||||
max="255">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="mempoolInstance" class="col-sm-6 col-form-label">Mempool Instance</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" name="mempoolInstance" id="mempoolInstance" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<script id="screens-template" type="text/x-handlebars-template">
|
||||
{{#each screens }}
|
||||
|
||||
<script id="screens-template" type="text/x-handlebars-template">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-6">
|
||||
{{#each screens }}
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="screen{{id}}" name="screen[{{id}}]" value="1" {{#if enabled}}checked{{/if}}>
|
||||
<label class="form-check-label" for="screen{{id}}">{{name}}</label>
|
||||
</div>
|
||||
{{#ifEquals @index 2}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
{{/ifEquals}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<h3>Screens</h3>
|
||||
<div id="outputScreens"></div>
|
||||
<button type="submit" class="btn btn-secondary">Reset</button>
|
||||
<button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button>
|
||||
<h3>Screens</h3>
|
||||
<div id="outputScreens"></div>
|
||||
<div class="d-grid gap-2 d-md-block">
|
||||
<button type="submit" class="btn btn-secondary">Reset</button>
|
||||
<button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@ -285,7 +293,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
|
||||
|
||||
</footer>
|
||||
<script src="/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
@ -98,10 +98,10 @@ fetch('/api/settings', {
|
||||
.then(response => response.json())
|
||||
.then(jsonData => {
|
||||
var fgColor = ("0x" + jsonData.fgColor.toString(16).toUpperCase());
|
||||
if (jsonData.epdColors == 2) {
|
||||
document.getElementById('fgColor').querySelector('[value="0xF800"]').remove();
|
||||
document.getElementById('bgColor').querySelector('[value="0xF800"]').remove();
|
||||
}
|
||||
// if (jsonData.epdColors == 2) {
|
||||
// document.getElementById('fgColor').querySelector('[value="0xF800"]').remove();
|
||||
// document.getElementById('bgColor').querySelector('[value="0xF800"]').remove();
|
||||
// }
|
||||
|
||||
document.getElementById('customText').setAttribute('maxlength', jsonData.numScreens);
|
||||
document.getElementById('output').classList.add("fg-" + jsonData.fgColor.toString(16));
|
||||
|
||||
@ -245,14 +245,15 @@ void setLights(int r, int g, int b)
|
||||
|
||||
void setLights(uint32_t color)
|
||||
{
|
||||
preferences.putUInt("ledColor", color);
|
||||
|
||||
bool ledStatus = true;
|
||||
if (color == pixels.Color(0, 0, 0))
|
||||
{
|
||||
ledStatus = false;
|
||||
} else {
|
||||
preferences.putUInt("ledColor", color);
|
||||
}
|
||||
preferences.putBool("ledStatus", false);
|
||||
preferences.putBool("ledStatus", ledStatus);
|
||||
|
||||
for (int i = 0; i < NEOPIXEL_COUNT; i++)
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user