がれすたさんのDIY日記

電子回路、Python、組み込みシステム開発、自作エフェクターを語るblog

littlevGL シミュレータを使うメモ

littlevGLのシミュレータを使う時の導入メモ
公式の解説だけだと少しはまったのでまとめておくという感じ。
尚littlevGL 6.0を対象に進めていきます。
なんか8月に下書きでかいてて2020年1月21日現在いつの間にか6.1になってましたがマイナーアップデートなのでおそらく手順的な変更点はないはず

littlevGLについて

f:id:gsmcustomeffects:20200123073118p:plain
LittlevGLの公式デモUI(Dark Styleを適用)
MIT licenceで提供されている組み込みGUIライブラリである。
組み込み向けGUIは商用含め

  • emWin(NXPだとフリー)
  • TouchGFX(STだとフリー)
  • Embedded Wizard(体験版があり)
  • uGFX(趣味ならフリー)

などがあるがlittlevGLはどのプラットフォームでも無料で使えるので覚えておいて損はない。



littlevGLシミュレータを試す

littlevGLについては前項でふれた通りだが、毎度マイコンに書き込んでデバッグしているのではかなり大変である。
そこで活躍するのがPCシミュレータという機能今回はこれの導入方法の紹介

f:id:gsmcustomeffects:20190827032041p:plain





Eclipse CDTの導入

以下のリンクからEclipseCDTを落としてくる。
CDT Downloads | The Eclipse Foundation

インストールまでは普通に進めてください

MinGWの導入

EclipseC言語を扱うにはコンパイラが必要なのでそれを導入します。
ここで注意が必要なのが普通に検索してトップに出てくるMinGWは32bit版なので64bit版を探してきて使います。
MinGW-w64 - for 32 and 64 bit Windows download | SourceForge.net


導入に関してはこのサイトが詳しいです。
PENGUINITIS - MinGW 64 bit 版 のセットアップ

パッケージに関して今後管理する必要があるならMSYS2とか入れとくと便利でしょう。
インストールが終わるとC:\Program Files\mingw-w64\x86_64-8.1.0-posix-seh-rt_v6-rev0\mingw64\binとかにインストールされてると思うので
このディレクトリにPATHを通してこの段階までは各自進めてください
f:id:gsmcustomeffects:20190827033153p:plain

MinGW PATHなんかでググるとやり方は無限に出てきます。

pc_simulator_sdl_eclipseをクローンする

公式がコンフィグ済みのプロジェクトを配ってくれているのでこれをgit cloneします。
github.com

README読めば書いてありますがgit clone --recursiveとすることが重要です。

これをしないとサブモジュール(lvgl,lv_drivers,lv_drivers)がないのでエラーとなりますので注意してください。

SDL2を持ってくる

SDL2はクロスプラットフォームのマルチメディアライブラリでシミュレータのグラフィック描画に必要。

Simple DirectMedia Layer - SDL version 2.0.10 (stable)

上記リンクに飛んでDevelopmentをダウンロードして適当なところに展開する。
f:id:gsmcustomeffects:20190827034118p:plain

公式ドキュメント通りにやるならこの手順通りにファイルをコピーしたりする。
f:id:gsmcustomeffects:20190827034218p:plain

自分はMinGW直下を汚したくなかったので
C:\SDL2\x86_64-w64-mingw32みたいな感じに配置してEclipseの機能でライブラリパスを通した。(この方法に関しては次の項で説明)

pc_simulator_sdl_eclipseをインポート

先ほど落としてきたpc_simulator_sdl_eclipseEclipseにインポートする。
この状態でいくつかエラーが出ると思うのでプロジェクトのプロパティを開きます。

C++/Build -> ToolChainEditerを開きMinGWを選択

f:id:gsmcustomeffects:20190827040928p:plain

この時正しくPATHが通せていればこうなる
f:id:gsmcustomeffects:20190827041159p:plain

これでApplyを押すとコンパイラ関連のエラーは消える。

次にSDLを読み込む
f:id:gsmcustomeffects:20190827041338p:plain

ライブラリも同様に読み込む
f:id:gsmcustomeffects:20190827041436p:plain

これである程度の修正はOK
あとはlv_conf_template.hをlv_conf.hにコピーする。(これはアップデートが入るたび必要みたい
f:id:gsmcustomeffects:20200121044500p:plain

ここで一度コンパイルを行う。
fb関連でエラーが出るようなら以下のように対応する
f:id:gsmcustomeffects:20200121045007p:plain

起動

あとはRunするとこのような画面が出るはず
f:id:gsmcustomeffects:20200121045025p:plain

Tips

その他のデモを動かしたいならこのようにする
f:id:gsmcustomeffects:20200121045351p:plain

f:id:gsmcustomeffects:20200121053129p:plain

テーマ系を動かすならlv_confのテーマに関する部分を1にしておく必要がある。
f:id:gsmcustomeffects:20200121052341p:plain
ダークテーマはこんな感じ
f:id:gsmcustomeffects:20200121052249g:plain

これでシミュレータの導入はできたと思いますのでご自分でやってみたい方は公式のドキュメントに沿って進めてもらえるといいと思います。
細かいカスタムの仕方および組み込み機器への導入方法はまた今度書きます。

参考文献

公式ドキュメント
docs.littlevgl.com