目的

液晶ディスプレイを介した対話的なGUIアプリケーションの作成方法を紹介する
1. QE for Display[RX]を使用して下記のドライバやソフトウェアの組み込み/設定を行う
  
  組み込み/設定方法はQE for Display[RX]のアプリケーションノート（R20AN0582xxxxxx）も参照のこと
2. RX72Nマイコン周辺機能のグラフィックLCD コントローラ(GLCDC)や2D 描画エンジン(DRW2D)、及び、SEGGER社のemWinソフトを使用し、液晶ディスプレイに文字や図形を表示する
3. GUIデザインツールAppWizardを使用し、液晶ディスプレイに対話的なGUIを設置する
4. 液晶ディスプレイへ表示させたボタンのタッチ操作によってLEDの点灯を制御する

準備するもの

必須
- RX72N Envision Kit × 1台
- USBケーブル(USB Micro-B --- USB Type A) × 1 本
- Windows PC × 1 台
  - Windows PC にインストールするツール
    - e2 studio 2020-07以降
      - 初回起動時に時間がかかることがある
        
        CC-RX V3.02以降

前提条件

新規プロジェクト作成方法(ベアメタル)を完了すること
- 本稿では、新規プロジェクト作成方法(ベアメタル)で作成したLED0.1秒周期点滅プログラムに対し、以下の内容を追加する形で実装する
  1. QE for Displayを活用し、GLCDドライバ、DRW2Dドライバ、emWinを手軽に組み込み/設定
  2. AppWizardを使用してGUIを設置
  3. GUIを制御するコードを追加
最新のRX Driver Package(FITモジュール)を使用すること

QE for Display使用のための事前準備

初回のみ実施
- インストール方法に従ってQE for Displayをダウンロード/インストールする
- DRW2D FITモジュール、及び、emWin FITモジュールをダウンロードし、FITモジュールの保存先フォルダに配置する
  
  DRW2D FITモジュール、及び、emWin FITモジュールはRX Driver Package V1.26時点には同梱されていないため

回路確認

LCDに関連する回路を以下のとおり確認する

LCDグラフィックLCDコントローラ(GLCDC)

RX72N Envision Kitには4.3インチWQVGA TFT-LCDが実装されている

出力データフォーマットはRGB565形式（パラレル16ビット）
- RGB565とは、RとBがそれぞれ5bit、Gが6bitの計16bit（65,536色）で色を表現する形式
  - ちなみに、GがRやBに比べて1bit分大きい理由は、緑色が人間の目に最も反応しやすいため

RGB565の場合、LCDにデータを出力する端子（LCD信号出力端子）はLCD_DATA15～LCD_DATA0の16bitバス

RX72N ハードウェアマニュアル（R01UH0824xxxxxx）の51.1.5章 (3)を参照

LCD信号出力端子のそれぞれが出力する色を事前確認することが必要

GLCDCのB/R入れ替え機能を使用することでピクセル配列順序を切り替えることができる

RX72N ハードウェアマニュアル（R01UH0824xxxxxx）の51.1.5章 (3) パラレルRGB(565) フォーマットにおけるLCD信号のビット配置を参照のこと）

LCDのData端子	R-G-Bのピクセル配列の場合	B-G-Rのピクセル配列の場合
LCD_DATA_11~LCD_DATA_15	Rのカラーデータ出力端子	Bのカラーデータ出力端子
LCD_DATA_0~LCD_DATA_4	Bのカラーデータ出力端子	Rのカラーデータ出力端子

B/R入れ替え機能を必要に応じて使用しない場合、本来意図どおりに発色されないので注意
- 例えば、RX65N(2MB) RSK+の場合、RX65N マニュアルとRSK+ユーザズマニュアル、TFTの回路図の情報を総合すると、R用のLCD信号出力端子がB用のTFT（HX8257-A）端子に、B用のLCD信号出力端子がR用のTFT端子につながっている（RX72N Envision Kitとは逆）
  - この時、B/R入れ替え機能を使用しピクセル配列順序を切り替えて、発色を調整する必要がある

その他、パネルクロック出力端子（LCD_CLK）や同期信号出力端子（LCD_TCON3～LCD_TCON0）を使用

RX72N ハードウェアマニュアル（R01UH0824xxxxxx）の51.1章表51.2を参照

静電容量方式タッチコントローラ

静電容量方式タッチコントローラ（FT5260）がRX72N Envision Kitに実装されている
RX72NマイコンはI2Cシリアルインタフェースにて静電容量方式タッチコントローラとデータ通信を行い、
コントローラの動作を制御する

BDF確認

プロジェクトにBDFEnvisionRX72Nが適用されていることを確認する
- スマート・コンフィグレータの使い方#ボード設定を参照
- 適用されていない場合、上記リンク先に対処法が記載

QE for Displayによるドライバソフトウェア/ミドルソフトウェアの設定

適用先プロジェクトの設定

Renesas Views -> Renesas QE -> LCD メイン RX (QE)を実行しQE for Displayを開く
QE for Displayのプロジェクトの選択のプルダウンメニューからQE for Displayを適用するプロジェクトrx72n_envision_kitを選択する
選択後、評価ボードがEnvisionRX72N (V.x.xx)になることを確認する
- プロジェクトにBDFEnvisionRX72Nが適用されているため、プロジェクトの選択でプロジェクトを選択した際に評価ボードが自動で切り替わる
GUI描画ツールの選択でemWinを使用するを選択する

LCDコントローラの設定

LCDコントローラの設定方法を以下に記載する
- スマート・コンフィグレータ（SC）を使用してLCDコントローラ（GLCDC FITモジュール）をプロジェクトに導入する
  - SCを開き、r_glcdc_rxをコンポーネント追加する
    - FITモジュールの依存関係でエラーになる場合は、各種FITモジュールのバージョンが適切でない可能性がある
      - エラー内容に従って各種FITモジュールのバージョンを変更すること
  - SCのコード生成を一旦実行する
- LCD メイン RX (QE) -> LCDコントローラの導入 -> 導入済みになっていることを確認する
- LCD メイン RX (QE) -> LCDの表示調整 -> 表示タイミング調整LCDコントローラの設定を実施する
  - デフォルトのタイミング設定ではエラーが発生しているので、エラーを解消する
    - リフレッシュレート[Hz]と水平周波数[kHz]がそれぞれ設定可能な値を満たし、かつ、差分が0.0になるように設定する（以下は例）
      - PLL回路周波数[MHz]：240
        
        PLL回路周波数をSCのクロック設定と同値に変更する
        
        ★将来改善★ SCのクロック設定から値を自動的に取得するように改善する見込み
      - パネルクロック周波数[MHz]：10.000000
        
        パネルクロック周波数はPCLKA未満の値に設定する
      - HPW：30
      - HBP：54
      - HFP：20
  - QE for Displayを使用する場合、r_glcdc_rxに関するSCのコンポーネント設定は不要
- LCDコントローラの設定ファイルをQE for Displayから生成する
  - LCD メイン RX (QE) -> LCDの表示調整 -> ファイル出力を実行
    - デフォルトの出力先は.\rx72n_envision_kit\src直下である
    - フォルダ指定をチェックしてファイル出力を実行すると、出力先を選択可能
    - ただし、.\rx72n_envision_kit\src\smc_gen配下は避ける
      - 出力されたファイルがSCのコード生成によって削除される恐れがあるため
導入方法の詳細はLCD メイン RX (QE) -> LCDコントローラの導入 -> 導入方法を参照

GUI描画ツールの設定

GUI描画ツールの設定方法を以下に記載する
- SCを使用してGUI描画ツール（emWin FITモジュール）をプロジェクトに導入する
  - SCを開き、r_emwin_rxをコンポーネント追加する
    - SCの機能により、emWin FITと依存関係をもつ以下のFITモジュールも自動でプロジェクトに追加される
      - r_cmt_rx
      - r_dmaca_rx
      - r_drw2d_rx
      - r_glcdc_rx
      - r_gpio_rx
      - r_sci_iic_rx
    - FITモジュールの依存関係でエラーになる場合は、各種FITモジュールのバージョンが適切でない可能性がある
      - エラー内容に従って各種FITモジュールのバージョンを変更すること
  - SCのコード生成を一旦実行する
- LCD メイン RX (QE) -> GUI描画ツールの導入 -> 導入済みになっていることを確認する
- emWinの設定を実施する
  - フレームバッファ2アドレス：0x00840000
    - 本稿では新規プロジェクト作成方法からセクション設定を変更しないので、上記の値でよい
    - ただし、このバッファアドレスがセクションのアドレスと重複している場合は、セクションのアドレスを変更する
  - GUIで使用する最大メモリサイズ：81920
  - IICで使用するチャネル：6
  - DRW2Dの使用：使用する
  - QE for Displayを使用する場合、r_emwin_rxに関するSCのコンポーネント設定は不要
- emWinの設定ファイルをQE for Displayから生成する
  - LCD メイン RX (QE) -> GUI描画ツールの初期設定 -> ファイル出力を実行
    - デフォルトの出力先は.\rx72n_envision_kit\src直下である
    - フォルダ指定をチェックしてファイル出力を実行すると、出力先を選択可能
    - ただし、.\rx72n_envision_kit\src\smc_gen配下は避ける
      - 出力されたファイルがSCのコード生成によって削除される恐れがあるため
導入方法の詳細はLCD メイン RX (QE) -> GUI描画ツールの導入 -> 導入方法を参照

スマート・コンフィグレータ(SC)によるドライバソフトウェア/ミドルソフトウェアの設定

コンポーネント追加

QE for Displayにて必要なコンポーネントは追加済みなので、操作不要

コンポーネント設定

QE for Displayでの設定にてカバーされないコンポーネントに対し、設定を施す

r_bsp

Heap size：0x4000
- BSP FITモジュールで定義されているデフォルトのHeap sizeの値はGUI描画には不十分なサイズなので、サイズをより大きく取る
- Heap sizeはLCD メイン RX (QE) -> GUI描画ツールの設定 -> GUIで使用する最大メモリサイズの値より大きく取る

r_cmt_rx

デフォルトで問題なし

r_dmaca_rx

デフォルトで問題なし

r_drw2d_rx

無し

r_glcdc_rx

QE for Displayにて設定するので操作不要

r_gpio_rx

デフォルトで問題なし

r_sci_iic_rx

MCU supported channels for CH6：Supported
SCI6 -> SSCL6端子：使用する
SCI6 -> SSDA6端子：使用する

r_emwin_rx

QE for Displayにて設定するので操作不要

端子設定

RX72N マイコンは、1個の端子に複数機能が割り当たっているため、どの機能を使用するかの設定をソフトウェアにより施す必要がある
RX72N Envision KitのBDFを使用している場合、すでに端子を設定済みであるため、作業不要

コード生成

上記の設定をすべて完了後、SCのコード生成を実行する

AppWizardによるGUIオブジェクトの設置

AppWizardのインストール

初回のみ実施
LCD メイン RX (QE) -> GUIの作成 -> 設定を押し、AppWizardの設定ウィンドウを表示する
AppWizardはインストールされていませんと表示されている場合、
AppWizardインストールフォルダにインストールしたいファイルパスを入力 ->
AppWizaradをインストールするを押す
インストールウィザードが表示されるので、画面内容に従ってAppWizardをインストールする
AppWizardの設定ウィンドウを閉じる

AppWizardの設定

LCD メイン RX (QE) -> GUIの作成 -> 設定を押し、AppWizardの設定ウィンドウを表示する
AppWizardはインストールされていますと表示されている場合、OKを押す
AppWizardはインストールされていませんと表示されている場合、以下のどちらかの対応を行う
- AppWizardインストールフォルダにAppWizardがインストールされているファイルパスを入力する ->
  AppWizardはインストールされていますに表示が変わればOKを押す
- AppWizardのインストールを実施する

GUIオブジェクトの設置

AppWizardの起動

LCD メイン RX (QE) -> GUIの作成 -> GUI描画ツール起動を押し、AppWizardを起動する
AppWizardの起動後、e2 studioのプロジェクトツリーから./aw/Resourceと./aw/Sourceが作成されることを確認する

画面設計

AppWizardの画面設計の基本的な流れは以下のとおり
1. Resource(Text, Fonts, Images, Variables)を登録する
2. GUIオブジェクトを配置/設定する
  1. Add objectsペインから配置したいオブジェクトを選択する
  2. Hierarchic treeペインに選択したオブジェクトが追加されたことを確認する
  3. Hierarchic treeペインでオブジェクトの階層を変更する
  4. Hierarchic treeペインでオブジェクトの位置や大きさを変更する
  5. Propertiesペインでオブジェクトのプロパティを変更する
3. Interactionsペインでオブジェクトのイベント及びイベントハンドラ（Slot）を登録する
4. File -> Export & Saveを実行し、ソースコードを出力する
Hierarchic treeのトップにはオブジェクトScreenを必ず配置すること

`Resource` 登録

`Text` リソース

Text リソースの登録方法に従ってID_TEXT_LED_SWITCH_TXTとID_TEXT_OFF_TXTを作成する
- Id："ID_TEXT_LED_SWITCH_TXT"、English："LED Switch"
- Id："ID_TEXT_OFF_TXT"、English："OFF"

GUIオブジェクト配置/設定

`Screen` オブジェクト

まず最初にオブジェクトScreenを配置する
- Add objects -> Screenを選択する
- Hierarchic treeのトップにオブジェクトScreenが追加されたことを確認する
- EditorにオブジェクトScreenが追加されたことを確認する
- Propertiesを変更する
  - Id："ID_SCREEN_00"

`Box` オブジェクト

背景用にオブジェクトBoxを画面一杯に配置する
- Add objects -> Boxを選択する
- Hierarchic treeでID_SCREEN_00の下にオブジェクトBoxが追加されたことを確認する
- EditorにオブジェクトBoxが追加されたことを確認する
  - サイズは変更しない（フルサイズとする）
- Propertiesを変更する
  - Id："ID_BOX_00"
  - Set colorで長方形のエリアを押し、色選択画面を表示する ->
    背景にしたい色を選択する（RGBA = (75, 75, 75, 255)）-> OK

`Switch` オブジェクト

LEDのスイッチ用にオブジェクトSwitchを配置する
- Add objects -> Switchを選択する
- Hierarchic treeでID_BOX_00の下にオブジェクトSwitchが追加されたことを確認する
- EditorにオブジェクトSwitchが追加されたことを確認する
- Editor上のオブジェクトSwitchの大きさを変更する
  - Properties -> Size：150, 50
- Editor上のオブジェクトSwitchをドラッグアンドドロップし、画面の真ん中に移動させる
  - Properties -> Position：165, 111
- Propertiesを変更する
  - Id："ID_SWITCH_00"
  - Set Bitmaps -> BG-Left： Left_80x30.png -> Select
  - Set Bitmaps -> BG-Right： Right_80x30.png -> Select
  - Set Bitmaps -> BG-Disabled： Disabled_80x30.png -> Select
  - Set Bitmaps -> Thumb-Left： ThumbLeft_80x30.png -> Select
  - Set Bitmaps -> Thumb-Right： ThumbRight_80x30.png -> Select
  - Set Bitmaps -> Thumb-Disabled： Disabled_80x30.png -> Select

`Text` オブジェクト

スイッチの用途を示す文字用のオブジェクトTextを配置する
- Add objects -> Textを選択する
- Hierarchic treeでID_SWITCH_00の下にオブジェクトTextが追加されたことを確認する
- EditorにオブジェクトTextが追加されたことを確認する
- Editor上のオブジェクトTextの大きさを変更する
  - Properties -> Size：150, 32
- Editor上のオブジェクトTextをドラッグアンドドロップし、
  オブジェクトID_SWITCH_00の真上に移動させる
  - Properties -> Position：165, 79
- Propertiesを変更する
  - Id："ID_TEXT_LED_SWITCH"
  - Set text color：RGBA = (255, 255, 255, 255) -> OK
  - Set text alignment：Center
  - Set font： NettoOT_24_Normal_EXT_AA4 -> Select
スイッチ状態に合わせてLED状態を示す文字用のオブジェクトTextを配置する
- Add objects -> Textを選択する
- Hierarchic treeでID_TEXT_LED_SWITCHの下にオブジェクトTextが追加されたことを確認する
- EditorにオブジェクトTextが追加されたことを確認する
- Editor上のオブジェクトTextの大きさを変更する
  - Properties -> Size：150, 32
- Editor上のオブジェクトTextをドラッグアンドドロップし、
  オブジェクトID_SWITCH_00の真下に移動させる
  - Properties -> Position：165, 159
- Propertiesを変更する
  - Id："ID_TEXT_LED_STATE"
  - Set text alignment：Center
  - Set font： NettoOT_24_Normal_EXT_AA4 -> Select
LEDの初期状態を示す文字用のオブジェクトTextを配置する
- Hierarchic treeのID_TEXT_LED_STATEを右クリックし、Copyを選択する
- Hierarchic treeで右クリックし、Pasteを選択する
- Hierarchic treeでID_TEXT_LED_STATEの下にオブジェクトID_TEXT_LED_COPYが追加されたことを確認する
- Propertiesを変更する
  - Id："ID_TEXT_LED_STATE_INIT"
  - Set text：ID_TEXT_OFF_TXT -> Select
  - Set text color：RGBA = (80, 80, 80, 255) -> OK
  - Set background color：RGBA = (255, 255, 255, 255) -> OK
  - 他のプロパティはID_TEXT_LED_STATEと同じ

イベント登録

スイッチ状態に合わせてLED状態の文字を表示させるためのイベントを登録する
- Interactions -> +を押す
  - Emitter(イベント発生元)：ID_SWITCH_00
  - Signal(イベント種類)：VALUE_CHANGED(値の変化のイベント)
  - Job(イベント発生によって連動するタスク)：SETVIS(オブジェクトの表示/非表示を設定)
  - Receiver(連動するタスクの宛先)：ID_TEXT_LED_STATE
- ポップアップされるSet interaction parametersウィンドウ -> Use custom defined valueを押す
  - Set visibility：On
  - Slot：ID_SCREEN_00__ID_SWITCH_00__WM_NOTIFICATION_VALUE_CHANGED__ID_TEXT_LED_STATE__APPW_JOB_SETVIS
  - Edit code：AppWizard設定と出力されるソースコードは連動できるため、AppWizardのソースコード出力後に編集する
初期値のスイッチ状態の文字を非表示させるためのイベントを登録する
- Interactions -> +を押す
  - Emitter(イベント発生元)：ID_SWITCH_00
  - Signal(イベント種類)：VALUE_CHANGED(値の変化のイベント)
  - Job(イベント発生によって連動するタスク)：SETVIS(オブジェクトの表示/非表示を設定)
  - Receiver(連動するタスクの宛先)：ID_TEXT_LED_STATE_INIT
- ポップアップされるSet interaction parametersウィンドウ -> Use custom defined valueを押す
  - Set visibility：Off
  - Slot：ID_SCREEN_00__ID_SWITCH_00__WM_NOTIFICATION_VALUE_CHANGED__ID_TEXT_LED_STATE_INIT__APPW_JOB_SETVIS
  - Edit code：編集しない

GUIオブジェクトのプレビュー

Editorペインの再生マークを押し、配置したオブジェクトのプレビューができる
- 本稿では以下の状況をプレビューできればよい
  - 初期状態で、画面真ん中にスイッチのトグルが左側にある
  - 初期状態で、スイッチの真上に白色で"LED Switch"の表示がある
  - 初期状態で、スイッチの真上に白色で"LED Switch"の文字表示がある
  - 初期状態で、スイッチの真下に白色の四角があり、その中に灰色で"OFF"の文字表示がある
  - スイッチをクリックすると、スイッチのトグルが右側に移動し、
    スイッチ真下の四角と文字表示が消える
    - トグル移動後、スイッチ真下の四角と文字表示（ID_TEXT_LED_STATE_INIT）が消えるのは意図どおりの動作
    - トグル移動後、ID_TEXT_LED_STATEはスイッチ真下に表示されているはずだが、文字表示はユーザソースコードで変化させるため、見た目上は何もない
  - スイッチをさらにクリックすると、スイッチのトグルが左側に移動する

GUIオブジェクトのソースコード出力

File -> Export & Saveを実行する
./aw/Source配下にソースコード（特に注目すべきは以下）が出力されたことを確認する
- Resource.h：AppWizardのResource(Text, Fonts, Images, Variables)に関わる
- ID_SCREEN_00.h：オブジェクトID_SCREEN_00とその中に配置されたオブジェクトに関わる
- ID_SCREEN_00_Slots.c：オブジェクトID_SCREEN_00とその中に配置されたオブジェクトのSlotに関わる
- APPW_MainTask.c：AppWizardで作成したGUIオブジェクトの初期化/実行に関わる

ユーザアプリケーション部のコーディング

ソースコード全体

rx72n_envision_kit.cのソースコード全体を以下に記載する（説明は後述）

#include "GUI.h"

void main(void);

void main (void)
{
    /* The follow function is generated by the AppWizard. */
    MainTask();
}

ID_SCREEN_00_Slots.cのソースコード全体を以下に記載する（説明は後述）

#include "Application.h"
#include "../Generated/Resource.h"
#include "../Generated/ID_SCREEN_00.h"

/*********************************************************************
*
*       Public code
*
**********************************************************************
*/
/*********************************************************************
*
*       cbID_SCREEN_00
*/
void cbID_SCREEN_00(WM_MESSAGE * pMsg) {
  GUI_USE_PARA(pMsg);
}

/*********************************************************************
*
*       ID_SCREEN_00__ID_SWITCH_00__WM_NOTIFICATION_VALUE_CHANGED__ID_TEXT_LED_STATE__APPW_JOB_SETVIS
*/
void ID_SCREEN_00__ID_SWITCH_00__WM_NOTIFICATION_VALUE_CHANGED__ID_TEXT_LED_STATE__APPW_JOB_SETVIS(APPW_ACTION_ITEM * pAction, WM_HWIN hScreen, WM_MESSAGE * pMsg, int * pResult) {
    GUI_USE_PARA(pAction);
    GUI_USE_PARA(hScreen);
    GUI_USE_PARA(pMsg);
    GUI_USE_PARA(pResult);

    int result = 0;
    /* Returns the state of a SWITCH widget. */
    result = SWITCH_GetState(pMsg->hWinSrc);
    if(SWITCH_STATE_RIGHT == result)
    {
        process_switch_on(pMsg->hWin);
    }
    else if(SWITCH_STATE_LEFT == result)
    {
        process_switch_off(pMsg->hWin);
    }
    else
    {
        process_switch_error(pMsg->hWin);
    }
}

/*********************************************************************
*
*       ID_SCREEN_00__ID_SWITCH_00__WM_NOTIFICATION_VALUE_CHANGED__ID_TEXT_LED_STATE_INIT__APPW_JOB_SETVIS
*/
void ID_SCREEN_00__ID_SWITCH_00__WM_NOTIFICATION_VALUE_CHANGED__ID_TEXT_LED_STATE_INIT__APPW_JOB_SETVIS(APPW_ACTION_ITEM * pAction, WM_HWIN hScreen, WM_MESSAGE * pMsg, int * pResult) {
  GUI_USE_PARA(pAction);
  GUI_USE_PARA(hScreen);
  GUI_USE_PARA(pMsg);
  GUI_USE_PARA(pResult);
}

Application.hのソースコード全体を以下に記載する（説明は後述）

#ifndef APPLICATION_H
#define APPLICATION_H
/* Custom code by Renesas */
#include "platform.h"
#include "AppWizard.h"

void process_switch_on(WM_HWIN hDisplayedText);
void process_switch_off(WM_HWIN hDisplayedText);
void process_switch_error(WM_HWIN hDisplayedText);
void led_on(void);
void led_off(void);
#endif  // RESOURCE_H

Application.cのソースコード全体を以下に記載する（説明は後述）

#include "Application.h"

void process_switch_on(WM_HWIN hDisplayedText)
{
    TEXT_SetText(hDisplayedText, "ON");
    TEXT_SetBkColor(hDisplayedText, GUI_WHITE);
    TEXT_SetTextColor(hDisplayedText, GUI_BLUE);
    led_on();
}

void process_switch_off(WM_HWIN hDisplayedText)
{
    TEXT_SetText(hDisplayedText, "OFF");
    TEXT_SetBkColor(hDisplayedText, GUI_WHITE);
    TEXT_SetTextColor(hDisplayedText, GUI_GRAY);
    led_off();
}

void process_switch_error(WM_HWIN hDisplayedText)
{
    TEXT_SetText(hDisplayedText, "ERROR");
    TEXT_SetBkColor(hDisplayedText, GUI_WHITE);
    TEXT_SetTextColor(hDisplayedText, GUI_RED);
    led_off();
}

void led_on(void)
{
    PORT4.PODR.BIT.B0 = 0;
}

void led_off(void)
{
    PORT4.PODR.BIT.B0 = 1;
}

main()関数

MainTask()関数を実行する
- MainTask()関数はemWinとAppWizardの初期化やメイン処理を実行する
- MainTask()関数はAppWizardのソースコード出力によって自動生成される

ID_SCREEN_00__ID_SWITCH_00__WM_NOTIFICATION_VALUE_CHANGED__ID_TEXT_LED_STATE__APPW_JOB_SETVIS()関数

スイッチID_SWITCH_00のトグル切り替えをトリガとしてテキストID_TEXT_LED_STATEへ作用する時のイベントハンドラ
切り替えた時のトグル状態に応じて処理を振り分けている
- トグルが右側に切り替わったときはスイッチオンとして処理をする
- トグルが左側に切り替わったときはスイッチオフとして処理をする
- 上記以外のトグル状態のときはエラーとして処理をする

process_switch_on()関数

テキストID_TEXT_LED_STATEの文字表示を"ON"に変更する（TEXT_SetText()）
テキストID_TEXT_LED_STATEの背景色を白色に変更する（TEXT_SetBkColor()）
テキストID_TEXT_LED_STATEの文字色を青色に変更する（TEXT_SetTextColor()）
LEDを点灯する（led_on()）

process_switch_off()関数

テキストID_TEXT_LED_STATEの文字表示を"OFF"に変更する（TEXT_SetText()）
テキストID_TEXT_LED_STATEの背景色を白色に変更する（TEXT_SetBkColor()）
テキストID_TEXT_LED_STATEの文字色を灰色に変更する（TEXT_SetTextColor()）
LEDを消灯する（led_off()）

process_switch_error()関数

テキストID_TEXT_LED_STATEの文字表示を"ERROR"に変更する（TEXT_SetText()）
テキストID_TEXT_LED_STATEの背景色を白色に変更する（TEXT_SetBkColor()）
テキストID_TEXT_LED_STATEの文字色を赤色に変更する（TEXT_SetTextColor()）
LEDを消灯する（led_off()）

led_on()、led_off()関数

それぞれLEDを点灯/消灯する
LEDを制御するポートはP40（LED回路図）

追加情報

AppWizardについて

AppWizardを使用するにあたっての勘所を以下に記載する

AppWizard概要

AppWizardとは、emWinに搭載されているGUIオブジェクトのユーザ実装を支援するWindowsアプリケーション
GUIオブジェクトの設置や設定、イベントの登録、動作のシミュレーション、さらにソースコード生成を画面を見ながら実施できる

GUIオブジェクトについて

AppWizard V1.06a_6.14aにて利用できるemWinのGUIオブジェクトは以下のとおり（括弧内は非公式な日本語説明）
- Screen（全オブジェクトの親となるスクリーン）
- Box（矩形）
- Button（ボタン）
- Image（画像）
- Text（テキスト表示）
- Slider（スライダーバー）
- Rotary（丸型のコントロールノブ）
- Switch（二値をもつトグルスイッチ）
- Edit（テキスト入力欄）
- Window（ウィンドウ画面）
- QRCode（QRコード）
- Gauge（半弧型の進捗ゲージ）
- Keyboard（キーボード）

AppWizard Tips

GUIオブジェクト同士の相対配置

GUIオブジェクト同士は位置関係を記憶可能（Excelの図形グループ化機能に似ている）
方法は以下のとおり
1. 関連付けたいGUIオブジェクトの一方を選択する
2. GUIオブジェクトの四辺に現れる9つの□（サイズ調整用の印）のうち、いずれかを右クリックしたままドラッグし、赤線または緑線を表示させる
3. 関連付けたいもう一方のGUIオブジェクト付近までドラッグし、緑線になったら右クリックを離す
4. 関連付けを解除する場合は、配置オプションのいずれかを選択する

GUI_USE_PARAマクロ

Slotルーチン関数のパラメータ未使用を原因とするコンパイラの警告を防ぐ目的で使用される
- Slotルーチン内でSlotルーチン関数の全パラメータが常に使用されるとは限らないが、
  このマクロを用いることで擬似的にパラメータを使用する

GUIオブジェクトのサイズ最適化

GUIオブジェクトを右クリックしSet size to contentを選択することで、オブジェクトの内容に応じてサイズを自動調整する

`Text` リソースの登録方法

初回のみlanguage（言語）を追加する
- New language -> "English"を入力 -> OK
Text定義を追加する
- Add textを押すと、新規にText定義が追加される
- 新規に追加されたText定義を押す -> Idを任意の識別文字に変更する ->
  English項（New languageで作成した項目）で定義したい文字列を入力する
ApplayでText定義を更新する

イベントハンドラ(Slot)と出力されたSlot関数の編集

Slotと実際に出力されたソースファイル中のSlot関数は編集内容がリンクしている
しかし、以下のケースでリンクが切れ、編集内容が反映されないことがあるので注意が必要
- Slotまたはソースファイル中のSlot関数のどちらか一方を削除する
- AppWizardのInteractionsペインでReceiverなどを変更する
- その他のケースもありそう

1+GLCDC+DRW2D+emWin(Segger GUIミドルウェア) - renesas/rx72n-envision-kit GitHub Wiki

目的

準備するもの

前提条件

QE for Display使用のための事前準備

回路確認

LCDグラフィックLCDコントローラ(GLCDC)

静電容量方式タッチコントローラ

BDF確認

QE for Displayによるドライバソフトウェア/ミドルソフトウェアの設定

適用先プロジェクトの設定

LCDコントローラの設定

GUI描画ツールの設定

スマート・コンフィグレータ(SC)によるドライバソフトウェア/ミドルソフトウェアの設定

コンポーネント追加

コンポーネント設定

r_bsp

r_cmt_rx

r_dmaca_rx

r_drw2d_rx

r_glcdc_rx

r_gpio_rx

r_sci_iic_rx

r_emwin_rx

端子設定

コード生成

AppWizardによるGUIオブジェクトの設置

AppWizardのインストール

AppWizardの設定

GUIオブジェクトの設置

AppWizardの起動

画面設計

Resource 登録

Text リソース

GUIオブジェクト配置/設定

Screen オブジェクト

Box オブジェクト

Switch オブジェクト

Text オブジェクト

イベント登録

GUIオブジェクトのプレビュー

GUIオブジェクトのソースコード出力

ユーザアプリケーション部のコーディング

ソースコード全体

main()関数

ID_SCREEN_00__ID_SWITCH_00__WM_NOTIFICATION_VALUE_CHANGED__ID_TEXT_LED_STATE__APPW_JOB_SETVIS()関数

process_switch_on()関数

process_switch_off()関数

process_switch_error()関数

led_on()、led_off()関数

追加情報

AppWizardについて

AppWizard概要

GUIオブジェクトについて

AppWizard Tips

GUIオブジェクト同士の相対配置

GUI_USE_PARAマクロ

GUIオブジェクトのサイズ最適化

Text リソースの登録方法

イベントハンドラ(Slot)と出力されたSlot関数の編集

Return to home / ホームに戻る

⚠️ **GitHub.com Fallback** ⚠️

`Resource` 登録

`Text` リソース

`Screen` オブジェクト

`Box` オブジェクト

`Switch` オブジェクト

`Text` オブジェクト

`Text` リソースの登録方法

⚠️ GitHub.com Fallback ⚠️