Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add html meta charset; fix brightness slider issue #182

Merged
merged 4 commits into from
Jan 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 28 additions & 25 deletions Code/6-wire-version/data/WebSocket.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
//
var connection;
var initTargetSlider = true;
const settarget = 0;
const setunit = 1;
const setbubbles = 2;
Expand All @@ -15,10 +14,13 @@ const resetftimer = 10;
const setjets = 11;
const setbrightness = 12;

// display brightness multiplier. lower value results lower brightness levels (1-30)
const dspBrtMultiplier = 10;
// to be used for setting the slider position once after loading to original values
var initSlider = true;

// display brightness multiplier. lower value results lower brightness levels (1-30)
const dspBrtMultiplier = 16;

// initial connect to the web socket
connect();

function connect()
Expand All @@ -28,6 +30,7 @@ function connect()
connection.onopen = function()
{
document.getElementById('header').style = "background-color: #00508F";
initSlider = true;
};

connection.onerror = function(error)
Expand Down Expand Up @@ -64,23 +67,22 @@ String.prototype.pad = function(String, len)
function handlemsg(e)
{
var msgobj = JSON.parse(e.data);
var mycolor;
console.log(msgobj);

/*
for my memory
doc["LCK"] = _cio.states[LOCKEDSTATE];
doc["PWR"] = _cio.states[POWERSTATE];
doc["UNT"] = _cio.states[UNITSTATE];
doc["AIR"] = _cio.states[BUBBLESSTATE];
doc["GRN"] = _cio.states[HEATGRNSTATE];
doc["RED"] = _cio.states[HEATREDSTATE];
doc["FLT"] = _cio.states[PUMPSTATE];
doc["TGT"] = _cio.states[TARGET];
doc["TMP"] = _cio.states[TEMPERATURE];
doc["CH1"] = _cio.states[CHAR1];
doc["CH2"] = _cio.states[CHAR2];
doc["CH3"] = _cio.states[CHAR3];
doc["PWR"] = _cio.states[POWERSTATE];
doc["UNT"] = _cio.states[UNITSTATE];
doc["AIR"] = _cio.states[BUBBLESSTATE];
doc["GRN"] = _cio.states[HEATGRNSTATE];
doc["RED"] = _cio.states[HEATREDSTATE];
doc["FLT"] = _cio.states[PUMPSTATE];
doc["TGT"] = _cio.states[TARGET];
doc["TMP"] = _cio.states[TEMPERATURE];
doc["CH1"] = _cio.states[CHAR1];
doc["CH2"] = _cio.states[CHAR2];
doc["CH3"] = _cio.states[CHAR3];
doc["HJT"] = _cio.states[JETSSTATE];
*/

Expand Down Expand Up @@ -112,13 +114,6 @@ function handlemsg(e)
{
document.getElementById('atlabel').innerHTML = msgobj.TMP.toString();
document.getElementById('ttlabel').innerHTML = msgobj.TGT.toString();
var element = document.getElementById('temp');
if (initTargetSlider)
{
element.value = msgobj.TGT;
}
initTargetSlider = false;
document.getElementById('sliderTempVal').innerHTML = element.value.toString();
document.getElementById('AIR').checked = msgobj.AIR;
document.getElementById('UNT').checked = msgobj.UNT;
document.getElementById('HTR').checked = msgobj.RED || msgobj.GRN;
Expand All @@ -134,9 +129,17 @@ function handlemsg(e)
document.getElementById('temp').max = 104;
}
document.getElementById('dsp').innerHTML = "[" + String.fromCharCode(msgobj.CH1,msgobj.CH2,msgobj.CH3)+ "]";
document.getElementById('brt').value = msgobj.BRT;
document.getElementById('sliderBrtVal').innerHTML = msgobj.BRT.toString();
document.getElementById("dsp").style.color = rgb((255-(dspBrtMultiplier*8))+(dspBrtMultiplier*(parseInt(msgobj.BRT)+1)), 0, 0);
document.getElementById('dsp').style.color = rgb((255-(dspBrtMultiplier*8))+(dspBrtMultiplier*(parseInt(msgobj.BRT)+1)), 0, 0);

// set slider values (once)
if (initSlider)
{
document.getElementById('temp').value = msgobj.TGT;
document.getElementById('brt').value = msgobj.BRT;
initSlider = false;
}
document.getElementById('sliderTempVal').innerHTML = document.getElementById('temp').value.toString();
document.getElementById('sliderBrtVal').innerHTML = document.getElementById('brt').value.toString();
}

if (msgobj.CONTENT == "TIMES")
Expand Down
25 changes: 13 additions & 12 deletions Code/6-wire-version/data/config.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Lay-Z-Spa Module | SPA Config</title>
<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="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">
<script src="function.js" type="text/javascript"></script>
<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">
<script src="function.js" type="text/javascript"></script>
</head>

<body onload="loadconfig()">
Expand All @@ -29,7 +30,7 @@
<a href="javascript:void(0);" class="bgred" onclick="reboot()">Restart ESP</a>-->
</div>

<section>
<section>
<table>
<!--tr>
<td><label for="timezone">Not used:</label></td>
Expand Down Expand Up @@ -148,11 +149,11 @@ <h2>Command queue</h2>
setInterval(loadcmd,4000);

var now = new Date();
var offset = now.getTimezoneOffset() * 60000;
var adjustedDate = new Date(now.getTime() - offset);
var formattedDate = adjustedDate.toISOString().substring(0,16); // For minute precision
var datetimeField = document.getElementById("xtime");
datetimeField.value = formattedDate;
var offset = now.getTimezoneOffset() * 60000;
var adjustedDate = new Date(now.getTime() - offset);
var formattedDate = adjustedDate.toISOString().substring(0,16); // For minute precision
var datetimeField = document.getElementById("xtime");
datetimeField.value = formattedDate;
}

function loadcmd(){
Expand All @@ -169,7 +170,7 @@ <h2>Command queue</h2>
for(var i = 0; i < msgobj.LEN; i++){
document.getElementById("cmdq").innerHTML += commandlist[msgobj["CMD"][i]] + ":";
document.getElementById("cmdq").innerHTML += msgobj["VALUE"][i] + " ";
var date = new Date(msgobj.XTIME[i] * 1000);
var date = new Date(msgobj.XTIME[i] * 1000);
document.getElementById("cmdq").innerHTML += date.toLocaleString() + " interval: ";
document.getElementById("cmdq").innerHTML += msgobj["INTERVAL"][i] + "s<br>";
}
Expand Down
37 changes: 19 additions & 18 deletions Code/6-wire-version/data/debug.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Lay-Z-Spa Module | Debug</title>
<title>Lay-Z-Spa Module | Debug</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<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">
<script src="function.js" type="text/javascript"></script>
<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">
<script src="function.js" type="text/javascript"></script>
</head>

<body>
Expand All @@ -30,19 +31,19 @@
<a href="javascript:void(0);" class="bgred" onclick="reboot()">Restart ESP</a>-->
</div>

<section>
<p>Check console (chrome: right click - inspect)</p>
</section>
</div>
<section>
<p>Check console (chrome: right click - inspect)</p>
</section>
</div>

<script>
var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);
connection.onerror = function (error) {
console.log('WebSocket Error ', error);
};
connection.onmessage = function (e) {
console.log(e.data);
}
</script>
<script>
var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);
connection.onerror = function (error) {
console.log('WebSocket Error ', error);
};
connection.onmessage = function (e) {
console.log(e.data);
}
</script>
</body>
</html>
34 changes: 17 additions & 17 deletions Code/6-wire-version/data/function.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@

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.");
var x = document.getElementById(id);
if (x.value == "<enter password>") {
alert("Please enter a password to continue.");
return false;
}
return true;
}
return true;
}
13 changes: 7 additions & 6 deletions Code/6-wire-version/data/index.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Lay-Z-Spa Module</title>
<title>Lay-Z-Spa Module</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<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">
<script src="function.js" type="text/javascript"></script>
<script src="WebSocket.js" type="text/javascript"></script>
<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">
<script src="function.js" type="text/javascript"></script>
<script src="WebSocket.js" type="text/javascript"></script>
</head>

<body>
Expand Down
15 changes: 8 additions & 7 deletions Code/6-wire-version/data/mqtt.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Lay-Z-Spa Module | MQTT Config</title>
<title>Lay-Z-Spa Module | MQTT Config</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<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">
<script src="function.js" type="text/javascript"></script>
<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">
<script src="function.js" type="text/javascript"></script>
</head>

<body onload="loadConfig()">
Expand All @@ -29,7 +30,7 @@
<a href="javascript:void(0);" class="bgred" onclick="reboot()">Restart ESP</a>-->
</div>

<section>
<section>
<table>
<tr>
<td><label for="enableMqtt">Enable MQTT:</label></td>
Expand Down Expand Up @@ -69,7 +70,7 @@
<td colspan="2" style="text-align:center"><button id="save" class="button" onclick="saveConfig()">save</button></td>
</tr>
</table>
</section>
</section>
</div>

<script>
Expand Down
25 changes: 13 additions & 12 deletions Code/6-wire-version/data/remove.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Lay-Z-Spa Module | File Remover</title>
<title>Lay-Z-Spa Module | File Remover</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<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">
<script src="function.js" type="text/javascript"></script>
<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">
<script src="function.js" type="text/javascript"></script>
</head>

<body>
Expand All @@ -29,12 +30,12 @@
<a href="javascript:void(0);" class="bgred" onclick="reboot()">Restart ESP</a>-->
</div>

<section>
<p style="text-align: left">Use this page to remove a file from the ESP8266.</p>
<form method="post" enctype="application/x-www-form-urlencoded" style="margin: 0px auto 8px auto" >
<input type="text" name="FileToRemove" value="">
<input class="button" type="submit" value="Delete" name="submit">
</form>
</section>
<section>
<p style="text-align: left">Use this page to remove a file from the ESP8266.</p>
<form method="post" enctype="application/x-www-form-urlencoded" style="margin: 0px auto 8px auto" >
<input type="text" name="FileToRemove" value="">
<input class="button" type="submit" value="Delete" name="submit">
</form>
</section>
</body>
</html>
27 changes: 14 additions & 13 deletions Code/6-wire-version/data/success.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Lay-Z-Spa Module | Success!</title>
<title>Lay-Z-Spa Module | Success!</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="48x48" href="favicon.png">
<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">
<script src="function.js" type="text/javascript"></script>
<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">
<script src="function.js" type="text/javascript"></script>
</head>

<body>
Expand All @@ -29,14 +30,14 @@
<a href="javascript:void(0);" class="bgred" onclick="reboot()">Restart ESP</a>-->
</div>

<section>
<p>The operation was successful.</p>
</section>
<section>
<p>The operation was successful.</p>
</section>

<section>
<p class="center"><a class="button" href="/">Home</a></p>
<p class="center"><a class="button" href="/upload.html">Upload a file</a></p>
<p class="center"><a class="button" href="/remove.html">Remove a file</a></p>
</section>
<section>
<p class="center"><a class="button" href="/">Home</a></p>
<p class="center"><a class="button" href="/upload.html">Upload a file</a></p>
<p class="center"><a class="button" href="/remove.html">Remove a file</a></p>
</section>
</body>
</html>
Loading