無料の オープンソースグラフィックスライブラリとして、LVGLは、アニメーションの作成、高度なグラフィックスの構築、およびさまざまなブロックの構築において、関連する一連のチップに非常に便利です。LVGLはMCUXpresso SDKパッケージに統合されており、SDKのダウンロードまたはGUI Guiderで直接インポートできます。
GUI Guiderは、NXPが提供するすぐに使えるGUIです。NXP機器では無料で使用できることを前提とし、操作が便利、自動プログラミング、中国語と英語のインターフェースおよび入力など、一連のメリットがあります。
以下では、LPC54S018 開発ボードを例に、シンプルな UI インターフェースを作成し、基本的な操作プロセスと使用方法を皆様にご理解いただけるようにします。
- 新規プロジェクトの作成
LVGLバージョンはV8、開発ボードはLPC54S018、アプリケーション・テンプレートはEmptyUIを選択し、プロジェクトの名前とパスを設定して［Finish（完了）］をクリックします。
- 全体のバックグラウンドを設定します。
［Widget（ウィジェット）］タブをGUI Editorにドラッグし、全画面サイズに拡大します。
図2
- 時間表示とTo-Do機能を追加してください。
1) 右側の赤いボックスの［Content 1（コンテンツ1）］のタブで、コンテンツ名を「Clock」に変更します。
図3
2) aclockをエディタにドラッグし、サイズと位置を調整し、図4の赤いボックスに従って時刻を設定します。
図4
3) dclockをエディタにドラッグし、サイズと位置を調整し、図5の赤いボックスに従って時刻を設定します。
図5
4) チェックボックスをエディタにドラッグし、サイズと位置を調整し、図6に従って内容を編集します。
図6
- 2番目のタブのコンテンツに、簡単なカウント機能を追加し、プログレスバーがそれと連動するように設定します。
1) バックグラウンドを追加します。［Import（インポート）］をクリックしてバックグラウンド用の画像をインポートし、ウィジェットで画像をエディタにドラッグしてサイズと位置を設定し、画像パスでインポートした画像を選択して透明度を設定します（図7を参照）。
図7
2) カウント値、プログレスバー、ボタンを追加します。図8、9、10。
図8は、プログレスバーを追加するときに、2番目のステップで開始値を設定しています。プログレスバーの範囲値は、lv_bar_set_range(guider_ui.screen_progress_bar, 0, 100) によって設定されます。これをキーイベントに追加して、クリックごとに実行できます。したがって、このコードをこの後のエクスポート・ファイルcostomer.cに追加し、初期化時に一度だけ設定することをお勧めします。
図8
図9
図10
3) プログレスバーに説明テキストを追加してください。操作手順は図11に示されています。
図11
4) 対応するボタンにイベントを作成し、顧客コードを選択し、対応するコードを入力して、インタラクションを完了させます。図12に示されているADDボタンを例として取り上げます。
図12
- 3番目のタブのコンテンツには、3Dアニメーション・エフェクトが表示されます。
1) 3D画像を設定します。「3Dimg」を選択し、エディタにドラッグして、画像パスに画像を設定し、次に回転の中心と回転角度を選択します（図13を参照）。
図13
2) ディスプレイ・スイッチを設定します。スイッチをオンにすると3D画像が表示され、スイッチをオフにすると画像が消えます。図14をご覧ください。
図14
- 4番目のタブのコンテンツに、「ヘルプ」を追加します。
1) ロゴを追加します。imgを追加し、画像をインポートして透明度を設定します。
図15
2) 最初の3つのモジュールを一覧にします。「Widget」リストをエディタにドラッグし、新しい行を作成し、画像とテキストを変更します。
完了したら、図16に示すコードを生成します。結果はシミュレーションで直接表示するか、開発ボードにインポートすることができます。図17は、シミュレータと選択可能なターゲットを示しています。シミュレーション結果を図18に示します。
このデザインを開発ボードにダウンロードする方法は2つあります。1つ目の方法は、図17で利用可能なIDEを選択し、GUI Guiderから直接ダウンロードすることです。2つ目の方法は、まずソース・ファイルをエクスポートし、関連するSDKのデモ・コード内で1つずつ置き換え、IDEでアプリケーション・コードを使ってビルドし、IDEデバッガによりダウンロード／デバッグすることです。
図16
図17
図18
Video Class : https://www.youtube.com/watch?v=QM52Nu16zKQ