ステップ2 - 燃料とバッテリーの針を作成する¶

ステップ 2 では、前のステップと同じ方法に従い、燃料とバッテリーのポインタ (針) を作成します。

燃料ポインタを作成する¶

このセクションでは、燃料ポインタを作成します。

燃料ポインタを作成するには、以下のようにします。

Assets から FuelBatteryNeedle 画像をドラッグし、Preview の Gauges にドロップします。
Node Tree で FuelBatteryNeedle ノードを選択し、F2 を押して、FuelNeedle に名前を変更します。
FuelNeedle ノードの位置を、Preview ツールとノードのプロパティを使用して調整します。これは、前のステップで SpeedNeedle に対して行ったのと同様です。位置を調整する際は、次のガイドラインに従ってください。
1. Guides ノードのガイドと Render Transformation プロパティを使用して、FuelNeedle をスピードゲージの左側にあるゲージに配置します。
  
  ヒント
  
  右上隅にある Preview ズームスライダーを使用して、Preview 内のコンテンツの拡大レベルを調整します。
  ヒント
  
  Preview でパンするには、
  - マウスの中央ボタンをクリックしてドラッグします。
  - Space キーを押し、左マウスボタンをクリックしてドラッグします。
2. Render Transformation Origin プロパティを使用して、ノードの原点をノードの上部中央に設定します。X 属性を 0,5 に設定するだけで済みます。
Library Alt を押しながら右クリック Property Types で、Property Type を選択し、Property Type Editor セットで:
- Name から Gauges.Fuel へ
- Display Name から Fuel へ
- Category から Gauges へ
- Data Type から Integer へ
- Lower Bound を 0 に
- Upper Bound から 100 まで
Save をクリックして、定義したプロパティを持つプロパティタイプを作成します。

このカスタムプロパティタイプを使用して、Gauges 内の FuelNeedle の位置を制御します。
Node Tree で Gauges ノードを選択し、Properties で Fuel プロパティを追加します。

ヒント

Library > Property Types からプロパティタイプをドラッグし、Node Tree のノードにドロップすることで、ノードにカスタムプロパティタイプを追加できます。
Node Tree で FuelNeedle ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Property から Render Transformation へ
- Property Field から Rotation Z へ
- Expression へ
```
{@../Gauges/Gauges.Fuel} - 39
```
  Fuel プロパティの値が0のとき、針をゲージの値0に正しく配置するには、プロパティの値から39を引く必要があります。
Save をクリックします。このバインディングにより、Gauges ノードに前のステップで追加した Fuel プロパティを使用して、FuelNeedle ノードの z 軸周りの回転を制御します。
Node Tree で FuelNeedle ノードをドラッグし、Gauges ノードの上にドロップします。

Gauges ノードには、Fuel や Battery のゲージのための透明な開口部があり、針の位置を見ることができます。Node Tree ウィンドウ内のノードの位置は、ノードのレンダリング順序を定義します。ノードツリーの一番上のノードが最初にレンダリングされ、ノードツリーの一番下のノードが最後にレンダリングされます。FuelNeedle ノードを Gauges ノードの上に配置することで、Kanzi は最初に FuelNeedle ノードをレンダリングし、その上に Gauges ノードをレンダリングします。これにより、FuelNeedle のわずかな部分だけが表示され、エレガントな燃料インジケーターを作成します。

バッテリーポインタを作成する¶

このセクションでは、バッテリーポインタを作成します。

バッテリーポインタを作成するには、以下のようにします。

Assets から FuelBatteryNeedle 画像をドラッグし、Preview の Gauges にドロップして、BatteryNeedle に名前を変更します。
BatteryNeedle ノードの位置と Render Transformation Origin を、Preview ツールとノードのプロパティを使用して調整します。これは、FuelNeedle に対して行ったのと同様です。ただし、BatteryNeedle をスピードゲージの右側に配置してください。
プロパティタイプを作成し、Property Type Editor に設定します。
- Name から Gauges.Battery へ
- Display Name から Battery へ
- Category から Gauges へ
- Data Type から Integer へ
- Lower Bound を 0 に
- Upper Bound から 100 まで
Save をクリックして、定義したプロパティを持つプロパティタイプを作成します。

このカスタムプロパティタイプを使用して、Gauges 内の BatteryNeedle の位置を制御します。

ヒント

Battery プロパティタイプと Fuel プロパティタイプの違いは名前だけなので、Library で Fuel プロパティを右クリックし、Duplicate を選択して、複製を Gauges.Battery にリネームし、Properties で Display Name プロパティを Battery に設定します。
Node Tree で Gauges ノードを選択し、Battery プロパティを追加します。
Node Tree で BatteryNeedle ノードを選択し、バインディングを追加して、Binding Editor で設定します。
- Property から Render Transformation へ
- Property Field から Rotation Z へ
- Expression へ
```
-{@../Gauges/Gauges.Battery} + 39
```
  プロパティの値が増加したときに針を反時計回りに回転させるには、負の値を使用する必要があります。Battery プロパティの値が0のときにゲージの値0で針を正しく配置するには、プロパティの値に39を加える必要があります。
Save をクリックします。

このバインディングを使用して、Gauges ノードに前のステップで追加した Battery プロパティで、BatteryNeedle ノードの z 軸周りの回転を制御します。
Node Tree で BatteryNeedle ノードをドラッグし、Gauges ノードの上にドロップします。

FuelNeedle ノードと同様に、BatteryNeedle ノードを Gauges の上に配置することで、Kanzi はまず BatteryNeedle ノードをレンダリングし、その上に Gauges ノードをレンダリングします。これにより、BatteryNeedle のわずかな部分だけが表示され、エレガントなバッテリーインジケーターが作成されます。

Gauges ノードの Speed、Fuel、および Battery プロパティで、速度、燃料、バッテリーのゲージ針を制御できるようになりました。

Previous step

次の作業¶

このチュートリアルでは、バインディングを使用して、プロパティで制御できるポインタ付きゲージの作成方法を学習しました。今では、あなたは次のことができます:

このチュートリアルで作成したプロジェクトを拡張してクラスタインジケータを作成し、プロパティでそれを制御する。チュートリアル: クラスターインジケーターを作成するを参照してください。
Kanzi Data Sources を使用して、ユーザーインターフェースをアプリケーションデータから分離する方法を学びます。チュートリアル: データソースからアプリケーションデータを取得するを参照してください。
Kanzi Engine API を使用してプロパティの値を設定する方法を学びます。チュートリアル: Hello world! とチュートリアル: Kanzi Engine API の高度な使用法を参照してください。

ステップ2 - 燃料とバッテリーの針を作成する¶

燃料ポインタを作成する¶

バッテリーポインタを作成する¶

次の作業¶

関連項目¶