GettingStartedControls Part 4

In the first 3 parts of this sample we have created 3 individual scenes. In the Player it was necessary to enable and disable the displayed scenes manually. In this part we will add menu tabs to the bottom of the screen so the user can switch between scenes as he likes. 

As basis for step 4 of our GettingStartedControls tutorial, please use your own created solution from the previous "GettingStartedControls" tutorial.

Our menu tabs scene can be seen on the bottom of the climate scene in below image.

Our goal is to create a tab bar to enable the user to switch between different scenes. As this bar shouldn't be displayed permanently, it will be put into a drawer control. This way it can be made visible by hovering an image and it can be hidden again by clicking on a close button. The buttons will be realized using customized radio buttons.

This tab bar will be placed on the bottom of every screen. To avoid having to create this bar inside every scene where it should be displayed, we will define a separate scene, which we can reuse on all screens.

Importing Images

We will use the built-in Scene Composer controls but they will be customized with new images. Therefore these images have to be imported into the Scene Composer solution.

Creating the TabButton

We will use Scene Composer's built-in RadioButtons as controls for our tab bar. Since the usual RadioButtons' appearance doesn't fit into a tab bar optically, we are going to customize the RadioButton to create a TabButton. We will use the radio button control as our base template.

Remove the RadioButton's Knob

The RadioButton control will be customized to look like buttons: the typical RadioButton circle icon will be replaced by background images for the button's various states (normal, selected, pressed...).

1. In the Solution Explorer navigate to "References > SCL: ConstructionKit > ConstructionKit > Controls > RadioButton" and copy the RadioButton control either via the context menu "Copy" or the keyboard shortcut <Ctrl + C>.
   • The RadioButton control is in the clipboard and ready to be pasted.
     
     
2. In the Solution Explorer navigate to "Solution > Controls" and paste the RadioButton control either via the context menu "Paste" or the keyboard shortcut <Ctrl + V> into the Controls folder.
   • In Solution Explorer you can see that the RadioButton has been pasted into the Solution/Controls folder.
     
3. In the Solution Explorer rename the RadioButton control in the Solutions/Controls folder to "TabButton" either via the context menu "Rename" or the keyboard shortcut <F2>.
   • In the Solution Explorer you can see that the RadioButton in the Solutions/Controls folder is renamed to "TabButton".
   • In the Toolbox panel's [ Controls ] section you can see a new folder "Touchable" with the newly created TabButton.
     
4. In the Solution Explorer or in the Toolbox double-click the newly created TabButton.
   • In the Scene Editor you can see the TabButton, which currently looks like Scene Composer's RadioButton.
   • In the Scene Tree panel you can see the complete design of the TabButton, which is a copy of the RadioButton. On the Scene Tree panel's left side you can see the node structure, on the right side you can see the applied behaviors that form the control's logic.

     The important thing to know is that all changes you perform here will be applied to ALL instances of this control class immediately. 
     This is also valid when changing properties as long as your control class is opened. You can close it by clicking the left arrow at the top of the Scene Tree (marked in orange in the previous image) or by using the context menu of the Control in the SceneTree and choosing "Go To Previous Element".
     If you are outside of the control's "Edit mode", all changes in the properties or behavior panel will influence a single instance of the control.

5. In the Scene Tree panel navigate to and select the RadioButtonNode (TabButton > StackLayout > OverlayLayout > RadioButtonNode). In the Scene Tree panel's right side select the behavior action as in the table below. In the Properties panel click on the magnifying glass icon next to the Image property.
   • The Choose Item dialog will be opened
     
     
6. In the "Choose Item" dialog select the image as in the table below and click [ OK ]. 
   • The "Choose Item" dialog will be closed.
   • The respective image has been changed.
   • In the Scene Editor the TabButton (former RadioButton) has changed as you can see in the image below.
     

     RadioButtonNode - Behavior	Image
     SetNormalImage	/Resources/MenuTabs/ButtonNorma_BkBmp
     SetSelectedImage	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp
     SetSelectedPressedImage	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp
     SetNormalPressedImage	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp

     

Configure the Text's Position

The positioning of text and background is not quite right. The following steps will correct that.

1. In the Scene Tree panel select the TextNode (TabButton > StackLayout > TextNode). In the Properties panel's [ Layout ] section change the HorizontalAlignment and the Margin according to the table below.
   
   • In the Scene Editor panel minor changes in text positioning are visible.
     

     Target Node	HorizontalAlignment	Margin
     		Left	Right
     RadioButtonNode	HCenter	6	6

2. In the Scene Tree panel select the TextNode (TabButton > StackLayout > TextNode). In the Scene Tree panel's right side select the ProviceTextProperty. In the Property panel change the Text property to "TabButton".
   
   • In the Scene Editor the TabButton's text is changed to "TabButton".
     
     
3. In the Scene Tree panel select the TextNode and drag it onto the root node TabButton, which is called "TabButton".
   • In the Scene Tree panel you can see that the TextNode is now directly under the TabButton.
   • In the Scene Editor the TextNode with the text "TabButton" is visible. It is hidden behind the Image of the RadioButtonNode.
     
     
4.  In the Scene Tree panel select the RadioButtonNode and drag it onto the root node TabButton as well.
   • In the Scene Tree panel you can see that the RadioButtonNode is now between the TabButton and the TextNode.
   • In the Scene Editor the TextNode with the text "TabButton" is visible again as in the picture below.
     
     
5. In the Scene Tree panel select the StackLayout (with the OverlayLayout) and delete it either via the context menu "Delete" or by pressing the delete key on your keyboard.
   • The Delete Item dialog will be opened displaying which items are going to be deleted.
     
     
6. In the Delete Item dialog press the [ OK ] button.
   • In the Scene Tree panel you can see that StackLayout and OverlayLayout have been deleted.
   • The Scene Tree looks as in the image below.
     
7. In the Scene Tree panel select the RadioButtonNode. In the Properties panel's [ Layout ] section change Alignment and Margin properties as well as the StretchBehavior according to the table below.
   • In the Scene Editor the TextNode's text "TabButton" is neatly positioned in the center of the button (see image below).
   • We have successfully created and customized our own TabButton control, which can be used like any other control.
     

     Target Node	Vertical	Horizontal	Margin		StretchBehavior
     	Alignment		Left	Right
     RadioButtonNode	HCenter	HCenter	0	0	Fill

     

Creating MenuTabs Scene

A MenuTabs scene will be created and configured with a GridLayout holding various Buttons.

Setting up the Scene

In the following steps a scene is created and the camera as well as the viewport are configured.

1. Create a new scene via the menu bar "Scene" - "New 2D Scene" or press < Ctrl+2 > on your keyboard
   
   • The "Add New Scene 2D" dialog will be opened.
     
2. In the first row select "/Scenes" from the drop-down menu. Enter "SceneMenuTabs" as name and press [OK]. We use the prefix "Scene" to have all scenes listed next to each other in the Solution Explorer panel.
   • A new scene "SceneMenuTabs" is created and visible in the Solution Explorer panel in folder "Scenes".
   • The new scene is opened in the Scene Editor and in the Scene Tree panel.
   • In the Scene Tree panel you can see that the scene has a camera.
   • In the Render Targets panel you can see that the camera is already added to the RenderTarget.
     

     
     

3. In the Render Targets panel check the checkbox of "SceneMenuTabs\Camera" in order to enable rendering.
   • Rendering of the scene is enabled.
     
     
4. In the Scene Tree panel select the Camera. In the Properties panel's [Camera] section configure the Viewport height to 54. 

   The value of this property is calculated automatically. In order to be able to edit it, you have to click on the [A] button to the property's right, which will switch auto off.

   • In the Scene Editor you can see that the height of the viewport is reduced to 54, which is about the height of the TabButton control.
     
     
5. In the Scene Tree panel select the Camera. In the Properties panel's [Camera] section change the sequence number to 3.
   • The camera's sequence number is set to 3.
   • In the Scene Tree panel the red Information/Warning/Error square disappears.
     

Adding and Arranging Buttons

A GridLayout is configured to arrange 3 different kinds of buttons forming our menu of our configured car HMI.

1. From the Toolbox panel's [Controls] section under "Container" drag a GroupBox into the Scene Tree panel directly onto SceneMenuTabs.
   • In the Scene Tree panel you can see that there is a GroupBox node.
   • In the Scene Editor you can see a square with a white dashed outline.
     
     
2. In the Scene Tree panel select the GroupBox node. In the Properties panel's [Layout] section configure the Size according to the table below.

   The value of this property is calculated automatically. In order to be able to edit it, you have to click on the [A] button to the property's right, which will switch auto off.

   • In the Scene Editor the white dashed outline will match the yellow line that marks the viewport.
     

     Target Node	Size
     	X	Y
     GroupBox	1024	54

3. In the Scene Tree panel click on the little triangle to the left of the GroupBox.
   
   • In the Scene Tree panel the GroupBox node will open and you can see the Content anchor below.
     
     
4. From the Toolbox panel's [Node 2D] section drag a GridLayout into the Scene Tree panel directly onto the GroupBox's Content anchor.
   • In the Scene Tree panel you can see the GridLayout node.
     
     
5. In the Scene Tree panel select the GridLayout. In the Properties panel's [Layouter] section change the Column Count to 6.
   • The Column Count has been changed to 6.
     
     
6. From the Toolbox panel's [Controls] section drag Controls into the Scene Tree panel directly onto the GridLayout according to the table below.
   • In the Scene Tree panel you can see that a Button, 4 TabButtons and a TextButton have been added to the GridLayout.
   • In the Scene Editor the blue Button and 4 TabButtons (with the dark background) are rendered directly over each other, so that not all of them are visible.
     
     

     Controls Section	Controls
     		Touchable <ConstructionKit>	1 Button
     Touchable	4 TabButtons
     Touchable <ConstructionKit>	1 TextButton

     
7. In the Scene Tree panel select the GridLayout. In the Properties panel's [Layout] section configure GridAutoArrangement for "horizontal".
   • In the Scene Tree panel you can see that the Button, TabButtons and TextButton are neatly arranged.
     

     
     

8. In the Scene Tree panel right-click on the GridLayout and choose [Configure Layouter...] from the context menu.
   • The Grid Layout Editor will be opened.
   • In the Grid Layout Editor you can see that the Controls are bunched together inside of the first cell.

   The Controls don't have to be configured for a certain column. The Controls will be arranged at runtime using the GridAutoArrangement property that we configured in the previous step.

9. In the Grid Layout Editor configure the columns' widths according to the table below and press [OK].
   
   • In the Scene Editor you can see that the columns widths have changed.
     

     Column 1	Column 2	Column 3	Column 4	Column 5	Column 6
     0.10	0.20	0.20	0.20	0.20	0.10

     
     
     

Configuring the Menu Bar's Buttons

The following steps will adapt the Buttons' visual appearance to the intended design and configure the Buttons' texts.

1. In the Scene Tree panel expand the Button by clicking on the little triangle on its left.
   
   • In Scene Tree panel a Content anchor will get visible.
     
     
2. From the Toolbox panel's [Controls] section under "Common <ConstructionKit>" drag a Text control and drop it directly onto the Button's Content anchor.
   • In the Scene Tree panel the Text control appears beneath the Content anchor.
   • In the Scene Editor the Button is displayed with the text "Text" on it.
     
     
3. In the Scene Tree panel select the Text control. In the Properties panel change the properties according to the table below.
   • In the Scene Editor the Button is displayed with the centered sign ">".
     

     Properties Section	Property	Value
     Control	Text	>
     Layout	Vertical Alignment	VCenter
     	Horizontal Alignment	HCenter

4. In the Scene Tree panel select the Button. In the Properties panel's [Control] section change the Button's Image properties according to the table below. To change the images click on the magnifying glass icon to open the Choose Item dialog, select the appropriate image and click [OK.]
   • In the Scene Editor the Button's background will be displayed in almost black color.
     

     Properties Section	Property	Value
     General	Name	Next
     Control	Normal Image	/Resources/MenuTabs/ButtonNorma_BkBmp
     	Pressed Image	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp
     	Focused Image	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp

5. In the Scene Tree panel select the TabButtons one by one (from top to bottom) and apply the properties in the Properties panel according to the table below.
   • In the Scene Tree panel all TabButtons are renamed.
   • In the Scene Editor you can see the TabButtons' texts (from left to right): HOME, CLIMATE, PHONE, OPTIONS.
     

     General > Name	Control > Text
     TabHome	HOME
     TabClimate	CLIMATE
     TabPhone	PHONE
     TabOptions	OPTIONS

6. In the Scene Tree panel select the TextButton. In the Properties panel apply the properties as given in the table below.
   • In the Scene Editor the TextButton's Text and Background have changed according to the configuration
   • In the Scene Tree panel the TextButton is renamed.
     

     Properties Section	Property	Control > Text
     General	Name	CloseButton
     Control	Text	X
     	Normal Image	/Resources/MenuTabs/ButtonNorma_BkBmp
     	Pressed Image	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp
     	Focused Image	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp

7. In the Scene Tree panel select the GroupBox. In the Properties panel's [Control] section click on the magnifying glass icon next to property "Default Selected Object". 
   • The "Choose Item" dialog will be opened.
     
     
8. In the Choose Item dialog navigate to and select the "TabHome"  TabButton which can be found via the path below, and click [OK].
   • In the Scene Editor the "TabHome" TabButton will be displayed selected as in the image below.
     

     Default Selected Object	Path
     	/Scenes/SceneMenuTabs/GroupBox/Content/GridLayout/TabHome

     

Integration of SceneMenuTabs

To integrate the SceneMenuTabs into the Display we have to reduce the height of our Home and Climate scenes.

1. In the Render Targets panel select the cameras one by one and change the properties in the Properties panel's [Camera] section according to the table below.
   • In the Scene Editor for SceneHome, SceneClimate and SceneOptions you can see that the height of the yellow camera viewport rectangle is reduced to 714.
     

     Camera	Left	Top	Height	Enable Swapping
     SceneHome\Camera	0	0	714	TRUE
     SceneClimate\Camera	0	0	714	TRUE
     SceneOptions\Camera	0	0	714	TRUE
     SceneMenuTabs\Camera	0	714	54	FALSE

2. In the menu bar go to View > Display > Display-0.
   • The Display(0) window will be opened.
     
     
3. In the Render Targets panel check the SceneMenuTabs\Camera and one of the other cameras. 
   • In the Display(0) window you should be able to see the SceneMenuTabs on the bottom of the window and the other scene on the top just like in the image below. 
     

Adding Functionality to the MenuTabs

When pressing a TabButton the respective scene should be displayed. This will be solved by configuring conditions and behaviors using Fusion to trigger scene activation and deactivation.

A detailed explanation about Fusion, how to operate Fusion (how to add Fusion Nodes) and a configuration example can be found in the documentation about Fusion. 

1. In the Solution Explorer double-click on SceneMenuTabs.
   • In the Scene Editor and in the Scene Tree panel SceneMenuTabs will be opened.
     
     
2. In the Scene Tree panel navigate to SceneMenuTabs > GroupBox > Content > GridLayout > TabHome. Click on the Fusion button on the Scene Tree panel's right side.
   • Fusion will be opened with the TabHome Fusion node TabHomeNode in the center.
     
3. The TabHome Fusion Node has a Behaviors connector.
   
4. InAdd Fusion drag the Behaviors connectorNodes to the rightaccording and releaseto the mousetable button.below.
   • The3 Selectnew BehaviorsFusion dialognode will be opened.added to the Fusion diagram: Event Handler Fusion Node, Check Control State Fusion Node and Transition Request Fusion Node. Connect to Fusion Node
     Connector
     Add Fusion Nodes
     TabHome
     Behaviors
     Event Handler Event Handler
     Condition
     Check Control State
     
     Action
     Transition Request
     
5. Click intoConfigure the inputnewly field directly above the behaviors list and start typing "EventHandler".
6. While typing, the list of behaviors will be reduced and you can easily find the EventHandler behavior.
   
   

Double-click the EventHandler behavior.

The Select Behaviors dialog will be closed. Inadded Fusion anodes new Event Handler Fusion node is created and connectedaccording to the TabHome Fusion node.

Similar to the steps above add and configure Fusion nodes to build up a Fusion diagram as in the imagetable below.

• If TabHome's selected state changes to true, a transition to activate SceneHome is requested.

  Fusion Node	Property	Value
  Check Control State	State	Selected
  	StateCondition	ChangedToTrue
  Transition Request	RequestType	Activate
  	Identifier	SceneHome

  
  
  
  

   

In Fusion select the EventHandler,3 newly added EventHandler Fusion Node, the Check Control State Fusion Node and Transition Request nodesFusion andNode. Now copy and paste these nodes into the Fusion diagram (either via the context menu or via the keyboard shortcuts <Ctrl>+c and <Ctrl>+v).

• The Fusion nodes are copied, resulting in: Event Handler_1,Handler_1 Fusion Node, Check Control State_1 Fusion Node and Transition Request_1.
  
  Request_1 Fusion Node.

Change the configuration of the newlyFusion Nodes created Fusionvia nodesCopy&Paste according to the table below.

• If TabHome's selected state changes to false, a transition to deactivate SceneHome is requested.

  Fusion Node	Property	Value
  Check Control State_1	State	Selected
  	StateCondition	ChangedToFalse
  Transition Request_1	RequestType	Deactivate
  	Identifier	SceneHome

  
  

Copy theall Fusion BehaviorNodes nodes of TabHome'sthis Fusion diagram except for the TabHome Fusion Node and paste itthem tointo the Fusion diagrams forof TabClimate and TabOptions. Adapt the TransitionRequest nodes'Fusion Nodes' Identifier to SceneClimate, ScenePhoneSceneClimate or SceneOptions respectively.respectively according to the table below.

• If TabClimate's selected state changes to true, a transition to activate SceneClimate is requested.
• If TabClimate's selected state changes to false, a transition to deactivate SceneClimate is requested.
• The same is true for TabOptions and SceneOptions.
• With these configurations done, the SceneMenuTabs works as a navigation bar, enabling the user to switch between different scenes.
  

  For this tutorial, ScenePhone has been skipped, since most controls have already been covered by other scenes.

  Fusion Diagram of 
  Fusion Node
  Identifier Value
  TabClimate
  Transition Request SceneClimate
  Transition Request_1 SceneClimate TabOptions
  Transition Request SceneOptions
  
  Transition Request_1
  SceneOptions
  

Save your work and start the Player to test the functionality of your configuration.

• Pressing TabClimate will activate SceneClimate, Pressing TabOptions will activate SceneOptions and Pressing TabHome will activate SceneHome.

Configuring the Menu Bar to Hide/Reappear

We want to make our menu bar with our TabButtons appear on hovering an indicator and disappear when clicking a button. To achieve this, the GroupBox will be moved into a Drawer Control. The indicator RenderNode2D will be enhanced with Control functionality.

Configuring a Drawer Control

Our menu bar will be encapsulated into a Drawer Control that can then be opened and closed like a drawer at a desk, hiding or showing its contents according to its opened/closed state.

The indicator 

1. Open SceneMenuTabs. From the Toolbox panel's [Controls] section under "Touchable <ConstructionKit>" drag a Drawer control and drop it into the Scene Tree panel directly onto the SceneMenuTabs.
   • In the Scene Tree panel you can see that a Drawer control has been added to your scene.
     
     
2. In the Scene Tree panel expand the newly added Drawer control.
   • A ContentAnchor will be displayed.
     
     
3. In the Scene Tree panel drag the SceneMenuTabs > GroupBox directly onto the Drawer's ContentAnchor.
   • The GroupBox and all its content will be moved into the Drawer control.
     
     
     
4. Configure the Drawer Control's properties in the Properties panel according to the table below.
   • The Drawer is configured to only appear if needed and to appear from the Bottom.
   • The Drawer is configured closed and its content won't be visible.
     

     By unchecking the "Open" property, the Drawer Control will be closed, so it will hide its content. The content is still available, just hidden in a drawer (like in a desk drawer, where you can put away stuff).
     You can check and uncheck this property during editing as you like and watch it appear and disappear, but please make sure to uncheck it in the end.
     If there is no visual change when toggling the "Open" property, try forcing a refresh by pressing <F5> on your keyboard.

     Drawer Properties Section	Property	Value
     Control	Open	False
     	Appear Direction	Bottom

5. In the Solution Explorer panel navigate to the image arrowTabsBmp which can be found following the path below and drag this image into the Scene Editor or into the Scene Tree panel.
   • In Scene Editor the arrowTabsBmp image will be displayed.
   • In Scene Tree panel a new RenderNode2D with the arrowTabBmp image will be available.
     

     arrowTabsBmp	Solution Explorer Path
     	Solution > Resources > MenuTabs > arrowsTabBmp

6. In the Scene Tree panel make sure that arrowsTabBmp is positioned above the Drawer control as seen in the image below.
   • The indicator is now hidden while the drawer is open and our menu bar is displayed.
     
     

     
     

7. In the Scene Tree panel select the newly created RenderNode2D arrowsTabBmp. In the Properties panel change the properties as in the table below.
   • The RenderNode2D is positioned correctly.

     arrowsTabBmp Properties Section	Property		Value
     Transformations	Position	X	469
     	Position	Y	21
     	Scale	X	0.5
     	Scale	Y	0.5

Opening and closing the Drawer Control

The Drawer Control shall be opened when hovering or clicking the indicator and it shall be closed when the Close Button is pressed. This functionality is configured using Fusion.

A detailed explanation about Fusion, how to operate Fusion (how to add Fusion Nodes) and a configuration example can be found in the documentation about Fusion. 

1. While arrowsTabBmp is selected in the Scene Tree panel click on the [Fusion...] button on the right side of the Scene Tree.
   
   • Fusion will be opened, displaying the arrowsTabBmp Fusion Node.
     
     
2. DragAdd a HandleControlState Fusion Node to the arrowTabBmp Fusion Node using its Behaviors connector according to the righttable and release the mouse button.
3. The Select Behavior dialog will be opened.below.
   
   

In the Select Behavior dialog click into the input field directly above the behaviors list and start typing "HandleControlState".

The list of behaviors will narrow down until you can see the HandleControlState behavior.

Double-click on the HandleControlState behavior.

• A new HandleControlState Fusion node HandleControlStateNode will be added to the Fusion diagram.
• RenderNode2D is now enhanced with control functionality. Connect to Fusion Node
  Connector
  Add Fusion Nodes
  arrowsTabBmp
  Behaviors
  HandleControlState
  
  

UsingAdd similarFusion steps add the following behaviorsNodes to the arrowsTabBmp Fusion node.diagram according to the table below to build up the Fusion diagram shown in the image below.

• 4 new Fusion nodes have been created: OnClick,OnClick Hover,Fusion aNode, Hover Fusion Node, Change Drawer State connectedFusion to OnClickNode and a Change Drawer StateState_1 connectedFusion to Hover. Please also see the image below.
  Node. Connect to Fusion Node
  Connector
  PropertyAdd Fusion Nodes
  arrowsTabsBmp > BehaviorsarrowsTabBmp
  OnClickBehaviors
  Hover
  arrowsTabBmp > Behaviors 
  HoverBehaviors
  OnClick
  OnClick
  > Actions
  Change Drawer State
  Hover > Actions
  Change Drawer State
  State_1
  
  

In Fusion configure boththe TargetNode of Change Drawer State nodesFusion Node and Change Drawer State_1 Fusion Node according to the Drawertable control of SceneMenuTabs.below. To do this, click on the magnifying glass icon on the right side of the TargetNode property and follow the path to the Drawer control given in the table below.

• The Drawer will now be opened when the indicator is hovered or clicked.

  TargetNode	Choose Item Path
  Change Drawer State	Scenes > SceneMenuTabs > Drawer
  Change Drawer State_1	Scenes > SceneMenuTabs > Drawer

In the Scene Tree panel select the CloseButton, which can be found in the path below. Then click on the [Fusion...] button on the Scene Tree panel's right side.

• Fusion will be opened with the CloseButton's Fusion diagram.
• The CloseButton is already a Control and has an EventHandler and a Check Click condition.
  

  CloseButton	Scene Tree Path
  	SceneMenuTabs > Drawer > ContentAnchor > GroupBox > Content > GridLayout > CloseButton

InAdd a Fusion dragNode to the Event Handler'sHandler Fusion Node using its Actions connector according to the righttable and connect a below.Change Drawer State action.

• In Fusion a new Fusion Node "Change Drawer State" has been added to the Fusion diagram.diagram: Change Drawer State Fusion Node.
  Connect to Fusion Node
  Connector
  Add Fusion Nodes
  Event Handler
  Actions
  Change Drawer State
  
  

 In Fusion configure the Fusion Node "Change Drawer State" Fusion Node as in the table below.

• The Close Button is now configured to close the drawer.
• The Fusion diagram looks like in the image below.
  

  Change Drawer State Property	Value
  TargetNode	Scenes > SceneMenuTabs > Drawer
  Action	Close

  
  
  

  
  

Save your work and start the Player to test the functionality of your configuration.

• The Drawer will close when the [Close] button is pressed.
• The Drawer will open when the indicator is hovered.
  

---