Back to Qt.io
Contact Us Blog Download Qt
このページでは

Qt Design Studio (RH850)Qt Quick Ultralite Demos を使用したデザイン UI

C

アプリケーション・バックエンドの開発 (RH850)

このトピックでは、GHS MULTI IDEを使用してアプリケーションのバックエンドを作成および構築する手順を説明します。バックエンドは、アプリケーションのUIがプラットフォームと通信し、ハードウェアから必要な情報を取得できるようにします。この場合、デバイス・インターフェースはオンボード・ユーザー・ボタンのステータスを取得します。次の図は、2 つのコンポーネント間の相互作用を説明したものです：

アプリケーションのUIとバックエンド間のインタラクション。

エクスポート・アプリケーションとプラットフォーム・ソース

このセクションでは、Qt for MCUs ツールによってエクスポートされたアプリケーションとプラットフォーム ソースを含む QmlProject から GHS MULTI IDE プロジェクトを作成する手順を説明します。

  1. 次のコマンドでバッチ スクリプトを作成し、qmlprojectexporter を呼び出して GHS マルチ IDE プロジェクトを生成します。
    set QUL_ROOT=C:\path\to\QtMCUs\2.12.0
set QMLPROJECT_FILE=C:\path\to\YourProject.qmlproject
set BOARDDEFAULTS=%QUL_ROOT%\platform\boards\renesas\rh850-d1m1a-baremetal\cmake\BoardDefaults_32bpp.qmlprojectconfig
set RGL_DIR=C:\path\to\rgl_ghs_D1Mx_obj_V2.2.0a
set PROJECT_DIR=C:\path\to\PROJECT_DIR

%QUL_ROOT%\bin\qmlprojectexporter.exe %QMLPROJECT_FILE% --platform=rh850-d1m1a-baremetal --toolchain=GHS --boarddefaults=%BOARDDEFAULTS% --outdir=%PROJECT_DIR% --project-type=ghs --include-ide-generated-hw-code --board-sdk=%RGL_DIR%

    スクリプトを実行する前に、以下の変数が設定されていることを確認してください：

    • RGL_DIR をRenesas Graphics Library (RGL)2.2.0a のインストールパスに設定します、
    • QUL_ROOT およびQMLPROJECT_FILE.
    • PROJECT_DIR をGHSプロジェクトファイルを配置する出力ディレクトリに設定します。

    次に、コマンドプロンプトからスクリプトを実行して、以下を生成します：

    • のQMLから生成されたC++ソース。%PROJECT_DIR%/QtMCUs/generated
    • エクスポートされたプラットフォームソース%PROJECT_DIR%/QtMCUs/platform
    • %PROJECT_DIR%/GHS にあるサブプロジェクト・ファイルを含むトップレベル・プロジェクト・ファイル。

    生成されたGHSプロジェクトには以下が含まれます：

    • %PROJECT_DIR%/GHS/project.gpj:トップレベルのプロジェクトファイル。
    • %PROJECT_DIR%/GHS/prj/program.gpj:プログラムのコンパイル定義、インクルードディレクトリ、コンパイラとリンカのオプション。
    • %PROJECT_DIR%/GHS/prj/drivers.gpj:RGLソースのリスト。
    • %PROJECT_DIR%/GHS/prj/QtMCUs/qul_platform.gpj:RH850-D1M1Aプラットフォームのソースのリスト。
    • %PROJECT_DIR%/GHS/prj/QtMCUs/qul_app.gpj:qmlprojectエクスポートから生成されたソースのリスト。
    • %PROJECT_DIR%/GHS/prj/QtMCUs/qul_module_<ModuleName>.gpj:対応するQmlProjectモジュール用に生成されたソースを含む、各モジュール用の1つのサブプロジェクト。
    • %PROJECT_DIR%/GHS/prj\application.gpj:次のセクションで編集するアプリケーション用の便宜的な空のサブプロジェクト。
    • %PROJECT_DIR%/GHS/mcu_<YourProject>_qul_workspace.gmb:利便性のためにいくつかのコマンドが追加されたワークスペース。詳しくはGHS Multi IDE QUL Workspaceを参照してください。
    • %PROJECT_DIR%/GHS/qul_probe_E1.con:E1プローブに接続するためのメタデータが含まれています。
    • %PROJECT_DIR%/GHS/qul_probe_E2.con:E2 プローブに接続するためのメタデータが含まれています。

詳細については、プラットフォームソースを含むQt for MCUs プロジェクトのエクスポートを参照してください。

GHS MULTI IDEでアプリケーションをビルドする

次の手順では、アプリケーションのビルドに必要なGHSプロジェクトの適合手順を説明します：

  1. GHS MULTI Launcher (mstart.exe) を起動します。
  2. File > Load Workspace from File... を選択し、前のセクションでエクスポートした %PROJECT_DIR%/GHS に移動します。ワークスペースファイルmcu_<YourProject>_qul_workspace.gmb を選択します。
  3. ワークスペースのProject Manager エントリをダブルクリックして、プロジェクト・マネージャでプロジェクトを開きます。
  4. 任意のディレクトリにmain.cpp という名前の新規ファイルを作成します。このディレクトリはBACKEND_DIR と呼ばれます：
    #include "YourProject.h"

#include <qul/application.h>
#include <qul/qul.h>

int main()
{
    Qul::initHardware();
    Qul::initPlatform();
    Qul::Application app;
    static YourProject item;
    app.setRootItem(&item);
    app.exec();
    return 0;
}

    ここには、アプリケーションのデフォルトのエントリーポイントが含まれます。このエントリーポイントは、後でLEDとユーザー・ボタンを使用するための追加設定ステップで拡張します。詳細については、 Qt Quick Ultraliteをアプリケーションで実行するを参照してください。前の章で選択したのと同じプロジェクト名（YourProject ）を使用するようにしてください。

  5. application.gpj を選択したまま、または右クリックしてEdit を選択します。その内容を以下のように置き換えてください。
    #!gbuild

macro APPLICATION_EXPORT_DIR=C:/path/to/PROJECT_DIR/QtMCUs/generated
macro BACKEND_DIR=C:/path/to/BACKEND_DIR

[Subproject]
    -DQUL_STD_STRING_SUPPORT
    -I${APPLICATION_EXPORT_DIR}

# ----- backend -----
${BACKEND_DIR}/main.cpp

    APPLICATION_EXPORT_DIR マクロを、エクスポートされた UI ソースがあるディレクトリに設定し、BACKEND_DIRマクロを、main.cpp と以前に作成したバックエンド・ソースがあるディレクトリに設定してください。

    注： .gpj プロジェクトファイルではインデントが重要です。ソースファイルを含む行の先頭に空白がないことを確認してください。詳細については、MULTI IDEのドキュメントを参照してください。

  6. アプリケーション・バイナリ名はデフォルトでapplication.elf です。別の名前を使用するには、program.gpj プロジェクトファイルの-o application.elf を-o YourProject.elf に変更します。
  7. この時点で、ここまでの手順が正しく行われていることを確認するために、部分的に実装したアプリケーショ ンをビルドしてRH850ボードにフラッシュし、ターゲット・ハードウェア上で実行することができま す。

    フラッシュする前に、ボードがターゲットボードとコンピュータに接続されていることを確認してください。詳細については、 Renesas RH850とプローブの接続を参照してください。

    接続が確立したら、GHS MULTI IDEを使用してアプリケーションをボードにフラッシュし、IDEの機能を使用してデバッグすることができます。

次のセクションでは、ユーザーボタンでUIとハードウェア間のインタラクションを可能にする低レベルロジックを追加します。

C++バックエンドの開発

次の手順では、アプリケーションの C++ バックエンドの開発プロセスを説明します：

  1. 新しい C++ ソースファイルとヘッダーファイルを作成し、それぞれdeviceinterface.cpp とdeviceinterface.h という名前にします。これらのファイルを先ほど作成したBACKEND_DIRディレクトリに保存します。
  2. deviceinterface.h の内容を以下のように置き換える：
    #ifndef DEVICEINTERFACE_H
#define DEVICEINTERFACE_H

#include <qul/signal.h>
#include <qul/singleton.h>
#include <qul/eventqueue.h>

typedef int HWButtonEvent;

class DeviceInterface : public Qul::Singleton<DeviceInterface>, public Qul::EventQueue<HWButtonEvent>
{
public:
    Qul::Signal<void(int button)> buttonEvent;
    void onEvent(const HWButtonEvent &inputEvent);

    void toggleLED();
};

#endif //DEVICEINTERFACE_H

    ヘッダーはQul::Singleton とQul::EventQueue を継承するDeviceInterface クラスを宣言しています。また、buttonEvent Signal とHWButtonEvent イベント・タイプも宣言しています。これにより、シングルトン・オブジェクトのインスタンスをグローバルに利用できるようになります。C++とQMLの間のインターフェイスを提供し、HWButtonEvent 入力イベントの受信時に変更されたシグナルを発信します。詳しくは、QMLにおけるシングルトンの定義と 割り込みハンドラからQMLへのデータ転送を参照してください。

  3. 同様に、deviceinterface.cpp の内容を以下のように置き換えてください：
    #include "deviceinterface.h"
#include "boardutils.h"

void DeviceInterface::onEvent(const HWButtonEvent &inputEvent)
{
    buttonEvent(inputEvent);
}

void DeviceInterface::toggleLED()
{
    BoardUtils::toggleLED();
}
  4. 新しい C++ ソースファイルとヘッダーファイルのペアを作成し、それぞれをboardutils.cpp とboardutils.h と名付けます。これらのファイルをBACKEND_DIRディレクトリに保存します。
  5. boardutils.h のコードを以下のように置き換える：
    #ifndef BOARDUTILS_H
#define BOARDUTILS_H

namespace BoardUtils {
void configure();
void toggleLED();
} // namespace BoardUtils

#endif //BOARDUTILS_H
  6. BoardUtils::configure() とBoardUtils::toggleLED() の RH850-D1M1A 固有の実装をboardutils.cpp に追加します：
    #include "boardutils.h"
#include "deviceinterface.h"
#include "r_typedefs.h"
#include "r_bsp_hmi_api.h"

#define LED_NR 0
#define LED_BRIGHTNESS_ON 100u
#define LED_BRIGHTNESS_OFF 0u

void button_handler()
{
    DeviceInterface::instance().postEventFromInterrupt(0);
}

namespace BoardUtils {
void configure()
{
    R_BSP_HMI_Init();
    R_BSP_SetButtonCallback(BSP_BTN_CENTER_PRESS, button_handler);
    R_BSP_HMI_SetLed(LED_NR, LED_BRIGHTNESS_OFF);
}

void toggleLED()
{
    static bool isOff = true;
    R_BSP_HMI_SetLed(LED_NR, isOff ? LED_BRIGHTNESS_ON : LED_BRIGHTNESS_OFF);
    isOff = !isOff;
}
} // namespace BoardUtils

    コンフィギュレーション関数は、ユーザーLEDとボタンのためにRGLライブラリからBSP固有の初期化関数を呼び出します。次に、button_handler() をユーザー・ボタン・イベントの割り込み要求ハンドラとして登録します。割り込み要求ハンドラは、DeviceInterfaceSingleton オブジェクトを使用して、低レベルの割り込みイベントを QML コンテキストに伝搬します。

  7. RH850のLEDとボタンを適切に設定するには、main.cpp を変更してboardutils.h ヘッダをインクルードし、通常のプラットフォーム初期化の後にBoardUtils::configure() を呼び出すようにしてください：
    #include "boardutils.h"
...

int main()
{
    Qul::initHardware();
    Qul::initPlatform();
    BoardUtils::configure();
    ...
}
  8. 新しいソース・ファイルをapplication.gpj に追加してください：
    #!gbuild
...

# ----- backend -----
${BACKEND_DIR}/main.cpp

${BACKEND_DIR}/boardutils.cpp
${BACKEND_DIR}/deviceinterface.cpp
  9. 最後に、LEDとユーザー・ボタンの相互作用に必要なRGLライブラリ・ソースをapplication.gpj に追加します：
    • ${QUL_BOARD_SDK_DIR}/vlib/bsp/board/d1mx_mango/src/hmi/r_bsp_hmi_knob.c
    • ${QUL_BOARD_SDK_DIR}/vlib/bsp/board/d1mx_mango/src/hmi/r_bsp_sys_hmi.c
    • ${QUL_BOARD_SDK_DIR}/vlib/bsp/hmi/src/r_bsp_hmi_main.c

Design StudioでUIとバックエンドを統合する

Qt Design Studio のDeviceInterfaceSingleton オブジェクトを使用して、前のセクションで実装した低レベルのバックエンド関数にアクセスします。

  1. Qt Design Studio でプロジェクトを開き、Connections ビューを選択します。
  2. Connections タブ でプラス ボタンを選択し、新しい接続を追加します。

    接続タブで新しい接続を追加する。

  3. 新しい接続を選択し、Connection パネル を使用してCode ビューにジャンプします。

    接続パネルを使ってコード・ビューにジャンプする。

  4. Code ビューで、最初の接続 を追加し、statusRect をtarget として、DeviceInterface.toggleLED() をonPressedChanged シグナルのアクションとして追加します。

    コード・ビューに最初の接続を追加する。

  5. Code ビューで、2番目の接続 を追加し、DeviceInterface をtarget として、statusRect.pressed = !statusRect.pressed をonButtonEvent シグナルのアクションとして追加します。

    コード・ビューに2つ目の接続を追加する。

    これで、ボタンを押すと、イベントがQMLコンテキストに伝わり、statusRect.pressed プロパティが変更されます。その結果、UIアイテムの色が変わります。statusRect.pressed プロパティの変更に応答して、DeviceInterface.toggleLED() メソッドが LED をトグルします。

  6. テキスト・エディターを使ってyourproject.qmlproject を変更し、シングルトン・オブジェクトに必要な C++/QMLインターフェースを生成してください：
    InterfaceFiles {
    files: ["C:/path/to/BACKEND_DIR/deviceinterface.h"]
}

    BACKEND_DIRパスを、deviceinterface.h ファイルを含むディレクトリに変更する。

    詳しくはQmlProjectInterfaceFilesを参照してください。

UIの変更後のGHSプロジェクトの更新

アプリケーションのUI部分に変更を加えたので、qmlprojectexporter を使用してUIソースを再度エクスポートします。

UI コードの新しい変更を既存の GHS プロジェクトに適用するには、--update-projectコマンドライン引数を使用します。以下のいずれかの方法を使用してください：

  1. GHS MULTI LauncherのワークスペースのSync Qmlproject files 。UIでこのコマンドをダブルクリックして、プロジェクトファイルを更新します。
  2. 次のバッチ スクリプトを使用して手動でqmlprojectexporter を呼び出します：
    set QUL_ROOT=C:\path\to\QtMCUs\2.12.0
set QMLPROJECT_FILE=C:\path\to\YourProject.qmlproject
set PROJECT_DIR=C:\path\to\PROJECT_DIR
set QMLPROJECT_DIR=%PROJECT_DIR%\QtMCUs\generated

%QUL_ROOT%\bin\qmlprojectexporter.exe %QMLPROJECT_FILE% --update-project=%PROJECT_DIR%/GHS/project.gpj

これでアプリケーションの準備は完了です。GHS MULTIプロジェクトをビルドしてRH850ボードにフラッシュし、すべてが意図したとおりに動作することをテストします。次に、実験的に別のLEDのサポートを追加してみましょう。

Qt Design Studio (RH850) を使用して UI を設計するQt Quick Ultralite Demos

特定の Qt ライセンスの下で利用可能です。
詳細をご覧ください。