thomaspockrandt/philips-hue-control.html

## philips-hue-control.html
<!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>
	<!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>