Step 6 - Fuel and temperature gauges

In this step, you create the fuel and temperature gauges.

../_images/preview-shaperect-fuel-temp.gif

Control rectangular fuel and temperature gauges

In this procedure you add control for the rectangular-style fuel and temperature gauges.

To control the rectangular fuel and temperature gauges:

  1. In the Node Tree, in the Gauges > SpeedoMeter > ShapeRect > Speedometer_Simple_Rect_2024:2036 node, select the FuelBar node. In the Properties, bind the Rectangle Width property to:

    6 + {#Control/Control.Fuel} * 323

    The binding expression uses the 6-pixel offset to show the fuel indicator as a dot when the gauge value is 0. You multiply the value by 323 because that is the width of the gauge.

    ../_images/node-tree-shaperect-fuelbar.png ../_images/binding-shaprect-fuelbar.png

  2. Repeat the previous step for the Fuel_Bar node in the ShapeRect > Speedometer_Rich_Rect_2134:1222 node.

    ../_images/node-tree-shaperect-rich-fuelbar.png ../_images/binding-shaprect-rich-fuelbar.png

  3. In the Node Tree, in the Gauges > TachoMeter > ShapeRect > Tachometer_Simple_Rect_2024:2034 node, select the TempBar node. In the Properties, bind the Rectangle Width property to:

    6 + {#Control/Control.Temp} * 323
    ../_images/node-tree-shaperect-tempbar.png ../_images/binding-shaprect-tempbar.png

  4. Repeat the previous step for the Temp_Bar node in the ShapeRect > Tachometer_Rich_Rect_2134:1223 node.

    ../_images/node-tree-shaperect-rich-tempbar.png ../_images/binding-shaprect-rich-tempbar.png

You can now control the fuel and temperature gauges in rectangular-style gauges from the Control node with the Fuel Control and Temperature Control properties.

../_images/preview-shaperect-fuel-temp.gif

Create round fuel and temperature gauges

In this procedure you create the round-style fuel and temperature gauges.

To create the round fuel and temperature gauges:

  1. Create the round fuel gauge for the speedometer simple gauge:

    1. In the Speedometer_Simple_Round_2024:2035, create an Ellipse 2D node, name it Filling_Round, and move it above the Speed Bar node. In the Properties, add and set:

      • Ellipse > Ellipse Center property fields X and Y to 240

      • Ellipse > Ellipse Width and Ellipse Height to 470

      • Ellipse > Start Angle to 208

      • Shape 2D > Stroke Brush to Figma/Materials/Items/Shapes/Ellipse (Bar)_2024:1978

      • Shape > Stroke Thickness to 10

      • Shape > Stroke Cap to Round

      • Brushes > Foreground Brush to < No Brush >

      ../_images/node-tree-filling-round.png ../_images/properties-filling-round.png

    2. In the Node Tree, right-click the Filling_Round node and select Convert Nodes to Prefabs.

      ../_images/node-tree-convert-nodes-to-prefabs.png

    3. In the Speedometer_Simple_Round_2024:2035, in the Filling_Round prefab instance, bind the Sweep Angle property to

      -{#Control/Control.Fuel} * 56
      ../_images/binding-filling-round-sweep-angle.png

      You can now control the round fuel gauge from the Control node with the Fuel Control property.

      ../_images/preview-shaperound-fuel.gif

    4. Drag the Fuel Text node after the Background node and delete the Fuel Bar node.

      ../_images/node-tree-fuel-text.png

  2. Create the round temperature gauge for the tachometer simple gauge:

    1. From the Prefabs, drag the Filling_Round prefab to the Tachometer_Simple_Round_2024:2033 node above the Tachometer Bar node. In the Properties, set the Stroke Brush to Figma/Materials/Items/Shapes/Ellipse (Bar)_2024:2018.

      ../_images/node-tree-tachometer-filling-round.png ../_images/properties-tachometer-filling-round.png

    2. In the Tachometer_Simple_Round_2024:2033, in the Filling_Round prefab instance, bind the Sweep Angle property to

      -{#Control/Control.Temp} * 56
      ../_images/binding-filling-round-tachometer-sweep-angle.png

      You can now control the round temperature gauge from the Control node with the Temperature Control property.

      ../_images/preview-shaperound-temp.gif

  3. Create the round fuel gauge for the speedometer rich gauge:

    1. From the Prefabs, drag the Filling_Round prefab to the Speedometer_Rich_Round_2158:1294 node above the GaugeMeter node. In the Properties, add and set:

      • Stroke Brush to Figma/Materials/Items/Shapes/Ellipse (Bar)_2158:1249

      • Vertical Alignment and Horizontal Alignment to Center

      • Render Transformation property field Translation Y to -1

      ../_images/node-tree-speedometer-rich-filling-round.png ../_images/properties-speedometer-rich-filling-round.png

    2. In the Speedometer_Rich_Round_2158:1294, in the Filling_Round prefab instance, bind the Sweep Angle property to

      -{#Control/Control.Fuel} * 56
      ../_images/binding-filling-round-sweep-angle.png

      You can now control the rich round fuel gauge from the Control node with the Fuel Control property.

      ../_images/preview-shaperound-fuel-rich.gif

  4. Create the round temperature gauge for the tachometer rich gauge:

    1. From the Speedometer_Rich_Round_2158:1294 node, copy the Filling_Round prefab instance and paste it to the Tachometer_Rich_Round_2158:1295 above the GaugeMeter node. In the Properties, set:

      • Set the Stroke Brush property to Figma/Materials/Items/Shapes/Ellipse (Bar)_2158:1277.

      ../_images/node-tree-temp-filling-round.png ../_images/properties-tachometer-rich-filling-round.png

    2. In the Tachometer_Rich_Round_2158:1295, in the Filling_Round prefab instance, modify Sweep Angle binding to

      -{#Control/Control.Temp} * 56
      ../_images/binding-filling-round-tachometer-sweep-angle.png

      You can now control the rich round fuel gauge from the Control node with the Temperature Control property.

      ../_images/preview-shaperound-temp-rich.gif

You can now control the fuel and temperature gauges in round-style gauges from the Control node with the Fuel Control and Temperature Control properties.

Preview step Next step