-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.h
116 lines (100 loc) · 3.29 KB
/
index.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"icon\" href=\"data:,\">
<style>
html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}
text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;
.button2 { background-color: #555555; }
.slidecontainer { width: 100%; }
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover { opacity: 1; }
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
</style>
</head>
<body>
<div id="demo">
<h1>The Living Room Blinds are <span id="TILTState">OPEN</span><br></h1>
<button type="button" onclick="sendData(180)">Tilt Up</button><BR>
<button type="button" onclick="sendData(90)">Tilt Open</button><BR>
<button type="button" onclick="sendData(0)">Tilt Down</button><BR>
</div>
<div class="slidecontainer">
<p>Tilt slider A: <span id="sA"></span></p>
<input type="range" min="1" max="180" value="90" class="slider" id="TiltA">
<p>Tilt slider B: <span id="sB"></span></p>
<input type="range" min="1" max="180" value="90" class="slider" id="TiltB">
<p>Tilt slider C: <span id="sC"></span></p>
<input type="range" min="1" max="180" value="90" class="slider" id="TiltC">
</div>
<script>
function sendData(val) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("TILTState").innerHTML = this.responseText;
}
};
xhttp.open("GET", "setTILT?TILTstate="+val, true);
xhttp.send();
}
var sliderA = document.getElementById("TiltA");
var sliderB = document.getElementById("TiltB");
var sliderC = document.getElementById("TiltC");
var outputA = document.getElementById("sA");
outputA.innerHTML = sliderA.value;
sliderA.onchange = function() {
sendCustom(this.id, this.value);
outputA.innerHTML = this.value;
}
var outputB = document.getElementById("sB");
outputB.innerHTML = sliderB.value;
sliderB.onchange = function() {
sendCustom(this.id, this.value);
outputB.innerHTML = this.value;
}
var outputC = document.getElementById("sC");
outputC.innerHTML = sliderC.value;
sliderC.onchange = function() {
sendCustom(this.id, this.value);
outputC.innerHTML = this.value;
}
function sendCustom(slide, val) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(slide).innerHTML = this.responseText;
}
};
xhttp.open("GET", "customTILT?Tnum="+slide+"&Tstate="+val, true);
xhttp.send();
}
</script>
<br>
</body>
</html>
)=====";