const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="data:,">
<title>Контроллер насоса котла</title>
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.4rem;}
p {font-size: 2.2rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.reading {font-size: 1.5rem;}
.topnav {
overflow: hidden;
background-color: #50B8B4;
color: white;
font-size: 1rem;
}
.switch {
position: relative;
display: inline-block;
width: 120px;
height: 68px
}
.switch input {display: none}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px
}
.slider:before {
position: absolute;
content: "";
height: 52px;
width: 52px;
left: 8px;
bottom: 8px;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
border-radius: 68px
}
input:checked+.slider {background-color: #2196F3}
input:checked+.slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px)
}
.slider2 {
-webkit-appearance: none;
margin: 14px;
width: 300px;
height: 20px;
background: #ccc;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
background: #2f4468;
cursor: pointer;
}
.slider2::-moz-range-thumb { width: 30px; height: 30px; background: #2f4468; cursor: pointer; }
.button1 {
position: relative;
left: 10px;
right: 0;
bottom: 6px;
}
.button2 {
position: relative;
left: 0;
right: 20px;
bottom: 6px;
}
}
</style>
</head>
<body>
<div class="topnav">
<h2>Контроллер насоса котла</h2>
</div>
<p class="reading">Время работы: <span id="uptime">%UPTIME%</span> сек</p>
<p><span id="dimmerValue">%DIMMERVALUE%</span> %</p>
<p>
<button class="button1" onclick="decreaseDimmerValue()">-</button>
<input type="range" onchange="updateSliderDimmer(this)" id="dimmerSlider" min="0" max="100" value="%DIMMERVALUE%" step="1" class="slider2">
<button class="button2" onclick="increaseDimmerValue()">+</button>
</p>
<p><label class="switch"><input type="checkbox" onchange="toggleCheckbox(this)" id="output" %BUTTONPLACEHOLDER%><span class="slider"></span></label></p>
<script>
function decreaseDimmerValue() {
var sliderValue = document.getElementById("dimmerSlider").value;
sliderValue--;
document.getElementById("dimmerSlider").value = sliderValue;
document.getElementById("dimmerValue").innerHTML = sliderValue;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
function increaseDimmerValue() {
var sliderValue = document.getElementById("dimmerSlider").value;
sliderValue++;
document.getElementById("dimmerSlider").value = sliderValue;
document.getElementById("dimmerValue").innerHTML = sliderValue;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?state=1", true); console.log("button - нажата");}
else { xhr.open("GET", "/update?state=0", true);console.log("button - отжата");}
xhr.send();
}
function updateSliderDimmer(element) {
var sliderValue = document.getElementById("dimmerSlider").value;
document.getElementById("dimmerValue").innerHTML = sliderValue;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
console.log("Скорость: " + sliderValue);
}
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('uptime', function(e) {
console.log("uptime", e.data);
document.getElementById("uptime").innerHTML = e.data;
}, false);
source.addEventListener('currentSpeed', function(e) {
console.log("currentSpeed", e.data);
//sliderValue = e.data;
document.getElementById("dimmerSlider").value = e.data;
document.getElementById("dimmerValue").innerHTML = e.data;
}, false);
source.addEventListener('motorState', function(e) {
console.log("motorState", e.data);
var inputChecked;
if( e.data == 1){ inputChecked = true; }
else { inputChecked = false; }
document.getElementById("output").checked = inputChecked;
}, false);
}
</script>
</body>
</html>
)rawliteral";
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="data:,">
<title>Контроллер насоса котла</title>
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.4rem;}
p {font-size: 2.2rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.reading {font-size: 1.5rem;}
.topnav {
overflow: hidden;
background-color: #50B8B4;
color: white;
font-size: 1rem;
}
.switch {
position: relative;
display: inline-block;
width: 120px;
height: 68px
}
.switch input {display: none}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px
}
.slider:before {
position: absolute;
content: "";
height: 52px;
width: 52px;
left: 8px;
bottom: 8px;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
border-radius: 68px
}
input:checked+.slider {background-color: #2196F3}
input:checked+.slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px)
}
.slider2 {
-webkit-appearance: none;
margin: 14px;
width: 300px;
height: 20px;
background: #ccc;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
background: #2f4468;
cursor: pointer;
}
.slider2::-moz-range-thumb { width: 30px; height: 30px; background: #2f4468; cursor: pointer; }
.button1 {
position: relative;
left: 10px;
right: 0;
bottom: 6px;
}
.button2 {
position: relative;
left: 0;
right: 20px;
bottom: 6px;
}
}
</style>
</head>
<body>
<div class="topnav">
<h2>Контроллер насоса котла</h2>
</div>
<p class="reading">Время работы: <span id="uptime">%UPTIME%</span> сек</p>
<p><span id="dimmerValue">%DIMMERVALUE%</span> %</p>
<p>
<button class="button1" onclick="decreaseDimmerValue()">-</button>
<input type="range" onchange="updateSliderDimmer(this)" id="dimmerSlider" min="0" max="100" value="%DIMMERVALUE%" step="1" class="slider2">
<button class="button2" onclick="increaseDimmerValue()">+</button>
</p>
<p><label class="switch"><input type="checkbox" onchange="toggleCheckbox(this)" id="output" %BUTTONPLACEHOLDER%><span class="slider"></span></label></p>
<script>
function decreaseDimmerValue() {
var sliderValue = document.getElementById("dimmerSlider").value;
sliderValue--;
document.getElementById("dimmerSlider").value = sliderValue;
document.getElementById("dimmerValue").innerHTML = sliderValue;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
function increaseDimmerValue() {
var sliderValue = document.getElementById("dimmerSlider").value;
sliderValue++;
document.getElementById("dimmerSlider").value = sliderValue;
document.getElementById("dimmerValue").innerHTML = sliderValue;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?state=1", true); console.log("button - нажата");}
else { xhr.open("GET", "/update?state=0", true);console.log("button - отжата");}
xhr.send();
}
function updateSliderDimmer(element) {
var sliderValue = document.getElementById("dimmerSlider").value;
document.getElementById("dimmerValue").innerHTML = sliderValue;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
console.log("Скорость: " + sliderValue);
}
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('uptime', function(e) {
console.log("uptime", e.data);
document.getElementById("uptime").innerHTML = e.data;
}, false);
source.addEventListener('currentSpeed', function(e) {
console.log("currentSpeed", e.data);
//sliderValue = e.data;
document.getElementById("dimmerSlider").value = e.data;
document.getElementById("dimmerValue").innerHTML = e.data;
}, false);
source.addEventListener('motorState', function(e) {
console.log("motorState", e.data);
var inputChecked;
if( e.data == 1){ inputChecked = true; }
else { inputChecked = false; }
document.getElementById("output").checked = inputChecked;
}, false);
}
</script>
</body>
</html>
)rawliteral";