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

描画ライブラリ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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 実際にさわってみる(詳細にふみこまずに
    ● 必要な前準備
    ○ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 一方で、、🤔 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 full-size slide

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

    View full-size slide

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

    View full-size slide