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.
122 lines
3.9 KiB
122 lines
3.9 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 class="topnav">
|
|
<p><h3>ESP-Домашний сервер</h3><span class="data"></span><span id="dataserv">%dataserv%</span></p>
|
|
|
|
|
|
|
|
|
|
<p><span class="times"><span id="timeserv">%timeserv%</span></p>
|
|
|
|
</div>
|
|
<nav id="navigation"><a href="index.html" title="Главная">Главная</a></nav>
|
|
<nav id="navigation1"><a href="setting.html" title="настройки">настройки</a></nav>
|
|
<nav id="navigation2"><a href="inform.html" title="информация">информация</a></nav>
|
|
<div class="content">
|
|
<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>
|
|
</div>
|
|
|
|
<div style="text-align: center;">
|
|
<font size="6" color="#0000ff">Время работы сервера:</font>
|
|
</div>
|
|
|
|
|
|
<div style="text-align: center;">
|
|
<font color="#ff0000" size="6">
|
|
<p><span id="t10"></span></p>
|
|
</font>
|
|
<font size="4" color="#0000ff"> </font>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
function toggleCheckbox(element) {//get запросы на переключение кнопки GET http://192.168.1.100/update?output=13&state=1
|
|
var xhr = new XMLHttpRequest();
|
|
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); }
|
|
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
|
|
xhr.send();
|
|
}
|
|
|
|
|
|
|
|
if (!!window.EventSource) {
|
|
var source = new EventSource('/events');
|
|
|
|
source.addEventListener('open', function(e) {
|
|
console.log("Events Connected");
|
|
}, false);
|
|
source.addEventListener('error', function(e) {
|
|
if (e.target.readyState != EventSource.OPEN) {
|
|
console.log("Events Disconnected");
|
|
}
|
|
}, false);
|
|
|
|
source.addEventListener('message', function(e) {
|
|
console.log("message", e.data);
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
|
|
// source.addEventListener('t1', function(e) {;//слушаем когда прийдет t1
|
|
// document.getElementById("t1").innerHTML =e.data;// заменяем в HTML страничке id="t1" на то что пришло t1=25
|
|
// }, false);// events.send(String(t1).c_str(), "t1", millis()); в Loop надо отправить t1=25
|
|
|
|
|
|
|
|
|
|
source.addEventListener('t10', function(e) {//ремя работы сервера
|
|
document.getElementById("t10").innerHTML =e.data;
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
source.addEventListener('new_readings', function(e) {
|
|
console.log("new_readings", e.data);
|
|
var obj = JSON.parse(e.data);
|
|
document.getElementById("t1").innerHTML = obj.temperature.toFixed(2);
|
|
document.getElementById("h1").innerHTML = obj.humidity.toFixed(2);
|
|
document.getElementById("tim2").innerHTML = obj.tim2;
|
|
document.getElementById("tim3").innerHTML = obj.tim3;
|
|
document.getElementById("dataserv").innerHTML = obj.dataserv;
|
|
document.getElementById("timeserv").innerHTML = obj.timeserv;
|
|
}, false);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|