※milkcocoa終了に伴い、BaasをBeeBotteに変更する方法について記載しております。
前回、「(3′)BeeBotte版ArudinoでESP8266のプログラミング」で会議室センサーIoTデバイスへのプログラミングを行いました。
これまでIoTセンサーの製作、IoTサーバのセットアップ、IoTデバイスのプログラミングが完了し、今回は最終回である「JavascriptでIoTセンサーの状態表示サイトの作成」を行います。
1. 会議室使用状況センサーの実装構想（振り返り）
少し目標を変更して、会議室に自作したIoT人感センサーを設置して、会議室センサーの状態を会社のSharePointに表示させることを目標としました。
- マイコンと人感センサーを使って電子工作(IoTデバイス製作)
- センサーデータの保管先IoTサーバのセットアップ（BeeBotte編）
- IoTデバイスである会議室センサーのプログラム修正（BeeBotte編）
- JavaScriptで簡単なページを作成して、IoTサーバの情報を取得しSharePointで表示←今回はこちらの話
2. データ取得のための基本的なAPI
Javascriptでも特に何かダウンロードする必要はなく、直接BeeBotteのサイトから必要なAPIは参照する形で問題ないです。
BeeBotteのサイトのDocumentationのClientAPIやTutorialsを参照して、コーディングしていきます。
3. 今回のデータ取得の仕組み
読み込み方法が少し異なるので前回のmilkcocoa版から仕様を少し変更しました。
会議室センサー側のステータス更新(MQTTでPush)仕様
- センサーがONの状態が6秒続けば、IN USEステータスをサーバに保管
- センサーがOFFの状態が30秒続けば、Vacantステータスをサーバに保管
- ステータスに変化がない場合はセンサーの死活監視用として、60分おきに現状ステータスをサーバに保管
Webサイト側のステータスを取得(ClientAPI)仕様
過去10件分のデータを取得→ ルーム毎に直近１件分のデータを取得かつ、過去70分間のデータを取得→ かつ、過去70分間以内のデータのみを取得
4. Webサイト用プログラムの作成
SharePointでは、HTMLをそのまま設置することが可能です。ただし、拡張子は.htmlではなく、.aspxに変更する必要があります。
4−1. HTML全文
以下、HTML文全文を掲載しますが、#93あたりからのマーカされた部分を各自の環境に合わせて変更する必要があります。
また、マップのPNGイメージファイルは、前回のmilkcocoa版「(5) センサー状態をサイボウズガルーンに表示」を参照してください。
<!DOCTYPE html>
<html>
<head>
<title>Conference Information</title>
<meta charset="UTF-8">
<script>
setTimeout("location.reload()",60000); // １分毎にリロード
</script>
</head>
<body>
<style type="text/css">
.Label_Use {
position: absolute;
display: table;
padding: 5px 5px;
color: white;
background: #0000cd;
}
.Label_Vacant {
position: absolute;
display: table;
padding: 5px 5px;
color: white;
background: #32cd32;
}
.Label_OOS {
position: absolute;
display: table;
padding: 5px 5px;
color: white;
background: #555555;
}
.Label {
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: arial;
font-size: 120%;
}
</style>
<!-- Load Javascript files -->
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://beebotte.com/bbt.js"></script>
<!-- Conf. area map -->
<div class="content-wrap">
<div style="width: 400px">
<img src="./confmap.png" alt="topimg">
<!- 会議室A ->
<div id="CR_A" class="Label_OOS" style="top:51px; left:58px;">
<span style="font-size:150%">会議室A</span><br />
<span id="CR_A1"></span><br />
<span id="CR_A2">Out of</span><br />
<span id="CR_A3">service</span>
</div>
<!- 会議室B ->
<div id="CR_B" class="Label_OOS" style="top:51px; left:162px;">
<span style="font-size:150%">会議室B</span><br />
<span id="CR_B1"></span><br />
<span id="CR_B2">Out of</span><br />
<span id="CR_B3">service</span>
</div>
<!- 会議室C ->
<div id="CR_C" class="Label_OOS" style="top:164px; left:58px;">
<span style="font-size:150%">会議室C</span><br />
<span id="CR_C1"></span><br />
<span id="CR_C2">Out of</span><br />
<span id="CR_C3">service</span>
</div>
<!- 会議室D ->
<div id="CR_D" class="Label_OOS" style="top:164px; left:162px;">
<span style="font-size:150%">会議室D</span><br />
<span id="CR_D1"></span><br />
<span id="CR_D2">Out of</span><br />
<span id="CR_D3">service</span>
</div>
</div>
</div>
<script type="text/javascript">
var room = "";
var stat_room = "";
var today = new Date().getTime();
var one_hour = 70 * 60 * 1000; // 70分のシリアル値取得
//Beebotte settings
var Owner = 'kimamadiy';
var Channel = 'RoomStaus';
var Resource = ['CR_A', 'CR_B', 'CR_C', 'CR_D'];
var bclient = new BBT.Connector({keyId: 'XhlXfsNNKIWCDxknw9FG3lPP', secretKey: 'cU02MgPTipuy05d20yJWF2FxJfc3MEzd'});
Resource.forEach(function(room) {
bclient.readPublicResource({
owner: Owner,
channel: Channel,
resource: room,
limit: 1
}, function(err, datas) {
stat_room = datas[0].data;
if(today - datas[0].ts <= one_hour){
(stat_room=="Vacant")?document.getElementById(room).className="Label_Vacant":(stat_room=="IN USE")?document.getElementById(room).className="Label_Use":document.getElementById(room).className="Label_OOS";
$('#'+room+'1').text(stat_room);
$('#'+room+'2').text(Serial2Date(datas[0].ts));
$('#'+room+'3').text(Serial2Time(datas[0].ts));
}
});
});
function Serial2Date(timestamp){
var d = new Date(timestamp);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
return ( year + '/' + month + '/' + day);
}
function Serial2Time(timestamp){
var d = new Date(timestamp);
var hour = ( d.getHours() < 10 ) ? '0' + d.getHours() : d.getHours();
var min = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes();
var sec = ( d.getSeconds() < 10 ) ? '0' + d.getSeconds() : d.getSeconds();
return ( hour + ':' + min + ':' + sec );
}
</script>
</body>
</html>以上のコードをまずhtml拡張子で保存し、動作確認をしてからaspxに変更し、SharePointのファイルにマップとこのファイルを保管すれば出来上がりです。
5. まとめ
サイボウズガルーン版では、会議室のイメージをクリックするとスケジューラーが開きましたが、Outlookカレンダーに移行してからまだ間も無く研究が必要なので、今回は省略しています。
以上で、BeeBotte版への移植記事は終了となります。
これにより皆さんの業務効率につながれば幸いです。
コメント