Step 4 - Telltales, temperature, time

In this step, you create the controls for the telltales, and the temperature and time shown in the cluster header.

../_images/preview-telltales.gif

Control telltales

In this section, you use the structure and properties for telltales that Kanzi Figma Importer imported from the Figma design. The main task here is to add the bindings so that you can control the telltales from the Control node.

The TTs_1507:14058 prefab contains the telltales.

../_images/telltale-structure.png

To control the telltales:

  1. In the Node Tree, in Cluster Components > TTs, set the Prefab Template property to the TTs_1507:14058 prefab.

    ../_images/node-tree-telltales.png ../_images/properties-telltales.png

  2. In the Prefabs, in the TTs_1507:14058 prefab, for every telltale, change the Prefab Template property from the Resource ID to the prefab template of that node.

    For example, for the a02-low-beam-dipped-beam Prefab View, set the Prefab Template property to a02-low-beam-dipped-beam_1768:918.

    This way, when you clean up your project by removing unused items, Kanzi Studio keeps the telltales.

    ../_images/prefabs-telltales-low-beam.png ../_images/properties-low-beam.png

  3. In the Library > Property Types > Figma Importer > Component > Telltales, drag all properties except the leftGaugeSwap and rightGaugeSwap to the Control node.

    ../_images/library-property-types-telltales.png ../_images/properties-control-telltale-properties.png

  4. To control the telltale visibility from the Control node, in the Prefabs, in the TTs_1507:14058 prefab, for each telltale, edit the binding to the Visible property to change the alias in the binding expression from #1507:14058 to #Control.

    For example, for the a02-low-beam-dipped-beam Prefab View, change the binding expression from

    {#1507:14058/FigmaImporter.Component.18_Low_Beam_1727:0}

    to

    {#Control/FigmaImporter.Component.18_Low_Beam_1727:0}
    ../_images/prefabs-telltales-low-beam.png ../_images/binding-low-beam-control.png

You can now control the telltales from the Control node.

../_images/preview-telltales.gif

Set temperature and time

The top panel of the cluster contains the temperature and time.

To set the temperature and time:

  1. In the Node Tree, in the Cluster Components > PanelTop > Outside Temperature > Outside Temperature_1 Text Block node, bind the Text property to the OutsideTemp property in the Control node.

    temperature = round({#Control/Control.OutsideTemp} * 2) / 2
format("{:.1}°C", temperature)

    This binding:

    1. Multiplies the outside temperature value by 2, rounds the result to get an integer value, and divides the result by 2. This way only half-degree changes are shown.

    2. Formats the string to show the value with one decimal precision and the °C unit.

    ../_images/node-tree-outside-temperature.png ../_images/binding-temperature.png

  2. In the Cluster Components > PanelTop > Icon_Snow Prefab View, bind the Node > Visible property to this binding expression

    STEP({#Control/Control.OutsideTemp},1.5)

    This way you show the snowflake icon when the outside temperature is below 1.5°C.

    ../_images/node-tree-icon-snow.png ../_images/binding-snow.png

  3. In the Icon_Snow Prefab View, change the Prefab Template property from the Resource ID to the Icon_Snow_2079:1062.

    ../_images/node-tree-icon-snow-prefab.png ../_images/properties-icon-snow-prefab.png

  4. In the Node Tree, in the Cluster Components > PanelTop > Time > Time_1 Text Block node, bind the Text property to the time properties in the Control node:

    minutes = {#Control/Control.TimeMinutes}
hours = {#Control/Control.TimeHours}
format("{0:02}:{1:02}", hours , minutes)

    To learn more about how to format strings with bindings, see the format binding function documentation.

    ../_images/node-tree-time.png ../_images/binding-time.png

You can now set the temperature and time in the Control node.

Preview step Next step