Node-RED で UDP受信 & ブラウザ表示 ーエッジAI活用への道 8ー
お母ちゃん
2019.12.5
0
0
金魚水槽管理システム作成への道。
現在、お父ちゃんに温度とpHをUDPで飛ばして貰っているので、
それをグラフにするという役割を担いました。
#Maixduino 搭載の #ESP32 で水温とpHをUDP送信#maix #sipeed #エッジAI活用への道 pic.twitter.com/FnngXz3DaY
— HomeMadeGarbage (@H0meMadeGarbage) November 13, 2019
目次
Node-RED
今回とうとう Node-REDデビューしてみました。
初めは PHP でやろうとしましたが 2~3日試行錯誤しても上手く出来なかったので、Node-RED でやってみたらあっという間に出来て驚き＆感動です。
環境
家で稼働している Raspberry Pi 2 サーバ上で動かします。
Node-RED バージョンアップ
Raspberry Pi 2 に入っている Node-RED はバージョンがかなり古いものだったので、バージョンアップしました。
Raspberry PiにおけるNode-REDの活用について – Qiita
|
1 |
bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered) |
インストール完了後、Node-RED が v1.0.3 になりました。
バージョンアップ前に作成したフローも無事残っていました。
※ ホームディレクトリが必要
少し特殊ケースかもしれませんが、最初 bash <(curl ~~ コマンドの後、「/home/アカウント のディレクトリが無い」といったエラーが出てしまいました。
どうも私は自分のアカウント作成時にホームディレクトリを生成するオプションを指定しなかったようです。
こちらを参考にホームディレクトリを作成しました。
Linux – linuxのホームディレクトリが見当たらない｜teratail
ディレクトリ作成
|
1 |
sudo mkdir /home/ユーザ名 |
所有者変更
|
1 |
sudo chown ユーザ名.ユーザ名 /home/ユーザ名 |
ファイルコピー
作成したディレクトリに /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って？って所からわからなかったのですが家にあったこちらの本がわかりやすくて良かったです。
挿絵のイラストがかわいく、長女ちゃんが覗き込んで来て「かわいい！ママが読み終わったら私にも読ませて！」と言ってきました🐰
