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.
236 lines
8.3 KiB
236 lines
8.3 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">
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
|
<meta name="theme-color" content="#ffffff">
|
|
</head>
|
|
|
|
<body id="body">
|
|
|
|
<div id="containerinf">
|
|
|
|
<div class="topnav" ;id="header" >
|
|
<h3>ESP-Домашний сервер</h3>
|
|
</div>
|
|
<div class="top2">
|
|
<nav1><a href="index.html" title="главное меню">Главное меню</a></nav1>
|
|
<nav1><a href="akva.html" title="информация">Аквариумы</a></nav1>
|
|
<nav1><a href="akva1.html" title="информация">Аквариум-1</a></nav1>
|
|
<nav1><a href="akva2.html" title="информация">Аквариум-2</a></nav1>
|
|
<nav1><a href="akva3.html" title="информация">Аквариум-3</a></nav1>
|
|
<nav1><a href="akvadat.html" title="информация">Данные</a></nav1>
|
|
<nav1><a href="akvagraf.html" title="информация">График температур</a></nav1>
|
|
</div>
|
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
<div id="contentinfo">
|
|
<h1>Аквариум</h1>
|
|
|
|
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
<div class="top2">
|
|
<nav id="navigation3"><a href="akvadat.html" title="главное меню">таблица данных за сутки</a></nav>
|
|
</div>
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
<div class="contentgraf">
|
|
<canvas id="line-chart" width="800" height="350"></canvas>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<p class="packet"> <span id="tdata"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
|
|
<script type="text/javascript">
|
|
let ind;
|
|
let w=[];
|
|
let w1=[];
|
|
let w2=[];
|
|
var tabl=0;
|
|
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);//
|
|
if (data.id === '77') {
|
|
};
|
|
if (data.id === '2') {
|
|
|
|
};
|
|
|
|
|
|
}
|
|
else
|
|
{
|
|
if(tabl==0)
|
|
{
|
|
console.log("readings", event.data);
|
|
re = event.data.split("\n");
|
|
// console.log(re);
|
|
var data=[];
|
|
tabl=1;
|
|
for(var i = 0; i < re.length-1; i++) {
|
|
data[i] = JSON.parse(re[i]);
|
|
console.log("data", data);
|
|
}
|
|
|
|
|
|
data.forEach(function(object) {
|
|
console.log(object.Time);
|
|
console.log(object.temperatura);
|
|
console.log(object.humidity);
|
|
var indtemp;// инд для опред кол ва цифр в температуре
|
|
var indtemp1;// инд для опред кол ва цифр в температуре
|
|
var indtemp2;// инд для опред кол ва цифр в температуре
|
|
var indold= ind;//запоминаем предыдущий индекс чтоб не повторять данные
|
|
console.log(object.timakv1.indexOf(":"));
|
|
if(object.timakv1.indexOf(":")==1)//считаем кол-во цифр до : (одна или две ) 1:20 и 19:20 часы это индекс массива данных
|
|
{ind = Number(object.timakv1.substr(0, 1));//если одна то 1
|
|
}
|
|
else
|
|
{console.log(object.timakv1.substr(0, 2)); // если две то 19
|
|
ind= Number(object.timakv1.substr(0, 2));
|
|
}
|
|
//console.log(ind);
|
|
if(ind!=indold)
|
|
{
|
|
if(ind>indold+1)
|
|
{ var del=ind-indold;
|
|
for (var i = indold; i < ind; i++) {
|
|
console.log(i);
|
|
w[i]=w[indold];
|
|
w1[i]=w1[indold];
|
|
w2[i]=w2[indold];
|
|
// console.log("Notw[ind]=");
|
|
// console.log(w[ind]);
|
|
}
|
|
}
|
|
//console.log(object.temperatura.indexOf("."));
|
|
indtemp=Number(object.tempakv1.indexOf("."));//кол-во цифр до запятой
|
|
indtemp1=Number(object.tempakv2.indexOf("."));//кол-во цифр до запятой
|
|
indtemp2=Number(object.tempakv3.indexOf("."));//кол-во цифр до запятой
|
|
|
|
|
|
if(indtemp==2)//если до запятой 2 знака
|
|
{w[ind]=Number(object.tempakv1.substr(0, 2))*10+Number(object.tempakv1.substr(3, 1));
|
|
w[ind]=w[ind]/10;
|
|
}
|
|
// console.log("w[ind]=");
|
|
// console.log(w[ind]);
|
|
if(indtemp1==2)//если до запятой 2 знака
|
|
{ w1[ind]=Number(object.tempakv2.substr(0, 2))*10+Number(object.tempakv2.substr(3, 1));
|
|
w1[ind]=w1[ind]/10;
|
|
}
|
|
if(indtemp2==2)//если до запятой 2 знака
|
|
{ w2[ind]=Number(object.tempakv3.substr(0, 2))*10+Number(object.tempakv3.substr(3, 1));
|
|
w2[ind]=w2[ind]/10;
|
|
}
|
|
|
|
if(indtemp==1)//если до запятой 1 знак
|
|
{w[ind]=Number(object.tempakv1.substr(0, 1))*10+Number(object.tempakv1.substr(2, 1));
|
|
w[ind]=w[ind]/10;
|
|
// console.log("w[ind]=");
|
|
//console.log(w[ind]);
|
|
if(indtemp1==1)//если до запятой 1 знак
|
|
{ w1[ind]=Number(object.tempakv2.substr(0, 1))*10+Number(object.tempakv2.substr(2, 1));
|
|
w1[ind]=w[ind]/10;
|
|
}
|
|
if(indtemp2==1)//если до запятой 1 знак
|
|
{w2[ind]=Number(object.tempakv3.substr(0, 1))*10+Number(object.tempakv3.substr(2, 1));
|
|
w2[ind]=w[ind]/10;
|
|
}
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
new Chart(document.getElementById("line-chart"), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"],
|
|
datasets: [{
|
|
data: [w[0],w[1],w[2],w[3],w[4],w[5],w[6],w[7],w[8],w[9],w[10],w[11],w[12],w[13],w[14],w[15],w[16],w[17],w[18],w[19],w[20],w[21],w[22],w[23],],
|
|
label: "Аквариум1 ",
|
|
|
|
borderColor: "rgba(62,205,149,1.00)",
|
|
backgroundColor: "rgba(62,205,149,0.48)",
|
|
fill: true
|
|
},{
|
|
data: [w1[0],w1[1],w1[2],w1[3],w1[4],w1[5],w1[6],w1[7],w1[8],w1[9],w1[10],w1[11],w1[12],w1[13],w1[14],w1[15],w1[16],w1[17],w1[18],w1[19],w1[20],w1[21],w1[22],w1[23],],
|
|
label: "Аквариум2 ",
|
|
borderColor: "rgba(229,143,66,1.00)",
|
|
backgroundColor: "rgba(229,143,66,0.48)",
|
|
fill: true
|
|
},{
|
|
data: [w2[0],w2[1],w2[2],w2[3],w2[4],w2[5],w2[6],w2[7],w2[8],w2[9],w2[10],w2[11],w2[12],w2[13],w2[14],w2[15],w2[16],w2[17],w2[18],w2[19],w2[20],w2[21],w2[22],w2[23],],
|
|
label: "Аквариум3 ",
|
|
borderColor: "rgb(62,149,205)",
|
|
backgroundColor: "rgba(65,138,191,0.68)",
|
|
fill: true
|
|
//fill: false
|
|
}]},
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: 'График суточной температуры'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
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) {
|
|
return false;
|
|
console.log("isJsonString", false);
|
|
}
|
|
console.log("isJsonString", true);
|
|
return true;
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |