sergeykutkovoy
/
Play
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
6 Commits
1 Branch
0 Tags
2.4 MiB
 
 
 
Tag: Branch: Tree: 061a44e2d6
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '061a44e2d6'
${ noResults }
Play/WebSocket3Aqva/data/index.html

228 lines
9.0 KiB
Raw Blame History

<!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></p>
</div>
<div class="top2">
<nav1><a href="inform1.html" title="информация">улица восток</a></nav1>
<nav1><a href="inform.html" title="информация">улица запад</a></nav1>
<nav1><a href="inform4.html" title="информация">коридор</a></nav1>
<nav1><a href="inform2.html" title="информация">комната1</a></nav1>
<nav1><a href="inform3.html" title="информация">комната2</a></nav1>
<nav1><a href="inform6.html" title="информация">кухня</a></nav1>
<nav1><a href="inform5.html" title="информация">балкон</a></nav1>
</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="timeserv1">:</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>
<p><a href="timer.html" title="таймер">таймер</a></p>
<p><a href="akva.html" title="аквариум">аквариум</a></p>
</div>
</div>
<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> &deg;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> &percnt;</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> &deg;C</span></p><p class="packet">Battery <span id="batz"></span></p>
</div>
<div class="card humidity">
<h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="h1"></span> &percnt;</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> &deg;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> &percnt;</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> &deg;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> &percnt;</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> &deg;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> &percnt;</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> &deg;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> &percnt;</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> &deg;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> &percnt;</span></p><p class="packet">Time <span id="timeul1"></span></p>
</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 id="clear">
<p></p>
<p></p>
<p></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.label3 === 'count2') {
document.getElementById("timeserv1").innerHTML = data.value;
};
if (data.id === '0') {
document.getElementById("t1").innerHTML = data.temperature;
document.getElementById("h1").innerHTML = data.humidity;
document.getElementById("batz").innerHTML = data.batz;
document.getElementById("tim3").innerHTML = data.tim3;
document.getElementById("dataserv").innerHTML = data.dataserv;
document.getElementById("munthserv").innerHTML = data.munthserv;
document.getElementById("weekserv").innerHTML = data.weekserv;
};
if (data.id === '2') {
document.getElementById("tkom1").innerHTML = data.tkom1;
document.getElementById("hkom1").innerHTML = data.hkom1;
document.getElementById("batkom1").innerHTML = data.batkom1;
document.getElementById("timekom1").innerHTML = data.timekom1;
document.getElementById("tkom2").innerHTML = data.tkom2;
document.getElementById("hkom2").innerHTML = data.hkom2;
document.getElementById("batkom2").innerHTML = data.batkom2;
document.getElementById("timekom2").innerHTML = data.timekom2;
document.getElementById("tkor").innerHTML = data.tkor;
document.getElementById("hkor").innerHTML = data.hkor;
document.getElementById("batkor").innerHTML = data.batkor;
document.getElementById("timekor").innerHTML = data.timekor;
document.getElementById("tbal").innerHTML = data.tbal;
document.getElementById("hbal").innerHTML = data.hbal;
document.getElementById("batbal").innerHTML = data.batbal;
document.getElementById("timebal").innerHTML = data.timebal;
document.getElementById("tul1").innerHTML = data.tul1;
document.getElementById("hul1").innerHTML = data.hul1;
document.getElementById("osv1").innerHTML = data.osv1;
document.getElementById("timeul1").innerHTML = data.timeul1;
};
}
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>