$30 off During Our Annual Pro Sale. View details »

描画ライブラリScenic紹介

pojiro
September 24, 2022

 描画ライブラリScenic紹介

pojiro

September 24, 2022
Tweet

More Decks by pojiro

Other Decks in Technology

Transcript

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

  2. 今日のおしながき • Scenic の紹介 ◦ 細かい使い方はふみこまず、雰囲気を掴みます 🦾 (使い方が気になる人は ↓ ▪

    ElixirでGUI・Scenic [入門編1] ▪ ElixirでGUI・Scenic [入門編2]
  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向けに作られた)表示機に描画するライブラリ!!
  4. サイネージ? • バスのサイネージ • 電車のサイネージ • 市役所のサイネージ などなど、様々な場所で利用されるサイネージがあります。

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

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. なぜ通常の Linux の画面出力ではないの? • サイネージなどの表示機は全画面表示させたい • ユーザーに操作をされたくない • グラフィックに割くコンピュータリソースをサイネージに絞りたい ◦

    SBCの性能面の考慮、他 GUIアプリにリソースを割きたくない などがあるためと思います
  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 でおえるはず(🙏
  15. Example を改造して、 AHT20の計測値を表示してみた • https://twitter.com/pojiro3/status/1571457848571494401 • AHT20は、温湿度計 • https://github.com/pojiro/hello_scenic •

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

  17. (IExで):observer.start で Supervisorツリーを見る

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

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

  20. Nerves でサイネージを作ると • ネットワークにつながった Nerves でサイネージを作ると NervesHub でアップデートをかけられる (業界では他の方法でやり尽くされているだろう •

    Nerves の利点は、 ドライバーなども後からアップデートできるので、機器を現場側で後付けできれば、 機能更新ができること!
  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
  22. flutter-embedded-linux を Nerves 上で動かせたら? • nerves_system_rpi4 をカスタムして試したけれど、 なんかうまくいかなかったorz ◦ https://twitter.com/pojiro3/status/1572803344527425537

    マウスカーソルがでない インクリメントされる数字がでない など on Ubuntuは動くので、調整能力 不足、ぐぬぬ
  23. まとめ • 描画ライブラリであるScenicを紹介しました ◦ センサーの計測値を実際に表示してみました ◦ 開発時の工夫点を紹介しました ▪ リポジトリ:https://github.com/pojiro/hello_scenic ◦

    Flutter on Nerves に挑戦し、失敗しました(笑 Have nice Nerves days!!! Thank you!!