20211216_SORACOM Device Meetup vol.6

by 1ft-seabass

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

さきほどの仕組み

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

dashboard template ノードの中身

Slide 19

Slide 19 text

小さい画面だけど解像度は大きいのでフォントサイズをかなり大きめに指定している

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

こういったコマンドを実行すれば 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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

--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

Slide 25

Slide 25 text

--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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

--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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ここでデモ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

まずは動画で

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

ボタン状態取得ノード

Slide 47

Slide 47 text

デモしてみます！

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

デモしてみます！

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

デモしてみます！

Slide 52

Slide 52 text

LEDを点灯するノード USR / STA の LED が ON / OFF できる ↓ を見る限りこの 2 LEDが動くので合ってる模様 https://wiki.seeedstudio.com/reTerminal-hardware-interfaces-usage/#3-user-programmable-leds

Slide 53

Slide 53 text

デモしてみます！（余裕があれば）

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

デモしてみます！（余裕があれば）

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

デモしてみます！（余裕があれば）

Slide 58

Slide 58 text

これでアドベントカレンダーも書いてみました Seeed reTerminal の光センサーの状態を Node-RED で取得して SORACOM Inventory と SORACOM Harvest で可視化するメモ https://www.1ft-seabass.jp/memo/2021/12/09/reterminal-connect-soracom-service-and-visualization/

Slide 59

Slide 59 text

まとめ

Slide 60

Slide 60 text

まとめ ➔ reTerminal はデジタルサイネージにとても可能性を感じるデバイス！ ➔ Node-RED ダッシュボードを使うと reTerminal で手軽に可視化や表示が作れて試行錯誤しやすい！ ➔ 大きめのフォントサイズやフルスクリーン起動など今までのデジタルサイネージの知見を活かすことができる！ ➔ デジタルサイネージ＋センサー＋IoTで、いろいろな場に設置して空間の情報を取得・蓄積・分析できそう！ ➔ reTerminal たのしい！