Template structure

The template consists of these Kanzi Studio projects:

• AirFlowMain defines the application structure, contains the user interface elements of the application, and defines the global controls for changing the content appearance. See AirFlowMain project.

• AirFlowWind project includes additional point lights, along with the meshes that visualize airflow, their appearance, orientation, and angle indicators. See AirFlowWind project.

• CarModel project contains the car model and the textures that the model uses.

• Environment project defines the environment and contains the environment assets. See Environment project.

AirFlowMain project

The AirFlowMain project defines the application structure, contains the user interface elements of the application, and defines the global controls for changing the content appearance. This is the main project that refers to the other template projects.

Controls

The RootPage > Controls node serves as an access point to control the general appearance of the application.

The main control property is 01_Feature. The FeatureFocusPositionStateManager state manager uses this property to set the active view.

Value	Key	Description
0	Fullscreen	Initiates the default view without overlays.
1	Driver	Activates the driver view, including the temperature and fan controls for the driver side.
2	Sync	Activates the synchronized view, showing the temperature and fan controls for both the driver and passenger sides.
3	Passenger	Activates the passenger view, including the temperature and fan controls for the passenger side.

Viewport 2D

The RootPage > Viewport 2D contains the camera that sets the perspective and the Prefab View 3D nodes that instantiate the prefabs that define the main content of the template. The prefab are in referenced projects.

Node name	Description	URL
Environment	The 3D environment skybox sphere, including the street lines.	kzb://environment/Prefabs/Environment
CarRoot	The 3D car model.	kzb://carmodel/Prefabs/SportsCar_Root
Airflow_Root	The meshes that visualize the airflow for driver and passenger AC zones.	kzb://airflowwind/Prefabs/SportsCar_AC

Scroll View

The RootPage > Scroll View 2D nodes control the direction of the airflow meshes by assigning the scroll positions to the Airflow_Root Prefab View 3D node.

The Minimum Scroll Bounds and Maximum Scroll Bounds properties in these Scroll View 2D nodes set the rotation limitations of the wind meshes. These limits trigger a bounce-back animation as feedback. These nodes also activate the visibility of the corresponding angle indicators.

Node name	AC Zone	Control properties
Scroll View 2D Left	Driver	AngleX_L AngleY_L
Scroll View 2D CenterLeft	Driver	AngleX_CL AngleY_CL
Scroll View 2D CenterRight	Passenger	AngleX_R AngleY_R
Scroll View 2D Right	Passenger	AngleX_CR AngleY_CR

PopupLeft and PopupRight

The RootPage > PopupLeft node contains nodes that control the Temperature for Driver, Passenger, and Sync. The RootPage > PopupRight node contains nodes that control the Fan Speed for Driver, Passenger, and Sync.

You can find the UI content in:

• RootPage > PopupLeft > UI_Content_Left for the left side

• RootPage > PopupRight > UI_Content_Right for the right side

To activate or deactivate this content, the UI_ContentActivation prefab uses the UIContentActivationLeftStateManager or UIContentActivationRightStateManager. These are driven by the 01_Feature property.

For the real-time blur effect, the glass tile uses the same setup as the popup window in the Car Template. See Glass tile effect.

BottomShape

The RootPage > BottomShape node contains nodes that control the UI features but it also displays the current values for Driver Temperature, Driver FanSpeed, Passenger Temperature, and Passenger FanSpeed.

For the real-time blur effect, the glass tile uses the same setup as the BottomShape in the Car Template. See Glass tile effect.

The FeatureSwitch Toggle Button Group enables feature selection. See FeatureSwitch Toggle Button Group 2D.

The functionality of the FeatureFocus is implemented using the FeatureFocusPositionStateManager. See FeatureFocus.

Sliders

All sliders in the template use a similar setup. The following sections cover the principles of this setup by explaining in detail how the RootPage > PopupLeft > UI_Content_Left > TempDriver slider works.

TempDriver (UI_ContentActivation)

The UI_ContentActivation prefab uses the ContentActivation property to determine the visibility of its content. Its visibility is controlled with either the UIContentActivationLeftStateManager or UIContentActivationRightStateManager, based on whether the content is on the left or right side.

The prefab contains the CurrentUIContent property. To display specific content, this property must be configured with the correct 01_Feature value. For example, to show the Driver content, set the property value to 1.

TempDriver (UI_TempDriver)

This prefab is the container for the slider and icon graphics for the driver temperature popup. These prefabs are used to show similar content in different popups:

• UI_FanDriver

• UI_FanPassenger

• UI_FanSync

• UI_TempPassenger

• UI_TempSync

TempSliderDriver

TempSliderDriver node includes a slider and a temperature label.

The Slider (SliderTemp) is built using the Factory Content Slider but is enhanced with a BarGraph node that applies a custom material (Textured_Temp_Scale) to visualize the progress and dynamic tick marks.

The snap of the slider to certain values is created with a trigger in the Slider (SliderTemp) that sets its RangeConcept.Value based on RoundedValue, once the user stops moving the slider.

The value of the RoundedValue property is calculated with a binding using the value of the RangeConcept.Value that ranges from 0 to 100, representing integer values.

The binding calculates the RoundedValue property in this way:

1. Multiply the value of the RangeConcept.Value property by 2 and divide the result by 10.

   This way you convert the range from 0 - 100 to 0 - 20.

2. Apply to the value the ROUND function.

   This way you get a whole number.

3. Divide the value by 2.

   This way you adjust the range from 0 - 20 to 0 - 10. Now the slider moves in 0.5 increments and in 20 steps.

4. Multiply by 10.

   This way you scale the output from 0 - 10 to 0 - 100 in increments of 5 and with 20 steps.

The Slider State Manager controlled by the SliderActive property generates animated visual feedback. The value of the SliderActive property is assigned in the Node Components of the Slider (SliderTemp).

Fan and Temperature logic

The Controls node is the central data branch for:

• FanDriver

• FanPassenger

• TempDriver

• TempPassenger

Property	Controlled by
FanDriver	RootPage > PopupRight > UI_Content_Right > FanDriver (UI_ContentActivation) > FanDriver (UI_FanDriver)
FanPassenger	RootPage > PopupRight > UI_Content_Right > FanPassenger (UI_ContentActivation) > FanPassenger (UI_FanPassenger)
TempDriver	RootPage > PopupLeft > UI_Content_Left > TempDriver (UI_ContentActivation) > TempDriver (UI_TempDriver)
TempPassenger	RootPage > PopupLeft > UI_Content_Left > TempPassenger (UI_ContentActivation) > TempPassenger (UI_TempPassenger)

The general logic for Sync Temperature Slider and Sync Fan Slider is:

• Condition 1: When the Driver Popup is active, the settings for the Sync sliders (temperature and fan speed) mimic those of the Driver sliders for temperature and fan speed.

• Condition 2: When the Sync Popup is active, the Driver and Passenger slider settings adjust to match those of the Sync slider.

Condition 1 is created using Triggers by setting the RangeConcept.Value of the Sync slider to the Driver RangeConcept.Value, once the interaction on the Driver sliders is complete.

Condition 2 is created using Triggers with a Condition by setting the RangeConcept.Value of the Driver and Passenger sliders to the Sync RangeConcept.Value, once the value changes.

The action in this trigger is executed if the ContentActivation property value of TempSync (UI_ContentActivation) is 1.

AirFlowWind project

The AirFlowWind project contains these nodes:

• Wind_L

• Wind_CL

• Wind_CR

• Wind_R

These nodes act as rotational axes for the wind meshes. Each contains:

Node	Description
Angle_Indicator_Vert	A ring mesh with AngleIndicatorMaterial to show the current vertical rotation angle of the wind mesh.
Angle_Indicator_Hor	A ring mesh with AngleIndicatorMaterial to show the current horizontal rotation angle of the wind mesh.
AirflowLayer1	A mesh with custom DynamicAC_Material to generate the dynamic wind effect animation.
Point Light	Enhances interior surfaces with dynamic lighting effects as it moves. Its intensity and color are controlled by the FanSpeed and the Temperature to synchronize with the wind conditions.

The Point Light Left and Point Light Right add supplementary, contrasting, and static illumination to the driver and passenger zone. To ensure consistency with the current wind conditions, the intensity and color of these lights are adjusted based on the FanSpeed and Temperature.

Environment project

The Environment project defines the environment and contains the environment assets. If you want to create your own environment, define it in this project. See Changing environment.

The Environment prefab instantiates prefabs that define environments in the project.