Home Made Garbage

Node-RED で UDP受信 & ブラウザ表示 ーエッジAI活用への道 8ー

ホーム
電子工作
Raspberry Pi
IOT
WEB

金魚水槽管理システム作成への道。
現在、お父ちゃんに温度とpHをUDPで飛ばして貰っているので、
それをグラフにするという役割を担いました。

pHセンサを味見 ーエッジAI活用への道 7ー

Node-RED

今回とうとう Node-REDデビューしてみました。

初めは PHP でやろうとしましたが 2~3日試行錯誤しても上手く出来なかったので、Node-RED でやってみたらあっという間に出来て驚き&感動です。

環境

家で稼働している Raspberry Pi 2 サーバ上で動かします。

Node-RED バージョンアップ

Raspberry Pi 2 に入っている Node-RED はバージョンがかなり古いものだったので、バージョンアップしました。

Raspberry PiにおけるNode-REDの活用について – Qiita

インストール完了後、Node-RED が v1.0.3 になりました。
バージョンアップ前に作成したフローも無事残っていました。

※ ホームディレクトリが必要

少し特殊ケースかもしれませんが、最初 bash <(curl ~~  コマンドの後、「/home/アカウント のディレクトリが無い」といったエラーが出てしまいました。

どうも私は自分のアカウント作成時にホームディレクトリを生成するオプションを指定しなかったようです。
こちらを参考にホームディレクトリを作成しました。

Linux – linuxのホームディレクトリが見当たらない|teratail

ディレクトリ作成

所有者変更

ファイルコピー

作成したディレクトリに /etc/skel 配下の3ファイルをコピー

.bash_logout
.bashrc
.profile

UDP受信〜ブラウザ表示のノード

1. UDP受信

「ポート」はUDPが送信されている「1234」を指定し、「出力」は「文字列」を設定

2. debug 

debug ノードを繋げて確認したらちゃんと受け取っている事がわかりました。

受信がノード一発、一瞬で出来て感動!

3. グローバル変数にセット

ページに受け渡すため一旦グローバル変数に格納すると良いとお父ちゃんに教えてもらった

4. http in

表示するためのページを設定
Node-REDのURL/kingyo で見れるように

5. グローバル変数取得

3. でセットしたグローバル変数をここで取得。
温度とpHがカンマ区切りで入ってきているので、カンマで分割し、msgオブジェクトにキーを設定して格納。
このあたりはJavaScriptで書けてやりやすい!

6. 表示用テンプレート

/kingyo に表示する内容を記述
5. で設定したmsg オブジェクト から取得

http response

ここはノードを繋げて中身は特に弄っていません

ブラウザ確認

Node-REDのIP/kingyoにアクセスすると、温度とpHが表示されました

http://192.168.0.XXX:1880/kingyo

これで金魚水槽の温度とpHをブラウザからリアルタイムで確認出来るようになりました。
グラフ化に向けて次は一定期間の値を保持する所までやりたいと思います。

 

UDPって?って所からわからなかったのですが家にあったこちらの本がわかりやすくて良かったです。

挿絵のイラストがかわいく、長女ちゃんが覗き込んで来て「かわいい!ママが読み終わったら私にも読ませて!」と言ってきました🐰

 

 

Related Posts

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください