jQuery UIを使ってphilips hueの操作画面を作成してみる

前回はhueの管理画面を通じてphilips hueのAPIを利用してみましたが、今回は実際にphilips hueの操作画面を作成したいと思います。

ちなみに、プログラムにあまり詳しくないわたくしですので、jQuery UIの恩恵にあずかろうという大方針です。

なお、使用するjQuery UIはjQuery UIの公式サイトにある安定版のv1.11.3を使用しています。

以下サンプルコードです。
なお、今回は1つめのhueのbrightnessを変更するスライダーを作成します。

<!DOCTYPE html>
<html lang="ja-JP">
	<head>
		<meta charset="utf-8">
		<link href="jquery-ui.css" rel="stylesheet">
	</head>
	<body>
		<div id="bri1" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><span class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></span></div>			
	</body>
	<script src="external/jquery/jquery.js"></script>
	<script src="jquery-ui.js"></script>
	<script>

		getHueState();

		<!--hueの現在値を取得。
		hueではjsonpが使えないので、json.phpの中で/api/newdeveloper/lightsの値を一旦取得しています。-->
		function getHueState() {
			$.ajax({
		          async: false,
		          timeout: 30000,
		          url :"http://[host IP]/json.php",
		          dataType : "json",
		          success : function(json) {
		 			setSliderValue(json);
		          }
		  });
		}
		<!--スライダーの初期値を設定-->
		function setSliderValue(json) {
		    var jsStr = JSON.stringify(json);
		    var jsObject = JSON.parse(jsStr);

			eval('var bri1 = jsObject["1"]["state"]["bri"]');
                        
			<!--ここでjQuery UIのスライダーを作成-->
			$('#bri1').slider({
			min: 0,
			max: 255,
			step: 1,
			value: bri1,
			change: function( event, ui ) {
				setBriValue(1, ui.value);
			}
			});
		}

		<!--hueにスライダーの変化の情報を送信-->
		function setBriValue(hueNo,value) {
			var url = "http://[hue IP]/api/newdeveloper/lights/"+hueNo+"/state";
			$.ajax({
		          async: false,
		          timeout: 30000,
		          url :url,
		          dataType:'json',
		          type : 'PUT',
		          data:	'{"bri":' + value + ',"on": true}'
		  });
		}
	</script>
</html>

jQuery UIを使用すると簡単にスライダーが利用できるので、僕でも操作画面を作成することができました。

出来上がったスライダーは↓こんな感じです。