GUI Guiderを使って質の高いGUIをササッと作ってみよう

はじめに
GUI Guiderの準備
GUI Guiderの基本操作
MCUXpressoプロジェクトへの取り込み方法
GUI Guiderで簡単アニメーション
まとめ

はじめに

今回はNXP社から提供されている開発ツールの一つである「GUI Guider」を使用して、質の高いGUI（グラフィカルユーザーインタフェース）を簡単に作成してみたいと思います。簡単なインタフェースであれば、コーディングを行うことなくGUIを作成することもできます。シミュレーター環境も統合されているので、実際のハードウェアを接続せずに動作を確認することも可能です。また、GUI Guiderは、第2回でも紹介したMCUXpressoと組み合わせて使うことができます。

GUI Guiderについて

GUI GuiderはユーザフレンドリーなGUIを簡単に作成することができるNXPが無償で提供するツールです。オープンソースのLVGLグラフィック・ライブラリを利用しており、高度なGUIの短期開発を可能とします。GUI Guiderから生成されたコードは、同じくNXPが無償で提供する統合開発環境であるMCUXpresso IDEやIAR社のEmbedded Workbenchに簡単に移植でき、シームレスな開発をサポートします。

GUI Guiderの準備

GUI Guiderのダウンロード

GUI Guiderは、以下のページからDOWNLOADSを選択し、ダウンロードすることができます。
https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER

不具合修正等もありますので最新のバージョンを利用しましょう
記事作成時の最新バージョンは1.2.1

Java実行環境のインストール

GUI Guider を使用するには、JREがインストールされている必要があります。JRE環境がインストールされていない場合は、以下のページからダウンロードしてインストールしてください。
http://jdk.java.net/archive/
https://docs.microsoft.com/ja-jp/java/openjdk/download
記事作成時はMicrosoft社のページからダウンロードしたOpenJDK 11.0.12を使用

GUI Guiderのインストールと起動

GUI Guiderのインストーラを起動し指示に従いインストールします。インストール完了後、ソフトを起動させると以下のような画面が起動します。

GUI Guiderの基本操作

プロジェクト作成

GUI Guiderを起動するとプロジェクト作成ウィンドウが開くので各種設定を行います

「BOARD TEMPLATES」をクリックし、MIMXRT1176xxxxxを選択

「APPLICATION TEMPLATES」をクリックし、「buttonCounterDemo」を選択する。
※他のTEMPLATESも動作確認が終わった後に試してみてください

解像度の選択

評価ボードと組み合わせて使用できる液晶に合わせた設定が自動で選択されているのでそのままでOK

コードの生成

i.MX RT1170では、PXPとVG_LITEの双方がサポートされていますが、GUI Guiderのコード生成機能ではどちらか一方を選択して利用する形になります。PXPはpixel処理向けのハードウェアの加速エンジンを利用し、VGLiteは Vector Graphics Acceleration を持つ2D GPUを利用します。ユースケースによって、よりパフォーマンスが得られる選択は変わりますので、最終的には双方試してみることをおすすめします。
※本記事の例では、VGLiteを選択しています。

画面右側にある「System」タブから、使用するGRAPHICS ACCELERATORを指定できます。

画像プリレンダリングが多い場合はPXPを推奨
Widgetsが多い場合はVGliteを推奨

シミュレータでの確認

「Generate Code」の右側にある「Run Simulator」から「Project」を選択すると、シミュレータ向けにビルドが実行され後、シミュレータが起動し動作確認することができます。

Plusをクリックするとカウンタの値が増加し、Minusをクリックするとカウンタの値が減少する動きを確認できます

評価ボードと液晶の接続

評価ボードと液晶は写真のような状態で接続します。実機での動作確認時に、画面の表示がおかしい、画面をタッチしたのに反応しないといった症状がある場合は、液晶と評価ボード本体とのフレキケーブル接続状態を確認してください。コネクタに奥まで差し込めていない、コネクタのロックが甘いといった場合に先述した症状がでることがあります。

実機での確認

ここまで確認できたら、評価ボードで動かしてみましょう。MCUXpressoを使用した時と同じようにPCへi.MX RT1170評価ボードを接続した状態で、「Run Simulator」の右にある「Run Target」をクリックすると現れる「M MCUx」を選択します。ボードにプログラムが転送されると、評価ボードに接続した液晶にシミュレータで確認したものと同じ画面が表示されているはずです。画面をタッチし、同じ結果が得られるか確認してみてください。
ここまでで一通りの基本操作とその流れを実行してみましたがいかがでしたか？GUI Guiderを使用すると非常に簡単に画面の作成から動作確認までを行うことができることを体感できたと思います。

MCUXpressoプロジェクトへの取り込み方法

GUI Guiderからのエクスポート

GUI Guiderで作成した画面デザインは、他の開発環境向けにエクスポートして利用することができます。今回は、MCUXpressoで利用するための手順を説明します。
GUI Guiderで画面デザインが作成できたら、「File」メニューから「Export Code」を選択します。MCUXpressoで利用するには、「MCUx Code」を選択します。

保存先を指定するダイアログボックスで出力先を指定して保存する。
エクスポートが完了すると、以下のようにMCUXpressoへ取り込むファイルが出力される。

これでファイルの準備は完了です。

MCUXpressoプロジェクトの準備

エクスポートしたファイルを利用するためのMCUXpressoプロジェクトを作成します。
MCUXpressoの「File」メニューから「New」->「Import SDK Examples」を選択します。

第一回の解説でも説明したようにRT1170を選んで進みます。

ベースとして利用するプロジェクトを選択します。今回はGUI Guiderで作成したソースコードを取り込んで利用したいので、「littlevgl_examples」から「littlevgl_guider_cm7」を選択します。

ソースファイルの取り込み

作成したプロジェクトの構成を見ると、GUI Guiderからエクスポートした際に生成されたディレクトリと同じディレクトリが見えると思います。
・custom
・generated
・source

同じ名前のディレクトリに、エクスポートしたファイルを配置(上書きコピー)すれば取り込みは完了です。

ビルドと動作確認

ここまでできれば、前回までに解説してきたMCUXpressoの使いかたと同じです。ビルドを実行し、評価ボードにプログラムを転送して実行してみましょう。GUI Guiderを用いて実行した時と同じ結果を得られると思います。
画面デザインが簡単にできるGUI Guiderを活用することで、効率的な開発を行うことができます。

GUI Guiderで簡単アニメーション

応用例紹介

GUI Guiderを用いると、少し凝った動きのある表示も簡単に作成することができます。一例として、簡単なアニメーション表示するまでの流れを見てみましょう。
GUI Guiderを起動し、まずはプロジェクトを作成します。今回は、APPLICATION TEMPLATESは無しで進めてみます。

Widgetsの配置

APPLICATION TEMPLATESを指定しない場合は、以下のように何もない画面がデフォルトとなります。画面左に表示されている「Widgets」タブの中からパーツを選び配置していきます。

アニメーションを表示するためには、ImageグループからAimgパーツをドラッグアンドドロップして配置します。

Widgetsの設定

画面右側で、選択したWidgetsの設定が行えるので、ここで位置の調整やアニメーション速度などを設定することができます。

表示画像の取り込み

任意の画像をGUI Guiderで扱うには、GUI Guiderプロジェクトディレクトリ内にある「import」ディレクトリにファイルを格納することで使用できるようになります。
使用したい画像ファイルがある場合は、このディレクトリにコピーしておきましょう。ここに格納された画像ファイルは、Importタブから確認することができます。

連続表示画像の指定

配置した「Aimg」Widgetsの詳細設定に「IMAGES」という設定項目があるので「+」ボタンをクリックして画像を追加します。「+」ボタンを押すと、画像を選択するボタンが出現するので、ここから画像を指定します。
選択の際に複数の画像を一度に選択することもできます。

これでアニメーションに利用する画像を選択することができました。上部に指定されたものから順番に表示が更新されていきますので、目的の順に並んでいることを確認したらシミュレータや評価ボードに転送して確認してみましょう。

完成動画

GUI Guiderを使用すると、以下に示す起動ムービーのような演出も作成することができます。

その他参考動画

GUI Guiderやサードパーティツール等とi.MX RTクロスオーバーMCUを使用すれば、表現豊かなアプリケーションを作成することができます。その例を以下に紹介します。各動画を見ていただければ、その実力を感じることができると思いますので見てみてください。

https://www.nxp.com/video/lvgl-smart-home-demo-on-i-mx-rt1060:LVGL_SMART_HOME_DEMO
https://www.youtube.com/watch?v=AdRSVpkNzR4&list=PLPtvbG7RC0TiUwVwiEV1ghtLGNm_6YLA0&index=13
https://www.youtube.com/watch?v=OyNPp_5nOsA
https://www.youtube.com/watch?v=XOEDSeh84IM

まとめ

GUI Guiderを使うことで、質の高いGUIを簡単に作成することができましたね。

i.MX RT1170 EVK

i.MX RT1170 EVKは、高性能なソリューションを高集積基板で提供します。低コストで優れたEMC性能を実現するスルーホール設計の6層PCBで構成され、主要なコンポーネントとインターフェースを搭載しています。
最新情報をメーカーサイトで見る

#Arm #Cortex #IoT #MCU #産業機器 #開発環境/開発ツール

投稿者

APS

毎月約50,000人のエンジニアが利用する「APS-WEB」の運営、エンジニア限定セミナー「APS SUMMIT」の主催、最新事例をまとめた「APSマガジン」の発行、広い知識と高い技術力を習得できる「APSワークショップ」の開催など、半導体専門技術コンテンツ・メディアとして日々新しい技術ノウハウを発信しています。