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

20211216_SORACOM Device Meetup vol.6

20211216_SORACOM Device Meetup vol.6

20211216_SORACOM Device Meetup vol.6「reTerminal のセンサーやタッチパネルを動かしてみた知見!」の登壇資料です。

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

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

Fecdd3417cd7375cc0bd0352d72db27e?s=128

1ft-seabass
PRO

December 16, 2021
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

  1. 20211216_SORACOM Device Meetup vol.6 reTerminal のセンサーやタッチパネル を動かしてみた知見! ワンフットシーバス 田中正吾

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

  3. 田中正吾(たなかせいご) 屋号:ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。

  4. IoT をするうえで手軽に可視化できる デジタルサイネージが欲しくなります

  5. reTerminal は Raspberry Pi サイネージとして とても良い絶妙なデバイスだと感じています! ハードとしての堅牢なつくりに Raspberry Pi の拡張性も保ちつつタッチスクリーンついてて、このお値段!

  6. ということでデモ まず、大きく Seeed reTerminal を出します

  7. デスクトップ画面から Chrome の キオスクフルスクリーン表示でサイネージを表示 Node-RED という仕組みで動かしていますが、後ほど話します!

  8. ということでデモ まず、大きく Seeed reTerminal を出します

  9. とはいえ HTML CSS JavaScript で、イチから サイネージ表示を構築するのは手間がかかる HTML JS CSS

  10. IoT など様々な API やデータ連携を GUI で直感的に構築できる OSS ソフトウェア Node-RED

  11. ノードをつなげることで仕組みが作れる Node.js JavaScript をベースにノーコード・ローコードでつくれます 今回のテキストを表示する仕組みもこんな感じ

  12. Node-RED ノードの中で サイネージ向きなのが dashboard ノード https://flows.nodered.org/node/node-red-dashboard

  13. グラフやUIパーツなど簡単に配置・表示できる https://flows.nodered.org/node/node-red-dashboard より画像を引用

  14. reTerminal は Raspberry Pi が動いてるので Node-RED がインストールできます Node-RED

  15. 実際にインストールする経緯はこちらに Seeed Studio reTerminal で Node-RED を動かすメモ https://www.1ft-seabass.jp/memo/2021/10/25/seeed-studio-reterminal-node-red-install/

  16. さきほどの仕組み

  17. 左の inject ノードでテキストをつくり 右の dashboard template ノードで表示

  18. dashboard template ノードの中身

  19. 小さい画面だけど解像度は大きいので フォントサイズをかなり大きめに指定している <div ng-bind-html="msg.payload" style="font-size:180px;text-align:center;"></div>

  20. 標準のフォントサイズだとこんなに小さく見える 通常の PC だと全然見えるんですけどね。これは再起動とシャットダウンコマンドを指示する仕組み。

  21. Chrome キオスク フルスクリーン設定はこちら 起動コマンドの中身が、exec ノードといって直接 Linux コマンドを叩いている

  22. こういったコマンドを実行すれば 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
  23. 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
  24. --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
  25. --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
  26. --kiosk キオスクモードの指定 sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod

    --kiosk --app=http://localhost:1880/ui
  27. --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
  28. 終了コマンドは pkill -o chromium でできます。 実を言うと、この知見を探すほうが時間がかかった

  29. reTerminal の面白味は内蔵センサー センサーがついてて簡単に呼び出せるデジタルサイネージってあまりないので夢があって素敵

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

  31. 光センサー・加速度センサー・タッチ位置が取れて ブザーが鳴って、LED点灯、独自ボタンが取得可能 https://wiki.seeedstudio.com/reTerminal/

  32. ここでデモ

  33. 光センサーはここにありまして

  34. 手で暗くすると光センサーで検知して 明→暗 と表示が変わる仕組み https://twitter.com/1ft_seabass/status/1470979879303000065

  35. まずは動画で

  36. リアルタイムデモもがんばりたい

  37. Node-RED のフローはこんな感じ 光センサーからデータを受け取って通常 1000 くらいの明るさの値でくるので「明」として 500 を下回ったら暗さを判定して「暗」を送ってテキスト表示してます

  38. ちなみに今回のフォントサイズは font-size:400px。おおきい。

  39. 実は reTerminal のセンサー取得できる Node-RED ノードを自作&公開しました

  40. Wiki にもセンサーやLEDのナレッジ書いてある これは LED の例。LED を点灯・消灯するのは、こんな風にコマンドで叩ける。 https://wiki.seeedstudio.com/reTerminal-hardware-interfaces-usage/

  41. Node.js にすでに npm-reterminal という すばらしいライブラリがある さっきのナレッジを踏まえてLED・ボタン・光センサー・加速度センサー・ブザーなどやりとりできる! https://www.npmjs.com/package/npm-reterminal

  42. このライブラリをベースに Node-RED ノードをこのように公開 https://www.npmjs.com/package/node-red-contrib-reterminal

  43. 公開されているので Node-RED 内の ノードの追加からすぐに使えます

  44. 光センサー・加速度センサー・タッチ位置・ ブザー・独自ボタン・LED点灯いけます!

  45. ライブコーディングしてみます! 時間の許す限り!

  46. ボタン状態取得ノード

  47. デモしてみます!

  48. 加速度センサー取得ノード

  49. デモしてみます!

  50. ブザーノード ture / false を与えるとシンプルなブザーが鳴ります。めっちゃうるさい!

  51. デモしてみます!

  52. LEDを点灯するノード USR / STA の LED が ON / OFF

    できる ↓ を見る限りこの 2 LEDが動くので合ってる模様 https://wiki.seeedstudio.com/reTerminal-hardware-interfaces-usage/#3-user-programmable-leds
  53. デモしてみます!(余裕があれば)

  54. タッチ位置を検出するノード タッチした位置もとれるし、すーっとドラッグした時もとれる

  55. デモしてみます!(余裕があれば)

  56. 光センサーノード さきほどの明暗変化ネタに使った明るさを検出するセンサーノード

  57. デモしてみます!(余裕があれば)

  58. これでアドベントカレンダーも書いてみました Seeed reTerminal の光センサーの状態を Node-RED で 取得して SORACOM Inventory と

    SORACOM Harvest で可視化するメモ https://www.1ft-seabass.jp/memo/2021/12/09/reterminal-connect-soracom-service-and-visualization/
  59. まとめ

  60. まとめ ➔ reTerminal はデジタルサイネージにとても可能性を感じ るデバイス! ➔ Node-RED ダッシュボードを使うと reTerminal で手軽に

    可視化や表示が作れて試行錯誤しやすい! ➔ 大きめのフォントサイズやフルスクリーン起動など今まで のデジタルサイネージの知見を活かすことができる! ➔ デジタルサイネージ+センサー+IoTで、いろいろな場に 設置して空間の情報を取得・蓄積・分析できそう! ➔ reTerminal たのしい!