Added screen timer toggle to WebUI

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

View file

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

View file

@ -114,3 +114,7 @@ nav {
#customText {
text-transform: uppercase;
}
#toggleTimerArea {
cursor: pointer;
}

View file

@ -44,7 +44,19 @@
{{#each ledStatus }}
<div style="background: #{{ this }}">&nbsp;</div>
{{/each}}
{{/if}}
<div>
<p>Screen cycle:
<span onclick="toggleTimer({{ timerRunning }})" id="toggleTimerArea">
{{#if timerRunning}}
&#9205;
{{else}}
&#9208;
{{/if}}
</span>
</p>
</div>
</div>
</div>
</script>
@ -146,7 +158,8 @@
<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">
<input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
max="255">
</div>
</div>
<div class="row">

View file

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