Skip to content

Commit

Permalink
Merge pull request #676 from visualapproach/master
Browse files Browse the repository at this point in the history
dark mode
  • Loading branch information
visualapproach authored Mar 1, 2024
2 parents 6c766de + d3cef1b commit 4cbc9c5
Show file tree
Hide file tree
Showing 19 changed files with 277 additions and 118 deletions.
7 changes: 4 additions & 3 deletions Code/data/calib.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
<head>
<title>Lay-Z-Spa Module | SPA Manual calibration</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0066BF">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>

<body>
Expand Down
7 changes: 4 additions & 3 deletions Code/data/config.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
<head>
<title>Lay-Z-Spa Module | SPA Config</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0066BF">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>

<body>
Expand Down
16 changes: 16 additions & 0 deletions Code/data/darkmode.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
});
});
Binary file modified Code/data/favicon.ico
Binary file not shown.
Binary file modified Code/data/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 56 additions & 45 deletions Code/data/function.js
Original file line number Diff line number Diff line change
@@ -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 == "<enter password>") {
alert("Please enter a password to continue.");
return false;
}
return true;
var x = document.getElementById(id);
if (x.value == "<enter password>") {
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 == '' ? '&check;' : text);
elem.disabled = true;
elem.innerHTML = text == "" ? "&check;" : 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);
}
}
9 changes: 5 additions & 4 deletions Code/data/hwconfig.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
<head>
<title>Lay-Z-Spa Module | Hardware Config</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0066BF">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>

<body>
Expand Down Expand Up @@ -75,7 +76,7 @@ <h2>Hardware:</h2>

<section onclick="setPins()">
<p>Select your DSP (display) model:
<span data-text="In theory we should be able to combine any CIO with any DSP. Not tested but really cool if it actually works :-)" class="tooltip">?</span></p>
<span data-text="In theory we should be able to combine any CIO with any DSP. Not tested but really cool if it actually works :-)" class="tooltip left">?</span></p>
<input type="radio" id="dsp_0" name="dsp_model" value="0" checked="checked">
<label for="dsp_pre2021">6 wire, pre 2021 (air)</label><br>
<input type="radio" id="dsp_1" name="dsp_model" value="1">
Expand Down
7 changes: 4 additions & 3 deletions Code/data/hwtestinfo.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
<head>
<title>Lay-Z-Spa Module | Hardware test</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0066BF">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>

<body>
Expand Down
28 changes: 17 additions & 11 deletions Code/data/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<head>
<title>Lay-Z-Spa Module</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<link rel="icon" type="image/png" sizes="180x180" href="favicon.png">
<meta name="theme-color" content="#0f4677">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="main.css">
<meta name="theme-color" content="#0f4677">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<script src="function.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
Expand All @@ -20,7 +20,7 @@
<form id="darkModeForm">
<label class="switch">
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
<span class="slider round"></span>
<span class="slider round moon"></span>
</label>
</form>
<a href="./"><div id="header"><span>Lay-Z-Spa Module</span><span>by visualapproach</span></div></a>
Expand Down Expand Up @@ -52,7 +52,7 @@

<section id="sectionTemperature">
<div class="visualapproach"></div>
<h2>Temperature:</h2>
<h2>Temperature</h2>
<table class="fixed">
<tr>
<td>Actual:</td>
Expand All @@ -70,7 +70,7 @@ <h2>Temperature:</h2>
</section>

<section id="sectionControl">
<h2>Control:</h2>
<h2>Control</h2>
<table id="tableSlider">
<tr>
<td style="width:40%;">Temperature</td>
Expand Down Expand Up @@ -99,21 +99,27 @@ <h2>Control:</h2>
<td class="center">
<div class="selector">
<button onclick="increaseNumber('selectorTemp');sendCommand('setTargetSelector')" class="selectorbutton selectortop"></button>
<input id="selectorTemp" min="20" max="40" step="1" value="20" type="text" class="selectorvalue" onchange="sendCommand('setTargetSelector')"><span class="degree">°</span>
<input style="display:none" type="number" id="selectorTemp" min="20" max="40" step="1" value="20" type="text" class="selectorvalue" onchange="sendCommand('setTargetSelector')">
<div class="wrapper">
<span class="numDisplay"></span>
</div>
<button onclick="decreaseNumber('selectorTemp');sendCommand('setTargetSelector')" class="selectorbutton selectorbottom"></button>
</div>
</td>
<td class="center">
<div class="selector">
<button onclick="increaseNumber('selectorAmb');sendCommand('setAmbientSelector')" class="selectorbutton selectortop"></button>
<input id="selectorAmb" min="-40" max="60" step="1" value="20" type="text" class="selectorvalue" onchange="sendCommand('setAmbientSelector')"><span class="degree">°</span>
<input style="display:none" type="number" id="selectorAmb" min="-40" max="60" step="1" value="20" type="text" class="selectorvalue" onchange="sendCommand('setAmbientSelector')">
<div class="wrapper">
<span class="numDisplay"></span>
</div>
<button onclick="decreaseNumber('selectorAmb');sendCommand('setAmbientSelector')" class="selectorbutton selectorbottom"></button>
</div>
</td>
<td class="center">
<div class="selector">
<button onclick="increaseNumber('selectorBrt');sendCommand('setBrightnessSelector')" class="selectorbutton selectortop"></button>
<input id="selectorBrt" min="0" max="8" step="1" value="7" type="text" class="selectorvalue" onchange="sendCommand('setBrightnessSelector')">
<input type="number" id="selectorBrt" min="0" max="8" step="1" value="7" type="text" class="selectorvalue" onchange="sendCommand('setBrightnessSelector')">
<button onclick="decreaseNumber('selectorBrt');sendCommand('setBrightnessSelector')" class="selectorbutton selectorbottom"></button>
</div>
</td>
Expand All @@ -122,7 +128,7 @@ <h2>Control:</h2>
</section>

<section id="sectionButtons">
<h2>Buttons:</h2>
<h2>Buttons</h2>
<table class="fixed">
<tr>
<td class="right">Bubbles</td>
Expand Down Expand Up @@ -176,7 +182,7 @@ <h2>Buttons:</h2>
</section>

<section id="sectionTimer">
<h2>Timer:</h2>
<h2>Timer</h2>
<table>
<tr>
<td>Last chlorine add was <span id="cltimer">n/a</span> ago.</td>
Expand All @@ -190,7 +196,7 @@ <h2>Timer:</h2>
</section>

<section id="sectionTotals">
<h2>Totals:</h2>
<h2>Totals</h2>
<table class="fixed">
<tr>
<td>Time: <span data-text="ESP sends UTC. Browser converts to Local." class="tooltip">?</span></td>
Expand Down
11 changes: 9 additions & 2 deletions Code/data/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down
Loading

0 comments on commit 4cbc9c5

Please sign in to comment.