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.
162 lines
4.7 KiB
162 lines
4.7 KiB
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Информация</title>
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
<link rel="manifest" href="imajes/site.webmanifest">
|
|
<link rel="mask-icon" href="imajes/safari-pinned-tab.svg" color="#5bbad5">
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
|
<meta name="theme-color" content="#ffffff">
|
|
</head>
|
|
|
|
<body id="body">
|
|
|
|
<div id="containerinf">
|
|
|
|
<div class="topnav" ;id="header" >
|
|
<p><h3>ESP-Домашний сервер</h3>
|
|
</div>
|
|
<nav id="navigation3"><a href="index.html" title="главное меню">Главное меню</a></nav>
|
|
|
|
|
|
<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="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>
|
|
<div><font size="3" color="#1E4486">................................................... </font>
|
|
</div>
|
|
<div>
|
|
<font size="3" color="#1E4486">таблица температуры за сутки</font>
|
|
</div>
|
|
|
|
<div id="tablinfo">
|
|
|
|
<table style="display: inline-block; color: #160B51; font-size: medium;" id="gable" >
|
|
<colgroup>
|
|
<col class="twenty" />
|
|
<col class="fourty" />
|
|
<col class="thirtyfive" />
|
|
</colgroup>
|
|
<tr>
|
|
<th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>  Time</th>
|
|
<th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>  temperatura</th>
|
|
<th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>  humidity</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<p class="packet"> <span id="tdata"></span></p>
|
|
</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('new_datatemp', function(e) {
|
|
console.log("new_datatemp", e.data);
|
|
var obj = JSON.parse(e.data);
|
|
|
|
document.getElementById("tkor").innerHTML = obj.tkor;
|
|
document.getElementById("hkor").innerHTML = obj.hkor;
|
|
document.getElementById("batkor").innerHTML = obj.batkor;
|
|
document.getElementById("timekor").innerHTML = obj.timekor;
|
|
|
|
}, 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
|
|
|
|
// var data=[{"Time":"20:20","temperatura":"9.39 C","humidity":"90.96 %/n"},
|
|
// {"Time":"20:21","temperatura":"9.40 C","humidity":"91.11 %/n"},
|
|
// {"Time":"20:22","temperatura":"9.47 C","humidity":"91.34 %/n"}]
|
|
|
|
//Array [ "{\"Time\":\"21:23\",\"temperatura\":\"8.88 C\",\"humidity\":\"90.97 %\"}", "{\"Time\":\"21:24\",\"temperatura\":\"8.92 C\",\"humidity\":\"91.34 %\"}" ]
|
|
|
|
|
|
source.addEventListener('readings', function(e) {
|
|
console.log("readings", e.data);
|
|
|
|
|
|
re = e.data.split("\n");
|
|
console.log(re);
|
|
//String[] anArrayOfStrings;
|
|
var data=[];
|
|
|
|
for(var i = 0; i < re.length; i++) {
|
|
data[i] = JSON.parse(re[i]);
|
|
console.log("data", data);
|
|
|
|
}
|
|
|
|
append_json(data);
|
|
|
|
//this function appends the json data to the table 'gable'
|
|
function append_json(data){
|
|
var table = document.getElementById('gable');
|
|
|
|
data.forEach(function(object) {
|
|
var tr = document.createElement('tr');
|
|
|
|
tr.innerHTML = '<td>' + object.Time + '</td>' +
|
|
'<td>' + object.temperatura + '</td>' +
|
|
'<td>' + object.humidity + '</td>'
|
|
table.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |