Infineon TRAVEO T2G クイックスタートガイドアプリケーションのバックエンド（TRAVEO T2G）の開発

C

Qt Design Studio を使用したUIの設計（TRAVEO T2G）

このトピックでは、ユーザーボタンとオンボードLEDの状態を表示するシンプルなUIを設計するための手順を段階的に説明します。作業を開始するには、Qt Design Studio が必要です。インストールされていない場合は、Qt Online Installer またはQt Maintenance Tool からインストールしてください。

以下の手順に従って、設計プロセス全体を進めてください：

新しいプロジェクトを作成します：
- Qt Design Studio を起動し、「Create Project 」を選択します。
  Qt Design Studio でプロジェクトを初期化します。" src="images/QtDS1a-traveo-t2g.png" title="Qt Design Studio でプロジェクトを初期化します。"/>
- xml-ph-0000@deepl.internal ウィザードの Qt for MCUsNew Project タブを選択します。
- 画面解像度について、Width を「800 」、Height を「480 」に設定します。
- プロジェクトに名前を付け、「Create 」を選択します。
これで、デザインモードの UI と、Rectangle およびText アイテムを含むボイラープレート・プロジェクトが表示されるはずです。
「Navigator 」ペインまたは「Form Editor 」内の「Rectangle 」を選択し、「Properties 」ペインでそのプロパティを変更します。
- 「Fill color 」プロパティを、カラーピッカーを使用するか、Hex コード（#000000 ）を手動で入力して、「black 」に変更します。
「Navigator 」ペインまたは「Form Editor 」内の「Text 」項目を選択し、そのプロパティを変更します：
- カラーピッカーを使用するか、Hex コード（#ffffff ）を手動で入力して、「Text Color 」を「white 」に変更します。
- Units をpx に、Size を20 に変更します。
- Text をLED1 に変更します。
ボタンの矩形を追加します：
- Components のペインにある「Basic 」コンポーネントの下で、「Rectangle 」コンポーネントを探します。それを、Navigator のペインにある「Rectangle 」上にドラッグします。
- Navigator ペインで新しい矩形を選択し、Properties ペインでそのプロパティの一部を変更します。
  - カラーピッカーを使用するか、Hex コード（#808080 ）を手動で入力して、Fill color プロパティをgrey に変更します。
  - サイズを200 W x 100 H に設定します。
  - Properties ペインの「Layout 」タブに切り替えます。矩形を親要素の中央に固定します。
  - Navigator ペインで、既存のText コンポーネントを新しいRectangle 上にドラッグします。
各アイテムに一意のID を割り当てます：
- Text アイテムの名前を「ledStateText 」とします。
- 内部のRectangle アイテムの名前を「statusRect 」とします。
- 親のRectangle アイテムの名前を「backgroundRect 」とします。
statusRect に対してpressed プロパティを作成します：
- 「Navigator 」ペインで「statusRect 」を選択します。
- 「View > Views 」メニューから「Connections 」を選択します。
- 「Connections 」ビューで「Properties 」タブに切り替えます。
- 「+ 」を選択して、新しいプロパティを追加します。「Type 」として「bool 」を選択し、「Name 」に「pressed 」、「Value 」に「false 」と入力します。
- 「Properties 」ビューで「Rectangle 」タブに切り替えます。
- 設定アイコン [ ] を選択して、新しいバインディングを追加します。
- 開いた「Binding Editor 」に次の式を入力し、「OK 」を選択します。
```
statusRect.pressed ? "#41cd52" : "#808080"
```
注：次の章で追加する C++ バックエンドは、pressed のブール型プロパティを変更します。
保存して閉じます。
- 「File > Save All 」を選択して変更を保存します。
- 「File > Close Project <your-project-name> 」を選択して、プロジェクトを閉じます。