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 for MCUsNew Project タブを選択します。
- 画面解像度をWidth から800 に、Height から480 に設定します。
- プロジェクトに名前を付け、Create を選択します。
デザインモード UI と、Rectangle とText 項目のあるボイラープレート・プロジェクトが表示されるはずです。
Navigator ペインまたはForm Editor のいずれかでRectangle を選択し、Properties ペインでプロパティを変更します：
- カラーピッカーを使用するか、Hex コード (#000000) を手動で入力して、Fill color プロパティを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 タブに切り替えます。矩形を親の中心にアンカーします。
  - 既存のText コンポーネントをNavigator ペインの新しい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 booleanプロパティを変更します。
保存して閉じます。
- File > Save All を選択して変更を保存します。
- File > Close Project <your-project-name> を選択して、プロジェクトを閉じます。