88 lines
2.5 KiB
Plaintext
88 lines
2.5 KiB
Plaintext
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="power">
|
|
<button class="button" onclick="toggle_power()">Toggle power</button>
|
|
</div>
|
|
<div style="height: 7%;"></div>
|
|
<div class="brightness">
|
|
<div class="slidecontainer">
|
|
<input id="brightness" type="range" min="0" max="255" value="200" class="slider" id="myRange">
|
|
</div>
|
|
</div>
|
|
<div style="height: 7%;"></div>
|
|
<div class="colour">
|
|
<div class="slidecontainer">
|
|
<input id="colour" type="range" min="0" max="360" value="180" class="slider" id="myRange">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<script>
|
|
var power_state = true;
|
|
var brightness_state = Number(document.getElementById("brightness").value)
|
|
var colour_state = Number(document.getElementById("colour").value)
|
|
|
|
function toggle_power() {
|
|
power_state = !power_state
|
|
console.log('clickled');
|
|
update_strip()
|
|
}
|
|
|
|
let ib = document.getElementById("brightness")
|
|
let ic = document.getElementById("colour")
|
|
|
|
// use 'change' instead to see the difference in response
|
|
ib.addEventListener('input', function() {
|
|
update_strip()
|
|
pausecomp(50)
|
|
}, false);
|
|
|
|
ic.addEventListener('input', function() {
|
|
update_strip()
|
|
pausecomp(50)
|
|
}, false);
|
|
|
|
function update_strip() {
|
|
brightness_state = Number(document.getElementById("brightness").value)
|
|
colour_state = Number(document.getElementById("colour").value)
|
|
fetch("/setlight", {
|
|
method: 'POST',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
state: power_state,
|
|
brightness: brightness_state,
|
|
color: colour_state
|
|
})
|
|
})
|
|
.then((response) => response.json())
|
|
.then((json) => {
|
|
console.log(json)
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
function pausecomp(millis) {
|
|
var date = new Date();
|
|
var curDate = null;
|
|
do {
|
|
curDate = new Date();
|
|
}
|
|
while (curDate - date < millis);
|
|
}
|
|
</script>
|
|
|
|
</html> |