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

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

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

     Qt Design Studio でプロジェクトを初期化します。" src="images/QtDS1a-rh850.png" title="Qt Design Studio でプロジェクトを初期化します。"/>

   • xml-ph-0000@deepl.internal ウィザードの Qt for MCUsNew Project タブを選択します。
   • 画面解像度について、Width を「800 」、Height を「600 」に設定します。

     

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

     

   これで、デザインモードの UI と、Rectangle およびText 項目を含むボイラープレート・プロジェクトが表示されるはずです。

   

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

     

3. 「Navigator 」 ペインまたは「Form Editor 」 内の「Text 」項目を選択し、そのプロパティを変更します：
   • カラーピッカーを使用するか、Hex コード（#ffffff ）を手動で入力して、「Text Color 」を「white 」に変更します。
   • Units をpx に、Size を20 に変更します。
   • Text をLED1 に変更します。

     

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

     

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

       

     • Properties ペインの「Layout 」セクションに切り替えます。矩形を親要素の中央に配置します。

       

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

       

5. 各アイテムに一意のID を割り当てます：
   • Text アイテムの名前を「ledStateText 」とします。

     

   • 内部のRectangle アイテムの名前を「statusRect 」とします。
   • 親のRectangle アイテムの名前を「backgroundRect 」とします。
6. 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 のブール型プロパティを変更します。

7. 保存して閉じます。
   • 「File > Save All 」を選択して変更を保存します。
   • 「File > Close Project <YourProject> 」を選択して、プロジェクトを閉じます。