btclock/btclock_v3
3
1
Fork 2
Code Issues Pull requests 1 Projects Releases 14 Wiki Activity Actions

UI improvements

Browse source
This commit is contained in:
Djuri Baars 2023-11-13 14:01:20 +01:00
parent 8d8785df1d
commit 07144f6b6a
4 changed files with 85 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
data/src/css/style.scss
View file

@ -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;
}

86
data/src/index.html
View file

@ -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">
@ -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>
<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 class="form-text">Short amounts might shorten lifespan.</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 }}
<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>
<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>

8
data/src/js/script.ts
View file

@ -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));

5
src/lib/led_handler.cpp
View file

@ -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++)
{