Skip to content

Commit 979e15a

Browse files
cogn99cogn99
authored
Create index.html
1 parent e3f9fc9 commit 979e15a

File tree

1 file changed

+215
-0
lines changed

1 file changed

+215
-0
lines changed

‎template/index.html

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<!DOCTYPE HTML><html>
2+
<head>
3+
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link href="https://fonts.googleapis.com/css2?family=Baloo+2&display=swap" rel="stylesheet">
9+
10+
<link href="https://res.cloudinary.com/dlrdyoxfv/raw/upload/v1646481980/HTN.min_kymfso.css" rel="stylesheet">
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
12+
<title>Demo gi&#7919;a k&#7923;</title>
13+
</head>
14+
<body>
15+
16+
<h1>Demo b&aacute;o c&aacute;o gi&#7919;a k&#7923;</h1>
17+
18+
<img width="300px"src="https://i.ibb.co/4jV8PFm/iot.png" alt="a">
19+
20+
<div class="flex-control">
21+
<div>
22+
<strong>Led 1</strong>
23+
<div class="led-control">
24+
<div class="inline">
25+
26+
<label class="slider0">Ngu&#7891;n</label>
27+
<label class="switch" style="margin-right:55px">
28+
<input id= "led1P" type="checkbox" onchange="power(true)" %phPowerChecked1%>
29+
<span class="slider2"></span>
30+
</label>
31+
32+
<label class="slider0">Nh&#7845;p nh&aacute;y</label>
33+
<label class="switch">
34+
<input id= "led1B" type="checkbox" onchange="blink(true)">
35+
<span class="slider2"></span>
36+
</label>
37+
</div>
38+
39+
40+
<div class="inline">
41+
<span><img src = "https://i.ibb.co/G9b8Sd1/2985062.png" width = "30px"></span>
42+
<input type="range" onchange="updateSliderPWM(this,true)" id="pwmSlider1" min="0" max="100" step="1" class="slider" value=%phBrightness1%>
43+
<span class = "textSliderValue" id="textSliderValue1">%phBrightness1%</span> &#37
44+
</div>
45+
46+
47+
<div class="inline">
48+
<button class="btn btn-info" onclick="sendRGB(true)" id="change_color" role="button"
49+
>&#272;&#7893;i m&agrave;u</button
50+
>
51+
<input style = "background-color: '#%phRGB1%';" value=%phRGB1% class="form-control jscolor" id="rgb1" readonly/>
52+
</div>
53+
</div>
54+
</div>
55+
56+
57+
<div>
58+
<strong>Led 2</strong>
59+
<div class="led-control">
60+
<div class="inline">
61+
62+
<label class="slider0">Ngu&#7891;n</label>
63+
<label class="switch" style="margin-right:55px">
64+
<input id = "led2P"type="checkbox" onchange="power(false)" %phPowerChecked2%>
65+
<span class="slider2"></span>
66+
</label>
67+
68+
<label class="slider0">Nh&#7845;p nh&aacute;y</label>
69+
<label class="switch">
70+
<input id = "led2B" type="checkbox" onchange="blink(false)">
71+
<span class="slider2"></span>
72+
</label>
73+
</div>
74+
75+
76+
<div class="inline">
77+
<span><img src = "https://i.ibb.co/G9b8Sd1/2985062.png" width = "30px"></span>
78+
<input type="range" onchange="updateSliderPWM(this,false)" id="pwmSlider2" min="0" max="100" step="1" class="slider" value=%phBrightness2%>
79+
<span class = "textSliderValue" id="textSliderValue2">%phBrightness2%</span> &#37
80+
</div>
81+
82+
83+
<div class="inline">
84+
<button class="btn btn-info" onclick="sendRGB(false)" id="change_color" role="button"
85+
>&#272;&#7893;i m&agrave;u</button
86+
>
87+
<input style = "background-color: '#%phRGB2%';" value=%phRGB2% class="form-control jscolor" id="rgb2" readonly />
88+
</div>
89+
</div>
90+
</div>
91+
92+
</div>
93+
94+
95+
<script>
96+
97+
var pow1On = "/power1?value=true";
98+
var pow1Off = "/power1?value=false";
99+
var blink1On = "/blink1?value=true";
100+
var blink1Off = "/blink1?value=false";
101+
102+
var pow2On = "/power2?value=true";
103+
var pow2Off = "/power2?value=false";
104+
var blink2On = "/blink2?value=true";
105+
var blink2Off = "/blink2?value=false";
106+
107+
108+
function sendRequest(request) {
109+
var httpRequest = new XMLHttpRequest();
110+
httpRequest.open("GET", request, true);
111+
httpRequest.send();
112+
console.log(request);
113+
}
114+
115+
function updateSliderPWM(element, led1) {
116+
var pwmSliderValue;
117+
var pmwSliderId;
118+
var textSliderValue;
119+
var sliderRequest;
120+
if (led1) {
121+
pmwSliderId = "pwmSlider1";
122+
textSliderValue = "textSliderValue1";
123+
sliderRequest = "/brightness1?value=";
124+
} else {
125+
pmwSliderId = "pwmSlider2";
126+
textSliderValue = "textSliderValue2";
127+
sliderRequest = "/brightness2?value=";
128+
}
129+
130+
pwmSliderValue = document.getElementById(pmwSliderId).value;
131+
document.getElementById(textSliderValue).innerHTML = pwmSliderValue;
132+
133+
sendRequest(sliderRequest + pwmSliderValue);
134+
}
135+
136+
function sendRGB(led1) {
137+
var rgbRequest;
138+
var rgbObj;
139+
var hexV;
140+
if (led1) {
141+
rgbRequest = "/rgb1?value=";
142+
hexV = document.getElementById("rgb1").value;
143+
rgbObj = hexToRGB(hexV);
144+
} else {
145+
rgbRequest = "/rgb2?value=";
146+
hexV = document.getElementById("rgb2").value;
147+
rgbObj = hexToRGB(hexV);
148+
}
149+
var rgbString = "r" + rgbObj.red + "g" + rgbObj.green + "b" + rgbObj.blue;
150+
var hexString = "&hex=" + hexV;
151+
sendRequest(rgbRequest + rgbString + hexString);
152+
}
153+
154+
155+
function power(led1) {
156+
var powerOn;
157+
if(led1){
158+
powerOn = document.getElementById("led1P").checked;
159+
if(powerOn){
160+
sendRequest(pow1On);
161+
}
162+
else{
163+
sendRequest(pow1Off);
164+
}
165+
}
166+
else{
167+
powerOn = document.getElementById("led2P").checked;
168+
if(powerOn){
169+
sendRequest(pow2On);
170+
}
171+
else{
172+
sendRequest(pow2Off);
173+
}
174+
}
175+
176+
177+
if (powerOn && led1 && document.getElementById("led1B").checked) {
178+
sendRequest(blink1On);
179+
}else if(powerOn && !led1 && document.getElementById("led2B").checked){
180+
sendRequest(blink2On);
181+
}
182+
}
183+
184+
function blink(led1) {
185+
if(led1){
186+
if(document.getElementById("led1B").checked){
187+
sendRequest(blink1On);
188+
}
189+
else{
190+
sendRequest(blink1Off);
191+
}
192+
}
193+
else{
194+
if(document.getElementById("led2B").checked){
195+
sendRequest(blink2On);
196+
}
197+
else{
198+
sendRequest(blink2Off);
199+
}
200+
}
201+
}
202+
203+
function hexToRGB(hexColor){
204+
hexColor = parseInt(hexColor,16);
205+
return {
206+
red: (hexColor >> 16) & 0xFF,
207+
green: (hexColor >> 8) & 0xFF,
208+
blue: hexColor & 0xFF,
209+
}
210+
}
211+
</script>
212+
</body>
213+
</html>
214+
215+

0 commit comments

Comments
 (0)