Step 5 - Gauges transitions¶

In this step, you create the transitions between the gauge styles and shapes.

../_images/preview-gauge-shape-style.gif

Create gauge style and shape transition¶

To create the gauge shape and style transition:

In the Node Tree, in the Cluster Components_2375:687 > Cluster Components:
1. Delete the GaugePlaceholderRight and GaugePlaceholderLeft nodes.
2. Create an Empty Node 2D node and name it Gauges.
3. From the Library > Property Types > Control, drag the GaugeShape and GaugeStyle properties to the Gauges node.
In the Gauges node, create an Empty Node 2D node, name it SpeedoMeter. In the Properties, and add and set:
- Layout Width and Layout Height to 720
- Horizontal Alignment to Left
In the SpeedoMeter node, create an Empty Node 2D node, name it ShapeRect. In the Properties, and add and set:
- 01 Configuration > Gauge Shape Control to Rect
- Render Transformation Origin property field Y to 0.5
In the ShapeRect node, in the Properties click Add Binding, and bind:
- isActive property to
```
{@./Control.GaugeShape} == {#Control/Control.GaugeShape}
```
- Node > Visible property to
```
CEIL({@./Node.Opacity})
```
  When Opacity is 0, this binding sets the Visible property to false. This way the node is not rendered when not active.
- Render Transformation property field Translation X to
```
-{@./Support.OffsetX}
```
- Render Transformation property field Scale X to
```
{@./Support.Scale}
```
In the Node Tree, duplicate the ShapeRect, and in the Properties set:
- Name to ShapeRound
- 01 Configuration > Gauge Shape Control to Round
- Render Transformation Origin property field X to 0.5
- Change the Render Transformation property field Translation X binding to bind to Rotation Z and edit the binding
```
-{@./Support.OffsetX}/10
```
- Duplicate the Render Transformation property field Scale X binding and set it to bind to the Scale Y property field.
Create a tachometer:
1. Duplicate the SpeedoMeter node, rename it to TachoMeter. In the Properties, set the Horizontal Alignment property to Right.
2. In the TachoMeter > ShapeRect and ShapeRound nodes, in the {@./Support.OffsetX} bindings, remove the minus sign.
3. In the TachoMeter > ShapeRect, set the Render Transformation Origin property field X to 1.
From the Prefabs, drag these prefabs to the nodes in the SpeedoMeter and TachoMeter nodes:
- SpeedoMeter > ShapeRect
  - Speedometer_Simple_Rect_2024:2036
  - Speedometer_Rich_Rect_2134:1222
- SpeedoMeter > ShapeRound
  - Speedometer_Simple_Round_2024:2035
  - Speedometer_Rich_Round_2158:1294
- Tachometer > ShapeRect
  - Tachometer_Simple_Rect_2024:2034
  - Tachometer_Rich_Rect_2134:1223
- Tachometer > ShapeRound
  - Tachometer_Simple_Round_2024:2033
  - Tachometer_Rich_Round_2158:1295
Select all Rich prefabs and temporarily hide them by pressing Ctrl H.
In the Library, create a State Manager and name it Shape Switch State Manager:
- Select the State Group and in the Properties:
  - Set the Controller Property to isActive
  - Under the State Transitions property, click Add transition and set:
    - Duration to 500 ms
    - Easing Function to Cubic
    - Easing Mode to Ease in-out
- Rename the states to Active and Inactive, and in each add and set:
  - Active state:
    - isActive to enabled
    - Node > Opacity to 1
    - Support > OffsetX to 0
    - Support > Scale to 1
  - Inactive state:
    - isActive to disabled
    - Node > Opacity to 0
    - Support > OffsetX to 720
    - Support > Scale to 0
In the Node Tree, in the Gauges > SpeedoMeter and TachoMeter nodes, select ShapeRect and ShapeRound nodes. In the Properties, add the Resources > State Manager property and set it to Shape Switch State Manager.

Now you can test the shape switch functionality for the simple gauges by changing in the Control node the value of the Gauge Shape Control property.
To switch the gauge style between simple and rich, create a State Manager and name it Style Switch State Manager:
- Select the State Group and in the Properties:
  - Set the Controller Property to isActive
  - Under the State Transitions property, click Add transition and set:
    - Duration to 1000 ms
    - Easing Function to Cubic
    - Easing Mode to Ease in-out
- Rename the states to Active and Inactive, and in each add and set:
  - Active state:
    - isActive to enabled
    - Opacity to 1
  - Inactive state:
    - isActive to disabled
    - Opacity to 0
To all Simple and Rich prefabs, add:
- 01 Configuration > GaugeStyle property and set it to the corresponding style for each prefab
- Resources > State Manager property and set it to the Style Switch State Manager
- Bind the isActive property to
```
{@./Control.GaugeStyle} == {#Control/Control.GaugeStyle}
```
- Bind the Visible property to
```
CEIL({@./Node.Opacity})
```
Select all Rich prefabs and press Ctrl H.