Kadecot WebSocket APIを使用して家電（エミュレータ）の状態を表示＆操作する方法②－Webリモコン作成編
前回に引き続き、今回はエミュレータの状態を取得＆操作するWebリモコンの作成方法になります。
ブラウザからアクセスして使用します。
使用言語はHTMLとJavaScriptとなります。今回JQueryも使っていますが、使わなくてもOKです。
また、以下のライブラリを使用します。
- WebSocket API
１．API生成ツールを使用し、雛形を作成
ブラウザで、
http://app.kadecot.net/Apps/APITool/
の末尾にGetパラメータとしてkitにKadecotサーバのIPアドレスをセットします。
|
1 |
http://app.kadecot.net/Apps/APITool/?kit=[KadecotIP] |
すると、表示された画面下部の「WAMP standard initialization code」欄に雛形が作成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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でバイナリを扱うために
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
温度取得に関しては、実機で行うと変化があったときに返されるようですが、エミュレータでログを確認する限り、セットした温度は変わりませんが、一定の時間間隔で返されているようです。
扇風機のスイッチに関しては、ON押下でeclipseのコンソールに「Fan ON!」と出力されます。
ITエンジニア募集中！
キュアコード株式会社はITエンジニアを募集しております。少人数の職場なので、上流・下流やサーバー・クライアント対応の垣根なく、あなたの強みを活かしながら いろいろなことにチャレンジ可能です。エンジニアとしての未経験の方、経験が少ない方も歓迎しています。
下記よりITエンジニア募集の採用情報をご覧いただけます。
関連記事
Kadecot WebSocket APIを使用して家電（エミュレータ）の状態を表示＆操作する方法①－エミュレータ作成編KadecotのWebSocket APIを使ってエミュレータや実機の家電の状態を表示したり、操作し […]
