GettingStartedControls Part 2

Climate Scene

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

Our final scene will look like this:

Please create a new scene using the Scene menu's "New 2D Scene…" menu item.

Name the new scene "SceneClimate". We always use the prefix "Scene" to have all scenes listed near to each other in the Solution Explorer view.

The scene is now created and already opened inside the Scene Tree panel. It already contains a standard camera. The Viewport size of the camera is using the size of the Render Target (1024x768). The new scene's camera should automatically connect to the Render Target. If it isn't, please drag the Camera under the Render Target in the Render Targets panel.

Before dragging 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 Scene 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.

Probably the easiest layout mechanism to use is the grid layout control. You can find the grid layout in the toolbox in the group of "Nodes 2D". It is the icon with the 9 squares as shown below.

Drag the grid layout into the Scene Editor panel or into the Scene Tree panel on the SceneClimate node. The only difference of both actions is, that dragging into the Editor 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 node in the Scene Tree panel. Choose "Configure Layouter..."

A new dialog is shown which helps in configuration of the grid layout control. Use this dialog to configure 6 rows and 4 columns. There are buttons at the bottom to add or delete rows/columns.

You can now see a rough grid layout. The numbers on top and on the right side can be used to define the width of the colums and the height 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.2 as in the image above. Press OK to close the dialog.

In the Scene Editor you cannot see the grid until now, because the grid has no content. Let us create dummy content to better understand and see the grid. Drag a Solid Color Node from the Toolbox on top of the GridLayout node in the Scene Tree Panel.

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 the structure of our scene. Please save your scene now.

Adding the Climate Scene Content

To put real content into our scene, import a few images by clicking (Import > Import Resources) and selecting the images in /cgi_studio_content/Resources/GettingStartedControls/Climate:

Let us start with the texts needed for our Climate scene. Use the Text controls from the Toolbox panel (Controls - Common - Text) to place the following texts:

To set the text itself please edit the Control property, "Text". We are using a smaller 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 texts into VCenter, all at once.

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

Before structuring the Scene Tree, we 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 items onto the "GridLayout" node. The resulting scene tree structure will look like this:

In the context menu of the GridLayout, click "Configure Layouter…".

Drag the elements to their positions.

The result should look like in the Scene Editor:

Setting up the Temperature Controls

As you can see, the structure of the climate scene can be roughly recognized. However, we need to layout the elements carefully.
We start with the GridLayout_Slider. Configure the GridLayout as below using "Configure Layouter…" from the context menu:

Set the "Format Text" property of the Text Value under GridLayout_Slider to %2.1f °C, and the "HorizontalAlignment" property to "HCenter".

For the Slider_Temperature, set the following properties:

To adjust the images (Normal Image and Pressed Image) of Button_TempDec press the magnifying glass icon on the right of the property and select the correct image from the imported SceneClimate images as below:

Do the same for Button_TempInc, but using the corresponding "TempIncrease" images:

Next, we will configure the images for Slider_Temperature as below:

The slider's TextValue Control is supposed to display the value that is set via the slider. To add this functionality we need to drag a ForwardValue Behavior from the Toolbox to the Slider_Temperature in the Scene Tree Panel.

The Slider_Temperature's value needs to be forwarded to the TextValue control. Therefore, we need to set the ForwardValue Behavior's "TargetNode" property to the "Text Value". Click the magnifying glass icon on the right side of the property in the Properties panel and select the Text Value Control from the choose item dialog.

And this is what the fully configured Slider looks like.

Our next goal is to center all cell content vertically in order to have a similar distance between the lines. Even for multiple lines inside a cell the optical impression will be improved

We have already centered the text controls. Next, we will set VerticalAlignment of the following controls to VCenter:

Setting up the Steering Wheel Heating Controls

To configure the heating controls, select the "CheckBox_Steering heater" and change its text to "On".
Finally, configure the images for "CheckBox_Steering heater" as below:

The configured "Checkbox_Steering heater" now looks like this.

Setting up the Air Condition Controls

In this section we focus on the radio buttons for Air Condition (AC). The Text of the Radio Buttons needs to be changed to "Off" and "On" in respect to their names. "RadioButton_AC Off" should be the one on the left, so you might have to change the order of the RadioButtons in the Scene Tree Panel.
Additionally, we have to configure the correct images for our RadioButtons. Remember if you select both RadioButtons in the Scene Tree panel, you can configure the images of 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 of GroupBoxes makes them appear with a frame. As we don't want to see a frame in our design, we have to uncheck the "Enable Background" property of the GroupBox.

The height of our GroupBox_AC should be set to 40.
Currently the GroupBox height is calculated automatically based on the layout situation. Properties that are calculated automatically are displayed grayed out, the text "(Auto)" is displayed next to the value and you can see 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.

Setting up the Fan Controls

Now we take care of the GridLayout_Fan. Open the "Configure Layouter…" dialog and configure the GridLayout as shown in the picture.
For the width of the third column, we are using the exact width of the MultiStateButton's image in order to get a pixel exact rendering of the image.

We now configure the images of the MultiStateButton. You can find a property "StateImages" in the Control section of the MultiStateButton's properties, where multiple images can be defined.

It is possible to add images using the "+" button or to remove images using the "x" button next to the image to be deleted (highlighted in the image above).
Please click on the magnifying glass to change the images. For our GettingStarted, we will configure the images from the climate folder of our resources ("NewClimate-0Bmp" - "NewClimate-7Bmp"). We have to change the Maximum State property to 7 in order to be able to display all selected images.

The MultiStateButton should be centered vertically, so we configure its layout accordingly.

To change the image of "Button_Fan Max" and "Button_Fan Off" use the resources available. A button needs two different images to be able to reflect a mouse press or a touch on a touch screen. Therefore we will change the normal and pressed image as shown below:

Improvement of Interactivity using Behaviors

We want to add the reset of the MultiStateButton_Fan to the off button and also we want to add the max functionality to the max button. To be able to do this we will need to use an Event Handler. When you select the "Button_Fan Off" you can recognize two tabs: an active "General" tab and an EventHandler tab:

Select this "Event Handler" tab to be able to attach functionality to the button. Use the "+" button next to "Actions" to add an action to the already attached "Click Event Handler".

Use the drop down menu to choose "Send Value As Event". Select the "MultiStateButton_Fan" as TargetNode using the magnifying glass.

The Event Handler tab should now look like this:

Due to the more complex possibilities of event handlers 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, we will configure the SpinBox. 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 the width of the SpinBox to 150. Please note that this is an automatically calculated property which has to be unlocked pressing the blue "A" button.

You have finished step 2 of our tutorial. Please save your solution before trying the result using the Player application. Generate an asset file as described at the end of Step 1. Load the generated asset into the Player and select the climate scene. You can now play around with the controls. Slide the temperature slider, use the check box and radio buttons. Click onto the fan multi state button and on off and max. Even the Seat heater will react on your actions.