GettingStartedControls Part 2

---

Part

Climate2 of the GettingStartedControls Tutorial covers the creation of a scene for climate control using various predefined Scene

Composer controls. As basis for part 2 of our GettingStartedControls creation tutorial please use your own created solution from part 1.

OurThe final sceneresult of our ClimateControl Scene will look like this:

Please

---

create

Preparing the Climate Scene

Create a new scene usingvia the Scenemenu menu's"Scene" - "New 2D Scene…Scene" or press < Ctrl+2 > on your keyboard

The "Add menuNew item.Scene

Name

In the newfirst scenerow select "/Scenes" from the drop-down menu. Enter "SceneClimate" as name and press [ OK ]. We always use the prefix "Scene" to have all scenes listed nearnext to each other in the Solution Explorer view.panel.

A new scene "SceneClimate" is created and visible in the Solution Explorer panel in folder "Scenes". The new scene is nowopened createdin the Scene Editor and already opened insidein the Scene Tree panel. ItIn the Scene Tree panel you can see that the scene already containshas a standardcamera. camera.In Thethe ViewportRender sizeTargets ofpanel you can see that the camera is usingalready the size of the Render Target (1024x768). The new scene's camera should automatically connectadded to the RenderRenderTarget.
Target. If

it isn't, please drag the Camera under the Render Target inIn the Render Targets panel.panel check the checkbox of "SceneClimate\Camera" in order to enable rendering. In the Render Targets panel select the SceneClimate\Camera. In the Properties panel's [ Camera ] section change the sequence number to 1.

The camera's sequence number is set to 1. In the Scene Tree panel the red Information/Warning/Error square disappears.

Before dragging

Configure the new Camera of SceneClimate, the RenderTarget setup looks like this:

After dragging and dropping, please check the checkbox in front of the SceneClimate/Camera(0) entry to enable rendering.

---

Setting up the Climate SceneClimateScene's Layout

For the climate scene we will use a more realistic setup of the scene than before, because very often the layout of the elements of a scene are dependent to the screen size or language. Some languages for example are written from right to left and others from left to right. This for sure will influence the layout of texts and controls. Instead of absolute positioning of all elements, we will use a GridLayout.

Probably

In the easiestToolbox layoutpanel mechanismunder to[ use is the grid layout control. You can find the grid layout in the toolbox in the group of "Nodes 2D".2D It] isdrag theand icondrop witha theGridLayout 9(see squaresimage as shown below.

Drag the grid layoutbelow) into the Scene Editor panel or into the Scene Tree panel on the SceneClimate node. The

onlyA difference of both actions is, that dragging into the EditorGridLayout is setting the last mouse position as the position of the grid layout. But this can be adapted easily. Open the context menu of the grid using the right mouse button on top of the nodevisible in the Scene Tree panel. ChooseIt is also available in the Scene Editor, but only its pivot point is visible when it is selected.

In the Scene Tree panel right-click on the GridLayout to open the context menu and choose "Configure Layouter...".

The "Grid Layouter Editor" will popup where the GridLayout can be configured.

A

new dialog is shown which helps in configuration ofOn the gridGrid layoutLayout control.Editor's Uselower thisleft dialogcorner, use the [ + ] buttons to configureadd rows and columns (see image below). Configure 6 rows and 4 columns. There

areThe buttonsGridLayout atis configured with 6 rows and 4 columns.

Configure the bottomcolumns' widths and the rows' heights according to addthe ortable deletebelow rows/columns.using

You can now see a rough grid layout. The numbersfields on the top and onright. the

right side can be used to define the width of the columsRows and thecolumns heightare of the rows. You can either use numbers greater than 1 as direct pixel sizes or you can use numbers between 0 and 1 to define ratios. See [GridLayouter].

We use the first and last column as free space for aesthetic reasons. The second column will be used for text descriptions and the third column for the controls to change settings. Therefore, enter into the edit fields on top of the grid (0.05 / 0.3 / 0.5 / 0.05). For all rows please fill in 0.2configured as in the image above. Press

Column Width
Row Width
Column 1
0.05
Row 1 0.20 Column 2
0.30
Row 2
0.20 Column 3
0.50
Row 3
0.20 Column 4
0.05

Row 4
0.20


Row 5
0.20    
Row 6
0.20 When you're done configuring, press the [ OK to] closebutton. the

dialog.The Grid Layout Editor will be closed.

InBe theaware Scene Editorthat you cannot see the gridGridLayout. untilIts now,size becauseis 0 as long as no size and no content for its cells has been configured.

In the gridProperties haspanel's no[ content.Transformations Let] ussection create dummy content to better understand and seeconfigure the grid.following Dragposition a Solid Color Node fromof the ToolboxGridLayout.
on

topThe position of the GridLayout node in the Scene TreeEditor Panel.has GridLayout.

Switch to the Multiple Clone tab and enter 23 into the Number of Copies field. Press OK.

And this is what the Scene Tree and the Editor panel look like now, when the GridLayout is selected:

Go back into the Configure Layouter dialog via the context menu.

As you can see, all of the nodes have a warning symbol. This is because all nodes are sharing one single cell. To automatically spread the SolidColorNodes into different cells press the Apply default arrangement button. You can also do it by hand with dragging and dropping the nodes from the left list into the cells.

After pressing OK your Editor should contain something like this:

As mentioned earlier we have to position the grid into its scene. Therefore change the grid's position to (0/0).

And change its size to 1024x714. The size is currently calculated automatically. In order to be able to change the values for the size, you have to click on the [ A ] button to disable the automatic calculation of the size.

You

can now see It is recommended to save the structureScene ofComposer oursolution.
scene. Please save your scene now.

---

AddingCreating and Configuring the Labels

Each of the Controls in the Climate Control Scene Content

To put real content into our scene, importhas a fewlabel, images by clicking (Import > Import Resources) and selectingtelling the imagesuser inwhich /cgi_studio_content/Resources/GettingStartedControls/Climate:

setting he

Letis usable startto change with theit.

texts

needed for our Climate scene. Use the Text controls fromFrom the Toolbox panel (Controlsdrag -and Common - Text) to place the following texts:

To set the text itself please edit the Control property, "Text". We are usingdrop a smaller"Text" font than the default one. Please choose OpenSansRegular25.

For the Steering heater text we adapt the settings to be able to use multiple lines. Check the "Multiline" property.

Repeat editing the texts and text styles for all of the listed texts. Also, you can press Shift and click all the text controls, and then set the VerticalAlignment of these textscontrol into VCenter, all at once.

Please instantiate the following controls by dragging from the Toolbox to the SceneClimate root node:

4 Buttons (2 for slider, 2 for off and max button for fan) 1 Text Value (for temperature) 1 CheckBox (for steering heater) 1 GroupBox (for air condition radio buttons) 2 RadioButtons (as group box content) 2 MultiStateButtons (for fan and seat heater) 1 SpinBox (for heating) 2 GridLayouts (for slider and fan elements) 1 StackLayout

Before structuring the Scene Tree,Tree wepanel rename the controls accordingly:

Now it's time to restructure the controls.

The following Radio Buttons will be placed inside the Stack Layout:

RadioButton_AC On
RadioButton_AC Off

And the StackLayout itself will be dragged into the content anchor of group box GroupBox_AC.

The controls for temperature adjustments will be dragged into the GridLayout_Slider:

Slider_Temperature
Text Value
Button_TempDec
Button_TempInc

The elements for the fan will be dragged into the GridLayout_Fan:

MultiStateButton_Fan
Button_Fan Max
Button_Fan Off

We will now remove all Solid Color Nodes and fill the GridLayout with our new controls.
Select all SolidColor Nodes and press the Delete key or use the context menu to delete them. Confirm deleting the SolidColorNodes in the delete items dialog with OK.
Drag all new itemsdirectly onto the "GridLayout" node. The resulting"Text" scenecontrol treecan structurebe found in the Toolbox panel's [ Control ] section in the list of "Common" controls.

The "Text" Control can be seen in the Scene Editor's top left corner. It is also visible in the SceneTree panel, hierarchically ordered below the GridLayout. In the Properties panel's [ Control ] section click on the magnifying glass icon next to the "Text Style" property.

The "Text Style Palette" dialog will lookbe likeopened this:displaying
a list of text styles. The currently configured "OpenSans35" is selected. In

this "Text Style Palette" dialog select "OpenSans25" and click [ OK ]

In the Scene Editor the size of the "Text" control's text has decreased. In the Scene Tree right-click on the "Text" control to open the context menu ofand select "Clone".

The "Clone Item" dialog is opened. In the GridLayout,"Clone Item" dialog set the "Number of Copies" to 5 and click "Configure[ Layouter…"OK ].

Drag the elements to their positions.

The result should look like in

In the Scene Editor:Tree

---

Setting up the Temperature Controls

Aspanel you can see,see that 5 new "Text" controls have been added, named "Text_1", "Text_2" ...

In the structureScene ofTree panel right-click on the climate"GridLayout" sceneand can be roughly recognized. However, we need to layout the elements carefully.
We start with the GridLayout_Slider. Configure the GridLayout as below usingchoose "Configure Layouter…Layouter..." from the context menu:menu. opened. The

Set6 "Text" controls are listed in the panel on the left.

By default the 6 "Text" controls are also positioned in the top left cell of the GridLayout. In the "FormatGrid Layout Editor" drag and drop the "Text" propertycontrols from the left into their destination cells one by one as seen in the image below and click [ OK ].

The "Text" controls' position in the GridLayout are now configured correctly. In the Scene Editor you can see that the "Text" controls are now neatly positioned in the Scene. The layout is done by the GridLayout according to its configuration. In the Scene Tree panel select all "Text" nodes. Keeping the <SHIFT> key pressed allows you to add items to your selection. In the Properties panel's [ Layout ] section configure VerticalAlignment to "VCenter"

"VertigalAlignment" is configured to "VCenter" for all "Text" controls. In the Scene Editor all "Text" controls are vertically centered in their cell.
In the Scene Tree panel select the "Text" controls one after the other and rename them either via the context menu entry "Rename" or by pressing <F2> on your keyboard. Apply the names provided in the table below.

In the Scene Tree panel you can see that the "Text" controls have been renamed. Target Item Name
Text
Text_Temperature Text_1 Text_Steering wheel heating Text_2 Text_Air Condition
Text_3 Text_Fan
Text_4 Text_Seat heater
Text_5 Text_Heating
In the Scene Tree panel select the "Text" controls one after the other again and change text that is displayed by the "Text" controls according to the table below. This can be done in the Property panel's [ Control ] section.

In the Scene Editor you can see that the "Text" controls display different texts. Target Item
Text Text_Temperature Temperature Text_Steering wheel heating Steering wheel heating Text_Air Condition
Air Condition
Text_Fan
Fan
Text_Seat heater
Seat heater
Text_Heating
Heating

Importing Images

This scene uses 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.

In the main menu select Import > Import Resources...

The "Import Resources" dialog will be opened. In the "Import Resources" dialog navigate to the path given in the table below. Select all 36 files and press [ Open ]

The "Import Images" dialog will be opened. Import Resources
Path

/cgi_studio_content/Resources/GettingStartedControls/Climate In the "Import Images" dialog select folder "/Resources", make sure to create a new folder "Climate" for the imported images and click [ OK ].

In the Solution Explorer you can see that there is a new folder "Climate" in folder "Resources" that contains the 36 imported images. The images have been imported and can be used in the Scene Composer solution.

Configuration of Temperature Controls

The temperature settings of this scene are composed of a multitude of different controls that are arranged by a GridLayout. The currently set temperature value can be increased and decreased using the buttons on the left and right side of the Slider. The temperature value can also be controlled dragging the Slider knob.

The configured temperature value is displayed in digits above the Slider. Therefore the Slider and the Text Value underControl GridLayout_Sliderdisplaying the value will be connected with a ForwardValue behavior.

To finish the configuration of the temperature controls, the look and feel of the configured temperature controls will be adjusted by exchanging the Slider's and Buttons' default images to %2.1fbe °C,consistent with the scene's design.

Configuring the Layout for the Temperature

The temperature setting for this sample is composed by

a Text Value control that will displays the current value a Slider control that shows the current value as well as the range of the possible values a Button control to decrease the currently set value a Button control to increase the currently set value a GridLayout that layouts the controls above.

The following steps show how to arrange all these fragments to a temperature configuration item.

From the Toolbox panel's [ 2D Nodes ] drag and drop a "GridLayout" into the Scene Tree panel directly onto the already configured "GridLayout" node.

In the Scene Tree the new GridLayout will be inserted as element of the already existing GridLayout. From the Toolbox panel drag and drop a "Text Value" control into the Scene Tree panel directly onto the new GridLayout. The "TextValue" control can be found in the Toolbox panel's [ Controls ] section under "Common".

In the Scene Tree panel the "Text Value" control is visible as subordinates to the new GridLayout. From the Toolbox panel drag and drop 2 "Button" controls and a "Slider" control into the Scene Tree panel directly onto the new GridLayout. "Button" and "Slider" control can be found in the Toolbox panel's [ Controls ] section under "Touchable".

In the Scene Tree panel the Buttons and the "HorizontalAlignment"Slider propertyare visible as subordinates to the new GridLayout. In the Scene Tree panel rename the newly created controls according to the table below using the context menu or pressing <F2> on your keyboard.

In the Scene Tree panel the controls appear with their new names. Target Item
Name GridLayout
GridLayout_Slider
Text Value
Text Value
Button Button_TempDec Button_1 Button_TempInc Slider
Slider_Temperature
In the Scene Tree panel right-click on GridLayout_Slider and choose "HCenter"Configure Layouter..." from the context menu.

The "Grid Layout Editor" will be opened. In the "Grid Layout Editor" configure 2 rows and 5 columns using the buttons on the bottom left.

In the "Grid Layout Editor" a grid with rows and columns will be displayed as configured. In the "Grid Layout Editor" drag and drop the controls to their destination position as seen in the image below and click [ OK ].

The "Grid Layout Editor" is configured as in the image. In the Scene Tree panel right-click on the (outer, older) GridLayout and choose "Configure Layouter..." from the context menu.

The "Grid Layout Editor" will be opened. In the "Grid Layout Editor" drag and drop GridLayout_Slider into the cell right next to the "Text_Temperature" Text control. Then click [ OK ].

In Scene Editor GridLayout_Slider and all its content is now placed at the correct position.

Connect Slider and Text Value Control

The Temperature controls' functionality will be configured in the following steps: The slider's default, minimum and maximum values, the Text Value control's formatting text as well as the "Forward Value Behavior" that takes care that Slider and Text Value will display the same value at all times.

In

Forthe Scene Editor, the "Text Value" will display "0.0°C" in the center.

Item Name Section
Property Value Text Value Control
Format Text %2.1f°C Layout
HorizontalAlignment
HCenter
In the Scene Tree panel select the Slider_Temperature. In the Properties panel in the [ Control ] section apply the changes according to the table below.

The slider's current value, its minimum and maximum value are configured. In the Scene Editor the knob of the slider is on a different position than before.
Item Name Section
Property Value Slider_Temperature Control
Value 22
Minimum 15
Maximum
28
From the Toolbox panel's [ Behaviors ] section drag and drop a ForwardValue Behavior into the Scene Tree panel directly onto the Slider_Temperature. The ForwardValue Behavior can be found in the Toolbox panel's [ Behaviors ] section under "Value Processing".

In the Scene Tree an orange square appears next to the Slider_Temperature, setindicating that this node has a behavior attached. When selecting the followingSlider_Temperature properties:

To adjustin the imagesScene (NormalTree, Imagethe attached Forward Value behavior is visible in the right side of the Scene Tree.

In the Scene Tree panel select Slider_Temperature and Pressedthen Image)select the Forward Value behavior in the right side of Button_TempDecthe Scene Tree panel. It's time to configure where the value should be forwarded to. In the Properties panel press the padlock icon on the top right to lock the Properties panel to the properties of the Forward Value behavior.

The pad lock icon changes to locked state. The Properties panel is now locked to the properties of the Forward Value behavior. From the Scene Tree panel drag and drop the Text Value control into the Properties panel directly onto the property "TargetNode".

In the Properties panel the textfield next to the property "TargetNode" will be filled with the path to the Text Value control. In the Properties panel's top right, click on the padlock icon one more time to unlock the Properties panel again.

The padlock icon changes to unlocked state. The Properties panel is unlocked again. Press the <F5> key to trigger a refresh.

In the Scene Editor you can see that the Text Value will display "22°C", which is the value currently configured in the Slider control.

Beautifying Temperature Setting Controls

The default visual appearance of the Scene Composer's Slider does not fit to this sample's design. Luckily the Slider's images are exchangeable, so are the Button's images.

In the Scene Tree panel select Button_TempDec. In the Properties panel press the magnifying glass icon onnext to the rightproperty "Normal Image" to open the "Choose Item" dialog.

The "Choose Item" dialog will be opened. Select image "/Resources/Climate/NewTempDecreaseBmp" and press OK.

The "Choose Item" dialog will be closed. Property "Normal Image" is set to "NewTempDecreasBmp". In the Scene Editor a new image will be displayed differently.
Repeat steps 1 and 2 to set a new "Pressed Image" for Button_TempDec. Finally, Button_TempDec should be configured according to the table below.

Button_TempDec is configured with new "Normal Image" and "Pressed Image" which completely changed its appearance.
Target Item
Property
Image Button_TempDec Normal Image
/Resources/Climate/NewTempDecreaseBmp Pressed Image
/Resources/Climate/NewTempDecrease_pressedBmp In the Scene Tree panel select Button_TempInc and repeat steps 1 to 3 above to configure new images for "Button_TempInc" according to the table below.

Button_TempInc is configured with new "Normal Image" and "Pressed Image" changing its appearance completely.
Target Item
Property
Image Button_TempInc Normal Image
/Resources/Climate/NewTempIncreaseBmp Pressed Image
/Resources/Climate/NewTempIncreae_pressedBmp In the Scene Tree panel select "Slider_Temperature". In the [ Control ] section of the propertyProperties panel set new images according to the table below.

In the Properties panel the Slider Control's image properties are configured with new images. In the Scene Editor you can see the final result of the configured Temperature Slider Control. Property
Image Knob Normal Image
/Resources/Climate/NewSliderKnobBmp Knob Pressed Image
/Resources/Climate/NewSliderKnobPressedBmp
Track Image
/Resources/Climate/NewSliderBackgroundBmp Track Fill Image
/Resources/Climate/NewSliderBmp

Configuration of Steering Wheel Heating CheckBox

Configuration of Air Conditioning RadioButtons

This scene uses RadioButtons to configure Air Conditioning values. RadioButtons need to be put into a common GroupBox in order to ensure their functionality.

Since these RadioButtons should fit into the scene's design, we will exchange the images for "CheckBox_Steeringvarious heater" as below:

The configured "Checkbox_Steering heater" now looksstates like this.normal, pressed, selected and selected pressed.

---

Setting up the Air Condition Controls

In this section we focus on the radioRadio buttonsButtons for Air Condition (AC). Two Radio Buttons are configured inside a horizontal Stack Layout. They are grouped together in a GroupBox to help with the RadioButtons' functionality.

Configure the Steering Wheel Heating RadioButtons

To adjust the Radio Buttons to the general look and feel of the scene we have towill configure the correctnew images for ourthem.

RadioButtons.

Remember: Remember ifIf you select both RadioButtons in a "multiple selection" in the Scene Tree panel, you can configure the imagesproperties ofthat are the same for both RadioButtons at once.

Keeping both RadioButtons selected, we will adjust the right margin to 100 so that there is enough space between them.

The default background

Configuration of GroupBoxesFan makesControls

them appear with a frame. As we don't want to see a frame in

In our design, we have to uncheckscenario the "Enable Background" propertyvalue of the GroupBox.fan
can be controlled by two Buttons and a MultiStateButton. These Controls are arranged by a GridLayout.

The heightMultiStateButton ofis our GroupBox_AC should be setconfigured to 40.
Currentlyhave the8 GroupBoxdifferent heightstates, isfor calculatedwhich automatically8 baseddifferent on the layout situation. Properties thatimages are calculatedprovided.

automatically

The Buttons' images are displayedupdated grayedas out,well, the text "(Auto)" is displayed nextmatching to the valuescene's design and youtheir canfunctionality.

see

Interactivity between each Button and the MultiStateButton is provided by an EventHandler. A SendValueByEvent behavior will send a configured value to the TargetNode "MultiStateButton" whenever a button with an "A" on it next to it.
In order to be able to enter a value manually, you have disable the automatic calculation by pressing the blue "A" button first.

You can see the tooltip for the blue "A" button in the image below.

You might have wondered why we added a StackLayout previously. The reason is, the Stack Layout is able to layout child nodes horizontally or vertically. The "horizontal" arrangement is the one we need.clicked.

---

Setting up the Fan Controls

Now

Configuring GridLayout_Fan

Use

the

Configuration dropof downSeat menuHeater to choose "Send Value As Event". Select the "MultiStateButton_Fan" as TargetNode using the magnifying glass.MultiStateButton

The Event Handler tab should now look like this:

Due to the more complex possibilities

Configuration of eventHeating handlersSpinBox

we will now explain in more detail what the different properties are usually used for.
With the Event drop down you can select on which type of event a certain action will be performed.

In our case a click event(mouse click or touch) will trigger the action. For a description of available events please have a look inside the documentation FeatStd::Event. The Condition property can be used for some events to only react if a certain condition is evaluates to "true". For our case the "Check Click" will count the number of clicks happened and compares it with the given ClickCount property. We have provided AnyClick which means we will react on single, double and even triple clicks. With the Sender property we can give the Action Behavior additional information on who has executed the action. In our example we do not evaluate this and it is left empty.

The Value is used to specify the type of the value and the value itself which will be sent to the target node. ChangeValue states if the change of the value will be relative or absolute.
Last but not least the Target Node has to be specified to know who will be the receiver of the event.

We will now add a similar action to the "Button_Fan Max" button to always change the value of the MultiState button to its maximum value of 7.

---

Setting up the Seat Heater controls

For the Seat Heater controls, we just need to replace the images with new ones, as below:

---

Setting up the Heating controls

Last but not the least,section we will configure the SpinBox.Heating control. The SpinBox allows the user to change the values by clicking the uptick and downtick buttons.

We will configure the SpinBox control as follows. We will also change the images of the SpinBox Control.

Set

Check the widthClimate of the SpinBox to 150. Please note that this is an automatically calculated property which has to be unlocked pressing the blue "A" button.Scene