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.
239 lines
8.7 KiB
239 lines
8.7 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<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">
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
|
|
<div class="topnav" ;id="header" >
|
|
<p><h3>ESP-Домашний сервер</h3>
|
|
</div>
|
|
<div id="sidebar">
|
|
|
|
<div class="manth">
|
|
<p><span id="munthserv">январь</span></p>
|
|
</div>
|
|
<div class="data">
|
|
<p><span id="dataserv">01</span></p>
|
|
<div class="week">
|
|
<p><span id="weekserv">суббота</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="times">
|
|
<p><span id="timeserv">00:00</span></p>
|
|
</div>
|
|
<div class="levnav">
|
|
|
|
|
|
|
|
|
|
<p> <a href="index.html" title="Главная"> Главная</a></p>
|
|
<p><a href="setting.html" title="настройки">настройки</a></p>
|
|
<p><a href="upravlenie.html" title="управление">управление</a></p>
|
|
<p><a href="inform.html" title="информация">информация</a></p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<nav id="navigation"><a href="inform1.html" title="информация">улица восток</a></nav>
|
|
<nav id="navigation"><a href="inform.html" title="информация">улица запад</a></nav>
|
|
<nav id="navigation"><a href="inform4.html" title="информация">коридор</a></nav>
|
|
<nav id="navigation"><a href="inform2.html" title="информация">комната1</a></nav>
|
|
<nav id="navigation"><a href="inform3.html" title="информация">комната2</a></nav>
|
|
<nav id="navigation"><a href="inform6.html" title="информация">кухня</a></nav>
|
|
<nav id="navigation"><a href="inform5.html" title="информация">балкон</a></nav>
|
|
<div id="content">
|
|
<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="tul1"></span> °C</span></p><p class="packet">Light <span id="osv1"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="hul1"></span> %</span></p><p class="packet">Time <span id="timeul1"></span></p>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<h1>Комната1</h1>
|
|
<div class="cards">
|
|
<div class="card temperature">
|
|
<h4><i class="fas fa-thermometer-half"></i> TEMPERATURE</h4><p><span class="reading"><span id="tkom1"></span> °C</span></p><p class="packet">Battery <span id="batkom1"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="hkom1"></span> %</span></p><p class="packet">Time <span id="timekom1"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<h1>Комната2</h1>
|
|
<div class="cards">
|
|
<div class="card temperature">
|
|
<h4><i class="fas fa-thermometer-half"></i> TEMPERATURE</h4><p><span class="reading"><span id="tkom2"></span> °C</span></p><p class="packet">Battery <span id="batkom2"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="hkom2"></span> %</span></p><p class="packet">Time <span id="timekom2"></span></p>
|
|
</div>
|
|
</div>
|
|
<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="tkor"></span> °C</span></p><p class="packet">Battery <span id="batkor"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="hkor"></span> %</span></p><p class="packet">Time <span id="timekor"></span></p>
|
|
</div>
|
|
</div>
|
|
<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="tbal"></span> °C</span></p><p class="packet">Battery <span id="batbal"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="hbal"></span> %</span></p><p class="packet">Time <span id="timebal"></span></p>
|
|
</div>
|
|
</div>
|
|
<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="tul1"></span> °C</span></p><p class="packet">Light <span id="osv1"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="hul1"></span> %</span></p><p class="packet">Time <span id="timeul1"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<h1></h1>
|
|
|
|
<div class="top">
|
|
<font size="2" >Время работы сервера: </font>
|
|
<font color="#CF7071" size="3"><span id="t10">0:00</span></font>
|
|
</div>
|
|
|
|
|
|
<div id="clear">
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
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('timeserv', function(e) {//ремя работы сервера
|
|
document.getElementById("timeserv").innerHTML =e.data;
|
|
}, false);
|
|
|
|
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(1);
|
|
document.getElementById("h1").innerHTML = obj.humidity.toFixed(1);
|
|
document.getElementById("tim2").innerHTML = obj.tim2;
|
|
document.getElementById("tim3").innerHTML = obj.tim3;
|
|
document.getElementById("dataserv").innerHTML = obj.dataserv;
|
|
document.getElementById("timeserv").innerHTML = obj.timeserv;
|
|
document.getElementById("munthserv").innerHTML = obj.munthserv;
|
|
document.getElementById("weekserv").innerHTML = obj.weekserv;
|
|
}, false);
|
|
|
|
source.addEventListener('new_datatemp', function(e) {
|
|
console.log("new_datatemp", e.data);
|
|
var obj = JSON.parse(e.data);
|
|
document.getElementById("tkom1").innerHTML = obj.tkom1;
|
|
document.getElementById("hkom1").innerHTML = obj.hkom1;
|
|
document.getElementById("batkom1").innerHTML = obj.batkom1;
|
|
document.getElementById("timekom1").innerHTML = obj.timekom1;
|
|
document.getElementById("tkom2").innerHTML = obj.tkom2;
|
|
document.getElementById("hkom2").innerHTML = obj.hkom2;
|
|
document.getElementById("batkom2").innerHTML = obj.batkom2;
|
|
document.getElementById("timekom2").innerHTML = obj.timekom2;
|
|
document.getElementById("tkor").innerHTML = obj.tkor;
|
|
document.getElementById("hkor").innerHTML = obj.hkor;
|
|
document.getElementById("batkor").innerHTML = obj.batkor;
|
|
document.getElementById("timekor").innerHTML = obj.timekor;
|
|
document.getElementById("tbal").innerHTML = obj.tbal;
|
|
document.getElementById("hbal").innerHTML = obj.hbal;
|
|
document.getElementById("batbal").innerHTML = obj.batbal;
|
|
document.getElementById("timebal").innerHTML = obj.timebal;
|
|
document.getElementById("tul1").innerHTML = obj.tul1;
|
|
document.getElementById("hul1").innerHTML = obj.hul1;
|
|
document.getElementById("osv1").innerHTML = obj.osv1;
|
|
document.getElementById("timeul1").innerHTML = obj.timeul1;
|
|
|
|
}, false);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |