Obnizでスマホ対応の超お手軽IoT温湿度センサを作ってみた

f:id:karaage:20191025095859p:plain:w640

寝室にスマホで見られる温湿度計が欲しい

　妻から久しぶりのモノづくりリクエストがありました。

「寝室で子供が寝苦しくないか気になるから、スマホで見られる温湿度計作って、すぐに」

「アイアイサー！（最敬礼）」

　というわけで、スマホを使ったIoT温湿度センサを作ってみました。

　寝室には、以前ラズパイで作った見守りカメラが設置してあります（詳細は以下記事参照下さい）。

　最初は、以前にやったようにラズパイとBME280というセンサモジュールを組み合わせて温湿度機能を追加しようかなと思っていました（詳細は、以下記参照下さい）。

　ただ、スマホに対応するとなると、サーバーを用意して、スマホ用の画面を作ったりと結構面倒くさそうです。何より、既に一度似たようなことをやっているので、つまらないです。どうせならちょっと新しいことをやってみたい気がしてきました。

　そこで目についたのが、部屋の片隅に積まれているマイコンの山（積みマイコンマウンテン）です。積みマイコンマウンテンから、今回生贄に捧げられたマイコンは「Obniz」です。遊戯王なら「Obnizを生贄に捧げて、ターンエンド！」です。

　何故このマイコンを選んだかというと、最近大活躍のトボリ先生 (id:toboli)の以下のYouTube動画を見たからです。

　「スマホだけでスマートホームが手軽に出来るって、めちゃ簡単そう！」と思い、今回はObnizを使うことに大決定しました。というか、トボリ先生「子供の科学」に連載とか凄すぎですね…

　ただ、最初に書いておくとこの記事ではスマホだけでのプログラミングはしないで、普通にPCでプログラミングしています（そっちの方が簡単そうだった）のでご承知おき下さい。コードは全部記事で公開しているので、初心者の方でもコードをコピペすれば簡単に実現できるようになっています！

　というわけで、ObnizでIoT温湿度センサを作っていきますので興味ある方は続きをご覧ください。

Obnizを使ってIoT温湿度センサを作る

必要なもの

　ハードウェアとして必要なものを列挙します。

Obniz

Amazonベーシック USBケーブル 0.9m (2.0タイプAオス - マイクロBケーブル) ブラック

出版社/メーカー: Amazonベーシック(AmazonBasics)
メディア: Personal Computers
この商品を含むブログを見る

BME280搭載温湿度・気圧センサモジュールピンヘッダ実装済

出版社/メーカー: スイッチサイエンス(Switch Science)
メディア: おもちゃ＆ホビー
この商品を含むブログを見る

小さいブレッドボード（白）

出版社/メーカー: スイッチサイエンス
メディア: おもちゃ＆ホビー
この商品を含むブログを見る

抵抗キット1/4W (20種計500本入り)

出版社/メーカー: スイッチサイエンス
メディア: エレクトロニクス
この商品を含むブログを見る

HiLetgo® 20個セット 40Pin 2.54mm 単一列端子ピンヘッダーストリップ PBC 1*40 P ピッチ Ardunioに対応 DIYセット [並行輸入品]

出版社/メーカー: HiLetgo
メディア: おもちゃ＆ホビー
この商品を含むブログを見る

普通のジャンパワイヤ(オス?オス)

出版社/メーカー: スイッチサイエンス
メディア: おもちゃ＆ホビー
この商品を含むブログを見る

　センサモジュールとしてはラズパイでも使用したBME280を選びました、とりあえずちょっと試してみたいだけであれば、Obniz、USBケーブル、温湿度センサモジュールだけでも良いのですが、安定して正確に測定しようとすると、ブレッドボードや抵抗等が必要です（詳細は後述します）。

　ただ、ここで紹介しているものを組み合わせれば、半田付けは不要なので、比較的電子工作初心者にも優しめの構成となっています。

Obnizのセットアップ

　最初に、「Obnizって何？」という方は、トボリ先生のありがたい以下記事を読んでおいて下さい。　

　セットアップに関しては、公式の以下チュートリアルをみればとても簡単にセットアップできます。

　使用するセンサは、ラズパイで使ったBME280を使いたかったのでObnizで使用する方法無いか調べたら、公式のチュートリアルにバッチリありました。

　ただ、読むと「ObnizとBME280は直結しないで、ちゃんと抵抗でプルアップして使ってね」と書いてあります。

「うーん、めんどくさい。内蔵プルアップあるって書いてあるし、本当は動くんでしょ？」と思い、漢らしく、以下のように直結して試して見ました。

f:id:karaage:20191015012941j:plain:w640
　漢らしい接続

　とりあえずサンプルの通り、以下のようなサンプルを実行すると、簡単に値が取得できました。

var bme280 = obniz.wired("BME280", {vio:0, vcore:1, gnd:2, csb:3, sdi: 4, sck: 5, sdo:6 });
await bme280.applyCalibration();
const val = await bme280.getAllWait();
console.log(val);

　スマホからでも、同じプログラムで簡単に値が取得できます。これはお手軽です！

　見やすくするために、公式のチュートリアルを参考にしながら、温度・湿度・気圧と簡単なグラフを表示するプログラムを書いてみました。

　プログラムは、以下のような簡単なものです。プログラムのvar obniz = new Obniz("1234-5678");の部分は、自分のObnizのIDに変更しておいて下さい。

<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://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@2.4.0/obniz.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h3>IoT Thermometer</h3>
<strong>temperature:</strong> <strong id="temperature_val"></strong><br />
<strong>humidity:</strong>  <strong id="humidity_val"></strong><br />
<strong>pressure:</strong> <strong id="pressure_val"></strong><br />

<div id="chart"></div>  

<script>
// チャートを用意
var data = [], options = { chart: { type: 'line' }, series: [{ data }] }
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

// デバイスに接続
var obniz = new Obniz("1234-5678");

obniz.onconnect = async function () {
  var bme280 = obniz.wired("BME280", {vio:0, vcore:1, gnd:2, csb:3, sdi: 4, sck: 5, sdo:6 });
  await bme280.applyCalibration();
  await bme280.setIIRStrength(1);

  setInterval(async function(){
    val = await bme280.getAllWait();

    data.push(val.temperature)

    chart.updateSeries([{ data }])
    
    $("#temperature_val").text(val.temperature.toFixed(1))
    $("#humidity_val").text(val.humidity.toFixed(1))
    $("#pressure_val").text(val.pressure.toFixed(1))

    obniz.display.clear();
    obniz.display.print("temperature:" + val.temperature.toFixed(1))
    obniz.display.print("humidity:" + val.humidity.toFixed(1))
    obniz.display.print("pressure:" + val.pressure.toFixed(1))
  }, 1000);
}

</script>
</body>
</html>

　プログラムを実行すると、以下のように温度、湿度、気圧の数字表示と、温度のグラフ表示がされます。

f:id:karaage:20191016012403j:plain:w640 　めっちゃお手軽！

　実はObnizのプログラムは、クラウド上で実行されるので、既にある意味IoT機器になっています。どういうことかというと、実はこの時点ですでにネット経由で世界中のどこからでも、自宅の寝室の温度をスマホでモニタリングすることができるのです。

　これを知ったときは、お手軽さにちょっと感動しました。

問題発生・対策

　これで終わったらめでたしめでたしなのですが、問題が2つ発生しました。

温度が実際の温度より3度くらい高めに出る
動作が不安定で、頻繁にI2C通信に失敗する

　流石にこのままでは使いづらいので調査と対策を行いました。結論として、温度が高くなる原因は、センサがObnizの熱の影響を受けていたのと、通信の失敗は、公式のチュートリアルで推奨されていたプルアップ抵抗を使っていなかったことが原因でした。やっぱり公式の情報通りにやるべきでしたね。

　ということで、ブレッドボードを使って簡単な回路を組みました。

f:id:karaage:20191016021842j:plain:w640
　接続はこんな感じ。詳細は公式のチュートリアルを参照しましょう

　これにより、回路の改善しつつセンサの場所をマイコンから離すことができたので、2つの問題をいっぺんに解決することができました。

　温度も、市販の温度計と0.4℃程度の差と、なかなかの精度です。

f:id:karaage:20191025095859p:plain:w640 　最終的な構成

　運用としては、すでにラズパイで見守りカメラを運用していたので、そのラズパイのUSBポートから電源をとって動かすことにしました。

f:id:karaage:20191019000421j:plain:w640
　運用中の図。イマイチな見た目…

まとめ

　Obnizでお手軽IoT温湿度センサを作って見ました。はじめてまともにObnizを使ってみましたが、ほんとお手軽にスマホ連携のIoT機器が作れて良いなと思います。

　欠点としては、少し難しいことをしようとすると、HTMLとJavascriptの知識が必要になってくるというところでしょうか。私はJavascriptは詳しくないので結構大変でした。Pythonも使えるのですが、ドキュメントがほとんどなかったので、まだまだこれから（もしくは力を入れていない？）な印象を受けます。

　ただ、Obnizはチュートリアルも丁寧ですし、今回は試しませんでしたが、簡単なことならスマホだけでレゴ感覚でブロックを組み合わせてプログラムを作ることもできるので、プログラム初心者からでも楽しみやすいマイコンかなと思います。その他、1Aまで流せるモータードライバが内蔵されているため、モーターを直接繋ぐことができたりと、電子工作初心者のつまずきやすい点に色々配慮されています。

　これ以上手軽にスマホ対応のIoT機器を作れるマイコン、自分が知る限りなかなか無いので、お手軽にIoT電子工作を楽しみたい人にはObnizオススメです。

Obniz

Amazonベーシック USBケーブル 0.9m (2.0タイプAオス - マイクロBケーブル) ブラック