mirrors/btclock_v3
1
0
Fork 0
mirror of https://github.com/btclock/btclock_v3.git synced 2024-11-19 04:30:02 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

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/grid";
@import "../node_modules/bootstrap/scss/forms"; @import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons"; @import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/navbar"; @import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/nav"; @import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/card"; @import "../node_modules/bootstrap/scss/card";
@ -54,6 +56,24 @@ nav {
margin: 0 auto; 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 { .btclock {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -96,9 +116,9 @@ nav {
} }
.splitText { .splitText {
font-size: 2.2rem; font-size: 1.8rem;
padding-top: 5px; padding-top: 19px !important;
padding-bottom: 5px; padding-bottom: 20px !important;
text-align: center; text-align: center;
} }

102
data/src/index.html
View File

@ -22,7 +22,7 @@
<div class="entry"> <div class="entry">
<h1>Status</h1> <h1>Status</h1>
<div class="body"> <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 }} {{#each screens }}
<input type="radio" class="btn-check" name="btnradio" id="btnradio{{ @index }}" autocomplete="off" {{#ifEquals @index ../currentScreen }} checked {{/ifEquals}} onclick="changeScreen({{ @index }})"> <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> <label class="btn btn-outline-primary" for="btnradio{{ @index }}">{{ this }}</label>
@ -96,7 +96,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-3"> <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> <h1>Custom text</h1>
<form name="customText" id="customTextForm"> <form name="customText" id="customTextForm">
<div class="row"> <div class="row">
@ -133,7 +133,7 @@
<button type="button" class="btn btn-warning" id="forceFullRefresh">Force full refresh</button> <button type="button" class="btn btn-warning" id="forceFullRefresh">Force full refresh</button>
</div> </div>
</div> </div>
<div class="col-sm-5"> <div class="col-sm-5">
<div id="output" class="p-3 border bg-light">Loading, please wait...</div> <div id="output" class="p-3 border bg-light">Loading, please wait...</div>
@ -143,48 +143,56 @@
<h1>Settings</h1> <h1>Settings</h1>
<form method="post" action="/api/settings" name="settings" id="settingsForm"> <form method="post" action="/api/settings" name="settings" id="settingsForm">
<div class="row"> <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"> <div class="col-sm-6">
<select class="form-select" id="fgColor" name="fgColor"> <select class="form-select form-select-sm" id="fgColor" name="fgColor">
<option value="0xF800">Red</option>
<option value="0xFFFF">White</option> <option value="0xFFFF">White</option>
<option value="0x0">Black</option> <option value="0x0">Black</option>
</select> </select>
</div> </div>
</div> </div>
<div class="row"> <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"> <div class="col-sm-6">
<select class="form-select" id="bgColor" name="bgColor"> <select class="form-select form-select-sm" id="bgColor" name="bgColor">
<option value="0xF800">Red</option>
<option value="0xFFFF">White</option> <option value="0xFFFF">White</option>
<option value="0x0">Black</option> <option value="0x0">Black</option>
</select> </select>
</div> </div>
</div> </div>
<div class="row"> <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="col-sm-6">
<div class="input-group mb-3"> <div class="input-group input-group-sm">
<input type="text" name="timePerScreen" id="timePerScreen" class="form-control"> <input type="number" min="1" name="timePerScreen" id="timePerScreen" class="form-control">
<span class="input-group-text">minutes</span> <span class="input-group-text">minutes</span>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <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="col-sm-6">
<div class="input-group mb-3"> <div class="input-group input-group-sm">
<input type="text" name="fullRefreshMin" id="fullRefreshMin" class="form-control"> <input type="number" min="1" name="fullRefreshMin" id="fullRefreshMin" class="form-control">
<span class="input-group-text">minutes</span> <span class="input-group-text">minutes</span>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <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="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"> <input type="number" name="tzOffset" id="tzOffset" class="form-control">
<span class="input-group-text">min</span> <span class="input-group-text">min</span>
<button class="btn btn-outline-secondary" type="button" id="getTzOffsetBtn">Auto</button> <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 class="form-text">A restart is required to apply TZ offset.</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<label for="minSecPriceUpd" class="col-sm-6 col-form-label">Time between price updates</label> <label class="col-sm-6 col-form-label col-form-label-sm" for="ledBrightness">LED brightness</label>
<div class="col-sm-6 mb-3"> <div class="col-sm-6">
<div class="input-group"> <input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
<input type="number" name="minSecPriceUpd" id="minSecPriceUpd" class="form-control"> max="255">
<span class="input-group-text">sec</span> </div>
</div> </div>
<div class="form-text">Short amounts might shorten lifespan.</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> </div>
<div class="row"> <div class="row">
@ -221,7 +233,8 @@
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="form-check form-switch"> <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> <label class="form-check-label" for="stealFocusOnBlock">Steal focus on new block</label>
</div> </div>
</div> </div>
@ -249,35 +262,30 @@
<label class="form-check-label" for="mdnsEnabled">mDNS (restart required)</label> <label class="form-check-label" for="mdnsEnabled">mDNS (restart required)</label>
</div> </div>
</div> </div>
<div class="row">
<label class="col-sm-6 col-form-label" for="ledBrightness">LED brightness</label> <script id="screens-template" type="text/x-handlebars-template">
<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="row">
<div class="col-sm-12"> <div class="col-sm-6">
{{#each screens }}
<div class="form-check form-switch"> <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}}> <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> <label class="form-check-label" for="screen{{id}}">{{name}}</label>
</div> </div>
{{#ifEquals @index 2}}
</div> </div>
</div> <div class="col-sm-6">
{{/ifEquals}}
{{/each}} {{/each}}
</div>
</div>
</script> </script>
<h3>Screens</h3> <h3>Screens</h3>
<div id="outputScreens"></div> <div id="outputScreens"></div>
<button type="submit" class="btn btn-secondary">Reset</button> <div class="d-grid gap-2 d-md-block">
<button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button> <button type="submit" class="btn btn-secondary">Reset</button>
<button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button>
</div>
</form> </form>
</div> </div>
@ -285,7 +293,7 @@
</div> </div>
</div> </div>
<footer> <footer>
</footer> </footer>
<script src="/js/script.js"></script> <script src="/js/script.js"></script>
</body> </body>

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

@ -98,10 +98,10 @@ fetch('/api/settings', {
.then(response => response.json()) .then(response => response.json())
.then(jsonData => { .then(jsonData => {
var fgColor = ("0x" + jsonData.fgColor.toString(16).toUpperCase()); var fgColor = ("0x" + jsonData.fgColor.toString(16).toUpperCase());
if (jsonData.epdColors == 2) { // if (jsonData.epdColors == 2) {
document.getElementById('fgColor').querySelector('[value="0xF800"]').remove(); // document.getElementById('fgColor').querySelector('[value="0xF800"]').remove();
document.getElementById('bgColor').querySelector('[value="0xF800"]').remove(); // document.getElementById('bgColor').querySelector('[value="0xF800"]').remove();
} // }
document.getElementById('customText').setAttribute('maxlength', jsonData.numScreens); document.getElementById('customText').setAttribute('maxlength', jsonData.numScreens);
document.getElementById('output').classList.add("fg-" + jsonData.fgColor.toString(16)); 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) void setLights(uint32_t color)
{ {
preferences.putUInt("ledColor", color);
bool ledStatus = true; bool ledStatus = true;
if (color == pixels.Color(0, 0, 0)) if (color == pixels.Color(0, 0, 0))
{ {
ledStatus = false; ledStatus = false;
} else {
preferences.putUInt("ledColor", color);
} }
preferences.putBool("ledStatus", false); preferences.putBool("ledStatus", ledStatus);
for (int i = 0; i < NEOPIXEL_COUNT; i++) for (int i = 0; i < NEOPIXEL_COUNT; i++)
{ {