20211028_viotlt_vol.9

20211028_ビジュアルプログラミングIoTLT vol.9「Seeed Studio reTerminal に Node-RED 入れて素敵なタッチスクリーンライフを感じた！」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. 20211028_ビジュアルプログラミングIoTLT vol.9 Seeed Studio reTerminal に Node-RED 入れて 素敵なタッチスクリーンライフを感じた！ ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. reTerminal という IoT デバイス
4. 主な仕様を秋月電子さんでみてみます わたしはこちらで買いました。在庫が AA から A になってて在庫減ってきてるよう。 https://akizukidenshi.com/catalog/g/gM-16904/
5. Seeed 社の Wiki が分かりやすい。とくにこの図。 https://wiki.seeedstudio.com/reTerminal/
6. Raspberry Pi の基本機能に加えて タッチディスプレイと頑丈な筐体！ https://wiki.seeedstudio.com/reTerminal/
7. LED・ボタン・光センサー・加速度センサー！ https://wiki.seeedstudio.com/reTerminal/
8. 工業用のインターフェースや放熱板も完備 https://wiki.seeedstudio.com/reTerminal/
9. たしかに自分でタッチディスプレイ加えて 一部つくることもできるが、コンパクトさすごい その手間全てを考えると 2 万円台はアリだと思う
10. Raspberry Pi には Node-RED が入れやすいので ビジュアルプログラミング環境を作ります
11. ひとまず電源を入れて起動 プリインストールされてるので、いきなり Raspberry Pi！
12. 初期ウィザードの Update Software は 落ち着いて Skip します reTerminalの初回セットアップ手順 - Seeed K.K. エンジニアブログ https://lab.seeed.co.jp/entry/2021/10/19/183618
13. Node-RED セットアップ ワンコマンドで最新の Node-RED インストール https://nodered.jp/docs/getting-started/raspberrypi
14. さすがの Raspberry Pi 4 インストールが速い！
15. reTerminal で Node-RED を動かすメモは ブログにもまとめてあります https://www.1ft-seabass.jp/memo/2021/10/25/seeed-studio-reterminal-node-red-install/
16. Node-RED にはダッシュボードという 情報を可視化できる機能が充実してます ボタンでカウント数を増やせる仕組みと、カウント数を示すゲージ
17. こういう可視化するダッシュボードは タッチディスプレイと相性良さそう！
18. reTerminal + Node-RED ダッシュボード
19. こんな仕組みで動いています
20. 動かしてみる動画
21. 動かしてみるデモ
22. デジタルサイネージといえば やっぱりフルスクリーン起動したいよね
23. 普通にブラウザ表示すると おもいきりアドレスバーとか出ちゃう あーパソコンに表示してるんですねえっていう現実に引き戻されるやつ
24. デジタルサイネージといえば やっぱりフルスクリーン起動したいよね 操作に集中するできるという意味の「没入感」を出していきたい
25. すでに別件のサイネージづくりで フルスクリーン起動ナレッジがあったので実装 https://www.1ft-seabass.jp/memo/2021/05/01/raspberry-pi-nodered-exec-chromium-kiosk/
26. こういったコマンドを実行すれば 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
27. 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
28. --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
29. --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
30. --kiosk キオスクモードの指定 sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod --kiosk --app=http://localhost:1880/ui
31. --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
32. 起動コマンドをつくる 今回は http://localhost:1880/ui を指定
33. 終了コマンドは pkill -o chromium でできます。 実を言うと、この知見を探すほうが時間がかかった
34. デモしてみます！ デスクトップ表示から、Node-RED ダッシュボードのフルスクリーン表示します！
35. タイムスタンプと書かれている きっかけづくりの inject ノードは 起動直後の実行もできるので追加で仕込むと楽
36. 冒頭でもお伝えした通りreTerminal には LED・ボタン・光センサー・加速度センサーがある https://wiki.seeedstudio.com/reTerminal/
37. いろいろセンサー取得したくなりません？ わたしは取得したくなります！
38. Node.js にすでに npm-reterminal という すばらしいライブラリがある LED・ボタン・光センサー・加速度センサー・ブザーなどいろいろやりとりできる！ https://www.npmjs.com/package/npm-reterminal
39. これを Node-RED 用にうまく包んで Node-RED ノードを私が制作しました！ まだなかったので、じぶんでつくった。きょうのあさできた。 https://www.npmjs.com/package/node-red-contrib-reterminal
40. いざ、取得！ node-red-contrib-reterminal をインストールしフローをかきかき
41. Node-RED はこのような仕組み ボタン情報を取得したり、加速度センサー取得したり、STA LED を緑＆赤に変えたり
42. Node-RED ダッシュボードから STA LED を赤や緑に操作 なにはなくともLチカ！
43. 下部の F1 F2 F3 O 物理ボタンを押すと Node-RED ダッシュボードが反応
44. 動画をみせつつデモをします
45. 加速度センサーで傾きが取得できる
46. 動画をみせつつデモをします
47. ボタンの押しやすさを考えると大きめが良い 通常のスマホやPCの画面だと、6x1の1マスでも大丈夫だが、reTerminal だとちょっと小さい といいつつ、ボタンの文字の制御をしっかりやるとなるとちゃんと HTML と CSS 組まないとかなと。
48. 小さい画面なので文字も大きめが良い 大きい文字が 180 px とか、小さめな文字なのに 48 px とかスケール感が違うのでソワソワする 180px 各48px
49. まとめ
50. ➔ reTerminal は Raspberry Pi で扱いやすくタッチディスプ レイもついているのでデジタルサイネージに合いそう！ ➔ Node-RED によるビジュアルプログラミングで表示面や操 作面の試行錯誤も素早く楽しく行えそう！ ➔ Node-RED のもう一つの得意分野、デバイス連携によって reTerminal のボタンやセンサーにもアクセスしやすい。 設置時にいろいろな連携が考えられそう！ ➔ わりとこういう扱いやすいデバイスがなかったので、 Node-RED とともに楽しいタッチスクリーンライフが送れ そう！ まとめ