Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Philips Hue Control (jQuery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Philips Hue Control</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
var apiBaseUrl = null;
var username = "newdeveloper";
// onLoad
$.getJSON("https://www.meethue.com/api/nupnp", function(data) {
console.log(data);
var internalIpAddress = data[0].internalipaddress;
apiBaseUrl = "http://" + internalIpAddress + "/api/" + username;
console.log("onLoad - api url: " + apiBaseUrl);
getLights();
});
var getLights = function() {
$.getJSON(apiBaseUrl, function(data) {
var lights = data["lights"];
$.each(lights, function(index, light) {
var template = $("#light-template").clone();
template.removeAttr("id");
template.css("display", "block");
template.data("id", index);
template.find(".name").text(light["name"]);
template.find(".brightnessSlider").val(light["state"]["bri"]);
template.find(".hueSlider").val(light["state"]["hue"]);
$("#lights").append(template);
console.log(index + ": " + JSON.stringify(light));
});
});
};
var setLightState = function(lightId, lightState) {
var apiUrl = apiBaseUrl + "/lights/" + lightId + "/state";
$.ajax({
url: apiUrl,
type: "PUT",
data: JSON.stringify(lightState)
});
};
$(document).on("input", ".hueSlider", function(e) {
var hue = $(this).val() / 182;
var sat = "100%";
var light = "50%";
var lightState = {"hue": parseInt($(this).val()), "sat": 254};
setLightState($(this).parent().data("id"), lightState);
$("body").css("background-color", "hsl(" + [hue, sat, light].join(',') + ")");
});
$(document).on("input", ".brightnessSlider", function(e) {
var lightState = {"on": true, "bri": parseInt($(this).val())};
if ($(this).val() <= 0) {
lightState["on"] = false;
} else {
lightState["on"] = true;
}
setLightState($(this).parent().data("id"), lightState);
});
});
</script>
<style type="text/css">
.light {
clear: both;
}
.light input {
clear: both;
}
</style>
</head>
<body>
<div id="lights">
<div id="light-template" class="light" data-id="1" style="display: none;">
<span class="name">Light</span><br />
<input class="hueSlider" type="range" value="0" min="0" max="65535" />
<input class="brightnessSlider" type="range" value="0" min="0" max="254" />
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment