Kadecot　WebSocket APIを使用して家電（エミュレータ）の状態を表示＆操作する方法②－Webリモコン作成編

2015年06月29日
HEMS, JavaScript
HEMS, jQuery, Kadecot, OpenECHO, WebSocket

前回に引き続き、今回はエミュレータの状態を取得＆操作するWebリモコンの作成方法になります。ブラウザからアクセスして使用します。使用言語はHTMLとJavaScriptとなります。今回JQueryも使っていますが、使わなくてもOKです。また、以下のライブラリを使用します。

WebSocket API

１．API生成ツールを使用し、雛形を作成 ブラウザで、　http://app.kadecot.net/Apps/APITool/ の末尾にGetパラメータとしてkitにKadecotサーバのIPアドレスをセットします。

http://app.kadecot.net/Apps/APITool/?kit=[KadecotIP]

1	http://app.kadecot.net/Apps/APITool/?kit=[KadecotIP]

すると、表示された画面下部の「WAMP standard initialization code」欄に雛形が作成されます。

var wampClient = new WampClientBrowser() ;
wampClient.addOpenCallback(function(){
	wampClient.sendHello("default", {"roles":{"caller":{},"subscriber":{}}}, function(){
		// request device list
		wampClient.sendCall({}, "com.sonycsl.kadecot.provider.procedure.getDeviceList", null, null, function(ret){
			console.log('Devlist reply! : '+JSON.stringify(arguments)) ;
			//var ds = ret[4].deviceList ;
		});
	} ) ;
} ) ;

wampClient.connect("ws://[KadecotIP]:41314/");

var wampClient = new WampClientBrowser() ;

wampClient.addOpenCallback(function(){

wampClient.sendHello("default", {"roles":{"caller":{},"subscriber":{}}}, function(){

// request device list

wampClient.sendCall({}, "com.sonycsl.kadecot.provider.procedure.getDeviceList", null, null, function(ret){

console.log('Devlist reply! : '+JSON.stringify(arguments)) ;

//var ds = ret[4].deviceList ;

});

} ) ;

wampClient.connect("ws://[KadecotIP]:41314/");

２．リモコンとしてカスタマイズしていく 　上記のソースをhrc.htmlとしてXamppの稼動している箇所に保存し、リモコン用タブレット端末のブラウザで下記にアクセスします。　パスワード入力画面が表示されたら、１で設定したパスを入力すると、リモコンが稼動します。　参考サイト）javascriptでバイナリを扱うために

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/wamp-client.min.js"></script>
    <script type="text/javascript" src="js/wamp-client-browser.js"></script>
    <script>
      $(function(){
        // ★★デバイスIDを定数で指定しておく（デバイスIDが変わった場合、定数を変更する）
        // エミュレータ
        const DEVICE_EMULATOR_THERMOMERTOR = 4;		// 温度計　← Kadecotサーバの TemperatureSensor のデバイスIDをセットします
        const DEVICE_EMULATOR_ELECTRICFAN = 2;		// 扇風機　← Kadecotサーバの VentilationFan のデバイスIDをセットします
        
        
        // Wampでの通信を行う
	var wampClient = new WampClientBrowser() ;
	
	// WebSocketでKadecotに接続する
	wampClient.addOpenCallback(function(){
		
		// つながったら、HELLOメッセージを送る
		wampClient.sendHello("default", {"roles":{"caller":{},"subscriber":{}}}, function(){
			
			// 機器一覧を取得する
			wampClient.sendCall({}, "com.sonycsl.kadecot.provider.procedure.getDeviceList", null, null, function(ret){
				console.log('Devlist reply! : '+JSON.stringify(arguments)) ;
				//var ds = ret[4].deviceList ;
				
			});
			
			
			// 温度計の値を一定の間隔で取得してみる
                        wampClient.sendSubscribe({},"com.sonycsl.kadecot.echonetlite.topic.TemperatureSensor.MeasuredTemperatureValue"
				,function(r){
						console.log('Temperature Value changed : '+JSON.stringify(r));		//ログ出力
						
						// byte配列から摂氏表記に変換
						var arrayBuffer = r[5]['propertyValue'];
						var uint8array = new Uint8Array(arrayBuffer);
						var value = (uint8array[0] << 8) + uint8array[1];
						if(value & 0x8000){
						    value = -((value - 1) ^ 0xffff);    //2の補数計算
						}
						value = value * 1/10;
						// 小数点以下第1位まで表示したいので、割り切れた（整数の）とき無理やりつけます。
						var valstr = String(value)
						if (!valstr.match(/\./)) {
							valstr = valstr + '.0';
						}
						
						if (!valstr == "") {
							valstr = valstr + '℃';
						}
						
						// エミュレータの値を表示
						if(r[3]['deviceId'] == DEVICE_EMULATOR_THERMOMERTOR){
							$('#temperature_emu').html(valstr);
						}
				}
				,function(){
					console.log('Subscribed : '+JSON.stringify(arguments));
				}
			);
			
　　　　　　　　　　　　
　　　　　　　　　　　　// 扇風機(emu)のスイッチの状態を取得してみる
　　　　　　　　　　　　wampClient.sendCall({"deviceId":DEVICE_EMULATOR_ELECTRICFAN}, "com.sonycsl.kadecot.echonetlite.procedure.get", [], {"propertyName":"OperationStatus"},
　　　　　　　　　　　　	function(r){
　　　　　　　　　　　　		switch (r[4]['propertyValue'][0]){
　　　　　　　　　　　　		
　　　　　　　　　　　　			case 48:
　　　　　　　　　　　　				$('#on_fan').prop('checked', true);
　　　　　　　　　　　　				break;
　　　　　　　　　　　　			case 49:
　　　　　　　　　　　　				$('#off_fan').prop('checked', true);
　　　　　　　　　　　　				break;
　　　　　　　　　　　　		}
　　　　　　　　　　　　	}
　　　　　　　　　　　　);
		} ) ;
	} ) ;
	
	// WebSocket接続を開始
	// ★★KadecotサーバのIPアドレスを指定します　↓ (ポートは固定)
	wampClient.connect("ws://[KadecotIP]:41314/","com.sonycsl.kadecot");
	
    	
    	$('#off_fan').click(function(){
    		// 扇風機（emu）のスイッチを消してみる
    		wampClient.sendCall({"deviceId":DEVICE_EMULATOR_ELECTRICFAN}, "com.sonycsl.kadecot.echonetlite.procedure.set", [], {"propertyName":"OperationStatus","propertyValue":[49]});
    	});
    	
    	$('#on_fan').click(function(){
    		// 扇風機（emu）のスイッチをつけてみる
    		wampClient.sendCall({"deviceId":DEVICE_EMULATOR_ELECTRICFAN}, "com.sonycsl.kadecot.echonetlite.procedure.set", [], {"propertyName":"OperationStatus","propertyValue":[48]});
    	});
    }) ;
    
    </script>
</head>
<body>
    <h1>HEMS WEB リモコン</h1>
    <div id="devices"></div>
    <div id="result_box">
    	<table id="result_table">
    		<tr>
    			<td><span class="thermometer">室温</td><td><span class="value" id="temperature_emu"></span></td>
    		</tr>
    		<tr>
    			<td><span class="fan">扇風機</span></td>
    			<td>
	                        <input type="radio" name="fanswitch" id="on_fan" value="1"/>
	                        <label for="on_fan" data-label="ON">ON</label>
	                        <input type="radio" name="fanswitch" id="off_fan" value="0" />
	                        <label for="off_fan" data-label="OFF">OFF</label>
	                </td>
    		</tr>
    	</table>
    </div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<!DOCTYPE html>

<html>

<head>

$(function(){

// ★★デバイスIDを定数で指定しておく（デバイスIDが変わった場合、定数を変更する）

// エミュレータ

const DEVICE_EMULATOR_THERMOMERTOR = 4; // 温度計　← Kadecotサーバの TemperatureSensor のデバイスIDをセットします

const DEVICE_EMULATOR_ELECTRICFAN = 2; // 扇風機　← Kadecotサーバの VentilationFan のデバイスIDをセットします

// Wampでの通信を行う

var wampClient = new WampClientBrowser() ;

// WebSocketでKadecotに接続する

wampClient.addOpenCallback(function(){

// つながったら、HELLOメッセージを送る

wampClient.sendHello("default", {"roles":{"caller":{},"subscriber":{}}}, function(){

// 機器一覧を取得する

wampClient.sendCall({}, "com.sonycsl.kadecot.provider.procedure.getDeviceList", null, null, function(ret){

console.log('Devlist reply! : '+JSON.stringify(arguments)) ;

//var ds = ret[4].deviceList ;

});

// 温度計の値を一定の間隔で取得してみる

wampClient.sendSubscribe({},"com.sonycsl.kadecot.echonetlite.topic.TemperatureSensor.MeasuredTemperatureValue"

,function(r){

console.log('Temperature Value changed : '+JSON.stringify(r)); //ログ出力

// byte配列から摂氏表記に変換

var arrayBuffer = r[5]['propertyValue'];

var uint8array = new Uint8Array(arrayBuffer);

var value = (uint8array[0] << 8) + uint8array[1];

if(value & 0x8000){

value = -((value - 1) ^ 0xffff); //2の補数計算

}

value = value * 1/10;

// 小数点以下第1位まで表示したいので、割り切れた（整数の）とき無理やりつけます。

var valstr = String(value)

if (!valstr.match(/\./)) {

valstr = valstr + '.0';

}

if (!valstr == "") {

valstr = valstr + '℃';

}

// エミュレータの値を表示

if(r[3]['deviceId'] == DEVICE_EMULATOR_THERMOMERTOR){

$('#temperature_emu').html(valstr);

}

,function(){

console.log('Subscribed : '+JSON.stringify(arguments));

}

);

　　　　　　　　　　　　// 扇風機(emu)のスイッチの状態を取得してみる

　　　　　　　　　　　　wampClient.sendCall({"deviceId":DEVICE_EMULATOR_ELECTRICFAN}, "com.sonycsl.kadecot.echonetlite.procedure.get", [], {"propertyName":"OperationStatus"},

　　　　　　　　　　　　 function(r){

　　　　　　　　　　　　 switch (r[4]['propertyValue'][0]){

　　　　　　　　　　　　 case 48:

　　　　　　　　　　　　 $('#on_fan').prop('checked', true);

　　　　　　　　　　　　 break;

　　　　　　　　　　　　 case 49:

　　　　　　　　　　　　 $('#off_fan').prop('checked', true);

　　　　　　　　　　　　 break;

　　　　　　　　　　　　 }

　　　　　　　　　　　　);

} ) ;

// WebSocket接続を開始

// ★★KadecotサーバのIPアドレスを指定します　↓ (ポートは固定)

wampClient.connect("ws://[KadecotIP]:41314/","com.sonycsl.kadecot");

$('#off_fan').click(function(){

// 扇風機（emu）のスイッチを消してみる

wampClient.sendCall({"deviceId":DEVICE_EMULATOR_ELECTRICFAN}, "com.sonycsl.kadecot.echonetlite.procedure.set", [], {"propertyName":"OperationStatus","propertyValue":[49]});

});

$('#on_fan').click(function(){

// 扇風機（emu）のスイッチをつけてみる

wampClient.sendCall({"deviceId":DEVICE_EMULATOR_ELECTRICFAN}, "com.sonycsl.kadecot.echonetlite.procedure.set", [], {"propertyName":"OperationStatus","propertyValue":[48]});

});

}) ;

</script>

</head>

<body>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

</body>

</html>

温度取得に関しては、実機で行うと変化があったときに返されるようですが、エミュレータでログを確認する限り、セットした温度は変わりませんが、一定の時間間隔で返されているようです。扇風機のスイッチに関しては、ON押下でeclipseのコンソールに「Fan ON!」と出力されます。

Kadecot　WebSocket APIを使用して家電（エミュレータ）の状態を表示＆操作する方法①－エミュレータ作成編 ifconfig up で SIOCSIFFLAGS: Cannot assign requested address エラー

Kadecot　WebSocket APIを使用して家電（エミュレータ）の状態を表示＆操作する方法②－Webリモコン作成編

コメントを残すコメントをキャンセル

キュア子の紹介

人気記事ランキング

新着記事

カテゴリー

Kadecot WebSocket APIを使用して家電（エミュレータ）の状態を表示＆操作する方法②－Webリモコン作成編

関連記事

コメントを残す コメントをキャンセル

キュア子の紹介

人気記事ランキング

新着記事

カテゴリー

Kadecot　WebSocket APIを使用して家電（エミュレータ）の状態を表示＆操作する方法②－Webリモコン作成編

コメントを残すコメントをキャンセル