1.GUI Guiderを起動し、[Create a new project]を選択します。

2.LVGLバージョンを選択します。

※LVGLはLight and Versatile Embedded Graphics Libraryの略称で、オープンソースのグラフィックライブラリです。GUI GuiderはLVGLのAPIを呼び出して描画を行います。

詳細は下記ページをご参照下さい。

[ NXP公式リンク：LVGL Open-Source Graphics Library  ]

LVGLのAPIはLVGLのWebサイトで公開されています。合わせてご参照下さい。

[ NXP公式リンク：LVGL  ]

3.使用するEVKを選択します。

今回はMIMXRT1170-EVKBを使って説明します。実際に使用するお手元のEVKに合わせて選択して下さい。

4.インポートするサンプルプロジェクトを選択します。

タブでEmptyUI/Application/Widget/Local Projectsを切り替えることができます。

5.[Project Name]に任意のProject Nameを入力します。

6.使用する液晶パネルを選択します。

選択したEVKに対応した複数のプリセットされた液晶パネルから選択できます。

7.最後に[Create]ボタンをクリックして選択した条件でプロジェクトを作成します。

※Createボタンを押してプロジェクトを作成する際に、ネットワークからソースコードをダウンロードします。そのため、GUI Guiderを使用しているPCがインターネットに接続されている必要があります。もし社内ネットワークなどでセキュリティ設定などにより接続できない場合、プロジェクトの作成が失敗することがあります。そのような場合は、プロキシ設定などネットワーク接続環境を確認してください。

8.以下の画面になればインポートは完了です。

ここから実際にGUIを修正したり動作させたりすることができます。

1.右上の[▶]ボタン(Generate Code & Build & Run)より、Simulatorの下の[C]を選択します。

2.コード出力とビルドが開始され、完了後に別ウィンドウでシミュレータが起動します。

シミュレータ上では画面のタッチ動作などの確認も行うことができます。

1.GUI Guiderでプロジェクトインポート後またはUI作成完了後に、EVK（今回はMIMXRT1170-EVKB）とPCをUSBケーブルで接続して、EVKに電源を入れます。

2.画面右上の[▶]ボタンから[Target]で [MCUXpresso]を選択します。

3.プロジェクトのビルドからEVKへのプログラム書き込みまでが自動で実行されます。

4.書き込み完了後、EVKは自動で書き込んだプロジェクトで起動します。

1.「サンプルプロジェクトのインポート」で説明した手順でプロジェクト・テンプレート選択画面まで進みます。

2.[EmptyUI]を選択します。何も配置されていない空の状態となります。 ここから部品を配置してUIを作成していきます。

3.部品配置はフィールド左上アイコンから行います。

ここではボタンを2つ配置します。
配置した部品は左側ペインのWidgetsに表示されます。

4.[Label]ボタンからはテキストボックスを配置できます。

テキストの内容やサイズなどは右側ペインの[Font]から変更できます。

5.部品を右クリックしてEventを選択すると下側ペインにイベント設定画面が表示されます。

配置直後のボタンにはイベントは割り当てられていません。

6.実際にボタンにイベントを割り当ててみましょう。

Eventの[＋]ボタンからイベントを設定できます。

まずはイベント発生のトリガーを設定します。
ボタンを押したときのイベントを設定するため、[Clicked]を選択し、[Confirm]で決定します。

7.イベント発生トリガーとして[Clicked]を選択したら、イベントを行う対象を選択します。

今回はLabelの内容を変更したいため、[＋]ボタンから、対象として[label_1]を選択します。

8.イベントの対象を設定できたため、次はイベントの内容を選択します。

フォントが変わる、座標が変わる、背景色が変わる、など様々なイベントを設定できます。今回はテキストの内容を変更するため、[＋]ボタンから[Text]を選択します。

9.イベント欄にテキスト内容変更のためのボックスが作成されます。

ここでは変更内容として「BUTTON1」を入力しました。
これで、上ボタンを、押したときに、label_1の内容が、「BUTTON1」に変更される、イベントが完成しました。

10.同じように下ボタンに対して、押したときにlabel_1の内容が「BUTTON2」に変更されるようイベントを設定します。

11.シミュレータで動作を確認します。

上側のボタン(btn_1)を押すとテキストがBUTTON1に、
下側のボタン(btn_2)を押すとテキストがBUTTON2に変化することが確認できます。

このようにして、ボタン、画像、テキスト、背景などに対して様々なイベントを設定することで、リッチなUIを作成することができます。

1.まず、作成したプロジェクト上で右上の[GenerateCode]アイコンから[C]を選択し、ソースコードを出力します。

2.[Build]アイコンから[MCUXpresso]を選択し、一度GUI Guider上でビルドを行います。

これでGUI Guider側でのエクスポート作業が完了します。

3.GUI Guiderで作成したプロジェクトのディレクトリを確認します。

デフォルトでは C:\nxp\GUI-Guider-Projects にプロジェクトが作成されます。

4.MCUXpressoの左下ペイン[Import project(s) from file system]を選択します。

5.[Project directory(unpacked)]の[Browse]を選択し、先程確認したGUI Guider作成プロジェクトのディレクトリを指定し、[Next]を選択します。

6.ディレクトリ内のプロジェクトが認識され、チェックボックスにチェックがついていることを確認して[Finish]を選択します。

7.これでプロジェクトのインポートが完了します。

以降はMCUXpresso上でソースコードの参照、変更、ビルド、書き込み等の作業を行うことができます。

・タブ切り替え表示

Tabview機能を使えば、タブ切り替え表示のGUIを作成できます。

・複数のアクションを実行

クリックされた時のアクションの対象を、ボタン自身と別のコンポーネントに割り当てることで、ワンクリックで複数のアクションを実行できます。

・表示/非表示の切り替え

対象に対するアクションとして[isVisible]を設定することで、スライドボタンのON/OFFで対象の表示/非表示の切り替えできます。