Step 3 - Navigation¶
In this step, you create the navigation functionality.
Implement turn-by-turn navigation widget¶
To implement the turn-by-turn navigation widget:
In the Node Tree, in the Cluster Components, delete the Widget_Navigation node.
In this procedure, you create the replacement content.
In the Cluster Components node, create an Empty Node 2D, and name it Navigation_Widget. In the Properties, add and set:
Layout Width to 344
Layout Height to 308
Render Transformation property fields
Translate X to 778
Translate Y to 55
In the Library, create a State Manager and name it Navigation State Manager:
Select the State Group. In the Properties, set the Controller Property to isActive.
Rename the states to Active and Inactive, and in each add and set:
Active state:
isActive to enabled
Node > Opacity to 1
Render Transformation property field Translation Y to 0
Inactive state:
isActive to disabled
Node > Opacity to 0
Render Transformation property field Translation Y to 150
In the Properties, in the Navigation State Manager > State Group under the State Transitions property, click Add transition and create these transitions:
Active -> InActive:
Start Time to 100
Duration to 2000
Easing Function to Cubic
Easing Mode to Ease in-out
InActive -> Active:
Start Time to 0
Duration to 100
Click
and add these Transition Animations for:Render Transformation property:
Start Time to 0
Easing Function to Linear
Easing Mode to Ease in
Opacity property:
Start Time to 100
Easing Function to Cubic
Easing Mode to Ease in-out
From the Prefabs, drag the Widget_Navigation prefabs to the Navigation_Widget node. In the Properties, add and set for each prefab instance:
State Manager to Navigation State Manager
NavigationControl to the correct key for each prefab
For example, for the Widget_Navigation | Property 1=Navigation_1_2511:1081, set the NavigationControl to NavWidget_01.
For each Widget_Navigation prefab instance, in the Properties click Add Binding, and bind:
Visible property to
CEIL({@./Node.Opacity})When Opacity is 0, this binding sets the Visible property to false. This way the node is not rendered when not active.
NavigationControl property to
{@./Control.NavigationControl} == {@../Control.NavigationControl}
In the Navigation_Widget node, bind the NavigationControl property to:
{#Control/Control.NavigationControl}
You can now control the navigation widget in the Control node with the Navigation Control property.
Set navigation labels¶
To change the distance and street names in the navigation widget during application runtime, you can control the text input with a property. For every Widget_Navigation prefab these properties are available in the Control node for this purpose:
Nav 0* Distance
Nav 0* StreetName
To set the navigation labels, in the Widget_Navigation prefabs, in the Value > Value_1 and Streetlabel > Streetlabel_1 Text Block 2D nodes, bind the Text property to the corresponding property in the Control node.
For example, to set the street label for the navigation widget NavWidget_01 (Widget_Navigation | Property 1=Navigation_1_2511:1081), bind the Streetlabel > Streetlabel_1 node Text property to the Nav 01 Streetname property in the Control node.
