ArduinoからDHT11の温度と湿度データをMQTTで送信してfreeboardに表示する

ArduinoとDHT11デジタル温度センサーからMeshbluのMQTTブローカーにメッセージをpublishするサンプルを作成しました。またWebブラウザから直接メッセージを取得することもできました。これらを組み合わせてリアルタイムにセンシングデータをモニタリングするダッシュボードをfreeboardで作ってみます。

データソース

freeboard-mqtt

最初はfreeboard-mqttを参考にしてPahoのJavaScript Clientをfreeboardのexternal_scriptsに指定する方法を試しました。MeshbluのMQTTブローカーだとうまく動作しません。

freeboardのMeshbluデータソース

freeboardのソースコードを読んでいるとfreeboard.datasources.jsにMeshbluのデータソースが追加されていました。オフィシャルでサポートされているのでうまく行きそうです。

Arduino Unoの準備

スケッチは前回作成作成したコードを使います。DHT11のセンサーはArduinoのPD2に配線します。 WR702NモバイルルーターとEthernetでつなぎインターネットに接続します。

freeboardのインストール

プロジェクト

パブリックのfreeboardにはまだMeshbluのデータソースが追加されていません。ローカルのDockerでfeeboardを起動します。ApachやNginxでも構いませんがテスト用に使っているnode-staticのコンテナとして起動します。

まず適当なディレクトリにプロジェクトを作成します。

$ mkdir -p ~/node_apps/freeboard-static
$ cd !$

publicディレクトリにfreeboardのソースをgit cloneします。

$ git clone https://github.com/Freeboard/freeboard.git public

以下のようなプロジェクト構成になります。publicディレクトリにfreeboadがデプロイされています。

$ tree -L 1 .
.
├── Dockerfile
├── app.js
├── docker-compose.yml
├── package.json
└── public

ソースコード

今回はgoogle/nodejs-runtimeをベースイメージに使います。

~/node_apps/freeboard-static/Dockerfile

FROM google/nodejs-runtime
VOLUME /app/public

コンテナは1つなのでDocker Composeは不要ですが、あとで他のコンテナとオーケストレーションするために最初からDocker Composeにしておきます。

~/node_apps/freeboard-static/docker-compose.yml

freeboard:
  build: .
  ports:
    - 80:8080
  volumes:
    - $PWD/public:/app/public

package.jsonからnode-staticのインストールをします。

~/node_apps/freeboard-static/package.json

{
  "name": "node-static-app",
  "description": "node-static app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "node-static": "0.7.6"
  },
  "scripts": {"start": "node app.js"}
}

メインプログラムです。単純に./publicディレクトリをサーブします。

~/node_apps/freeboard-static/app.js

var static = require('node-static');
var file = new static.Server('./public');

require('http').createServer(function (request, response) {
    request.addListener('end', function () {
        file.serve(request, response);
    }).resume();
}).listen(8080);

console.log("Server running at http://localhost:8080");

Docker Composeからコンテナを起動します。

$ docker-compose up

feeboardの設定

ブラウザからfreeboardを起動しているDockerコンテナに接続します。

Datasourceの追加

DATASOURCES > ADD > TYPE > Octobluを選択します。

UUIDとTOKENはArduinoのスケッチでMQTT publishするときに使った組み合わせを指定します。

Paneの追加

ADD PANE をクリックしてあたらしくPaneを作成します。

作成したPaneの+ボタンをクリックします。DHT11センサーからは湿度と温度を計測しているので、HumidityとTemperatureの2つのWidgetを作成します。

湿度のパーセントはゲージの半円グラフで表示します。VALUEの+DATASOURCEボタンをクリックしてJSONデータから取得するデータを指定します。

温度のCはテキストと折れ線グラフで表示します。

設定をJSON形式で保存

最後にこれまでの設定をJSON形式で保存してローカルにダウンロードします。ブラウザをリロードしても設定は消えてしまいます。次回はLOAD FREEBOARDをクリックしてJSONをアップロードします。

完成

Arduinoからは5秒間隔でDHT11センサーから計測した値をMQTT publishしています。上の工具アイコンをクリックすると編集画面になります。通常はこのダッシュボードの画面を表示します。

masato's web site