はじめに
グラフィカル・ユーザー・インターフェース(GUI)はますます人気が高まっており、これまで以上に豊富なグラフィックスを備えていますが、これらのディスプレイの作成には、助けがなければ時間がかかる場合があります。製品開発において市場投入までの時間が非常に重要な要素であるため、製品のGUIの開発をスピードアップするためのツールを用意することが重要です。SEGGER の AppWizard は、すぐに実行できる GUI アプリケーション (もちろん、SEGGER の emWin グラフィックス ライブラリの上に構築されています) を作成するのを支援する GUI 開発ツールです。
このドキュメントでは、新しいAppWizardプロジェクトを作成し、GUIプロジェクトを開始するための背景画像を追加する方法を示します。ここではi.MX RT1050 を使用しますが、この手順は MCUXpresso SDK の emWin でサポートされているすべてのデバイスに適用する必要があります。
環境
- SEGGER AppWizard v1.0 以降
- NXP MCUXpresso IDE v11.0.1 以降
- MIMXRT1050-EVKB
- MIMXRT1050-EVKB用MCUXpresso SDK(emWinを含む)
MCUXpresso SDK のダウンロードとインストール
最初のステップは、作業しているデバイスのMCUXpresso SDKをダウンロードしてインストールすることです。emWin がオプションのソフトウェアコンポーネントとして含まれていることを確認してください。これを行う方法については、ビデオ「 emWin と MCUXpresso の概要」を参照してください。
AppWizardのダウンロードとインストール
AppWizardは、 NXP emWinライブラリの[ダウンロード]タブからダウンロードできます。www.nxp.com/emwin-graphics-libraries に移動し、[ダウンロード]タブをクリックし、AppWizardアプリケーション開発ツールの横にある[ダウンロード]をクリックします。
このリンクをクリックすると、インストーラーがPCにダウンロードされます。インストーラーを実行し、プロンプトに従ってAppWizardをPCにインストールするだけです。NXPでは、存在するインストールオプションのデフォルトを選択することを推奨していることに注意してください。
SDK サンプルのインポート
新しいAppWizardプロジェクトを作成する前に、生成されたファイルを保存およびエクスポートするためのスペースが必要です。NXPでは、テンプレートとして使用する最も簡単な例であるemwin_serial_terminalデモをインポートすることをお勧めします。この例をインポートするには、次の手順に従います。
- MCUXpresso IDEを開き、任意のワークスペースを選択します。
- クイック スタート パネルで、 [SDK サンプルのインポート] を選択します。
- ボードまたはデバイスを選択します。お使いのボードまたはデバイスが SDK で emWin でサポートされていることを確認してください。この例では、evkbmimxrt1050 を選択します。
- 次のダイアログ ボックスで、[例] カテゴリの emwin_examples グループを見つけて展開します。emwin_serial_terminal例を選択します。ここでは、プロジェクトに説明的なプレフィックスまたはサフィックスを付けることもできます。
新しい AppWizard プロジェクトの作成
サンプルプロジェクトが作成されたら、プロジェクトを保存し、生成されたファイルを保持する場所があるため、AppWizardプロジェクトを作成できます。次の手順に従って、新しい AppWizard プロジェクトを作成します。
- まず、AppWizardを開きます。AppWizardを初めて開く場合は、新しいプロジェクトを作成するか、プロジェクトを開くか、キャンセルするように求められます(これは単にアプリケーションを閉じます)。その場合は、[新しいプロジェクトの作成] を選択します。そうでない場合は、[ファイル] - [新しいプロジェクト] > を選択できます。
- 追加のオプションを含むダイアログボックスがポップアップします。
- [参照] を選択して、AppWizard で生成されたファイルの保存先フォルダーを選択します。インポートしたばかりのプロジェクトのローカルな場所を選択することをお勧めします。これは、MCUXpressoの起動時に選択したワークスペースの場所にあります。
- 次のステップは、AppWizardプロジェクトに名前を付けることです。以下に示すように、MCUXpresso プロジェクトと同じ名前に "_AppWizard" を付加したものを選択することをお勧めします。
- これで、BSP を選択できます
- BSP を選択する場合は、ボードの BSP を必ず選択してください。
- BSP を選択する場合は、ボードの BSP を必ず選択してください。
- または 、使用しているデバイスとディスプレイが所定の BSP で使用できない場合は、ディスプレイ サイズとカラー形式を手動で選択します。 (注 : BSP を選択しない場合、このチュートリアルを機能させるには、Target/GUI_Lib フォルダを手動で作成する必要があります。この手順については、このドキュメントの後半で説明します)。
最後の 3 つのチェックボックスは、SD カードのサポート、双方向テキストのサポート、およびタイ語のサポートを有効にするオプションの選択です。
- 最後に、[OK]をクリックして新しいプロジェクトを作成します。
新しく作成された AppWizard プロジェクトでは、空白のキャンバスが表示されます。
プロジェクト フォルダーには、プロジェクトの作成時に established という名前のプロジェクトの名前が付いた新しいフォルダーが作成されます。
このフォルダには、作成した AppWizard プロジェクト、Simulation フォルダ (シミュレーション ファイルを保持するため)、Source フォルダ (AppWizard が作成するソース ファイルを保持するため)、および Target フォルダ (BSP ファイルとライブラリ ファイルを保持) があります。(注 : BSP を選択しなかった場合、ターゲット フォルダは存在しません。
BSP を選択しなかった場合は、evkbimxrt1050_emwin_serial_terminal_AppWizard フォルダに Target フォルダを手動で作成します。Target フォルダー内に、GUI_Lib フォルダーを作成します。次に、ヘッダー ファイルを
次に、作成したばかりの Target/GUI_Lib フォルダにライブラリを
AppWizard プロジェクトに背景画像を追加する
次に、プロジェクトに背景画像を追加し、MCUXpressoプロジェクトで使用するファイルを生成します。以下の指示に従って、プロジェクトに背景画像を追加します。
- 左側のパネルで「イメージ」をクリックして、「イメージ・リソース」ダイアログ・ボックスを開きます。
- [イメージ リソース] ダイアログ ボックスで、[追加] を選択します。
- これにより、PCのどこからでも画像を選択できます。選択したファイルは自動的にコピーされ、
/リソース/イメージに配置されます。画像を追加したら、キャンバスに追加する必要があります。空白のキャンバスに任意のオブジェクト(画像を含む)を追加できるようにするための最初のステップは、キャンバスに画面を追加することです。画面アイコンをキャンバスにドラッグアンドドロップして、画面を追加します。画面を追加して選択すると、画面のプロパティが表示され、必要に応じてプロパティを編集できます。 - 次に、画像アイコンをクリックして、追加したばかりの画面にドラッグして、画像オブジェクトを画面に追加します。
- 画像を選択した状態で、画面右側のウィンドウ パネルから画像のサイズ、位置、名前を変更できます。高さと幅を画面のサイズに合わせて変更し、0, 0 に変更します。
- このコントロールパネルを使用して、ビットマップの左側にある矢印をクリックし、ビットマップの下の四角形をクリックして、このイメージオブジェクトに使用するビットマップイメージを設定します。
- 四角形をクリックすると、[画像の選択] ダイアログ ボックスが表示されます。スクロールして使用する画像を見つけて選択し、[選択]をクリックして画像として使用します。
- これで、画像が画面に表示されるのと同じようにプロジェクトに表示されます。
- 最後に、[ファイル] - >[エクスポート] をクリックし、[保存] をクリックします。これにより、開発ボードのプログラミングに必要なAppWizardファイルが生成されます。
MCUXpresso プロジェクト設定の変更
AppWizard プロジェクト ファイルが生成されたら、AppWizard ファイルを使用するように MCUXpresso プロジェクトを変更する必要があります。MCUXpresso プロジェクトは、このドキュメントの前の指示からまだ開いている必要があります。そうでない場合は、戻って実行し、プロジェクトが開いていることを確認します。
次の手順では、AppWizard ファイルを使用するように MCUXpresso プロジェクトを構成する方法について詳しく説明します。
- MCUXpresso プロジェクトでは、まず MCUXpresso プロジェクト エクスプローラーで AppWizard プロジェクト フォルダーを見つけます。フォルダを右クリックし、図のように[プロパティ]を選択します。
- C/C++ ビルド カテゴリの [設定] を選択します。[ビルドからリソースを除外する] がオフになっていることを確認し、[適用して閉じる] をクリックします。
- 次に、AppWizard プロジェクト フォルダーを展開し、次に Target フォルダーを展開します。Configフォルダを右クリックし、[プロパティ]ダイアログボックスを開きます。
- C/C++のビルド>設定で、「ビルドからリソースを除外する」にチェックを入れてください。次に、[適用して閉じる] をクリックします。
- BSP、FS_Lib、OS_Lib、SEGGER、Shared、および Simulation フォルダに対して手順 3 と 4 を繰り返します。
- プロジェクトを右クリックし、[プロパティ]を選択して、プロジェクトのプロパティダイアログボックスを開きます。
- [C/C++ ビルド -> 設定] カテゴリで [MCU C コンパイラ -> アーキテクチャ] を選択します。図のように [浮動小数点] を [なし] に変更します。
- MCU Assembler -> Architecture and Headersで、図のようにFloating pointをNoneに変更します。
- MCU Linker-> Architectureで、図のようにFloat PointをNoneに変更します。
- 次に、MCU Linker -> Librariesで、ライブラリを「GUI」に変更し、検索パスをライブラリが配置されている場所に変更します。(PC のファイルシステムでは、ライブラリの名前は実際には "libGUI.a" であることに注意してください。MCUXpresso は、引き続き GUI を検索するように設定する必要があります。MCUXpresso は "lib" で始まるファイルを検索し、このライブラリをリンカに渡すときにこのプレフィックスを削除します。
- プロジェクト設定を変更する最後の手順は、インクルード検索パスの追加です。 [MCU C コンパイラ] で [インクルード] を選択し、次のパスが含まれていることを確認します
- "${workspace_loc:/${ProjName}/evkbimxrt1050_emwin_serial_terminal_AppWizard/Target/GUI_Lib"
- "${workspace_loc:/${ProjName}/evkbimxrt1050_emwin_serial_terminal_AppWizard/source/generated"
- "${workspace_loc:/${ProjName}/evkbimxrt1050_emwin_serial_terminal_AppWizard/Source/CustomCode"
- "${workspace_loc:/${ProjName}/evkbimxrt1050_emwin_serial_terminal_AppWizard/Target/BSP/iMXRT1052_MIMXRT1050_EVK/Setup"
- "${workspace_loc:/${ProjName}/evkbimxrt1050_emwin_serial_terminal_AppWizard/Target/Inc"
- また、次のパスも必ず削除してください。
- "${workspace_loc:/${ProjName}/emwin/emWin_Config
- "${workspace_loc:/${ProjName}/emwin/emWin_header
プロジェクトソースの変更
プロジェクトのプロパティを変更した後、元のソースは AppWizard で使用することを意図していなかったため、ソース ファイルを変更する必要があります。ここでは、作業を開始するために必要なソースの変更を示します。
- APPW_X_NoFS.c をプロジェクトに追加するには、このファイルを PC のファイル システムの Source フォルダーにコピーするだけです。(APPW_X_NoFS.cファイルは、NXP emWinライブラリのダウンロードタブからダウンロードできます。
- メインソースファイル emwin_serial_terminal.c では、以下に示すように、BOARD_InitLcd() の下のすべてをコメントアウトまたは削除します。
- BOARD_InitLcd() のすぐ下に、次に示すように MainTask() の呼び出しを挿入します。
- 最後に、emwin_support.hを開きます(ボードフォルダにあります)で、LCD_BITS_PER_PIXELを32に変更します。デフォルトを 8 のままにすると、LCD_X_DisplayDriver の書き込み方法により、背景画像がフレーム バッファーに読み込まれます。
まとめ
AppWizardで新しいプロジェクトを作成する方法と背景画像を追加する方法は以上です。この時点で、プロジェクトをコンパイルしてターゲット ボードにダウンロードできるはずです。テンプレートとして使用する簡単な SDK サンプルをインポートする方法、新しい AppWizard プロジェクトを作成する方法、このプロジェクトに画面とイメージを追加する方法、AppWizard プロジェクトのソース ファイルとライブラリを使用するようにテンプレート プロジェクトを変更する方法、および新しい AppWizard プロジェクトを使用するようにソースを変更する方法を理解している必要があります。
お客様は 、「新しいAppWizardプロジェクトの作成」セクションの手順6に従います。しかし、彼女のすべての画面は重なり合い、次の画面に変わる前に数回ちらつきます。添付されているのはビデオです。
この動作の考えられる理由は何でしょうか?アドバイスをいただければ幸いです。
よろしくお願いします。
オードリー
Hi @EngHuiPeng ,
RT1064 デバイスが v1.2 の選択リストにない場合は、AppWizard でこのデバイスをまだサポートしていない可能性があります。私が概説したように、新しいAppWizardプロジェクトの作成セクションのステップ6に従う必要があります。ライブラリを含める手順はそこにあります。
よろしくお願いいたします。
クリス
クリス
v1.2 を使用してみましたが、RT1064 の BSP 選択が表示されません。ライブラリの置換方法。
ありがとうございます。
よろしくお願いします。
オードリー
Hi @EngHuiPeng ,
これは可能だと信じています。私はこれを試していませんが、それが機能しない理由も見当たりません。BSPなしで作業したときに示したのと同じ方法でライブラリファイルを置き換える必要があると思います。
よろしくお願いいたします。
クリス
お客様は、RT1064用のEmWin AppWizardの使用を希望しています。彼らは、nxp.com のEmWin Appwizard v1.08の代わりに最新バージョンのSegger Appwizard v1.20(SeggerのWebサイトからダウンロード)を使用できるかどうかを私たちに確認しています。最新のAppwizardバージョンのSDKサポートはありますか。
ありがとうございます。
よろしくお願いします。
オードリー