Step 9 - Radial graphs

In this step, you create the radial bar graphs for the round speedometer and tachometer.

Create simple radial bar graphs

To create the simple radial bar graphs:

1. In the Node Tree, in the Speedometer_Simple_Round_2024:2035, in the Speed Bar node, create a Composite Shape 2D node. In the Properties, set Foreground Brush to Figma/Materials/Items/Shapes/Ellipse (Bar)_2024:1987.

   

2. In the Prefabs, in the Speedometer_Simple_Round_2241:2116, copy Ellipse (Bar Background) node and paste it in the Composite Shape 2D node that you created in the previous step.

   

3. In the Composite Shape 2D node after the Ellipse (Bar Background), create an Ellipse 2D node, and name it Simple_Trail. In the Properties, add and set:

   • Composite Shape > Boolean Operation to Intersection

   • Ellipse Width and Ellipse Height to 480

   • Start Angle to -135.8

   • Arc Type to Pie

   • Bind the Sweep Angle property to:

     {#Control/Control.Speed} * 270 / 260
     

     The range of the gauge is 270 degrees and the maximum speed value is 260.

   

4. In the Speed Bar node, create an Empty Node 2D and name it Pointer_Rotator_Simple. In the Properties, add the Render Transformation Origin property and set the X and Y property fields to 0.5.

   

5. From the Speed Bar > Arrow node, drag the Arrow node to the Pointer_Rotator_Simple node. In the Properties, add and set:

   • Vertical Alignment and Horizontal Alignment to Center

   • Layout Transformation property filed Translation Y to -216

   

6. Right-click the Pointer_Rotator_Simple node and select Convert to Nodes Prefabs.

   

7. In the Speedometer_Simple_Round_2024:2035, in the Pointer_Rotator_Simple prefab instance, bind the Render Transformation property field Rotation Z to

   -135 + {#Control/Control.Speed} * 270 / 260
   

   The left offset is -135 pixels.

   

8. In the Speed Bar node, delete these nodes:

   • MaskGroup

   • Arrow

   

9. In the Tachometer_Simple_Round_2024:2033, delete the Tachometer Bar node.

   

10. In the Speedometer_Simple_Round_2024:2035, copy the Speed Bar node, paste it in the Tachometer_Simple_Round_2024:2033 in the Group node, and rename it to Tachometer Bar.

    

11. In the Tachometer_Simple_Round_2024:2033, in the SimpleTrail node edit the Sweep Angle binding to:

    {#Control/Control.RPM} * 270 / 6000
    

    

12. In the Pointer_Rotator_Simple node edit the Render Transformation property field Rotation Z binding to:

    -135 + {#Control/Control.RPM} * 270 / 6000
    

    

You can now control the simple round bar graphs from the Control node with the Speed Control and RPM Control properties.

Create rich radial bar graphs

In Figma you cannot create the dynamic trail effect that this cluster uses. The Cluster resources that you downloaded, contain a custom 2D shader to achieve this effect. This procedure shows how to create the dynamic trail effect in Kanzi Studio.

To create the rich radial bar graphs:

1. Import the material for the dynamic trail effect:

   1. In the Library, right-click Materials and Textures, select Load Material Type from Disk, and from the Cluster resources that you downloaded, select the Trail_MaterialType.kzmat.

      

   2. In the Library > Materials and Textures > Materials select Trail_MaterialTypeMaterial. In the Properties, add and set:

      • Name to Trail_Material

      • Blend Mode to Alpha: Automatic

      • Trail.startAngle to -45

      

2. Create the rich radial bar graph for the speedometer:

   1. In the Node Tree, in the Speedometer_Rich_Round_2158:1294, in the Group node, create an Empty Node 2D node, name it Trail_Rich. In the Properties, add and set:

      • Layout Width and Layout Height to 524

      • Vertical Alignment and Horizontal Alignment to Center

      • Material Properties > Trail.clockwise to enabled

      • Foreground Brush to + Material Brush and in the brush set:

      • Name to Rich_Trail_Brush

      • Material to Trail_Material

      

   2. In the Trail_Rich node, bind the Trail.angle property to

      {#Control/Control.Speed} / 260 * 270
      

      

   3. Right-click the Trail_Rich node and select Convert to Nodes Prefabs.

      

   4. In the Node Tree, in the Speedometer_Rich_Round_2158:1294, in the Group node, create an Empty Node 2D node, name it Pointer_Rotator_Rich. In the Properties, add the Transform 2D > Render Transformation Origin property and set the X and Y property fields to 0.5.

      

   5. In the Pointer_Rotator_Rich node, create a Rectangle 2D node, and name it Arrow. In the Properties, add and set:

      • Foreground Brush to Figma/Materials/Items/Shapes/Arrow_2158:1267

      • Vertical Alignment and Horizontal Alignment to Center

      • Rectangle Width to 4

      • Rectangle Height to 56

      • Layout Translation property field Translation Y to -216.5

      

   6. In the Pointer_Rotator_Rich node, bind the Render Transformation property field Rotation Z to

      -135 + {#Control/Control.Speed} / 260 * 270
      

      

   7. Right-click the Pointer_Rotator_Rich node and select Convert to Nodes Prefabs.

      

   8. In the Speedometer_Rich_Round_2158:1294, in the Group node, delete the GaugeMeter node.

      

3. Add and set up the rich radial graph for the tachometer:

   1. From the Prefabs drag the Trail_Rich prefab to the Tachometer_Rich_Round_2158:1295 to the Group 2128. In the Properties:

      • Add the Trail.clockwise and set it to disabled

      • Bind the Trail.angle property to

        {#Control/Control.RPM} / 6000 * 270
        

      

   2. From the Prefabs drag the Pointer_Rotator_Rich prefab to the Tachometer_Rich_Round_2158:1295 to the Group 2128. In the Properties, bind the Render Transformation property field Rotation Z to

      135 + {#Control/Control.RPM} / 6000 * 270
      

      

   3. In the Tachometer_Rich_Round_2158:1295, in the Group 2128 node, delete the GaugeMeter node.

      

Tip

The Trail_Material is a smart material. This allows you to adjust the appearance of the dynamic trail effect.

To adjust the effect:

1. In the Library > Materials and Textures, select the Trail_Material.

   

2. In the Properties, add the Material > Trail.EnableDetailedControl property and set it to enabled.

   

3. Adjust the effect appearance by setting the additional properties.

   

You can now control the rich round bar graphs from the Control node with the Speed Control and RPM Control properties.

Preview step Next step