描画ライブラリScenic紹介

Transcript

1. 描画ライブラリScenic紹介
   2022/09/24 NervesJP #29
   

   View Slide

2. 今日のおしながき
   ● Scenic の紹介
   ○ 細かい使い方はふみこまず、雰囲気を掴みます 🦾
   （使い方が気になる人は ↓
   ■ ElixirでGUI・Scenic [入門編１]
   ■ ElixirでGUI・Scenic [入門編２]
   

   View Slide

3. What’s Scenic?
   ● > Scenic is primarily aimed at fixed screen connected devices (IoT)
   ○ https://github.com/ScenicFramework/scenic/blob/master/README.md#core-scenic-librar
   y
   ● > In fact, this is the type of system that Scenic was made for!
   ○ this => Nerves
   ○ https://hexdocs.pm/scenic/getting_started_nerves.html
   （主にNerves向けに作られた）表示機に描画するライブラリ！！
   

   View Slide

4. サイネージ？
   ● バスのサイネージ
   ● 電車のサイネージ
   ● 市役所のサイネージ
   などなど、様々な場所で利用されるサイネージがあります。
   

   View Slide

5. どんなことができるのか？
   example 紹介
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. なぜ通常の Linux の画面出力ではないの？
    ● サイネージなどの表示機は全画面表示させたい
    ● ユーザーに操作をされたくない
    ● グラフィックに割くコンピュータリソースをサイネージに絞りたい
    ○ SBCの性能面の考慮、他 GUIアプリにリソースを割きたくない
    などがあるためと思います
    

    View Slide

14. 実際にさわってみる（詳細にふみこまずに
    ● 必要な前準備
    ○ https://hexdocs.pm/scenic/install_dependencies.html
    ■ Ubuntu と Windows は試しました
    ● Windows は 上のリンクと以下を参考に（ WSL と X Server の連携させる点が注意
    ○ https://itcweb.cc.affrc.go.jp/affrit/_media/documents/guide/x-window/x-
    win-wsl.pdf
    ○ https://twitter.com/pojiro3/status/1573562918138150914
    ● 以下をクローンして、mix deps.get, iex -S mix
    ○ https://github.com/pojiro/hello_scenic
    ■ Nerves があっても無くても動かせるリポジトリ
    ● どのように作ったかは git log でおえるはず（🙏
    

    View Slide

15. Example を改造して、
    AHT20の計測値を表示してみた
    ● https://twitter.com/pojiro3/status/1571457848571494401
    ● AHT20は、温湿度計
    ● https://github.com/pojiro/hello_scenic
    ●
    

    View Slide

16. 興味本位で
    Scenic 動作時の構成を:observer で見てみる
    

    View Slide

17. （IExで）:observer.start で Supervisorツリーを見る
    

    View Slide

18. プロジェクト構成
    ● センサー値の取得は、
    pubsub/aht20.ex で、
    sensors/aht20.ex を利用して行
    われ、publishされる
    ● scenes/my_server_spec.ex で、
    subscribeし、画面更新
    

    View Slide

19. UIを効率よく開発するための工夫してみる
    ● UI開発時には実際のセンサで計
    測した値は不要（それっぽい値で
    あればよい）
    ● behaviour（インタフェース）を使
    い、動作ターゲット
    （MIX_TARGET）に合わせ実装を
    切り替える
    

    View Slide

20. Nerves でサイネージを作ると
    ● ネットワークにつながった Nerves でサイネージを作ると
    NervesHub でアップデートをかけられる
    （業界では他の方法でやり尽くされているだろう
    ● Nerves の利点は、
    ドライバーなども後からアップデートできるので、機器を現場側で後付けできれば、
    機能更新ができること！
    

    View Slide

21. 一方で、、🤔 App
    ● （ライブラリ作成者には失礼な話だが）
    Scenic はNerves UI開発の決定版になりうるだろうか？　というのも、
    ○ Elixir Desktop
    ■ これは wxWidgets を使い、 webview を通してアクセスした WebアプリケーションのUIを
    Windows, MacOS, Linux, iOS and Android で使えるようにしている（はず
    ※組み込み機器は未対応
    ○ Flutter
    ■ Multi-Platformを標榜し、組み込み機器向けのエンジンも OSSで開発が進んでいる
    ● https://github.com/sony/flutter-embedded-linux
    ■ Flutter で webview を使い、Phoenixの画面を↑を使って、
    headlessな組み込みlinux、Nervesで表示できたら？？どうだろうか？
    Web画面を作成したら、それが表示機
    に出力できる（？）こんなラッパーライブ
    ラリは作れないか？（という動機
    WebView
    Phoenix
    

    View Slide

22. flutter-embedded-linux を Nerves 上で動かせたら？
    ● nerves_system_rpi4 をカスタムして試したけれど、
    なんかうまくいかなかったorz
    ○ https://twitter.com/pojiro3/status/1572803344527425537
    マウスカーソルがでない
    インクリメントされる数字がでない
    など
    on Ubuntuは動くので、調整能力
    不足、ぐぬぬ
    

    View Slide

23. まとめ
    ● 描画ライブラリであるScenicを紹介しました
    ○ センサーの計測値を実際に表示してみました
    ○ 開発時の工夫点を紹介しました
    ■ リポジトリ：https://github.com/pojiro/hello_scenic
    ○ Flutter on Nerves に挑戦し、失敗しました（笑
    Have nice Nerves days!!!
    Thank you!!
    

    View Slide