ranse/wordclock
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Major refactoring of EEPROM r/w. Add dynamic brightness functionality.

Browse Source
This commit is contained in:
Markus Ransberger
2023-10-31 16:17:27 +01:00
parent c2b8cc46a3
commit e8168ad40f
5 changed files with 421 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
res/webserver/index.html
View File

@@ -251,15 +251,23 @@
}
.show {
height: 200px;
height: 250px;
transition: height 1s;
}
.show-container {
display: inline
}
.hide-container {
display: none
}
.number-container {
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
/* align-items: center; */
margin: 10px;
}
@@ -279,9 +287,21 @@
<h1 id="headline">WORDCLOCK 2.0</h1>
<div id="settings-container" class="settings-container">
<div class="number-container">
<label for="brightness">Brightness:</label>
<input type="range" id="brightness" name="volume" min="10" max="255">
<div class="visible-brightness-container" id="static_brightness_container">
<div class="number-container">
<label for="static_brightness">Static brightness:</label>
<input type="range" id="static_brightness" name="static_brightness" min="10" max="255">
</div>
</div>
<div class="hidden-brightness-container" id="dyn_brightness_container">
<div class="number-container">
<label for="min_brightness">Min. brightness:</label>
<input type="range" id="min_brightness" name="min_brightness" min="10" max="255">
</div>
<div class="number-container">
<label for="max_brightness">Max. brightness:</label>
<input type="range" id="max_brightness" name="max_brightness" min="10" max="255">
</div>
</div>
<div class="number-container">
<label for="nm_start" style="align-self: flex-start">Nightmode Start Time: </label>
@@ -332,14 +352,12 @@
<input name="Nightmode" id="Nightmode" type="checkbox" class="toggle">
</div>
</div>
<div class="checkbox-container">
<label for="AutoChange" style="align-self: flex-start">Automatic mode change</label>
<div class="checkbox-container" onclick="toggleBrightnessOptions()">
<label for="DynBrightness" style="align-self: flex-start">Dynamic brightness</label>
<div>
<input name="AutoChange" id="AutoChange" type="checkbox" class="toggle">
<input name="DynBrightness" id="DynBrightness" type="checkbox" class="toggle">
</div>
</div>
<div class="main-container hidden" id="colorcontainer">
<div class="verticalline">
</div>
@@ -503,44 +521,47 @@
}
modebuttons[state].classList.add("active");
// set checkbox states
// set Nightmode checkbox states
var ckb_nightmode = document.querySelector('input[id="Nightmode"]');
if (myVar.nightMode == "1") {
console.log("nightMode == 1");
if (myVar.night_mode == "1") {
console.log("night_mode == 1");
ckb_nightmode.checked = true;
}
else {
console.log("nightMode == 0");
console.log("night_mode == 0");
ckb_nightmode.checked = false;
}
ckb_nightmode.addEventListener('change', () => {
if (ckb_nightmode.checked) {
sendCommand("./cmd?nightmode=1");
sendCommand("./cmd?night_mode=1");
} else {
sendCommand("./cmd?nightmode=0");
sendCommand("./cmd?night_mode=0");
}
});
var ckb_stateautochange = document.querySelector('input[id="AutoChange"]');
if (myVar.stateAutoChange == "1") {
console.log("stateAutoChange == 1");
ckb_stateautochange.checked = true;
// set DynBrightness checkbox states
var ckb_dynbrightness = document.querySelector('input[id="DynBrightness"]');
if (myVar.dyn_brightness == "1") {
console.log("dyn_brightness == 1");
ckb_dynbrightness.checked = true;
}
else {
console.log("stateAutoChange == 0");
ckb_stateautochange.checked = false;
console.log("dyn_brightness == 0");
ckb_dynbrightness.checked = false;
}
ckb_stateautochange.addEventListener('change', () => {
if (ckb_stateautochange.checked) {
sendCommand("./cmd?stateautochange=1");
ckb_dynbrightness.addEventListener('change', () => {
if (ckb_dynbrightness.checked) {
sendCommand("./cmd?dyn_brightness=1");
} else {
sendCommand("./cmd?stateautochange=0");
sendCommand("./cmd?dyn_brightness=0");
}
});
document.getElementById("nm_start").value = myVar.nightModeStart.replace("-", ":");
document.getElementById("nm_end").value = myVar.nightModeEnd.replace("-", ":");
document.getElementById("brightness").value = parseInt(myVar.brightness);
document.getElementById("static_brightness").value = parseInt(myVar.static_brightness);
document.getElementById("min_brightness").value = parseInt(myVar.min_brightness);
document.getElementById("max_brightness").value = parseInt(myVar.max_brightness);
updateDisplay(parseInt(myVar.modeid));
console.log(myVar);
@@ -566,7 +587,7 @@
for (const element of maincontainer) {
element.classList.add("hidden");
}
if (myVar != null && myVar.stateAutoChange == "0") {
if (myVar != null) {
switch (modeid) {
case 0: // clock
document.getElementById("colorcontainer").classList.remove("hidden");
@@ -603,7 +624,9 @@
function saveSettings() {
var nmStart = document.getElementById("nm_start");
var nmEnd = document.getElementById("nm_end");
var brightnessElmt = document.getElementById("brightness");
var staticBrightnessElmt = document.getElementById("static_brightness");
var minBrightnessElmt = document.getElementById("min_brightness");
var maxBrightnessElmt = document.getElementById("max_brightness");
var resetWifi = document.getElementById("reset_wifi");
var cmdstr = "./cmd?setting=";
@@ -611,25 +634,68 @@
cmdstr += "-";
cmdstr += nmEnd.value.replace(":", "-");
cmdstr += "-";
cmdstr += brightnessElmt.value;
cmdstr += staticBrightnessElmt.value;
cmdstr += "-";
cmdstr += Number(resetWifi.checked);
cmdstr += "-";
cmdstr += minBrightnessElmt.value;
cmdstr += "-";
cmdstr += maxBrightnessElmt.value;
console.log(cmdstr);
sendCommand(cmdstr);
toggleSettings();
}
function toggleBrightnessOptions() {
var static_b = document.getElementById("static_brightness_container");
var dyn_b = document.getElementById("dyn_brightness_container");
var ckb_dynbrightness = document.querySelector('input[id="DynBrightness"]');
if (ckb_dynbrightness.checked == true) {
static_b.classList.remove("show-container");
static_b.classList.add("hide-container")
dyn_b.classList.remove("hide-container");
dyn_b.classList.add("show-container")
}
else {
dyn_b.classList.remove("show-container");
dyn_b.classList.add("hide-container");
static_b.classList.remove("hide-container");
static_b.classList.add("show-container");
}
}
function toggleSettings() {
var container = document.getElementById("settings-container");
if (container.classList.contains("show")) {
container.classList.remove("show");
}
else {
toggleBrightnessOptions();
container.classList.add("show");
}
}
function SetMax() {
var slider = document.getElementById("mySlider");
if ("max" in slider) { // Google Chrome, Safari from version 5 and Opera
slider.min = 500;
} else {
// Safari before version 5
slider.setAttribute("max", 500);
}
OnSliderChanged(slider);
}
function OnSliderChanged(slider) {
var sliderValue = document.getElementById("sliderValue");
sliderValue.innerHTML = slider.value;
}
</script>
</body>