見出し画像

Node-REDつかってみた

suo

概要

・ブロックプログラミングの楽しさ知ったのでNode-RED触ってみた。
・インストールして、サンプル動かしてみた
・カメラモジュールを制御して撮影してみた

参考

環境

今回使用したラズパイは Raspberry Pi 3 model B+ です。カメラモジュールをつけました。

※カメラモジュールが有効になるようラズパイをセットアップします。

Node-REDインストールする

$ bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)

インストールしたときの画面

Running Node-RED install for user pi at /home/pi on raspbian


This can take 20-30 minutes on the slower Pi versions - please wait.

 Stop Node-RED                       ✔
 Remove old version of Node-RED      ✔
 Remove old version of Node.js       ✔
 Install Node.js LTS                 ✔   Node v12.18.2   Npm 6.14.5
 Clean npm cache                     ✔
 Install Node-RED core               ✔   1.1.0
 Move global nodes to local          -
 Install extra Pi nodes              ✔
 Npm rebuild existing nodes          -
 Add shortcut commands               ✔
 Update systemd script               ✔


Any errors will be logged to   /var/log/nodered-install.log
All done.
 You can now start Node-RED with the command  node-red-start
 or using the icon under   Menu / Programming / Node-RED
 Then point your browser to localhost:1880 or http://{your_pi_ip-address}:1880

Started  2020年  7月  4日 土曜日 08:47:43 JST  -  Finished  2020年  7月  4日 土曜日 08:51:25 JST

Raspberry Piはメモリが少ないので、Node-REDの基盤のNode.jsプロセスに未使用のメモリを早く解放させます。

$ node-red-pi --max-old-space-size=256


Node-REDコンソールを開いてみる

ブラウザで URL http://localhost:1880/ を開き、コンソールが表示されたら成功です。

画像1

※ ラズパイと同じネットワークにいるパソコンからコンソールを開く場合のURLは http://{ラズパイのIPアドレス}:1880/ です。  

使ってみた(1) 現在時刻を表示してみる

以下サイトを参考にNode-REDで現在時刻を表示します。

inject と debug を中央のエリアにドラッグし、接続します。

画像2

デプロイを実行します。『デプロイが成功しました』と表示されたら成功です。

画像3

右側の▼をクリックし『デバッグメッセージ』をクリックします。

画像4

右側にデバッグ情報が表示されます。

画像5

タイムスタンプのボタンをクリックすると、右側のデバッグ欄に情報が表示されたら成功です。

画像6

デバッグ欄に表示された 1593829211848 が現在時刻の情報です。でも、これではわかりにくいですね。

使ってみた(2) 現在時刻をわかりやすく表示してみる

さきほど作ったフローを少し更新して現在時刻をわかりやすく表示します。function というノードを間に追加します。

画像7

function は、javascriptを記述できるノードです。接続した function ノードをダブルクリックし、function ノードの編集画面 が表示されます。

画像8

表示された function ノードの編集画面に以下を記述し、完了 ボタンをクリックします。

// ペイロードから日付オブジェクトを生成
var date = new Date(msg.payload);
// 日付文字列に変換して再度ペイロードをセット
msg.payload = date.toString();
// 次のノードへmsgオブジェクトを返す
return msg;

これで更新完了です。デプロイボタンをクリックし、デプロイが完了したらタイムスタンプボタンをクリックします。

画像9

デバッグ欄に時刻の情報が表示されたら成功です。
前回：　1593829211848
今回：　Sat Jul 04 2020 11:42:03 GMT+0900
今回は、前回より人が理解しやすい情報が表示されました。

使ってみた(3) 外部からもらった情報を表示してみる

以下を参考に、外部から取得した情報をデバッグ欄に表示してみます。


画像10

ソースです。

[{"id":"ecb17089.54a8f","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"aec88b64.2c0798","type":"inject","z":"ecb17089.54a8f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":380,"y":440,"wires":[["58715bd8.05fea4"]]},{"id":"10a8aaab.028f25","type":"debug","z":"ecb17089.54a8f","name":"debug1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":460,"y":680,"wires":[]},{"id":"58715bd8.05fea4","type":"http request","z":"ecb17089.54a8f","name":"","method":"GET","ret":"txt","paytoqs":"ignore","url":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.csv","tls":"","persist":false,"proxy":"","authType":"","x":390,"y":500,"wires":[["dd27fc44.1ccfd"]]},{"id":"dd27fc44.1ccfd","type":"csv","z":"ecb17089.54a8f","name":"","sep":",","hdrin":true,"hdrout":"none","multi":"one","ret":"\\n","temp":"","skip":"0","strings":true,"include_empty_strings":"","include_null_values":"","x":410,"y":560,"wires":[["10a8aaab.028f25","7967c2ae.e3502c"]]},{"id":"7967c2ae.e3502c","type":"switch","z":"ecb17089.54a8f","name":"","property":"payload.mag","propertyType":"msg","rules":[{"t":"gte","v":"7","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":370,"y":760,"wires":[["557be0f3.28196"]]},{"id":"557be0f3.28196","type":"change","z":"ecb17089.54a8f","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"PANIC!","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":860,"wires":[["a41cc09c.d41f7"]]},{"id":"a41cc09c.d41f7","type":"debug","z":"ecb17089.54a8f","name":"debug2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":400,"y":940,"wires":[]}]

ソースは、Node-REDの『読み込み』からロードできます。

画像11

実行すると、デバッグ欄に2つほど 『PANIC!』 が表示されました。この理由を確認してみます。
まずは、switchノードをダブルクリックして設定を確認します。

画像12

msg.payload.mag が 7 より大きい場合に、1 という判定になるようです。
"msg.payload.magとはなんだ？"について、msg.payloadは、switchノードの1つ前のcsvノードからもらう情報のようです。 mag は、csvノードからもらった情報の mag カラムの情報、ということになるようです。

おさらい
msg.payload : switchノードがcsvノードからもらった情報
msg.payload.mag : csvノードからもらった情報の中のmagカラムの情報

msg.payload.mag の具体的な情報は以下の赤枠になります。赤枠の値で 7以上の値が2つありました、どうやらこれが『PANIC!』が2つ表示された理由のようです。

画像13

『PANIC!』が2つ表示された理由がホントに緑枠の情報なのか、確認してみます。set.msg.payload ノードを以下のように修正し、time カラムの情報が表示されるようにします。

画像14

デプロイ→実行した結果がこちら

画像16

csvと比較すると、mag カラムの値が 7以上の time カラムの情報が表示されています。やはり、『PANIC!』が表示されたのは、この2つの情報が原因だったようです。

画像15

使ってみた(4) カメラモジュールを制御する

ラズパイに接続したカメラで撮影してみます。カメラの制御に関係するノードを追加します。ノードは、パレットの管理で追加します。

画像17

追加するノードはこの2つです。

node-red-contrib-camerapi
node-red-contrib-image-output

『ノードの追加』タブで、追加するノードを検索し、『ノードの追加』ボタンで追加します。

画像18

こーいうの表示された、勇気をもって追加ボタンをクリック

画像19

追加したノードでこのようなフローを作ります。

画像20

フローのJSONはこれ

[{"id":"ecb17089.54a8f","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"80038794.d9e178","type":"inject","z":"ecb17089.54a8f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":410,"y":480,"wires":[["66503927.a01b78"]]},{"id":"66503927.a01b78","type":"camerapi-takephoto","z":"ecb17089.54a8f","filemode":"2","filename":"","filedefpath":"1","filepath":"","fileformat":"jpeg","resolution":"1","rotation":"0","fliph":"0","flipv":"0","brightness":"50","contrast":"0","sharpness":"0","quality":"80","imageeffect":"none","exposuremode":"auto","iso":"0","agcwait":"1.0","led":"0","awb":"auto","name":"","x":680,"y":480,"wires":[["859baedf.02798"]]},{"id":"859baedf.02798","type":"image","z":"ecb17089.54a8f","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":false,"pass":false,"outputs":0,"x":930,"y":480,"wires":[]}]

実行すると、/home/pi/Pictures に画像が出力されました。

pi@raspihoge:~/Pictures $ pwd
/home/pi/Pictures
pi@raspihoge:~/Pictures $ ls
pic_465797b1-27da-426c-9782-31ff5316323e.jpg

出力された画像がこれ。ラズパイに接続したカメラで画像を取得できました。

画像21

画像22

今回は、これでおわり。Node-REDはじめて使いましたが、サクッと使えて楽しかったです。もっと複雑なことも試してみようと思います。

この記事が参加している募集

#カメラのたのしみ方

55,545件

こんな弱小ブログでもサポートしてくれる人がいることに感謝です。