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

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.
6. The Choose Item dialog will be opened
7. 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

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

Setting up the Scene

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

1. Create a new scene via the menu "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 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.

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 Fusion node TabHome in the center.
3. In Fusion drag the Behaviors connector to the right and release the mouse button.
   • The Select Behaviors dialog will be opened.
4. Click into the input field directly above the behaviors list and start typing "EventHandler".
   • While typing, the list of behaviors will be reduced and you can easily find the EventHandler behavior.
5. Double-click the EventHandler behavior.
   • The Select Behaviors dialog will be closed.
   • In Fusion a new Event Handler Fusion node is created and connected to the TabHome Fusion node.
6. Similar to the steps above add and configure Fusion nodes to build up a Fusion diagram as in the image 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

     
     
     
7. In Fusion select the EventHandler, Check Control State and Transition Request nodes and 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, Check Control State_1 and Transition Request_1.
8. Change the configuration of the newly created Fusion nodes 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

9. Copy the Fusion Behavior nodes of TabHome's Fusion diagram and paste it to the Fusion diagrams for TabClimate and TabOptions. Adapt the TransitionRequest nodes' Identifier to SceneClimate, ScenePhone or SceneOptions respectively.
   
   • 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.

10. 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.

Menu Hide/Reappear

As weWe want to make the navigationmenu bar (with our TabButtons)TabButtons appear on hovering an indicator and disappear when clicking a button,button. To achieve this, the GroupBox has towill be moved into a Drawer Control. The indicator RenderNode2D will be enhanced with Control functionality

So,

Open SceneMenuTabs. From the nextToolbox steppanel's is[Controls] tosection under "Touchable <ConstructionKit>" drag a Drawer control and drop a Drawer Controlit into the Scene Tree andpanel movedirectly onto the SceneMenuTabs.

In the Scene Tree panel you can see that a Drawer control has been added to your scene. In the Scene Tree panel expand the newly added Drawer control.

A ContentAnchor will be displayed. 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.
Configure the Drawer Control's ContentAnchor.properties below.

The Drawer Controlis shouldconfigured to only appear if needed,needed soand we uncheck the property "Open".
It shallto appear from the bottomBottom. soThe weDrawer configureis theconfigured Appearanceclosed Directionand accordingly.its

The Drawer Control shall display its content onlychange when we hover an image. Therefore, we need an image, which we will import usingtoggling the menu."Open" property, try forcing a refresh by pressing <F5> on your keyboard.

In the Solution Explorer panel navigate to the image filearrowTabsBmp we needwhich can be found here:following

the

cgi_studio_content/Resources/GettingStartedControls/MenuTabs/arrowsTab.png

path

We dragbelow and dropdrag this image frominto 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 intoPath
our Scene, which
createsSolution a> RenderNode2DResources called> "arrowsTabBmp".MenuTabs Let's> renamearrowsTabBmp
this node as "Bitmap_ArrowsBmp". The Position and Scale of this RenderNode2D has to be adjusted as follows.

In orderthe toScene openTree panel make sure that arrowsTabBmp is positioned above the Drawer Controlcontrol whenas hoveringseen orin clickingthe image below.

The indicator is now hidden while the drawer is open and the menu bar is displayed.
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

 

While arrowsTabBmp is selected in the Scene Tree panel click on thisthe RenderNode2D,[Fusion...] webutton enhanceon thisthe right side of the Scene Tree.

Fusion will be opened, displaying the arrowsTabBmp Fusion node. Drag the Behaviors connector to the right and release the mouse button.

The Select Behavior dialog will be opened. 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 Fusion node HandleControlState will be added to the Fusion diagram. RenderNode2D is now enhanced with Controlcontrol functionality. Using similar steps add the following behaviors to the arrowsTabBmp Fusion node.

4 new Fusion nodes have been created: OnClick, Hover, a Change Drawer State connected to OnClick and a Change Drawer State connected to Hover. Please also see the image below.
Connector
Property
arrowsTabsBmp > Behaviors OnClick arrowsTabBmp > Behaviors  Hover OnClick > Actions
Change Drawer State
Hover > Actions
Change Drawer State
In Fusion configure both Change Drawer State nodes to the Drawer control of SceneMenuTabs. To do this, weclick drag and drop a HandleControlState Behavior fromon the ToolBoxmagnifying Behaviorsglass Panelicon ontoon the Bitmap_ArrowsBmpright RenderNode2D.

Next, we need to add a Hover and an OnClick Behavior. Drag and Drop these Behaviors from the Toolbox - Behaviors Panel onto the RenderNode2D "Bitmap_ArrowsBmp".

Drag and Drop a "Change Drawer State" Action Behavior onto eachside of the actionsTargetNode Hoverproperty and OnClick.

The Behaviors tree offollow the RenderNode2D "Bitmap_ArrowsBmp" now looks as follows. Please also note the position of this RenderNode2D "Bitmap_ArrowsBmp" in the SceneTree, which is above the Drawer Control.

Now, we have to configure the TargetNode for the Actions' "Change Drawer State". The TargetNode has to be setpath to the Drawer Control.control Clickgiven 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 icon[Fusion...] nextbutton 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
In Fusion drag the Event Handler's Actions connector to the TargetNode input fieldright and selectconnect thea Change Drawer ControlState fromaction. your SceneMenuTabs.

Do

Drawer on

We have now configured to open the Drawer Control. The next step is to close the Drawer again when the TextButton "CloseButton" on the right side of our TabBar is clicked.

The CloseButton is already a Control and has a CheckClick condition. This means, we only have to drag and drop a "Change Drawer State" Behavior onto the Actions of our CloseButton. This "Change Drawer State" Action has to be configured to "Close" the Drawer and the Drawer Control has to be set as TargetNode (similar to what we did earlier in this tutorial).

The functionality of the Drawer Control is now configured completely. To see if it works, the solution has to be saved and we start the Player using "Generate and Play".

In the Player you can see the Drawer opening when hovering the indicator. Close the Drawer again by clicking the right most CloseButton.

The Drawer functionality is working, however, the indicator is visible when the Drawer is opened. To prevent this, we add an Overlay Layout and a black SolidColorNode to the content of the GroupBox. Note that the GridLayout has to be put inside the OverlayLayout too.

The SolidColorNode's StretchBehavior has to be set to "Fill".

And the color of the SolidColorNode's SolidColorBrushBlend effect has to be set to black.

This version of the GettingStartedControls is provided as a complete sample including an already generated asset file for the Player.

---