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

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

1. 新しいプロジェクトを作成します：
   • Qt Design Studio を開き、Create Project を選択します。

     

   • を選択します。 Qt for MCUsNew Project タブを選択します。
   • 解像度として720 x 1280 を選択します。

     

   • プロジェクトに名前を付け、Create を選択します。

     

   デザインモードの UI が表示され、Rectangle とText アイテムが2D ビュー に表示されているはずです。左側にNavigator ペイン、右側にProperties ペインが表示されます。

   

2. Navigator ペインか2D ビューでRectangle を選択して、Properties ペインでそのプロパティを変更します：
   • カラー・ピッカーを使用するか、Hex コード（#000000 ）を手動で入力して、Fill color プロパティをblack に変更する。

     

3. Navigator ペインか2D ビ ュ ーのいずれかでText 項目を選択 し て、 そのプ ロ パテ ィ を変更：
   • カラーピッカーを使うか、Hex コード(#ffffff)を手動で入力して、Text Color をwhite に変更する。
   • Units をpx に、Size を20 に変更する。
   • Text をLED に変更する。

     

4. ボタン矩形を追加します：
   • Components ペインのBasic コンポーネントの下にあるRectangle コンポーネントを見つけます。それをNavigator ペインのRectangle の上にドラッグします。

     

   • Navigator ペインで新しい長方形を選択し、Properties ペインでそのプロパティの一部を変更します：
     • カラー ピッカーを使用するか、Hex コード (#808080) を手動で入力して、Fill color プロパティをgrey に変更します。
     • サイズを140 W x 70 H に。

       

     • Properties ペインのLayout タブに切り替えます。矩形を親の中心にアンカーします。

       

     • 既存のText コンポーネントをNavigator ペインの新しいRectangle の上にドラッグします。

       

5. 各項目に一意のID を割り当てます：
   • Text アイテムをbuttonText と名付ける。

     

   • 内側のRectangle アイテムをbuttonRectangle と名付けます。
   • 親であるRectangle 項目をbackgroundRectangle と名付ける。
6. MouseArea を追加する：
   • を追加します。 MouseAreaComponents ペインのBasic コンポーネントの下にあるコンポーネントを探します。Navigator ペインの内側のRectangle にドラッグします。

     

   • をダブルクリックする。 MouseAreaコンポーネントをダブルクリックして、buttonMouseArea という名前を付けます。
   • 親コンポーネントbuttonRectangle にアンカーを付けます。

     

7. ボタンの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++ バックエンドです。

8. MouseArea のonClicked ハンドラ用の接続を追加する：
   • Navigator ペインでbuttonMouseArea を選択する。
   • Connections ビューでConnections タブを選択します。

     

   • + を選択して、新しい接続を追加します。
   • ダイアログ・ボックスで手動条件アイコン を選択し、Connection Editor を開く。

     

   • Connection Editor に以下のコードを入力し、OK を選択します：

     UICommunicator.sendFromUI(
         UICommunicator.LED1State,
         !UICommunicator.led1Status)

     

9. 保存して閉じます。
   • File > Save All を選択して変更を保存します。
   • File > Close Project <your-project-name> を選択してプロジェクトを閉じます。