1
0
mirror of https://github.com/balkian/shinesp.git synced 2024-12-22 05:28:12 +00:00
shinesp/index.html
2017-12-18 18:51:27 +01:00

104 lines
3.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Brillo Dashboard</title>
</head>
<body style="text-align:center;">
<script src="jscolor.min.js"></script>
<h2>Set the LED's color</h2>
<label>IP address</label>
<input id="ip-address" type="text" value="http://192.168.1.104" />
<input id="chosen-value" class="jscolor {valueElement:'chosen-value', onFineChange:'setColor(this.rgb[0], this.rgb[1], this.rgb[2])'}" value="000000">
<button onclick="turnOff()">Turn OFF</button>
<button onclick="beatOn()">Beating ON</button>
<button onclick="beatOff()">Beating OFF</button>
<label>Beating period (ms)</label>
<input id="beating-period" type="int" value="2000" />
<button onclick="turnOff()">Turn OFF</button>
<button onclick="setColor(255, 255, 255)">White</button>
<script>
ready = true;
function setColor(red, green, blue) {
if (! ready){
return;
}
ready = false;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Sent");
ready = true;
<!-- document.getElementById("demo").innerHTML = this.responseText; -->
}
};
ip = document.getElementById("ip-address").value ;
xhttp.open("GET", ip + "/color?r="+red+"&g="+green+"&b="+blue, true);
xhttp.send();
};
function turnOff(){
console.log("Turning off");
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Sent off");
ready = true;
};
};
ip = document.getElementById("ip-address").value ;
xhttp.open("GET", ip + "/off", true);
xhttp.send();
}
function beatOn(){
period = document.getElementById("beating-period").value ;
BeatPeriod(period);
return Beat(true);
}
function beatOff(){
return Beat(false);
}
function Beat(b){
var state = "off";
if (b){
state = "on";
}
console.log("Turning beating " + state);
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Sent beating " + state);
ready = true;
};
};
ip = document.getElementById("ip-address").value ;
xhttp.open("GET", ip + "/beat/" + state, true);
xhttp.send();
}
function BeatPeriod(p){
console.log("Setting beating period to: " + p);
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Sent beating period to:" + p);
ready = true;
};
};
ip = document.getElementById("ip-address").value ;
xhttp.open("GET", ip + "/beat/?period=" + p, true);
xhttp.send();
}
</script>
</body>
</html>