You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
5.6 KiB
192 lines
5.6 KiB
|
|
<!DOCTYPE HTML><html>
|
|
|
|
<head>
|
|
<title>ESP-NOW DASHBOARD</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
<link rel="icon" href="favicon.ico">
|
|
|
|
<link rel="icon" type="png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="png" sizes="16x16" href="favicon-16x16.png">
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="content1">
|
|
<div class="topnav">
|
|
<p><h3>ESP-Домашний сервер</h3><span class="data"></span><span id="dataserv">%dataserv%</span></p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="top2">
|
|
|
|
<nav1><a href="index.html" title="главное меню"> Главное меню </a></nav1>
|
|
|
|
<nav1><a href="setting.html" title="настройки"> настройки </a></nav1>
|
|
|
|
<nav1><a href="inform.html" title="информация"> информация </a></nav1>
|
|
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<div id="contentinfo">
|
|
<h1>Управление</h1>
|
|
<div class="cards">
|
|
<div class="card temperature">
|
|
<h4><i class="fas fa-thermometer-half"></i> TEMPERATURE</h4><p><span class="reading"><span id="t1"></span> °C</span></p><p class="packet">Time <span id="tim2"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="h1"></span> %</span></p><p class="packet">Time <span id="tim3"></span></p>
|
|
</div>
|
|
<div class="card but">
|
|
%BUTTONPLACEHOLDER1%
|
|
</div>
|
|
|
|
<div class="card but">
|
|
%BUTTONPLACEHOLDER2%
|
|
</div>
|
|
|
|
<div class="card but">
|
|
%BUTTONPLACEHOLDER3%
|
|
</div>
|
|
<div class="card but">
|
|
%BUTTONPLACEHOLDER4%
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="clear">
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="top">
|
|
<font size="2" > </font>
|
|
<font color="#CF7071" size="3"><span id="timeserv1">0:00</span></font>
|
|
</div>
|
|
|
|
|
|
<div id="clear">
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
var webSocket;
|
|
connectWebSocket();
|
|
function connectWebSocket() {
|
|
webSocket = new WebSocket('ws://' + window.location.hostname + '/ws');
|
|
|
|
webSocket.onopen = function(event) {//реакция на подключение вебсекета
|
|
console.log('WebSocket connected');
|
|
};
|
|
|
|
webSocket.onmessage = function(event) {//реакция на данные
|
|
var tabd=event.data;
|
|
|
|
|
|
|
|
if(isJsonString(tabd)==1)
|
|
{var data = JSON.parse(event.data);//получаем и парсим выходы jsonStringout={"id":"out","out1":"101"}
|
|
if (data.id === 'out') {
|
|
const out = Array.from(data.out1).map(Number);//"101"=>{1,0,1} строку в массив
|
|
console.log("readings", out);
|
|
if(out[0]==1){ document.getElementById("4").checked = true;}
|
|
else{document.getElementById("4").checked = false;}
|
|
if(out[1]==1){ document.getElementById("26").checked = true;}
|
|
else{document.getElementById("26").checked = false;}
|
|
if(out[2]==1){ document.getElementById("27").checked = true;}
|
|
else{document.getElementById("27").checked = false;}
|
|
if(out[3]==1){ document.getElementById("55").checked = true;}
|
|
else{document.getElementById("55").checked = false;}
|
|
};
|
|
if (data.id === '2') {
|
|
console.log("readings", event.data);
|
|
document.getElementById("t1").innerHTML = data.tkom1;
|
|
document.getElementById("h1").innerHTML = data.hkom1;
|
|
};
|
|
if (data.label3 === 'count2') {
|
|
document.getElementById("timeserv1").innerHTML = data.value;
|
|
};
|
|
|
|
}
|
|
|
|
|
|
};
|
|
webSocket.onclose = function(event) {//реакция на отключение вебсекета
|
|
console.log('WebSocket disconnected');
|
|
var messageElement = document.getElementById('message');
|
|
messageElement.innerHTML ='WebSocket disconnected. Reconnecting...';
|
|
setTimeout(connectWebSocket, 2000);
|
|
setTimeout(function() { messageElement.innerHTML = ''; }, 5000);
|
|
};
|
|
webSocket.onerror = function(event) {
|
|
console.error('WebSocket error:', event);
|
|
};
|
|
}
|
|
|
|
function isJsonString(str) {//проверка строки на json
|
|
try {
|
|
JSON.parse(str);
|
|
} catch (e) {
|
|
//console.log("isJsonString", false);
|
|
return false;
|
|
|
|
}
|
|
//console.log("isJsonString", true);
|
|
return true;
|
|
}
|
|
|
|
function toggleCheckbox(element) {//вкл чекбокса передaть на сервер (element.id номер бокса)состояние(state=1или0)
|
|
// var xhr = new XMLHttpRequest();
|
|
console.log("toggleCheckbox", element.checked);
|
|
const outData = {
|
|
ido :"",
|
|
out:""
|
|
}
|
|
outData.ido=element.id;
|
|
if(element.checked)
|
|
{ //xhr.open("GET", "/update?output="+element.id+"&state=1", true)
|
|
|
|
outData.out='1';
|
|
// var out1 = document.getElementsById('4');//
|
|
// var out2 = document.getElementsById('26');//
|
|
// var out3 = document.getElementsById('27');//
|
|
console.log("ON", element.id);
|
|
// webSocket.send(jsonData);
|
|
}
|
|
else { outData.out='0';
|
|
console.log("OFF", element.id); }
|
|
const jsonout = JSON.stringify(outData);
|
|
//console.log("JSON", jsonout);//{"ido":"4","out":1}
|
|
webSocket.send(jsonout);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|