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

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 たのしい！