NXP i.MX RT1170 クイックスタートガイド NXP 用のMCUXpresso IDEプロジェクトを作成する

C

Qt Design Studio を使用した UI の設計 (NXP i.MX RT1170)

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

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

新しいプロジェクトを作成します：
- Qt Design Studio を開き、「Create Project 」を選択します。
  Qt Design Studio でプロジェクトを初期化します。" src="images/QtDS1a-rt1170.png" title="Qt Design Studio でプロジェクトを初期化します。"/>
- xml-ph-0000@deepl.internal ウィザードの Qt for MCUsNew Project タブを選択します。
- 解像度として「720 x 1280 」を選択します。
- プロジェクトに名前を付け、「Create 」を選択します。
これで、デザインモードの UI が表示され、「2D 」ビュー（）に「Rectangle 」および「Text 」の項目が表示されるはずです。左側には「Navigator 」（）ペインが、右側には「Properties 」（）ペインが表示されます。
「Navigator 」ペインまたは「2D 」ビューで「Rectangle 」を選択し、「Properties 」ペインでそのプロパティを変更します：
- 「Fill color 」プロパティを、カラーピッカーを使用するか、Hex コード（#000000 ）を手動で入力して、「black 」に変更します。
「Navigator 」ペインまたは「2D 」ビューで「Text 」項目を選択し、そのプロパティを変更します：
- カラーピッカーを使用するか、Hex コード（#ffffff ）を手動で入力して、「Text Color 」を「white 」に変更します。
- Units をpx に、Size を20 に変更します。
- Text をLED に変更します。
ボタンの矩形を追加します：
- Components のペインにある「Basic 」コンポーネントの下から、「Rectangle 」コンポーネントを探します。それを、Navigator のペインにある「Rectangle 」上にドラッグします。
- Navigator ペインで新しい矩形を選択し、Properties ペインでそのプロパティの一部を変更します。
  - カラーピッカーを使用するか、Hex コード（#808080 ）を手動で入力して、Fill color プロパティをgrey に変更します。
  - サイズを140 W x 70 H に設定します。
  - 「Properties 」ペインの「Layout 」タブに切り替えます。長方形を親要素の中央に配置します。
  - Navigator ペインで、既存のText コンポーネントを新しいRectangle 上にドラッグします。
各アイテムに一意のID を割り当てます。
- Text アイテムの名前を「buttonText 」とします。
- 内部のRectangle アイテムの名前を「buttonRectangle 」とします。
- 親のRectangle アイテムの名前を「backgroundRectangle 」とします。
MouseArea を追加します：
- 「xml-ph-0000@deepl.internal」ペイン内の MouseAreaComponents ペインの「Basic 」コンポーネントの下にあるコンポーネントを探します。それを、Navigator ペイン内の内側のRectangle にドラッグします。
- その MouseArea コンポーネントをダブルクリックし、buttonMouseArea という名前を付けます。
- 親コンポーネントである「buttonRectangle 」全体にまたがるように配置します。
ボタンのcolor プロパティを、MouseArea のpressed プロパティにバインドします。
- 「Navigation 」ペインで「buttonRectangle 」を選択します。
- [View > Views ] メニューから [Connections ] を選択します。
- 「Properties 」ペインで「Rectangle 」タブに切り替えます。
- 設定アイコン [ ] を選択して、新しいバインディングを設定します。
- 開いた「Binding Editor 」に以下の式を入力し、「OK 」を選択します：
```
buttonMouseArea.pressed ?
    UICommunicator.led1Status ? "green" : "grey" :
    UICommunicator.led1Status ? "darkgreen" : "dimgrey"
```
注： UICommunicator は、次のトピックで追加するC++バックエンドです。
「MouseArea 」の「onClicked 」ハンドラへの接続を追加します：
- 「Navigator 」の「」ペインで「buttonMouseArea 」を選択します。
- Connections の「」ビューで、「Connections 」タブを選択します。
- [+ ] を選択して、新しい接続を追加します。
- ダイアログボックスで手動条件アイコン [ ] を選択し、[Connection Editor] を開きます。
- 「Connection Editor 」に以下のコードを入力し、「OK 」を選択します：
```
UICommunicator.sendFromUI(
    UICommunicator.LED1State,
    !UICommunicator.led1Status)
```
保存して閉じます。
- 「File > Save All 」を選択して変更を保存します。
- 「File > Close Project <your-project-name> 」を選択してプロジェクトを閉じます。