- はじめに
- 要件
- ユーティリティの使用量
- インテグレーション
- 機能デモ
1. イントロダクション
このドキュメントでは、MCUXpresso SDK に含まれている emwin_temperature_control デモと emWin ユーティリティを参照として使用して、emWin アプリケーションを作成する方法について説明します。この例のカスタム アプリケーションは Tic-Tac-Toe ゲームで、emWin GUI をユーザー入力として使用し、emWin で生成されたコードにゲーム実装の適切なロジックを追加し、MIMXRT1060-EVK ボード上で実行します。
2. 応募資格
このデモのデモには、次の資料が必要です。
- RK043FN02H-CT 4.3インチLCDパネル を搭載した MIMXRT1060-EVKボード 。
- MCUXpresso IDE v11.0.
- EMWinミドルウェアを含むEVK-MIMXRT1060用のMCUXpresso SDK v2.6.2。
- Segger emWin 5.38b ライブラリとユーティリティ。
- emWin 5.30 のドキュメント。
3. ユーティリティの使用
このデモでは、GUIBuilderユーティリティのみを使用し、このユーティリティから、ウィンドウ、テキスト、ボタン、画像の4つのウィジェット要素のみがアプリケーションに実装されます。
最初に、1 つのウィンドウが追加され、その xSize と ySize が画面の解像度と一致する 480 x 272 に構成されます。
このウィンドウの上には、他のすべての要素が配置されます。各ウィジェットには、右クリックメニューで追加/変更できるプロパティがあります。
使用されているウィジェット要素の総数は次のとおりです。
- 3 つのテキスト ウィジェット (1 つはタイトル用、もう 1 つは次のターンを示す)、3 つ目は空のウィジェット (ゲームの勝者を示す (または引き分けを示す) を示すために動的に更新されるため)。
- BPMファイルがロードされ、定数配列に変換される2つの画像ウィジェットには、ゲームの現在のターンを示すクロス/サークルアイコンがあります。
- 10個のボタンウィジェット(1つはゲームを再初期化するためのウィジェット、残りの9つはゲームに使用される3x3配列の構築用)。
完全なアプリケーション・レイアウトを次の図に示します。
次に、「File」->「Save」メニューをクリックし、「WindowDLG.c」という名前のファイルをクリックします。ファイルは、GUIBuilderユーティリティが配置されているのと同じフォルダに作成する必要があります。「WindowDLG.c」このデモのファイル、および十字/円アイコンのBMPファイルは、このドキュメントの添付ファイルにあります。さらに、「File->Open」をクリックして、ダウンロードした「WindowDLG.c」を開くこともできますファイルを作成し、自分で変更します。
4. 統合
1) まず、MCUXpresso SDK for MIMXRT1060-EVK ボードに含まれる "emwin_temperature_control" デモをインポートする必要があります。
SDK サンプルのインポート -> evkmimxrt1060 -> emwin_examples -> emwin_temperature_control
2) デモをインポートした直後に、便宜上、プロジェクトの名前と "source->emwin_temperature_control.c" を "evkmimxrt1060_emwin_tictactoe" と "emwin_tictactoe.c" に変更しました (右クリックで -> の名前を変更)。
これらの変更を適用すると、デモをエラーなしでコンパイルおよびダウンロードでき、問題なく実行できるはずです。
3)次に、「WindowDLG.c」を開きますGUIBuilderによって生成されたファイルを作成し、「Defines」セクションを見つけます。それらすべてをコピーし、「emwin_tictactoe.c」にすでに含まれているウィジェットIDの定義を置き換えますファイル。
4) 「emwin_tictactoe.c」の「Some dimension defines」セクションと「Colors」セクションも削除します。ファイル、および「Structures」、「Static data」の内容。同じファイルから、 "_aGradient"、 "_GetSelectedRoom"、 "_SetFanButtonState"、 "_cbButton"、 "_cbButtonFan"、 "_cbKnob"、 "_DrawKnob"、 "_OnRelease"のセクションも削除します。
5) 「WindowDLG.c」から「_acImage_0」配列と「_acImage_1」配列を追加します。ファイルを "emwin_tictactoe.c" の "Static data" セクションに格納します。ファイル。
6) 「emwin_tictactoe.c」の「_aDialogCreate」配列のすべての要素を置き換えます。「WindowDLG.c」のものを使用ファイル。
7) 関数「_GetImageById」を追加し、「WindowDLG.c」ファイルの「_cbDialog」関数を「emwin_tictactoe.c」ファイルに置き換えます。
9)さて、ゲーム自体の実装のために、次の変数が「emwin_tictactoe.c」の「静的データ」セクションに追加されますファイル。
- 「player_turn」は、移動中の現在のプレーヤー(「X」または「O」)を示します。
- 「slots_free」は、空きスロットがいくつ残っているかを知るためのカウンターです。
- 「winner_player」は、誰が勝者であるか、またはゲームが引き分けであるかどうかを示します。
- 「slot_status」配列は、各スロットの現在のステータスを保存するために担当します
U8 i, player_turn=0, slots_free=9, winner_player=0;
const U32 player_colors[] = {GUI_RED, GUI_BLUE};
列挙型 {SLOT_FREE, SLOT_X, SLOT_O, SLOT_LOCK};
U8 slot_status[] = {SLOT_FREE, SLOT_FREE, SLOT_FREE,
SLOT_FREE、SLOT_FREE、SLOT_FREE、
SLOT_FREE、SLOT_FREE、SLOT_FREE};
10) また、すべての可能なスロットの組み合わせをチェックして、勝者を定義するか、試合が引き分けかを定義する機能も実装されました。それは機能「CheckWinner」であり、「emwin_tictactoe.c」でckechされる可能性があります添付ファイルのファイルには、Tic-Tac-Toe デモを実行するために必要なすべての変更がすでに含まれています。また、その関数プロトタイプを「emwin_tictactoe.c」の「プロトタイプ」セクションに追加する必要がありますファイル。
11) 基本的に、ほとんどすべてのゲームの仕組みは、9x9 Buttons ウィジェットの "WM_NOTIFICATION_CLICKED" イベントによって定義されるため、"_cbDialog" 関数内に実装されます。以下に "ID_BUTTON_0" のコードを示します。赤い ハイライト は、各ボタンイベントで何が変わるかを示しています。
case ID_BUTTON_0: // 'Button' から送信される通知
スイッチ(NCode) {
ケースWM_NOTIFICATION_CLICKED:
USER START(オプションで通知メッセージに反応するコードを挿入)
if (slot_status[0] == SLOT_FREE){
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
BUTTON_SetTextColor(hItem, 0, player_colors[player_turn]);
if (!player_turn){
BUTTON_SetText(hItem, "X");
slot_status[0] = SLOT_X;
}
それ以外の場合{
BUTTON_SetText(hItem, "O");
slot_status[0] = SLOT_O;
}
player_turn ^= 1;
slots_free--;
}
ユーザーエンド
壊す;
12)再起動ボタンの場合、実装されたロジックは、すべてのスロットステータスを「空き」に戻したり、すべてのスロットの内容を消去したり、空きスロットのカウンターを9に再起動したりする役割を果たします。
13) すべてのGUIウィジェットイベントをポーリングした後、「CheckWinner」関数が呼び出され、勝者が定義され、元々空だった「Text_Winner」ウィジェット(画面の左上隅)に示されます。
14) また、移動中のプレーヤーが誰であるかに応じて、Cross/Circle アイコンの周囲に緑色の長方形を直接描画する機能 (emWin Draw 関数を使用) も実装されています (最後に "_cbDialog" 関数内にも実装されています)。
移動中のプレイヤーを示す緑色の長方形を描画します
if (!player_turn)
{
GUI_SetColor(GUI_GREEN);
GUI_DrawRoundedFrame(6、106、83、183、0、4);
GUI_SetColor(GUI_BLACK);
GUI_DrawRoundedFrame(6、186、83、263、0、4);
}
然も無くば
{
GUI_SetColor(GUI_GREEN);
GUI_DrawRoundedFrame(6、186、83、263、0、4);
GUI_SetColor(GUI_BLACK);
GUI_DrawRoundedFrame(6、106、83、183、0、4);
}
15) 最後に、GUIを初期化する直前に、ウェルカムメッセージ付きのprintfが「main」 機能に追加されました。
PRINTF("三目並べのデモ i.MXRT1060.\r\n");
5. 機能デモンストレーション
以下は、実行中のアプリケーションのキャプチャ、Cross が勝ったとき、Circle が勝ったとき、および試合が引き分けになったときのキャプチャを示しています。
