Raspberry Pi + Node-RED + ダッシュボード で室内と屋外のコンディションを可視化

“Raspberry Pi + Node-RED + Echo Show 5 + Google Home で「こっちに来て！」メッセージ”
“Raspberry Pi + Node-RED + Google Home で明日の天気を定刻にアナウンス”
“Raspberry Pi + Node-RED + ダッシュボード でお部屋の温度と湿度を可視化”
“最近、”はじめてのNode‐RED (I・O BOOKS) “を読んでみました”の続きです。

 

先日のTALK (“Raspberry Pi + Node-RED + ダッシュボード でお部屋の温度と湿度を可視化“)で、“Node-RED”をインストールした“Raspberry Pi”に接続したDHT11 温度センサー モジュールで計測した室内のコンディションを、ダッシュボードで可視化するところに挑戦しました。

今回のTALKでは、作成したダッシュボードに、野外のコンディションを追加してみようと思います。

 

< Webサービス OpenWeatherMap を利用する>

今回は、”OpenWeatherMap“が提供しているAPIを使って、現在の天気データを取得します。同社のWebサービスは、1分間に60コールまで無料で利用できます。詳しいサービス内容は”Pricing”ページを参照して下さい。

初めて利用する場合は、”Sign Up”ボタンをクリックしてユーザ登録を済ませて下さい。(難しい操作ではないので詳細は割愛します。)

ログインした後、”API”ボタンをクリック、続けて”API Keys”をクリックすると、

Webサービスを利用する際に必要になる”API Key”を”Generate”ボタンをクリックして作成します。作成した”API Key”をメモって下さい。

 

< Node-REDでAPIを実行してみる >

“Node-RED”の前に、”OpenWeatherMap”のAPIについて、基礎的なところを理解しておきます。今回は、数あるなかで、”Current weather data”という現在の天気データを取得するAPIを使います。”OpenWeatherMap”のAPIは”RESTful”なので、Webブラウザで使うURLと同じ形式でリクエストします。

基本形は、次の2つです。

こちらは、都市の名前で天気データをリクエストするURL、

http://api.openweathermap.org/data/2.5/weather?q={city name},{state}&appid={your api key}

こちらは、緯度と経度で天気データをリクエストするURLです。

http://api.openweathermap.org/data/2.5/weather?{lat=&lon=}&appid={your api key}

オプションとして、単位をメートル表記、言語を日本語を設定します。

http://api.openweathermap.org/data/2.5/weather?q={city name}&units=metric&lang=ja&appid={your api key}

 

試しに、Webブラウザで次のURLを打ってみて下さい。JSON形式で天気データが返ってきました。

http://api.openweathermap.org/data/2.5/weather?q=tokyo&units=metric&lang=ja&appid={your api key}

 

それでは、”Node-RED”で”OpenWeatherMap”のAPIを使って、天気データを取得してみましょう。

パレットから”inject”、”http request”、”debug”の各ノードをワークスペースに配置し、”inject”-“http request”-“Google Home Notify”ノードを左から順に接続します。

“inject”ノードはそのまま、”debug”のプロパティ画面を開き、” 対象”を”msgオブジェクト全体”に設定します。

“http request”のプロパティ画面を開き、” URL”欄に、先程、Webブラウザに打ったURLを入力します。

“Node-RED”画面の右上にある”デプロイ”ボタンをクリックした後、”inject”ノードの左端にあるタブをクリックすると、デバッグ画面に東京の天気データが表示されます。

 

< Node-REDにOpenWeatherMapノードをインストールする >

上記の通り、地味にフローを構築していく手もありなのですが、今回は”OpenWeatherMap”天気データの取得にフォーカスした“node-red-node-openweathermap”ノードを使ってみることにします。

 

“パレットの管理”->”ノードを追加”と進み、”node-red-node-openweathermap”を検索し、ノードを追加して下さい。

追加した”openweathermap”ノードをパレットからワークスペースにドラッグ&ドロップし、”inject”、”debug”の各ノードと接続し直します。

“openweathermap”ノードのプロパティ画面は、以下の通り設定し”完了”ボタン、そして”デプロイ”ボタンをクリックします。

“inject”ノードの左端にあるタブをクリックすると、デバッグ画面に東京の天気データが表示されます。

“http request”ノードより、”openweathermap”ノードの方が使い勝手が良さそうなので、今回はこのまま”openweathermap”ノードを使います。

 

フローの完成イメージです。

フローの基本構造は、先日のTALK (“Raspberry Pi + Node-RED + ダッシュボード でお部屋の温度と湿度を可視化“)で温度センサーの計測値を可視化した方法と同じです。

“openweathermap”ノードと接続した”change”ノードでは、例えば、天気データの風向き “payload.winddirection”から後続のノードに渡す”msg.payload”に代入します。

“change”ノードと接続した”dashboard”ノードでは、”change”ノードから受け取った”msg.payload”の内容を、テキストや温度計、コンパスなどで表示しています。

 

ダッシュボードのデザインは、先日の温度センサーと同じタブに、天気データ用のグループを3つ作って配置しました。細かい工夫としては、全体のデザインがしっくりする様に、いくつか”spacer”を追加して位置を微調整しました。

 

出来上がったダッシュボードはこんな感じです。

日の出と日の入りの時刻は、UNIX時間なので、以下のような関数で変換できます。

function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp * 1000);
var hour = a.getHours();
var min = a.getMinutes();
if (min < 10) {min = "0" + min;}
else {min = min;}
var sec = a.getSeconds();
if (sec < 10) {sec = "0" + sec;}
else {sec = sec;}

var time = hour + ':' + min + ':' + sec ;
return time;

 

最後に、自動的に温湿度計の値を更新するようにしておきましょう。

“inject”ノードのプロパティを表示して、

・”Node-RED起動の〜”項目を有効にします。

・”繰り返し”欄を”指定した時間間隔”に設定し、好みのインターバル時間を設定します。

“デプロイ”後に表示されるWeb画面では、指定したインターバルで天気データが自動的に更新されるはずです。

 

また、http://Raspberry PiのローカルIPアドレス:1880/ui

と、Webブラウザでアクセスすれば、ラズパイが起動している限り、いつでもダッシュボードを表示することができます。

 

電子部品ごとの制御を学べる！Raspberry Pi 電子工作 実践講座 改訂第2版 [ 福田和宏 ] 価格：3025円（税込、送料無料) (2020/2/29時点) 楽天で購入

Raspberry Piのはじめ方 （日経BPパソコンベストムック） [ 日経Linux ] 価格：2178円（税込、送料無料) (2020/2/29時点) 楽天で購入

ブラウザでお絵描きI／O！Node-REDで極楽コンピュータ・プログラミング あのラズベリー・パイもこのラズベリー・パイもサクサ [ 桑野雅彦 ] 価格：2200円（税込、送料無料) (2020/2/29時点) 楽天で購入

ホームページ “THE POOH FILES”にも是非お立ち寄り下さい。
“Adobe Stock“でベストショットな写真素材を販売中です。是非ご覧下さい。