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.
289 lines
10 KiB
289 lines
10 KiB
|
|
<!DOCTYPE HTML><html>
|
|
|
|
<head>
|
|
<title>ESP-NOW DASHBOARD</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
|
<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">
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="content1">
|
|
<div class="topnav">
|
|
<p><h3>ESP-Домашний сервер</h3><span class="data"></span><span id="dataserv">%dataserv%</span></p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="top2">
|
|
|
|
<nav1><a href="index.html" title="главное меню"> Главное меню </a></nav1>
|
|
|
|
<nav1><a href="setting.html" title="настройки"> настройки </a></nav1>
|
|
|
|
<nav1><a href="inform.html" title="информация"> информация </a></nav1>
|
|
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<div id="contentinfo">
|
|
<h1>Таймер</h1>
|
|
<div class="cards">
|
|
|
|
|
|
<div class="card but">
|
|
<p><span id="timer1">%timer1%</span> минут</p>
|
|
<p><input type="range" onmousechange="updateSliderTimer1(this)" onchange="updateSliderTimer1(this)" oninput="updateSliderTimer1(this)" id="Timer_slider1" min="0" max="120" value="%timer1%" step="5" class="slider2"></p>
|
|
%BUTTONPLACEHOLDER1%
|
|
</div>
|
|
|
|
<div class="card but">
|
|
<p><span id="timer2">%timer2%</span> минут</p>
|
|
<p><input type="range" onmousechange="updateSliderTimer2(this)" oninput="updateSliderTimer2(this)" onchange="updateSliderTimer2(this)" id="Timer_slider2" min="0" max="120" value="%timer2%" step="5" class="slider2"></p>
|
|
%BUTTONPLACEHOLDER2%
|
|
</div>
|
|
|
|
<div class="card but">
|
|
%BUTTONPLACEHOLDER3%
|
|
</div>
|
|
<div class="card but">
|
|
%BUTTONPLACEHOLDER4%
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="clear">
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="top">
|
|
<font size="2" > </font>
|
|
<font color="#CF7071" size="3"><span id="timeserv1">0:00</span></font>
|
|
</div>
|
|
|
|
|
|
<div id="clear">
|
|
<p></p>
|
|
<p></p>
|
|
<p></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
function toggleCheckbox(element) {//вкл чекбокса передть на сервер (element.id номер бокса)состояние(state=1или0)
|
|
var xhr = new XMLHttpRequest();
|
|
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); }
|
|
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
|
|
xhr.send();
|
|
}
|
|
|
|
|
|
|
|
|
|
setInterval(function ( ) {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {//Если readyState равно 4, это означает, что запрос выполнен
|
|
var inputChecked;
|
|
//cостояние чекбокса передается строкой типа 101 те 1й-вкл 2й-выкл 3й-вкл
|
|
response=Number(this.responseText)//далее расшифровуем строку
|
|
if( response-99 >0)//1xx
|
|
{inputChecked = true;
|
|
document.getElementById("4").checked = inputChecked;//состояние чекбокса
|
|
// 110 100 111 101
|
|
if( response-109 >0)
|
|
{inputChecked = true;
|
|
document.getElementById("26").checked = inputChecked;//состояние чекбокса
|
|
//10 11
|
|
if( response-110 >0)//10 11
|
|
{inputChecked = true;
|
|
document.getElementById("27").checked = inputChecked;//состояние чекбокса
|
|
document.getElementById("55").checked = inputChecked;//состояние чекбокса
|
|
}
|
|
else
|
|
{inputChecked = false;
|
|
document.getElementById("27").checked = inputChecked;//состояние чекбокса
|
|
document.getElementById("55").checked = inputChecked;//состояние чекбокса
|
|
}
|
|
|
|
}
|
|
else
|
|
{inputChecked = false;
|
|
document.getElementById("26").checked = inputChecked;//состояние чекбокса
|
|
if( response-100 >0)//10 11
|
|
{inputChecked = true;
|
|
document.getElementById("27").checked = inputChecked;//состояние чекбокса
|
|
document.getElementById("55").checked = inputChecked;//состояние чекбокса
|
|
}
|
|
else
|
|
{inputChecked = false;
|
|
document.getElementById("27").checked = inputChecked;//состояние чекбокса
|
|
document.getElementById("55").checked = inputChecked;//состояние чекбокса
|
|
}
|
|
}
|
|
}
|
|
else//000
|
|
{ inputChecked = false;
|
|
document.getElementById("4").checked = inputChecked;//состояние чекбокса
|
|
// 10 11 01 00
|
|
if( response-9 >0)
|
|
{inputChecked = true;
|
|
document.getElementById("26").checked = inputChecked;//состояние чекбокса
|
|
if( response-10 >0)
|
|
{inputChecked = true;
|
|
document.getElementById("27").checked = inputChecked;//состояние чекбокса
|
|
document.getElementById("55").checked = inputChecked;//состояние чекбокса
|
|
|
|
}
|
|
else
|
|
{inputChecked = false;
|
|
document.getElementById("27").checked = inputChecked;//состояние чекбокса
|
|
document.getElementById("55").checked = inputChecked;//состояние чекбокса
|
|
|
|
}
|
|
}
|
|
else
|
|
{inputChecked = false;
|
|
document.getElementById("26").checked = inputChecked;//состояние чекбокса
|
|
if( response >0)
|
|
{inputChecked = true;
|
|
document.getElementById("27").checked = inputChecked;//состояние чекбокса
|
|
document.getElementById("55").checked = inputChecked;//состояние чекбокса
|
|
}
|
|
else
|
|
{inputChecked = false;
|
|
document.getElementById("27").checked = inputChecked;//состояние чекбокса
|
|
document.getElementById("55").checked = inputChecked;//состояние чекбокса
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
};
|
|
xhttp.open("GET", "/state", true);//запрос на сервер о состоянии выключателя
|
|
xhttp.send();
|
|
}, 1000 ) ;//1000 -это раз в 1сек
|
|
|
|
|
|
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("timeserv1").innerHTML =e.data;
|
|
}, false);
|
|
|
|
// source.addEventListener('t10', function(e) {//ремя работы сервера
|
|
// document.getElementById("t10").innerHTML =e.data;
|
|
// }, false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
source.addEventListener('Timer1', function(e) {//время таймера1
|
|
|
|
document.getElementById("Timer_slider1").innerHTML =e.data;
|
|
document.getElementById("timer1").innerHTML = e.data;
|
|
|
|
updateSliderPosition1(e.data);
|
|
}, false);
|
|
|
|
source.addEventListener('Timer2', function(e) {//время таймера2
|
|
document.getElementById("Timer_slider2").innerHTML =e.data;
|
|
document.getElementById("timer2").innerHTML = e.data;
|
|
updateSliderPosition2(e.data);
|
|
}, false);
|
|
|
|
|
|
}
|
|
function updateSliderTimer1(element) {
|
|
var sliderValue1 = document.getElementById("Timer_slider1").value;//В следующей строке отображается текущее значение слайдера по его идентификатору и сохраняется в переменной JavaScript sliderValue
|
|
|
|
document.getElementById("timer1").innerHTML = sliderValue1;//После этого мы устанавливаем метку слайдера (идентификатор которой - timer1) на значение, сохраненное в переменной sliderValue.
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/slider1?value="+sliderValue1, true);
|
|
xhr.send();
|
|
updateSliderPosition1(sliderValue1);
|
|
}
|
|
function updateSliderTimer2(element) {
|
|
|
|
var sliderValue2 = document.getElementById("Timer_slider2").value;
|
|
|
|
document.getElementById("timer2").innerHTML = sliderValue2;
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/slider2?value="+sliderValue2, true);
|
|
xhr.send();
|
|
updateSliderPosition2(sliderValue2);
|
|
}
|
|
|
|
|
|
function updateSliderPosition1(value) {//обновление положения ползунка т1
|
|
const slider = document.getElementById('Timer_slider1');
|
|
slider.value = value;
|
|
}
|
|
function updateSliderPosition2(value) {//обновление положения ползунка т2
|
|
const slider = document.getElementById('Timer_slider2');
|
|
slider.value = value;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|