2017-12-18 15:49:51 +00:00
|
|
|
<!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">
|
|
|
|
|
|
2017-12-18 17:51:27 +00:00
|
|
|
<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" />
|
2017-12-18 15:49:51 +00:00
|
|
|
<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;
|
|
|
|
|
};
|
|
|
|
|
};
|
2017-12-18 15:50:48 +00:00
|
|
|
ip = document.getElementById("ip-address").value ;
|
|
|
|
|
xhttp.open("GET", ip + "/off", true);
|
2017-12-18 15:49:51 +00:00
|
|
|
xhttp.send();
|
|
|
|
|
}
|
2017-12-18 17:51:27 +00:00
|
|
|
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();
|
|
|
|
|
}
|
2017-12-18 15:49:51 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
