Node-REDによる見える化の基礎

IoT

電気回路

Node-RED

セミナーの目的

1

セミナーの目的

PLC

リレー

見える化

ネットワークリレー

ラズベリーパイ2

セミナーの流れ
1. 電気回路の作成
回路図を見ながら結線をすることで、電気回路の基礎を学びます。

2. LEDの点灯
スイッチの状態の取得し、LEDの点灯をさせることで、Node-REDによるプログラミングの基礎を学びます。

3. スイッチの状態を見える化
スイッチの状態をブラウザ画面に表示させることで、Node-REDによる見える化の基礎を学びます。
3

1.電気回路の作成

電気回路の概要

PLC

リレー

ラズベリーパイLED

指作成する電気回路① スイッチの状態を取り込む② LEDを点灯させる
スイッチ
5

部品についてLED

タクトスイッチ++平面図

回路図

側面図

-回路図

6

回路図
3.3V PowerSW
GPIO20(入力、プルダウン)
LED+

GPIO21(出力)

-330Ω
GND
ラズベリーパイ7

ブレッドボードについて
・ オレンジ色の部分が内部で繋がっています。
・ ジャンパーワイヤーや抵抗などを直接ブレッドボードに挿して使います。
(はんだ付けは不要です)8ラズベリーパイ ピン配置
• Power
3.3V/5V を常時出力するピン。
電池でのプラス極のようなもの。

• Ground
基準電圧との差が0Vであるピン。
電池でのマイナス極のようなもの。

• GPIO
スイッチの状態取得やLEDの点灯など汎用的な入出力を行うためのピン。

• SDA/SCLI2Cと呼ばれるシリアル通信用のピン。

• MOSI/MISO/SCLK/CE
SPIと呼ばれるシリアル通信用のピン。
9

スイッチとLEDの配線スイッチとLEDをラズベリーパイに接続します。
①① 3.3V電源とGroundを接続し①② スイッチ、LED、抵抗を取り付け③③③③ 残りの配線を接続します。

SW

②②②抵
抗LED

配線例

10

2.LEDの点灯

動作の流れ指スイッチON

ラズベリーパイ

LED

Node-REDによるプログラミング

スイッチOFF

ラズベリーパイ

LED
12

Node-RED とは?
Node-REDはフローベースのビジュアルプログラミングツールで、Webブラウザからフローを編集できる。ハードウェアデバイスやAPI、クラウドサービスなどを線で結んでいくため、IoTアプリ開発に使える。
もともとはIBMが開発したものだが、JS Foundationに寄贈されたため、今はOSSとなっている。

Node-REDによるプログラミングを行っていきます。
13

Node-RED 開発画面を表示
Webブラウザを開いて以下のURLにアクセスしてください。

• Webブラウザ- Google Chrome- FireFox• URL
http://(IPアドレス):1880(IPアドレスはラズベリーパイ毎に異なります。)• アクセス後Node-RED開発画面が表示されます。

14

Node-RED 開発画面についてデプロイにより確定
ワークスペース

ドラッグ&ドロップ用意された機能(ノード)15Node-RED 新規ワークスペース①
セミナー用の新規ワークスペースを作成します。

クリック

16

Node-RED 新規ワークスペース②
セミナー用の新規ワークスペースが作成されました。

17

Node-RED 使用するノード各ノードをダブルクリックすることで詳細設定ができます。

項目機能説明RaspberryPi

GPIO
inputGPIOの入力用ノード。
スイッチの状態取得に使用。

RaspberryPi

GPIO
outputGPIOの出力用ノード。
LEDのON/OFFに使用。

共通ノード

デバッグ用のノード。
デバッグ フローを流れるデータの表示に使用。

18

Node-RED ノードの配線
ノードをワークスペースに配置し、ノードの間を線(フロー)で接続します。
データはノードの右から出力され、左から入力されます。

debug
rpi gpio in
rpi gpio out

端子間をドラッグ&ドロップで接続
19

Node-RED ノードの設定①
スイッチの状態を取得する設定を行います。
⑤①① ノードをダブルクリックする。
② 38-GPIO20を選択する。
③ pulldownを選択する。
④ チェックを入れる。
⑤ 完了をクリックする。

②
③
④20

プルアップ/ダウンについてプルアップ/ダウンについて説明します。

プルアップ

プルダウン

3.3V Power

3.3V Power

抵抗GPIO

GPIO
抵抗GND

GND

ラズベリーパイ内部

ラズベリーパイ内部

内部でPowerと接続

内部でGNDと接続21

Node-RED ノードの設定②LEDを点灯させる設定を行います。
④①① ノードをダブルクリックする。

② 40-PIO21を選択する。
③ Digital outputを選択する。
②④ 完了をクリックする。

③22

Node-RED 動作確認①
デプロイにより設定を確定します。

クリック

スイッチ押下によりLEDの点灯を確認してみましょう。
23

Node-RED 動作確認②
debugログにより流れるデータを確認します。

クリック

スイッチ押下により流れるデータを確認してみましょう。
24

Node-RED 動作確認結果
スイッチの押下によりdebugログに数字の0と1が交互に表示されます。

25

3.スイッチの状態を見える化作成する機能
1. スイッチの状態を見える化
スイッチの状態を把握することができます。
例：装置が稼働しているか否かの状態を見える化する。

2. スイッチが押された回数を見える化
スイッチが押された回数を把握することができます。
例：製品が何個製造されたかの状態を見える化する。

3. スイッチが押された回数をグラフ化
スイッチが押された回数の推移を把握することができます。
例：製品製造個数の時間経過による累積回数の変化を見える化する。

27

1.スイッチの状態を見える化
ON
指スイッチON

ラズベリーパイ

モニター

画面にスイッチの状態を表示

OFFスイッチOFF

ラズベリーパイ

モニター
28

2.スイッチが押された回数を見える化
指スイッチON

ラズベリーパイスイッチが押された回数を表示

0

1

2モニター

モニター

モニター

・・・

29

3.スイッチが押された回数をグラフ化
スイッチが押された回数の時間変化を表示
指スイッチON

ラズベリーパイモニター

30

Node-RED ダッシュボード
Webブラウザにより見える化を行うためのライブラリを使用します。
ライブラリ名： node-red-dashboard

31

Node-RED 画面構成について
ダッシュボードの画面構成についてです。

タブ画面

タブ

グループ
テキスト、ボタン等32

Node-RED タブの作成①
セミナー用のタブを作成します。

グラフをクリック

33

Node-RED タブの作成②
セミナー用のタブを作成します。

「+タブ」をクリック

34

Node-RED タブの編集
セミナー用のタブの編集を行います。

「編集」をクリック35

Node-RED タブの名称変更
セミナー用のタブの名称を変更します。

名前を編集して更新

36

Node-RED グループの作成
セミナー用のグループを作成します。

「+グループ」をクリック
37

Node-RED グループの編集
セミナー用のグループの編集をします。

「編集」をクリック38

Node-RED グループの名称変更
セミナー用のグループの名称を変更します。

名前を編集して更新

39

Node-RED 使用するノードスイッチの状態を見える化するためのプログラミングを行います。
各ノードをダブルクリックすることで詳細設定ができます。

項目

ノード機能

説明

機能

スイッチ

フローの分岐処理用ノード。
スイッチの状態による分岐に使用。

機能

チェンジ

フローのデータ変更用ノード。
ON/OFFの文字列変更に使用。

ダッシュボード

テキスト テキスト表示用ノード。
出力画面に表示する文字列表示に使用。

40

Node-RED ノードの配線を追加
ノードをワークスペースに配置し、ノードの間を線(フロー)で接続します。

debug
rpi gpio in

rpi gpio outchangeswitch

text

フローを流れるデータはmsgと名前が付けられています。
41

Node-RED フローを流れるデータフローを流れるデータについて説明します。
ファイルシステム(Windowsなど)

フローを流れるデータ(JSONフォーマット)

フォルダA

msg {} (オブジェクト)

ファイル1(ワード)

payload(文字列型の値)

ファイル2(エクセル)

data(数値型の値)

フォルダB{} obj(オブジェクト)

ファイル3(画像)•boolean(真偽型の値)

オブジェクト (フォルダのようなイメージ)
オブジェクト内には複数の値とオブジェクトを持ちます。

•値 (ファイルのようなイメージ)
数値、文字列などの値を持ちます。
42

Node-RED ノードの設定①－１スイッチの状態で分岐する設定を行います。
①⑦① ノードをダブルクリックする。
② +追加をクリックする。
③ 数値を選択する。（2箇所)④ 数字の0を設定する。

③④⑤ 数字の1を設定する。

③⑤⑥ 最初に合致した～を選択する。
⑦ 完了をクリックする。

②⑥43

Node-RED ノードの設定①－２スイッチの状態で分岐する設定について説明します。

① msg.payloadのデータが② 数字の0と③ 等しい(==)場合は①④ 1番のフロー(上)へ分岐し、③②④⑤ 数字の1と⑥⑤⑦⑥ 等しい(==)場合は⑦ 2番のフロー(下)へ分岐する。
44

Node-RED ノードの設定②－１データ変更する設定を行います。
①④③① ノードをダブルクリックする。
② 対象の値にOFFを設定する。
③ 完了をクリックする。
④ 同様にONを設定する。
②45

Node-RED ノードの設定②－２データ変更する設定について説明します。

① msg.payloadに② OFFという文字列を③ 代入する。
③

①
②46

Node-RED ノードの設定③－１
Webブラウザにスイッチの状態を表示する設定を行います。
①④① ノードをダブルクリックする。
② グループに見える化を設定する。
③ ラベルにスイッチを設定する。
④ 完了をクリックする。

②③47

Node-RED ノードの設定③－２
Webブラウザにスイッチの状態を表示する設定について説明します。

① 選択したタブ、グループの② スイッチというラベルに③ msg.payloadの中身を表示する。

①②③48

Node-RED 動作確認
デプロイにより設定を確定します。

クリック

49

Node-RED 動作確認動作確認を行います。

クリック

スイッチの押下による画面表示の変化を確認しましょう。
50

Node-RED 動作確認結果①作成したタブを選択します。

①クリック

②クリック

51

Node-RED 動作確認結果②スイッチの押下により画面にOFFとONが交互に表示されます。

スイッチを押す

スイッチを離す52Node-RED 使用するノードスイッチの押下回数を見える化するためのプログラミングを行います。
各ノードをダブルクリックすることで詳細設定ができます。

項目

ノード機能

説明機能

ファンクション

プログラミング処理用ノード。
JavaScript(Node.js)が記述可能。
スイッチのカウンタに使用。

ダッシュボード

テキスト テキスト表示用ノード。
出力
画面に表示するテキストに使用。

53

Node-RED ノードの配線の追加
ノードをワークスペースに配置し、ノードの間を線(フロー)で接続します。

debug
rpi gpio in
rpi gpio out

function

switchchange

text

text

54

Node-RED ノードの設定④－１スイッチの押下回数を増加させる設定を行います。
①③① ノードをダブルクリックする。
② コードを入力する。
②③ 完了をクリックする。

次のスライドにコードの詳細を載せています。
55

Node-RED ノードの設定④－２スイッチの押下回数を増加させるコードの詳細です。

コメント

ソースコード(4,6,8,10行目)

56

Node-RED ノードの設定⑥スイッチの押下回数を表示する設定を行います。
①④① ノードをダブルクリックする。
② グループに見える化を設定する。
③ ラベルにカウントを設定する。

②③④ 完了をクリックする。

57

Node-RED 動作確認
デプロイにより設定を確定します。

クリック

スイッチの押下による回数の変化を確認しましょう。
58

Node-RED 動作確認結果
スイッチの押下により画面のカウント数が増加していきます。

スイッチを押して離す

スイッチを押して離す59Node-RED 使用するノードスイッチの押下回数をグラフ化するためのプログラミングを行います。
各ノードをダブルクリックすることで詳細設定ができます。

項目

ノード機能

説明

共通

フロー
開始

手動でのフロー開始、定期実行、起動時の自動実行等のフロー開始用のノード起動時のグラフ初期化に使用。

ダッシュボード

グラフ表示

グラフ表示用ノード。
押下回数の時系列表示に使用。

60

Node-RED ノードの配線の追加
ノードをワークスペースに配置し、ノードの間を線(フロー)で接続します。

debug
rpi gpio in
rpi gpio out

injectchart

functiontextchangeswitchtext

61

Node-RED ノードの設定④－１
Node-REDの起動時にグラフを初期化する設定を行います。
①⑤① ノードをダブルクリックする。
② jsonを設定する。
②③③ []を設定する。

④ チェックをする。
⑤ 完了をクリックする。

④62

Node-RED ノードの設定④－２
Node-REDの起動時にグラフを初期化する設定について説明します。
①① Node-RED起動0.1秒後に② jsonデータ[]を送信する。
②①＊注
・ chartノードは初期化が必要。
・ 初期化の方法はjsonデータ[]を入力。
63

Node-RED ノードの設定⑤－１Webブラウザに累積回数をグラフ表示する設定を行います。
①⑤① ノードをダブルクリックする。
② グループに見える化を設定する。
③ ラベルに累積回数を設定する。

②④ minutesに変更する。

⑤ 完了をクリックする。

③④64

Node-RED ノードの設定⑤－２
Webブラウザに累積回数をグラフ表示する設定について説明します。

① 選択したタブ、グループの② 累積回数というラベルに③ 折れ線グラフで①④ 過去1分間のデータを表示する。
②
③

④65

Node-RED 動作確認
デプロイにより設定を確定します。

クリック

スイッチの押下によるグラフの変化を確認しましょう。
66

Node-RED 動作確認結果
過去1分間の押下回数のグラフ表示と、押下ごとに表示が変化します。

67