626 lines
21 KiB
HTML
626 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Smart Switch</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="apple-touch-icon" href="/favicon.ico" type="image/x-icon" />
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
|
<link rel="stylesheet" href="app.css" type="text/css" />
|
|
<style>
|
|
body {
|
|
font-family: arial;
|
|
color: #999
|
|
}
|
|
|
|
table {
|
|
margin: auto;
|
|
max-width: 600px;
|
|
}
|
|
|
|
td {
|
|
padding: 1%;
|
|
padding-inline: 2%
|
|
}
|
|
|
|
[id^="input-"] {
|
|
width: 70%;
|
|
text-align: center;
|
|
padding: 0px;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
border-bottom: 1px solid #2196f3;
|
|
font-size: 22px;
|
|
color: #2196f3;
|
|
font-family: arial;
|
|
}
|
|
|
|
input[type=button] {
|
|
background-color: #2196f3;
|
|
border: none;
|
|
color: #fff;
|
|
padding: 10px 10px;
|
|
width: 62px;
|
|
text-decoration: none;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
border-radius: 34px;
|
|
font-family: arial;
|
|
font-weight: 700;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 34px
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: .4s;
|
|
transition: .4s
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 26px;
|
|
width: 26px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: #fff;
|
|
-webkit-transition: .4s;
|
|
transition: .4s
|
|
}
|
|
|
|
input:checked+.slider {
|
|
background-color: #2196f3
|
|
}
|
|
|
|
input:focus+.slider {
|
|
box-shadow: 0 0 1px #2196f3
|
|
}
|
|
|
|
input:checked+.slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px)
|
|
}
|
|
|
|
.slider.round {
|
|
border-radius: 34px
|
|
}
|
|
|
|
.slider.round:before {
|
|
border-radius: 50%
|
|
}
|
|
|
|
.clk {
|
|
font-size: 52px;
|
|
color: #444;
|
|
cursor: pointer
|
|
}
|
|
|
|
.clk2 {
|
|
font-size: 24px;
|
|
color: #444
|
|
}
|
|
|
|
.clear:after,
|
|
.clear:before {
|
|
content: "";
|
|
display: table
|
|
}
|
|
|
|
.clear:after {
|
|
clear: both
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
top: 0px;
|
|
right: 0;
|
|
bottom: 0px;
|
|
left: 0;
|
|
margin: auto;
|
|
max-width: 500px;
|
|
text-align: center;
|
|
border: 0px solid #ccc
|
|
}
|
|
|
|
.gauge {
|
|
display: block;
|
|
float: left
|
|
}
|
|
|
|
#g1, #g2 {
|
|
width: 50%
|
|
}
|
|
|
|
.son {
|
|
color: green;
|
|
font-weight: bold
|
|
}
|
|
|
|
.soff {
|
|
color: red;
|
|
font-weight: bold
|
|
}
|
|
|
|
.blinking {
|
|
animation: blinkingText 1.2s infinite;
|
|
-webkit-animation: blinkingText 1.2s infinite;
|
|
}
|
|
|
|
|
|
@keyframes blinkingText {
|
|
0% {
|
|
color: #ec0b0b;
|
|
}
|
|
49% {
|
|
color: #ea7272;
|
|
}
|
|
60% {
|
|
color: transparent;
|
|
}
|
|
99% {
|
|
color: transparent;
|
|
}
|
|
100% {
|
|
color: #ff0404;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-left: 19px;
|
|
padding-top: 4px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
|
|
width: 12.5%;
|
|
|
|
user-select: none
|
|
}
|
|
|
|
.container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer
|
|
}
|
|
|
|
.checkmark {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 25px;
|
|
width: 25px;
|
|
background-color: #eee;
|
|
border-radius: 50%
|
|
}
|
|
|
|
.container:hover input ~ .checkmark {
|
|
background-color: #ccc
|
|
}
|
|
|
|
.container input:checked ~ .checkmark {
|
|
background-color: #2196F3
|
|
}
|
|
|
|
.checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none
|
|
}
|
|
|
|
.container input:checked ~ .checkmark:after {
|
|
display: block
|
|
}
|
|
|
|
.container .checkmark:after {
|
|
top: 6px;
|
|
left: 6px;
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
background: white
|
|
}
|
|
*:focus {outline:none !important}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<table align="center">
|
|
<tr align="center">
|
|
<td colspan=3>
|
|
<form name="sched">
|
|
<label class="container" id="LZ0">Def
|
|
<input type="radio" name="radio" onclick="handleClick(this);" value="Z0"><span class="checkmark"></span></label>
|
|
<label class="container" id="LZ1">M-F
|
|
<input type="radio" name="radio" onclick="handleClick(this);" value="Z1"><span class="checkmark"></span></label>
|
|
<label class="container" id="LZ2">Sat
|
|
<input type="radio" name="radio" onclick="handleClick(this);" value="Z2"><span class="checkmark"></span></label>
|
|
<label class="container" id="LZ3">Sun
|
|
<input type="radio" name="radio" onclick="handleClick(this);" value="Z3"><span class="checkmark"></span></label>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
<tr align="center">
|
|
<td onmousedown="ent1Click();">
|
|
<label for="input-temperature">Temp °C</label>
|
|
<input readonly="readonly" id="input-temperature" />
|
|
</td>
|
|
<td onmousedown="ent2Click();">
|
|
<label for="input-popup-start">Time On</label>
|
|
<input readonly="readonly" id="input-popup-start" />
|
|
</td>
|
|
<td onmousedown="ent2Click();">
|
|
<label for="input-popup-stop">Time Off</label>
|
|
<input readonly="readonly" id="input-popup-stop" />
|
|
</td>
|
|
</tr>
|
|
<tr align="center">
|
|
<td>
|
|
<input type="button" id="W" value="Temp" onclick="button2Click(this);" />
|
|
</td>
|
|
<td>
|
|
<label class="switch">
|
|
<input id="cbStyle" type="checkbox" onclick="checkboxClick(this);"><span class="slider round"></span></label>
|
|
</td>
|
|
<td>
|
|
<input type="button" id="T" value="Timer" onclick="buttonClick(this);" />
|
|
</td>
|
|
</tr>
|
|
<tr align="center">
|
|
<td>
|
|
<div id="reconnect">
|
|
<input type="button" id="N" value="WSoff" onclick="statusWs();" />
|
|
</div>
|
|
</td>
|
|
<td><span id="sid"></span><div id="free-ram"></div><div id="erase-wifi"></div><div id="hw-reset"></div><div id="get-time"></div></td>
|
|
<td>
|
|
<div id="ebut">
|
|
<input type="button" id="E" value="WEdit" onclick="buttonEClick();" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr align="center">
|
|
<td>
|
|
<input type="button" id="X" value="xWiFi" onclick="loadDoc('erase-wifi', 1);"/>
|
|
</td>
|
|
<td>
|
|
<input type="button" id="H" value="Heap" onclick="loadDoc('free-ram', 0);" />
|
|
</td>
|
|
<td>
|
|
<input type="button" id="R" value="HWrst" onclick="loadDoc('hw-reset', 1);"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="wrapper clear">
|
|
<div id="g1" class="gauge"></div>
|
|
<div id="g2" class="gauge"></div>
|
|
<div id="C" class="clk" onclick="getBtime();"></div>
|
|
<div id="C2" class="clk2"></div>
|
|
<input type="button" id="O" value="Logout" onclick="buttonOClick();" />
|
|
</div>
|
|
|
|
<script src="app.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
const MYCORS = '192.168.1.12';
|
|
var g1, g2;
|
|
var Analog0 = new Array();
|
|
var auto = true;
|
|
|
|
const successNotification = window.createNotification({
|
|
positionClass: 'nfc-bottom-right',
|
|
theme: 'info',
|
|
showDuration: 3000
|
|
});
|
|
|
|
const warningNotification = window.createNotification({
|
|
positionClass: 'nfc-bottom-right',
|
|
theme: 'warning',
|
|
showDuration: 6000
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
console.log("DOM fully loaded and parsed");
|
|
|
|
document.getElementById("R").style.backgroundColor = "red";
|
|
document.getElementById("X").style.backgroundColor = "red";
|
|
|
|
g1 = new JustGage({
|
|
id: "g1",
|
|
value: -5.5,
|
|
min: -40,
|
|
max: 50,
|
|
decimals: 1,
|
|
labelFontColor: "#444",
|
|
valueFontColor: "#444",
|
|
title: "Temperature",
|
|
titlePosition: "below",
|
|
label: "°C",
|
|
relativeGaugeSize: true,
|
|
pointer: true,
|
|
customSectors: [{
|
|
color: "#328da8",
|
|
lo: -40,
|
|
hi: 0
|
|
}, {
|
|
color: "#32a852",
|
|
lo: 0,
|
|
hi: 35
|
|
}, {
|
|
color: "#ff4d4d",
|
|
lo: 35,
|
|
hi: 50
|
|
}],
|
|
formatNumber: true
|
|
});
|
|
|
|
g2 = new JustGage({
|
|
id: "g2",
|
|
value: 40.8,
|
|
min: 0,
|
|
max: 100,
|
|
decimals: 1,
|
|
labelFontColor: "#444",
|
|
valueFontColor: "#444",
|
|
title: "Humidity",
|
|
titlePosition: "below",
|
|
label: "%",
|
|
relativeGaugeSize: true,
|
|
pointer: true,
|
|
customSectors: [{
|
|
color: "#ffc926",
|
|
lo: 0,
|
|
hi: 45
|
|
}, {
|
|
color: "#32a852",
|
|
lo: 45,
|
|
hi: 55
|
|
}, {
|
|
color: "#328da8",
|
|
lo: 55,
|
|
hi: 100
|
|
}],
|
|
formatNumber: true
|
|
});
|
|
|
|
});
|
|
|
|
var servurl = document.location.host;
|
|
if (servurl.length < 5) servurl = MYCORS;
|
|
var connection = new WebSocket('ws://' + servurl + '/ws', ['arduino']);
|
|
|
|
connection.onopen = function() {
|
|
//connection.send('get_something');
|
|
document.getElementById("sid").className = "son";
|
|
document.getElementById('sid').innerHTML = "Smart Switch";
|
|
console.log("connection opened");
|
|
};
|
|
|
|
connection.onclose = function() {
|
|
document.getElementById("sid").className = "blinking";
|
|
document.getElementById('sid').innerHTML = "Detached";
|
|
document.getElementById("N").value = "WSon";
|
|
console.log("connection closed");
|
|
};
|
|
|
|
connection.onerror = function(error) {
|
|
document.getElementById("sid").className = "soff";
|
|
document.getElementById('sid').innerHTML = "Detached";
|
|
document.getElementById("N").value = "WSon";
|
|
console.log('WebSocket Error ', error);
|
|
};
|
|
|
|
connection.onmessage = function(evt) {
|
|
// handle websocket message. update attributes or values of elements that match the name on incoming message
|
|
console.log("msg rec", evt.data);
|
|
var msgArray = evt.data.split(","); // split message by delimiter into a string array
|
|
console.log("msgArray", msgArray[0]);
|
|
console.log("msgArray", msgArray[1]);
|
|
console.log("msgArray", msgArray[2]);
|
|
console.log("msgArray", msgArray[3]);
|
|
console.log("msgArray", msgArray[4]);
|
|
var indicator = msgArray[1]; // the first element in the message array is the ID of the object to update
|
|
console.log("indiactor", indicator);
|
|
var a = document.getElementById('cbStyle');
|
|
if (indicator) // if an object by the name of the message exists, update its value or its attributes
|
|
{
|
|
switch (msgArray[1]) {
|
|
case "Arduino":
|
|
console.log("Got Temp / Humidity");
|
|
g1.refresh(msgArray[2], null);
|
|
g2.refresh(msgArray[3], null);
|
|
if (msgArray[4] == "1") document.getElementById("T").style.backgroundColor = "#32a852";
|
|
else document.getElementById("T").style.backgroundColor = "#2196f3";
|
|
var delta = (parseFloat(document.getElementById('input-temperature').value).toFixed(1) - parseFloat(msgArray[2]).toFixed(1));
|
|
if (delta > 0.5) document.getElementById("W").style.backgroundColor = "red";
|
|
else if (delta < -0.5) document.getElementById("W").style.backgroundColor = "#2196f3";
|
|
break;
|
|
case "Clock":
|
|
var dn = parseInt(msgArray[3]);
|
|
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
|
var dayName = days[dn] || '*'; // 0...6
|
|
var shedtype = 0;
|
|
if (dn == 0) shedtype = 3;
|
|
else if (dn == 6) shedtype = 2;
|
|
else if ((dn > 0) && (dn < 6)) shedtype = 1;
|
|
document.getElementById('C').innerHTML = msgArray[2];
|
|
document.getElementById('C2').innerHTML = dayName;
|
|
if (auto) document.getElementById('LZ' + shedtype).classList.add('son');
|
|
else document.getElementById('LZ' + shedtype).classList.remove('son');
|
|
break;
|
|
case "Setting":
|
|
document.getElementById('input-popup-start').value = msgArray[2];
|
|
document.getElementById('input-popup-stop').value = msgArray[3];
|
|
document.getElementById('input-temperature').value = parseFloat(msgArray[4]).toFixed(1);
|
|
|
|
document.getElementById('input-popup-start').className = "";
|
|
document.getElementById('input-popup-stop').className = "";
|
|
document.getElementById('input-temperature').className = "";
|
|
|
|
tpick.attach("input-popup-start");
|
|
tpick.attach("input-popup-stop");
|
|
fpick.attach("input-temperature");
|
|
warningNotification({
|
|
message: 'Client UPD'
|
|
});
|
|
break;
|
|
case "ledon":
|
|
a.checked = true;
|
|
break;
|
|
case "ledoff":
|
|
a.checked = false;
|
|
break;
|
|
case "remoff":
|
|
successNotification({
|
|
message: 'Client quit'
|
|
});
|
|
break;
|
|
case "OTA":
|
|
warningNotification({
|
|
message: 'OTA begin'
|
|
});
|
|
statusWs();
|
|
break;
|
|
case "sched":
|
|
document.sched.radio[msgArray[2]].checked = true;
|
|
break;
|
|
default:
|
|
// unrecognized message type. do nothing
|
|
break;
|
|
} // switch
|
|
} // if (indicator)
|
|
}; // connection.onmessage
|
|
|
|
function buttonClick(e) {
|
|
if (connection.readyState === WebSocket.OPEN) {
|
|
connection.send(e.id + document.getElementById("input-popup-start").value + "|" + document.getElementById("input-popup-stop").value + "|");
|
|
successNotification({
|
|
message: 'Timer REQ'
|
|
});
|
|
}
|
|
}
|
|
|
|
function button2Click(e) {
|
|
if (connection.readyState === WebSocket.OPEN) {
|
|
connection.send(e.id + parseFloat(document.getElementById("input-temperature").value).toFixed(1) + "|");
|
|
successNotification({
|
|
message: 'Temp. REQ'
|
|
});
|
|
}
|
|
}
|
|
|
|
function buttonEClick() {
|
|
var murl = '/edit';
|
|
if (document.location.host.length < 5) murl = 'http://' + MYCORS + '/edit'; //CORS
|
|
successNotification({message: 'Editor'});
|
|
window.open(murl, '_blank');
|
|
}
|
|
|
|
function buttonOClick() {
|
|
var murl = "";
|
|
// If base auth
|
|
//murl = document.location.href.replace("http://", "http://" + new Date().getTime() + "@");
|
|
// If cookie auth
|
|
murl += 'login/';
|
|
if (document.location.host.length < 5) murl = 'http://' + MYCORS + '/login/'; //CORS
|
|
warningNotification({ message: 'Logout'});
|
|
window.open(murl, '_self');
|
|
}
|
|
|
|
function checkboxClick(e) {
|
|
if (connection.readyState === WebSocket.OPEN) {
|
|
if (e.checked) connection.send('L1');
|
|
else connection.send('L0');
|
|
}
|
|
}
|
|
|
|
function ent1Click() {
|
|
document.getElementById("input-temperature").className = "blinking";
|
|
}
|
|
|
|
function ent2Click() {
|
|
document.getElementById("input-popup-stop").className = "blinking";
|
|
document.getElementById("input-popup-start").className = "blinking";
|
|
}
|
|
|
|
function handleClick(e) {
|
|
if (e.value == 'Z0' ) auto = true;
|
|
else auto = false;
|
|
document.getElementById('L' + e.value).classList.remove('son');
|
|
if (connection.readyState === WebSocket.OPEN) connection.send(e.value + "|");
|
|
}
|
|
|
|
// XMLHttpRequest /non WebSocket/ command. same as command' div' id to get response to
|
|
function loadDoc(cmd, r, param) {
|
|
var par = param || '';
|
|
var murl = '/' + cmd + par;
|
|
if (document.location.host.length < 5) murl = 'http://' + MYCORS + '/' + cmd + par; //CORS
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
document.getElementById(cmd).innerHTML = this.responseText;
|
|
}
|
|
};
|
|
xhttp.open("GET", murl, true);
|
|
xhttp.send();
|
|
successNotification({
|
|
message: 'Cmd: ' + cmd
|
|
});
|
|
if (r) { //restart?
|
|
connection.close();
|
|
document.getElementById("N").value = "WSon";
|
|
}
|
|
};
|
|
|
|
function getBtime() {
|
|
loadDoc('get-time', 0, '?btime=' + Math.round(new Date().getTime()/1000));
|
|
document.getElementById('C').innerHTML ='';
|
|
document.getElementById('C2').innerHTML ='';
|
|
window.location.reload();
|
|
}
|
|
|
|
function statusWs() {
|
|
if (connection.readyState === WebSocket.OPEN) {
|
|
connection.close();
|
|
document.getElementById("N").value = "WSon";
|
|
warningNotification({ message: 'WS Closed'});
|
|
} else {
|
|
window.location.reload();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |