diff --git a/Code/data/calib.html b/Code/data/calib.html index 208c03e8..ca82bd4f 100644 --- a/Code/data/calib.html +++ b/Code/data/calib.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | SPA Manual calibration - + + - - + + diff --git a/Code/data/config.html b/Code/data/config.html index 6606c08b..fb3e5709 100644 --- a/Code/data/config.html +++ b/Code/data/config.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | SPA Config - + + - - + + diff --git a/Code/data/darkmode.js b/Code/data/darkmode.js index 5984ad68..443809cf 100644 --- a/Code/data/darkmode.js +++ b/Code/data/darkmode.js @@ -12,13 +12,29 @@ if (localStorage.getItem("darkModeStatus")) { } function toggleDarkMode() { + var sliderElement = darkModeForm.querySelector(".slider"); if (darkModeToggle.checked) { // Dark Mode is On document.documentElement.classList.add("darkmode"); localStorage.setItem("darkModeStatus", "On"); + sliderElement.classList.remove("moon"); + sliderElement.classList.add("sun"); } else { // Dark Mode is Off document.documentElement.classList.remove("darkmode"); localStorage.setItem("darkModeStatus", "Off"); + sliderElement.classList.remove("sun"); + sliderElement.classList.add("moon"); } } + +// move to admin or elsewhere afterward +document.addEventListener("DOMContentLoaded", function () { + const topNavIcon = document.querySelector(".topnavicon"); + + topNavIcon.addEventListener("click", function () { + topNavIcon.classList.toggle("show-before"); + const afterIcon = topNavIcon.nextElementSibling; + afterIcon.style.display = afterIcon.style.display === "none" ? "inline" : "none"; + }); +}); diff --git a/Code/data/favicon.ico b/Code/data/favicon.ico index 2bca6624..5950c5aa 100644 Binary files a/Code/data/favicon.ico and b/Code/data/favicon.ico differ diff --git a/Code/data/favicon.png b/Code/data/favicon.png index 3ce0202d..49798e09 100644 Binary files a/Code/data/favicon.png and b/Code/data/favicon.png differ diff --git a/Code/data/function.js b/Code/data/function.js index dc8051f5..f39613d7 100644 --- a/Code/data/function.js +++ b/Code/data/function.js @@ -1,63 +1,74 @@ - function topNav() { - var x = document.getElementById("topnav"); - if (x.className === "topnav") { - x.className += " responsive"; - } else { - x.className = "topnav"; - } + var x = document.getElementById("topnav"); + if (x.className === "topnav") { + x.className += " responsive"; + } else { + x.className = "topnav"; + } } function togglePlainText(id) { - var x = document.getElementById(id); - if (x.type === "password") { - x.type = "text"; - } else { - x.type = "password"; - } + var x = document.getElementById(id); + if (x.type === "password") { + x.type = "text"; + } else { + x.type = "password"; + } } function validatePassword(id) { - var x = document.getElementById(id); - if (x.value == "") { - alert("Please enter a password to continue."); - return false; - } - return true; + var x = document.getElementById(id); + if (x.value == "") { + alert("Please enter a password to continue."); + return false; + } + return true; +} + +// Function to update the displayed number +function updateNumber(opt, parent) { + var parentElement = parent.parentElement; + var numDisplay = parentElement.querySelector(".numDisplay"); + var number = parseInt(numDisplay.textContent); + if (opt == "up") number += 1; + if (opt == "dn") number -= 1; + numDisplay.textContent = number; } function increaseNumber(id) { - var x = document.getElementById(id); - var val = Number(x.value); - var max = x.max; - if (max > val) { - val += 1; - x.value = val; - } + var x = document.getElementById(id); + var val = Number(x.value); + var max = x.max; + if (max > val) { + val += 1; + x.value = val; + } + var opt = "up"; + updateNumber(opt, x); } function decreaseNumber(id) { - var x = document.getElementById(id); - var val = Number(x.value); - var min = x.min; - if (min < val) { - val -= 1; - x.value = val; - } + var x = document.getElementById(id); + var val = Number(x.value); + var min = x.min; + if (min < val) { + val -= 1; + x.value = val; + } + var opt = "dn"; + updateNumber(opt, x); } -function buttonConfirm(elem, text='', timeout=3, reset=true) -{ - var originalText = elem.innerHTML; +function buttonConfirm(elem, text = "", timeout = 3, reset = true) { + var originalText = elem.innerHTML; - elem.innerHTML = (text == '' ? '✓' : text); - elem.disabled = true; + elem.innerHTML = text == "" ? "✓" : text; + elem.disabled = true; - if (reset) - { - setTimeout(function(){ - elem.innerHTML = originalText; - elem.disabled = false; - }, timeout*1000); - } + if (reset) { + setTimeout(function () { + elem.innerHTML = originalText; + elem.disabled = false; + }, timeout * 1000); + } } diff --git a/Code/data/hwconfig.html b/Code/data/hwconfig.html index 06e01533..409108dd 100644 --- a/Code/data/hwconfig.html +++ b/Code/data/hwconfig.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | Hardware Config - + + - - + + @@ -75,7 +76,7 @@

Hardware:

Select your DSP (display) model: - ?

+ ?


diff --git a/Code/data/hwtestinfo.html b/Code/data/hwtestinfo.html index 840ff6b6..11b73123 100644 --- a/Code/data/hwtestinfo.html +++ b/Code/data/hwtestinfo.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | Hardware test - + + - - + + diff --git a/Code/data/index.html b/Code/data/index.html index 6c2e7b18..f47e785a 100644 --- a/Code/data/index.html +++ b/Code/data/index.html @@ -3,10 +3,10 @@ Lay-Z-Spa Module - + + - @@ -20,7 +20,7 @@
@@ -52,7 +52,7 @@
-

Temperature:

+

Temperature

@@ -70,7 +70,7 @@

Temperature:

-

Control:

+

Control

Actual:
@@ -99,21 +99,27 @@

Control:

@@ -122,7 +128,7 @@

Control:

-

Buttons:

+

Buttons

Temperature
- ° + +
+ +
- ° + +
+ +
- +
@@ -176,7 +182,7 @@

Buttons:

-

Timer:

+

Timer

Bubbles
@@ -190,7 +196,7 @@

Timer:

-

Totals:

+

Totals

Last chlorine add was n/a ago.
diff --git a/Code/data/index.js b/Code/data/index.js index 59481c67..e8177288 100644 --- a/Code/data/index.js +++ b/Code/data/index.js @@ -200,8 +200,14 @@ function handlemsg(e) { // change values only if element is not active (selected for input) // also change only if an update is not in progress - if (document.activeElement !== elemSelectorTemp && !updateTempState) elemSelectorTemp.value = msgobj.TGT; - if (document.activeElement !== elemSelectorAmb && !updateAmbState) elemSelectorAmb.value = msgobj.AMB; + if (document.activeElement !== elemSelectorTemp && !updateTempState) { + elemSelectorTemp.value = msgobj.TGT; + elemSelectorTemp.parentElement.querySelector(".numDisplay").textContent = msgobj.TGT; + } + if (document.activeElement !== elemSelectorAmb && !updateAmbState) { + elemSelectorAmb.value = msgobj.AMB; + elemSelectorAmb.parentElement.querySelector(".numDisplay").textContent = msgobj.AMB; + } if (document.activeElement !== elemSelectorBrt && !updateBrtState) elemSelectorBrt.value = msgobj.BRT; // reset update states when the set target matches the input @@ -271,6 +277,7 @@ function sendCommand(cmd) { value = getProperValue(value, unit ? 20 : 68, unit ? 40 : 104); document.getElementById("sliderTempVal").innerHTML = value.toString(); document.getElementById("selectorTemp").value = value.toString(); + document.getElementById("selectorTemp").setAttribute("value", value.toString()); updateTempState = true; } else if (cmd == "setAmbient" || cmd == "setAmbientSelector") { value = parseInt(document.getElementById(cmd == "setAmbient" ? "amb" : "selectorAmb").value); diff --git a/Code/data/main.css b/Code/data/main.css index 4df9037b..bb206ee0 100644 --- a/Code/data/main.css +++ b/Code/data/main.css @@ -149,7 +149,6 @@ table.fixed { .larger { font-size: larger; } - .button, .button_red { text-decoration: none; @@ -329,18 +328,60 @@ input:focus + .slider { } input:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); + -webkit-transform: translateX(16px); + -ms-transform: translateX(16px); + transform: translateX(16px); background-color: #ccc; } - -input:checked + .heateron:before { - background-color: red; +.sun::after { + content: ""; + width: 8px; + height: 8px; + border: solid 1px #797b40; + border-radius: 50%; + box-shadow: 8px 0 0 -4px #797b40, -8px 0 0 -4px #797b40, 0 8px 0 -4px #797b40, 0 -8px 0 -4px #797b40, 6px -6px 0 -4px #797b40, -6px -6px 0 -4px #797b40, -6px 6px 0 -4px #797b40, + 6px 6px 0 -4px #797b40; + position: absolute; + left: 28px; + top: 11px; + -webkit-transition: 0.4s; + transition: 0.4s; +} +.moon::after { + content: ""; + width: 1.1rem; + height: 1.1rem; + border-radius: 50%; + box-shadow: 0.3rem 0.2rem 0 0 #909090; + position: absolute; + left: 2px; + top: 4px; + -webkit-transition: 0.4s; + transition: 0.4s; +} +input:checked + .slider.moon::after { + -webkit-transform: translateX(16px); + -ms-transform: translateX(16px); + transform: translateX(16px); +} +input:checked + .heateron::before { + border: 3px solid #bc3434; + box-sizing: border-box; + content: "On"; + font-size: 0.6em; + display: flex; + justify-content: center; + align-items: center; } input:checked + .heateroff:before { - background-color: green; + border: 3px solid green; + box-sizing: border-box; + content: "Off"; + font-size: 0.6em; + display: flex; + justify-content: center; + align-items: center; } /* Rounded sliders */ @@ -367,10 +408,29 @@ a.topnavicon { color: #b9b9b9; } .topnavicon::before { + content: "\00D7"; + line-height: 0.8; + top: 13px; + position: absolute; + opacity: 0; + -webkit-transition: 0.2s; + transition: 0.2s; +} +.show-before.topnavicon::before { + opacity: 1; +} +.topnavicon::after { content: "\2630"; line-height: 0.8; - top: -4px; - position: relative; + top: 13px; + position: absolute; + -webkit-transition: 0.2s; + transition: 0.2s; + opacity: 1; + display: inline-block; +} +.show-before.topnavicon::after { + opacity: 0; } .topnav { overflow: hidden; @@ -385,18 +445,27 @@ a.topnavicon { flex-direction: column; justify-content: flex-start; transition: 0.3s all; + gap: 0.7em; + padding-top: 1em; +} +.darkmode .topnav { + background: linear-gradient(180deg, rgb(65, 65, 65) 0%, rgb(44, 44, 44) 100%); } - .topnav a { float: left; display: none; - color: #444; + color: inherit; text-align: center; - padding: 6px 16px; + padding: 12px 16px; text-decoration: none; - font-size: 1.1em; + font-size: 1em; + font-weight: 300; + letter-spacing: 0.04em; +} +.darkmode .topnav a { + background: #454545; + box-shadow: 0px 1px 2px #0000004d; } - .topnav a.bgred { color: white; background-color: #bf0000; @@ -408,7 +477,7 @@ a.topnavicon { } .topnav a.active { - background-color: #04aa6d; + background-color: #2a5e8b99; color: white; } @@ -534,7 +603,36 @@ table#tableSelector { .selector .selectorbutton.selectorbottom { border-radius: 0 0 10px 10px; } - +.selector .wrapper { + background: #ccc; + display: flex; + justify-content: center; + align-items: center; +} +.selector .numDisplay { + width: fit-content; + height: 50px; + border: none; + color: var(--accent-color); + font-size: 34px; + text-align: center; + padding: 0; + border-radius: 0; + appearance: textfield; + pointer-events: none; + display: flex; + justify-content: center; + align-items: center; + position: relative; + left: -2px; +} +.selector .numDisplay::after { + content: "\00B0"; + position: absolute; + right: -14px; + top: 0; + font-weight: 200; +} .selector .selectorvalue { width: 100%; height: 50px; @@ -544,6 +642,9 @@ table#tableSelector { text-align: center; background-color: #ccc; padding: 0; + border-radius: 0; + appearance: textfield; + pointer-events: none; } .selector .degree { @@ -610,7 +711,7 @@ input:focus + .slider { } input:checked + .slider:before { - -webkit-transform: translateX(26px); + -webkit-transform: translateX(16px); -ms-transform: translateX(26px); transform: translateX(16px); background-color: #3c3c3c; diff --git a/Code/data/manifest.json b/Code/data/manifest.json index b5ecc3ad..bc5dff30 100644 --- a/Code/data/manifest.json +++ b/Code/data/manifest.json @@ -1,11 +1,17 @@ { - "name": "Lay-Z-Spa Module", - "icons": [ - { - "src": "\/favicon.png", - "sizes": "48x48", - "type": "image\/png", - "density": "3.0" - } - ] -} + "name": "Lay-Z-Spa Module", + "short_name": "Hot Tub WiFi", + "display": "fullscreen", + "theme_color": "#0f4677", + "background_color": "#fff", + "orientation": "portrait", + "description": "An app to access the WiFi module of your Lay-Z-Spa Hot Tub", + "icons": [ + { + "src": "\/favicon.png", + "sizes": "180x180", + "type": "image\/png", + "density": "3.0" + } + ] +} \ No newline at end of file diff --git a/Code/data/mqtt.html b/Code/data/mqtt.html index b82ba127..b001799e 100644 --- a/Code/data/mqtt.html +++ b/Code/data/mqtt.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | MQTT Config - + + - - + + diff --git a/Code/data/remove.html b/Code/data/remove.html index 3c103248..e235f343 100644 --- a/Code/data/remove.html +++ b/Code/data/remove.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | File Remover - + + - - + + diff --git a/Code/data/success.html b/Code/data/success.html index e19d7326..d80e2c57 100644 --- a/Code/data/success.html +++ b/Code/data/success.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | Success! - + + - - + + diff --git a/Code/data/upload.html b/Code/data/upload.html index ba311d9e..2a046dd7 100644 --- a/Code/data/upload.html +++ b/Code/data/upload.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | File Uploader - + + - - + + @@ -46,7 +47,9 @@
- + + +
diff --git a/Code/data/visualapproach.png b/Code/data/visualapproach.png index c06ed3c9..4319359c 100644 Binary files a/Code/data/visualapproach.png and b/Code/data/visualapproach.png differ diff --git a/Code/data/webconfig.html b/Code/data/webconfig.html index 281884af..eca88f27 100644 --- a/Code/data/webconfig.html +++ b/Code/data/webconfig.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | Web Config - + + - - + + diff --git a/Code/data/wifi.html b/Code/data/wifi.html index 6b6cb575..1d951530 100644 --- a/Code/data/wifi.html +++ b/Code/data/wifi.html @@ -3,12 +3,13 @@ Lay-Z-Spa Module | Network Config - + + - - + +
Time: ?