Renesas RH850-D1M1A クイック・スタート・ガイドアプリケーション・バックエンド（RH850）の開発

C

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

このトピックでは、ユーザー・ボタンとオンボードLEDの状態を示すシンプルなUIをデザインするためのステップ・バイ・ステップの手順を説明します。始めるにはQt Design Studio が必要です。インストールされていない場合は、Qt Online Installer またはQt Maintenance Tool を使用してインストールしてください。

以下の手順では、設計プロセス全体を説明します：

新しいプロジェクトを作成します：
- Qt Design Studio を開き、Create Project を選択します。
- を選択します。 Qt for MCUsNew Project タブを選択します。
- 画面解像度を、Width を800 に、Height を600 に設定します。
- プロジェクトに名前を付け、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 コンポーネントを新しい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 <YourProject> を選択して、プロジェクトを閉じます。