btclock/btclock_v2
3
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity Actions

Added screen timer toggle to WebUI

Browse source
This commit is contained in:
Djuri Baars 2023-10-07 12:22:53 +02:00
parent 803f45229e
commit 18faece660
4 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
data/package.json
View file

@ -5,19 +5,19 @@
"build": "node esbuild.mjs" "build": "node esbuild.mjs"
}, },
"dependencies": { "dependencies": {
"esbuild": "0.18.0" "esbuild": "0.19.4"
}, },
"devDependencies": { "devDependencies": {
"@chialab/esbuild-plugin-html": "^0.17.2", "@chialab/esbuild-plugin-html": "^0.17.2",
"@craftamap/esbuild-plugin-html": "^0.5.0", "@craftamap/esbuild-plugin-html": "^0.5.0",
"@esbuilder/html": "^0.0.6", "@esbuilder/html": "^0.0.6",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.16",
"bootstrap": "^5.3.0", "bootstrap": "^5.3.2",
"esbuild-plugin-clean": "^1.0.1", "esbuild-plugin-clean": "^1.0.1",
"esbuild-plugin-handlebars": "^1.0.2", "esbuild-plugin-handlebars": "^1.0.2",
"esbuild-sass-plugin": "^2.9.0", "esbuild-sass-plugin": "^2.16.0",
"handlebars": "^4.7.7", "handlebars": "^4.7.7",
"postcss": "^8.4.24", "postcss": "^8.4.31",
"typescript": "^5.1.3" "typescript": "^5.1.6"
} }
} }

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

@ -113,4 +113,8 @@ nav {
#customText { #customText {
text-transform: uppercase; text-transform: uppercase;
}
#toggleTimerArea {
cursor: pointer;
} }

17
data/src/index.html
View file

@ -44,7 +44,19 @@
{{#each ledStatus }} {{#each ledStatus }}
<div style="background: #{{ this }}">&nbsp;</div> <div style="background: #{{ this }}">&nbsp;</div>
{{/each}} {{/each}}
{{/if}} {{/if}}
<div>
<p>Screen cycle:
<span onclick="toggleTimer({{ timerRunning }})" id="toggleTimerArea">
{{#if timerRunning}}
&#9205;
{{else}}
&#9208;
{{/if}}
</span>
</p>
</div>
</div> </div>
</div> </div>
</script> </script>
@ -146,7 +158,8 @@
<div class="row"> <div class="row">
<label class="col-sm-6 col-form-label" for="ledBrightness">LED brightness</label> <label class="col-sm-6 col-form-label" for="ledBrightness">LED brightness</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0" max="255"> <input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
max="255">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -215,7 +228,7 @@
<footer> <footer>
<small> <small>
<span id="gitRev"></span> <span id="gitRev"></span>
<span id="lastBuildTime"></span> <span id="lastBuildTime"></span>
</small> </small>
</footer> </footer>
<script src="/js/script.js"></script> <script src="/js/script.js"></script>

2
src/lib/webserver.cpp
View file

@ -73,6 +73,8 @@ void onApiStatus(AsyncWebServerRequest *request)
DynamicJsonDocument root(1024); DynamicJsonDocument root(1024);
root["currentScreen"] = String(getCurrentScreen()); root["currentScreen"] = String(getCurrentScreen());
root["timerRunning"] = timerRunning;
JsonArray data = root.createNestedArray("data"); JsonArray data = root.createNestedArray("data");
JsonArray rendered = root.createNestedArray("rendered"); JsonArray rendered = root.createNestedArray("rendered");
String epdContent[7]; String epdContent[7];