Slide 1

Slide 1 text

20211028_ビジュアルプログラミングIoTLT vol.9 Seeed Studio reTerminal に Node-RED 入れて 素敵なタッチスクリーンライフを感じた! ワンフットシーバス 田中正吾

Slide 2

Slide 2 text

私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です!

Slide 3

Slide 3 text

reTerminal という IoT デバイス

Slide 4

Slide 4 text

主な仕様を秋月電子さんでみてみます わたしはこちらで買いました。在庫が AA から A になってて在庫減ってきてるよう。 https://akizukidenshi.com/catalog/g/gM-16904/

Slide 5

Slide 5 text

Seeed 社の Wiki が分かりやすい。とくにこの図。 https://wiki.seeedstudio.com/reTerminal/

Slide 6

Slide 6 text

Raspberry Pi の基本機能に加えて タッチディスプレイと頑丈な筐体! https://wiki.seeedstudio.com/reTerminal/

Slide 7

Slide 7 text

LED・ボタン・光センサー・加速度センサー! https://wiki.seeedstudio.com/reTerminal/

Slide 8

Slide 8 text

工業用のインターフェースや放熱板も完備 https://wiki.seeedstudio.com/reTerminal/

Slide 9

Slide 9 text

たしかに自分でタッチディスプレイ加えて 一部つくることもできるが、コンパクトさすごい その手間全てを考えると 2 万円台はアリだと思う

Slide 10

Slide 10 text

Raspberry Pi には Node-RED が入れやすいので ビジュアルプログラミング環境を作ります

Slide 11

Slide 11 text

ひとまず電源を入れて起動 プリインストールされてるので、いきなり Raspberry Pi!

Slide 12

Slide 12 text

初期ウィザードの Update Software は 落ち着いて Skip します reTerminalの初回セットアップ手順 - Seeed K.K. エンジニアブログ https://lab.seeed.co.jp/entry/2021/10/19/183618

Slide 13

Slide 13 text

Node-RED セットアップ ワンコマンドで最新の Node-RED インストール https://nodered.jp/docs/getting-started/raspberrypi

Slide 14

Slide 14 text

さすがの Raspberry Pi 4 インストールが速い!

Slide 15

Slide 15 text

reTerminal で Node-RED を動かすメモは ブログにもまとめてあります https://www.1ft-seabass.jp/memo/2021/10/25/seeed-studio-reterminal-node-red-install/

Slide 16

Slide 16 text

Node-RED にはダッシュボードという 情報を可視化できる機能が充実してます ボタンでカウント数を増やせる仕組みと、カウント数を示すゲージ

Slide 17

Slide 17 text

こういう可視化するダッシュボードは タッチディスプレイと相性良さそう!

Slide 18

Slide 18 text

reTerminal + Node-RED ダッシュボード

Slide 19

Slide 19 text

こんな仕組みで動いています

Slide 20

Slide 20 text

動かしてみる動画

Slide 21

Slide 21 text

動かしてみるデモ

Slide 22

Slide 22 text

デジタルサイネージといえば やっぱりフルスクリーン起動したいよね

Slide 23

Slide 23 text

普通にブラウザ表示すると おもいきりアドレスバーとか出ちゃう あーパソコンに表示してるんですねえっていう現実に引き戻されるやつ

Slide 24

Slide 24 text

デジタルサイネージといえば やっぱりフルスクリーン起動したいよね 操作に集中するできるという意味の「没入感」を出していきたい

Slide 25

Slide 25 text

すでに別件のサイネージづくりで フルスクリーン起動ナレッジがあったので実装 https://www.1ft-seabass.jp/memo/2021/05/01/raspberry-pi-nodered-exec-chromium-kiosk/

Slide 26

Slide 26 text

こういったコマンドを実行すれば Raspberry Pi でフルスクリーン起動できます 今回は Node-RED ダッシュボードを開く http://localhost:1880/ui を指定 sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod --kiosk --app=http://localhost:1880/ui

Slide 27

Slide 27 text

DISPLAY=":0.0" どのディスプレイに向けるかという指定 sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod --kiosk --app=http://localhost:1880/ui

Slide 28

Slide 28 text

--noerrdialogs --disable-infobars エラーダイアログや上部のアドレスバーなどをOFF sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod --kiosk --app=http://localhost:1880/ui

Slide 29

Slide 29 text

--disable-background-mod バックグラウンドモードを無効して ブラウザタブを全部閉じたら終了するように sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod --kiosk --app=http://localhost:1880/ui

Slide 30

Slide 30 text

--kiosk キオスクモードの指定 sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod --kiosk --app=http://localhost:1880/ui

Slide 31

Slide 31 text

--app=http://localhost:1880/ui で開くURLを指定 sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod --kiosk --app=http://localhost:1880/ui

Slide 32

Slide 32 text

起動コマンドをつくる 今回は http://localhost:1880/ui を指定

Slide 33

Slide 33 text

終了コマンドは pkill -o chromium でできます。 実を言うと、この知見を探すほうが時間がかかった

Slide 34

Slide 34 text

デモしてみます! デスクトップ表示から、Node-RED ダッシュボードのフルスクリーン表示します!

Slide 35

Slide 35 text

タイムスタンプと書かれている きっかけづくりの inject ノードは 起動直後の実行もできるので追加で仕込むと楽

Slide 36

Slide 36 text

冒頭でもお伝えした通りreTerminal には LED・ボタン・光センサー・加速度センサーがある https://wiki.seeedstudio.com/reTerminal/

Slide 37

Slide 37 text

いろいろセンサー取得したくなりません? わたしは取得したくなります!

Slide 38

Slide 38 text

Node.js にすでに npm-reterminal という すばらしいライブラリがある LED・ボタン・光センサー・加速度センサー・ブザーなどいろいろやりとりできる! https://www.npmjs.com/package/npm-reterminal

Slide 39

Slide 39 text

これを Node-RED 用にうまく包んで Node-RED ノードを私が制作しました! まだなかったので、じぶんでつくった。きょうのあさできた。 https://www.npmjs.com/package/node-red-contrib-reterminal

Slide 40

Slide 40 text

いざ、取得! node-red-contrib-reterminal をインストールしフローをかきかき

Slide 41

Slide 41 text

Node-RED はこのような仕組み ボタン情報を取得したり、加速度センサー取得したり、STA LED を緑&赤に変えたり

Slide 42

Slide 42 text

Node-RED ダッシュボードから STA LED を赤や緑に操作 なにはなくともLチカ!

Slide 43

Slide 43 text

下部の F1 F2 F3 O 物理ボタンを押すと Node-RED ダッシュボードが反応

Slide 44

Slide 44 text

動画をみせつつデモをします

Slide 45

Slide 45 text

加速度センサーで傾きが取得できる

Slide 46

Slide 46 text

動画をみせつつデモをします

Slide 47

Slide 47 text

ボタンの押しやすさを考えると大きめが良い 通常のスマホやPCの画面だと、6x1の1マスでも大丈夫だが、reTerminal だとちょっと小さい といいつつ、ボタンの文字の制御をしっかりやるとなるとちゃんと HTML と CSS 組まないとかなと。

Slide 48

Slide 48 text

小さい画面なので文字も大きめが良い 大きい文字が 180 px とか、小さめな文字なのに 48 px とかスケール感が違うのでソワソワする 180px 各48px

Slide 49

Slide 49 text

まとめ

Slide 50

Slide 50 text

➔ reTerminal は Raspberry Pi で扱いやすくタッチディスプ レイもついているのでデジタルサイネージに合いそう! ➔ Node-RED によるビジュアルプログラミングで表示面や操 作面の試行錯誤も素早く楽しく行えそう! ➔ Node-RED のもう一つの得意分野、デバイス連携によって reTerminal のボタンやセンサーにもアクセスしやすい。 設置時にいろいろな連携が考えられそう! ➔ わりとこういう扱いやすいデバイスがなかったので、 Node-RED とともに楽しいタッチスクリーンライフが送れ そう! まとめ