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 とともに楽しいタッチスクリーンライフが送れ
そう！
まとめ