やりたいこと
コロナで自宅にいる時間が増えているので自宅のスマートホーム化を計画しました。
いきなり難しいことはできないため、まずはそれぞれの部屋の温度・湿度を取得して履歴の取得と
携帯からそれぞれの部屋の状態を確認できるシステムを構築しました。
デモ画面
システム構成
ハードウェア
今回は買い物だけではんだ付けは不要です。
No | 名称 | 機能 | 入手先 |
---|---|---|---|
1 | obniz | BLE通信を使いGoveeから温湿度情報を取得、Ambientにデータを出力します | AmazonやSWITCHSCIENSなど |
2 | Govee | BLE温湿度計 | Amazonなど |
3 | Raspberrypi4 | ダッシュボード表示用のWebサーバ | Amazonなど |
No.3のRaspberrypiはHtml+Javascriptファイルを公開するためのWebサーバです。
obnizIDを書いたファイルを公開したくなかったので自宅内にWebサーバを立てましたが、毎回obnizIDを入力していいのであればCloud上にあるサービスを使って公開するのもよいかと思います。
事前準備:Ambientのユーザ登録とチャンネル登録
AmbientはIoTデータの可視化サービスです。8チャンネルまでなら無料で使用できるため、個人のIoT用途にいいサービスです。ユーザ登録をして、今回のプロダクト用にチャンネルの作成をしてください。
ソフトウェア
①履歴取得
obnizのサーバレス機能を使い10分間隔で温湿度の取得します。取得したデータをAmbientへ書き込みを行います。プログラムはAmbientから提供されているJavascriptライブラリ「Ambient-lib」を利用してデータの書込みます。
JavascriptプログラムもAmbientのサンプルとほぼ一緒です。下記プログラムをobniz開発者コンソールのリポジトリに登録し、サーバレスイベントとして実行させています。
サーバレスイベントの制限が「各イベントの実行は1日に150回まで」となっているので、イベントのトリガーは10分間隔(144回/日)としています。
各自の環境に合わせてプログラム定数を書き換えてください。
各自の環境に応じて書き換える部分
const ambientID = Your Channel key;//Ambientのユーザチャネルキー
const ambientRKey = "Your Read Key";//Ambient読込用のキー
const ambientWKey = "Your Write Key";//Ambient書込用のキー
const obnizID = "Your obniz ID";//ObnizのID
Goveeの温湿度計は温度・湿度情報をBLE通信のAdvertised Dataとして送信します。
仕様はここやここで解説されています。
結果的に温度・湿度データのデコーディング部分は下記になります。
アドバタイズドデータから温度・湿度を計算する部分
const buf = peripheral.adv_data[26] * Math.pow(16, 4) + peripheral.adv_data[27] * Math.pow(16, 2) + peripheral.adv_data[28]
let temperature = Math.floor(buf / 1000) / 10;
let humidity = (buf % 1000) / 10;
let power=peripheral.adv_data[29];
プログラム全体(サーバレスイベント)
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.x/obniz.js" crossorigin="anonymous" ></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.10.1/qs.min.js" integrity="sha512-aTKlYRb1QfU1jlF3k+aS4AqTpnTXci4R79mkdie/bp6Xm51O5O3ESAYhvg6zoicj/PD6VYY0XrYwsWLcvGiKZQ==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/ambient-lib@1.0.3/lib/ambient-lib.js"></script>
</head>
<body>
<script>
// インストールされたデバイス情報に書き換わる
const ambientID=Your Channel key;
const ambientRKey="Your Read Key";
const ambientWKey="Your Write Key";
const obnizID="Your obniz ID"
var obniz = new Obniz(obnizID);
obniz.onconnect = async function () {
await obniz.ble.initWait();
var target = {
localNamePrefix:"GVH5075"
};
var setting = {
duration: 60, // 60 sec
}
obniz.ble.scan.onfind = async function (peripheral) {
let name=peripheral.localName;
console.log("Name:"+name);
const buf = peripheral.adv_data[26] * Math.pow(16, 4) + peripheral.adv_data[27] * Math.pow(16, 2) + peripheral.adv_data[28]
let temperature = Math.floor(buf / 1000) / 10;
let humidity = (buf % 1000) / 10;
let power=peripheral.adv_data[29];
//console.log(buf);
//console.log("RSSI:"+peripheral.rssi);
console.log("Temp:"+temperature);
console.log("Humi:"+humidity);
console.log("Power:"+power);
am = new Ambient(ambientID,ambientWKey);
am.send({d1: temperature, d2: humidity,d3:power}, function(response) {
console.log(response.status);
});
if (Obniz.App.isCloudRunning()) {
Obniz.App.done({
status: 'success',
text: `Worked`
})
} else {
alert("Done.")
}
};
obniz.ble.scan.onfinish = async function (peripherals, error) {
//console.log("scan again")
await obniz.ble.scan.startWait(target, setting);
};
await obniz.ble.scan.startWait(target, setting);
};
obniz.onclose = async function() {
};
</script>
</body>
</html>
obnizでサーバレスイベントを設定した手順は以下になります。
- 開発者コンソールにアクセス
- リポジトリをクリック
- 新規作成でタイプをWebApp、ファイル名入力し作成ボタンをクリック
- プログラムを作成 して保存
- 次に、開発者コンソールのサーバレスイベントを選択
- 新規作成で任意の名称、トリガーを「繰返し:10minutes」、実行するアプリケーションに上記で作成したHTMLファイルを指定
- 作成ボタンを押すとサーバレスイベントが出来上がります。
②ダッシュボード
次にダッシュボードを作ります。ダッシュボードは30秒間隔で温湿度計のデータを取得。取得したデータを表示しています。
温湿度計は複数個に対応しています。
開発環境にはビジュアルプログラミングツールNoodlを使い、SPAダッシュボードを作成します。
NoodlプロジェクトをGithubにアップしていますので、Noodl2.2.4以上で読込んで使用してください。
NoodlでUI・アプリの作成
3つのコンポーネントを作成しました。
No | 名称 | 機能 |
---|---|---|
1 | App | ダッシュボード画面アプリ本体 |
2 | GVH5075 | BLE温湿度計GVH5075の表示 |
3 | Indicator | 温度・湿度を表す表示UI部 |
Noodl上でのビジュアルプログラミングコードは下記となります。
ポイントとしてはBLE温湿度計の複数対応の部分です。ObjectノードのIDにBLE機器のLocalNameを入力にしているので、Noodl上でも機器毎(LocalName)に温度・湿度を取得することが可能です。
Transitionノードを使うことで値をゆっくり変化させています。このほうが一瞬で変化するよりも見ていて気持ちいいです。
AppにあるJavascriptノード内のプログラムは下記となります。
Javascriptノードの中身
Node.Inputs = {
ObnizID: 'string',
}
Node.Outputs = {
temperature: "number",
humidity: "number",
power:"number",
rssi: "number",
name: "string",
}
Node.Signals.ScriptLoaded = function () {
var obniz = new Obniz(Node.Inputs.ObnizID);
obniz.onconnect = async function () {
await obniz.ble.initWait();
var target = {
//localName: "GVH5075_XXXX",
localNamePrefix:"GVH5075"
};
obniz.ble.scan.onfind = async function (peripheral) {
Node.Outputs.name=peripheral.localName;
console.log("Name:"+peripheral.localName);
const buf = peripheral.adv_data[26] * Math.pow(16, 4) + peripheral.adv_data[27] * Math.pow(16, 2) + peripheral.adv_data[28]
Node.Outputs.temperature = Math.floor(buf / 1000) / 10;
Node.Outputs.humidity = (buf % 1000) / 10;
Node.Outputs.power=peripheral.adv_data[29];
Node.Outputs.rssi=peripheral.rssi;
//console.log(buf);
//console.log(temperature);
//console.log(pressure);
//console.log("RSSI:"+peripheral.rssi);
};
obniz.ble.scan.onfinish = async function (peripherals, error) {
console.log("scan again")
await obniz.ble.scan.startWait(target);
};
await obniz.ble.scan.startWait(target);
};
}
完成したらNoodl上でDeployすることでHTML+Javascriptファイルが生成されます。
このファイルをWebサーバ上に配置することでブラウザからダッシュボードを確認することができます。
動作確認
準備ができたので動作確認をしてみました。
①サーバレスイベントが上手く実行されると、実行結果に時間が表示されます。
②のダッシュボードの確認はファイルを配置したWebサーバにアクセスして確かめてください。
注 ①②はともに同じobnizに接続しに行くため同時には利用できません。
そのため②のダッシュボードを表示している間は10分間隔で起動する①の履歴送信ができなくなります。
まとめ
これで各部屋の温湿度を取得できるようになりました。今回はBLE通信を使ったので半田付けも不要でお手軽にIoTを始められる方法だと思います。
今後はこのデータを使ってLINEへの通知や空いているobnizのIOポートを使った出力を行い、スマートホーム化をさらに進めていきたいです。
-
Miyp
さんが
2021/05/13
に
編集
をしました。
(メッセージ: 初版)
-
Miyp
さんが
2021/05/13
に
編集
をしました。
-
Miyp
さんが
2021/05/13
に
編集
をしました。
-
Miyp
さんが
2021/05/16
に
編集
をしました。
ログインしてコメントを投稿する