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 入れて
   素敵なタッチスクリーンライフを感じた！
   ワンフットシーバス 田中正吾
   

   View Slide

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

   View Slide

3. reTerminal という IoT デバイス
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. さすがの Raspberry Pi 4 インストールが速い！
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 動かしてみる動画
    

    View Slide

21. 動かしてみるデモ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. いろいろセンサー取得したくなりません？
    わたしは取得したくなります！
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. まとめ
    

    View Slide

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

    View Slide