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.
140 lines
5.2 KiB
140 lines
5.2 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" >
|
|
<p><h3>ESP-Домашний сервер</h3></p>
|
|
</div>
|
|
<div class="top2">
|
|
|
|
<nav1><a href="index.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>Аквариум 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="takv1"></span> °C</span></p><p class="packet">light <span id="light1"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i>FAN</h4><p><span class="reading"><span id="fan1"></span> </span></p><p class="packet">Time <span id="time1"></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="takv2"></span> °C</span></p><p class="packet">light <span id="light2"> </span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i>FAN</h4><p><span class="reading"><span id="fan2"></span> </span></p><p class="packet">Time <span id="time2"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h1>Аквариум 3</h1>
|
|
<div class="cards">
|
|
<div class="card temperature">
|
|
<h4><i class="fas fa-thermometer-half"></i> TEMPERATURE</h4><p><span class="reading"><span id="takv3"></span> °C</span></p><p class="packet">light <span id="light3"></span></p>
|
|
</div>
|
|
<div class="card humidity">
|
|
<h4><i class="fas fa-tint"></i>FAN</h4><p><span class="reading"><span id="fan3"></span> </span></p><p class="packet">Time <span id="time3"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h1></h1>
|
|
|
|
<div class="top">
|
|
<font size="4" >Время работы сервера: </font>
|
|
<font color="#CF7071" size="5"><span id="t10">0:00</span></font>
|
|
<p>Count:<span id="countData1">0:00</span></p>
|
|
</div>
|
|
|
|
|
|
|
|
</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 data = JSON.parse(event.data);//
|
|
if (data.label3 === 'count1') {
|
|
document.getElementById("countData1").innerHTML = data.value;
|
|
};
|
|
if (data.label3 === 'count') {
|
|
document.getElementById("t10").innerHTML = data.value;
|
|
};
|
|
|
|
|
|
if (data.id === 'akva') {
|
|
console.log("readings", event.data);
|
|
document.getElementById("takv1").innerHTML = data.tempakv1;
|
|
document.getElementById("light1").innerHTML = data.light1;
|
|
document.getElementById("time1").innerHTML = data.timakv1;
|
|
document.getElementById("fan1").innerHTML = data.fan1;
|
|
document.getElementById("takv2").innerHTML = data.tempakv2;
|
|
document.getElementById("light2").innerHTML = data.light2;
|
|
document.getElementById("time2").innerHTML = data.timakv2;
|
|
document.getElementById("fan2").innerHTML = data.fan2;
|
|
document.getElementById("takv3").innerHTML = data.tempakv3;
|
|
document.getElementById("light3").innerHTML = data.light3;
|
|
document.getElementById("time3").innerHTML = data.timakv3;
|
|
document.getElementById("fan3").innerHTML = data.fan3;
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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);
|
|
};
|
|
};
|
|
|
|
</script>
|
|
</body>
|
|
</html> |