Controlling your Philips hue by javascript is quite simple.
You'll need two things:
- The IP address of your hue bridge
- Your personal ID to the hue bridge
To obtain your ID, use this guide.
Copy the following code to a html-file, and change the 3 "vars" in the top:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Controlling hue</title>
</head>
<body>
<script type="text/javascript">
// See API documentation to retrieve your own ID
// https://www.developers.meethue.com/documentation/getting-started
var hueIP = "x.x.x.x" // Your hue bridge IP
var hueID = "123123123-b1b1b1b" // Get your ID from the hue bridge
var hueLamp = "1" // the lamp to comtrol
function callback() {}
function send(obj) {
var xmlhttp = new XMLHttpRequest();
var url = "http://"+ hueIP +"/api/"+ hueID +"/lights/"+ hueLamp +"/state/";
xmlhttp.open("PUT", url, true, callback);
xmlhttp.setRequestHeader("Content-type", "application/json");
var parameters = JSON.stringify(obj);
xmlhttp.send(parameters);
}
function turnOn() {
send({"on":true})
}
function turnOff() {
send({"on":false})
}
function turnRed() {
send({"colormode": "xy", "xy": [
0.7006,
0.2993
]})
}
function turnGreen() {
send({"colormode": "xy", "xy": [
0.1724,
0.7468
]})
}
function turnBlue() {
send({"colormode": "xy", "xy": [
0.1355,
0.0399
]})
}
function turnPink() {
send({"colormode": "hue", "hue": 25400, "sat": 254})
}
function turnPurple() {
send({"colormode": "hue", "hue": 10400, "sat": 254})
}
function turn50() {
send({"bri": 127})
}
function turn100() {
send({"bri": 254})
}
function turnCool() {
send({"colormode": "ct", "ct": 154})
}
function turnWarm(){
send({"colormode": "ct", "ct": 500})
}
function turnColor() {
send({"effect": "colorloop"})
}
</script>
<h2>On/off:</h2>
<button onclick="javascript:turnOn()">On</button>
<button onclick="javascript:turnOff()">Off</button>
<br>
<h2>Color using xy:</h2>
<button onclick="javascript:turnRed()">Red</button>
<button onclick="javascript:turnGreen()">Green</button>
<button onclick="javascript:turnBlue()">Blue</button>
<br>
<h2>Color using hue:</h2>
<button onclick="javascript:turnPink()">Pink</button>
<button onclick="javascript:turnPurple()">Purple</button>
<br>
<h2>Brightness:</h2>
<button onclick="javascript:turn50()">50%</button>
<button onclick="javascript:turn100()">100%</button>
<br>
<h2>Warm/cold light:</h2>
<button onclick="javascript:turnCool()">Cool</button>
<button onclick="javascript:turnWarm()">Warm</button>
<br>
<!-- <button onclick="javascript:turnColor()">Color loop</button> -->
</body>
</html>
No comments:
Post a Comment