Step 8 - Linear graphs

In this step, you create the linear bar graphs shown next to the rectangular speedometer and tachometer.

Create simple linear bar graphs

To create the simple linear bar graphs:

1. Create the bar graph for the simple rectangular speed gauge:

   1. In the Node Tree, in the Speedometer_Simple_Rect_2024:2036 select the Speed Bar node. In the Properties, set the Layout Transformation property field Translation Y to 15.

      

   2. In the Arrow node, bind the Render Transformation property field Translation X to:

      -450 + {#Control/Control.Speed} / 260 * 450
      

      The height of the bar graph is 450 pixels and the maximum speed value is 260.

      

   3. In the SpeedBar node, set:

      • Vertical Alignment to Bottom

      • Layout Transformation property field Translation Y to 294

      • Bind Rectangle Height to

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

      

2. Create the bar graph for the simple rectangular tachometer gauge:

   1. In the Node Tree, in the Tachometer_Simple_Rect_2024:2034 select the Tachometer Bar node. In the Properties, set the Layout Transformation property field Translation Y to 15.

      

   2. In the Arrow node, bind the Render Transformation property field Translation X to:

      -450 + {#Control/Control.RPM} / 6000 * 450
      

      

   3. In the TachometerBar node, set:

      • Vertical Alignment to Bottom

      • Layout Transformation property field Translation Y to 294

      • Bind Rectangle Height to

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

      

The graph bars in the simple rectangular gauges now respond to the changes of the Speed Control and RPM Control properties in the Control node.

Create rich linear bar graphs

To crete the rich linear bar graphs:

1. Create the bar graph for the rich rectangular speed gauge:

   1. In the Node Tree, in the Speedometer_Rich_Rect_2134:1222 select the Arrow node. In the Properties:

      • Set Layout Transformation property field Translation Y to 13

      • Bind the Render Transformation property field Translation Y to:

        450 - {#Control/Control.Speed} / 260 * 448
        

      

   2. In the Bar node, set:

      • Vertical Alignment to Bottom

      • Layout Transformation property field Translation Y to -17

      • Blend Mode to Lighten

      • Bind Rectangle Height to

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

      

   3. In the Glow node, set:

      • Layout Transformation property field Translation Y to 0

      • Blend Mode to Lighten

      • Bind Render Transformation property field Translation Y to

        463 - {#Control/Control.Speed} / 260 * 448
        

      

2. Create the bar graph for the rich rectangular tachometer gauge:

   1. In the Node Tree, in the Tachometer_Rich_Rect_2134:1223 select the Arrow node. In the Properties:

      • Set Layout Transformation property field Translation Y to 13

      • Bind the Render Transformation property field Translation Y to:

        450 - {#Control/Control.RPM} / 6000 * 448
        

      

   2. In the Bar node, set:

      • Vertical Alignment to Bottom

      • Layout Transformation property field Translation Y to -17

      • Blend Mode to Lighten

      • Bind Rectangle Height to

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

      

   3. In the Glow node, set:

      • Layout Transformation property field Translation Y to 0

      • Blend Mode to Lighten

      • Bind Render Transformation property field Translation Y to

        463 - {#Control/Control.RPM} / 6000 * 448
        

      

The graph bars in the rich rectangular gauges now respond to the changes of the Speed Control and RPM Control properties in the Control node.

Preview step Next step