Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20211028_viotlt_vol.9

 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

1ft-seabass

October 28, 2021
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. reTerminal という IoT デバイス

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 動かしてみる動画

    View full-size slide

  21. 動かしてみるデモ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide