GettingStartedControls Part 1

This part of the tutorial describes how to configure the Home Scene of this solution.

The scene is built up using imported images and configuring various controls (such as TellTale, Gauge, DigitalClock, TextValue, Text, FlipBook). The use of a ForwardValue behavior will ensure that the Speed Gauge and an additional textual display will show the same value at any time.

Finally, the Panel is started to verify the coherency of the Speed Gauge and the speed's textual display.

---

Setting up the SceneComposer Solution

1. Create a new solution using the Empty Solution template and save it as shown in Creating a new Solution.
   • A new solution is created and saved.
     
     
2. Activate the Render Targets panel on the top right and select [ Display (0) ]. In the Properties panel below change the display's X and Y Resolution.
   • The horizontal and vertical resolution of the display will be defined.
   • The aspect ratio of the display will be calculated automatically.
     

     Target Item	Setting Value
     X Resolution	1024
     Y Resolution	768

     

     
     

Preparing the Scene

1. In the Solution Explorer panel on the top left select "Scene3D" (under "Solution - Scenes") and delete it either using the <delete> key or via the context menu [ Delete ] as described in Delete a Scene.
   • A "Delete Items" dialog will popup. Please resolve all dependencies with "Delete Usage Item" and click [ OK ].
   • Scene3D will be deleted.
     
2. Select "Scene2D" and rename it to "SceneHome" either by pressing <F2> on your keyboard or via the context menu "Rename".
   • The scene's name has been changed to "SceneHome"
     
3. In the Solution Explorer panel double-click the "SceneHome" to open it in the Scene Editor (see also 2D Scene Editor).
   • "Scene Home" will be displayed in the Scene Editor on the right of the Solution Explorer panel.
   • The content of this scene will be displayed in the Scene Tree panel below the Solution Explorer panel.
     
4. Save the solution using the <Ctrl+S> keyboard combination or via the menu File - Save Solution.

It might be a good idea to make a backup of your solution now! If you destroy something during execution of the following steps you always have the possibility to restart with a clean solution. To make a copy just make a copy of the GettingStartedControls folder or create a copy by archiving into a zip file.

Import Images

The images needed for this solution will be imported. Some of them will be used as plain static images, but most will be used to configure controls.

1. In the menu choose [ Import ] - [ Import Resources... ] as described in How to Import Resources.
   • [ Import Resources ] dialog will be opened
     
2. Navigate to the following folder, select all files provided in this "Cluster" folder and press [ Open ].
   <cgi-studio-root>/cgi_studio_content/Resources/GettingStartedControls/Cluster
   • [ Import Images ] dialog will be opened
   • Use the settings as shown in the screenshot and press [ OK ].
   • The images have been imported into the solution and ready to be used in SceneHome.
     
     

Position Images

1. In the Solution Explorer select the Bitmap "Navi60Bmp" and drag it into the Scene Editor.
   
   • The image with the curved orange arrow will be placed in the Scene Editor.
   • It also appears in the Scene Tree panel.
2. Select "NewWarning80Bmp" in the Solution Explorer and drag it into the Scene Editor too.
   • The image with the speed limit will be placed in the Scene Editor.
   • It also appears in the Scene Tree panel.
3. In the Scene Editor or in the Scene Tree panel select the images individually and modify their Transformation Position X and Y in the Properties panel on the bottom right.
   • Navi60Bmp and NewWarning80Bmp are on their final position.
     

     Render Node	Transformations
     	Position X	Position Y
     Navi60Bmp	38	121
     NewWarning80Bmp	38	612

     

Configure Tell Tale Controls

Controls are special types of nodes that already contain logic for handling of user actions (touch, click) and state changes. They can be found in the Controls section of the Toolbox, which is by default located in the top right corner.

1. From the Toolbox panel in the Controls section drag and drop 3 "Tell Tale" Controls into the Scene Editor.
   • 3 Tell Tale Controls with the default images are visible in Scene Editor
   • These 3 Tell Tale Controls also appear in the Scene Tree.
     

     
     

2. Select the 3 "Tell Tale" Controls individually to rename each of them in the Scene Tree panel and configure their properties in the Properties panel according to the table below.
   
   • Change Position X and Y in the Properties panel's [ Transformations ] section.
   • Configure the State property in the [ Control ] section.
   • To change "On State Image" and "Off State Image" click on the respective magnifying glass.
     
   • The [ Choose Item ] dialog will be opened.
   • Navigate to your desired image, select it and click [ OK ].
     

     Scene Tree	Transformations		Control
     Rename Node to	Position X	Position Y	State	On State Image	Off State Image
     Tell Tale_Snow	387	612	Off	NewWeather_BBmp	NewWeather_HBmp
     Tell Tale_Gas	594	612	Off	Ev_HBmp	Ev_Bmp_HBmp
     Tell Tale_Call	800	612	Blinking	NewCall_HBmp	NewCallBmp

     
     
     
     
     
3. In the Scene Tree or in the Scene Editor select "Tell Tall_Call". This Tell Tale Control is configured to keep blinking. Therefore, the speed of blinking has to be configured. 
   
   • The blinking interval of "Tell Tale_Call" is configured
     
   • When "active rendering" is activated, this Tell Tale will be blinking in Scene Editor. "Active rendering" can be toggled using pinwheel button in the Scene Editor's bottom toolbar (see image below).
     

   Item Name	On Time Ms	Off Time Ms
   Tell Tale_Call	800	800

   

Configure a Gauge Control

To display the current speed of the car a "Gauge Control" will be used.

1. From the Toolbox panel in the Controls section drag and drop "Gauge" Controls into the Scene Editor.
   • A Gauge control with default images will be visible in the Scene Editor.
     
   • The Gauge Control also appears in the Scene Tree.
     
     
     
     
2. In the Properties panel's [ Transformations ] section configure the Gauge Control's position according to the table.
   
   • Gauge Control will be on it final position.
     

     Item Name	Position X	Position Y
     Gauge	319	217

     
     

3. Adapt the Background Image and Needle Image by clicking the corresponding magnifying glass icon.
   
   • The [ Choose Item ] dialog will be opened.
   • Navigate to your desired image, select it and click [ OK ].
     

     Item Name	Background Image	Needle Image
     Gauge	NewClusterBmp	NewNeedleBmp

     

     
     

4. The image "NewClusterBmp" needs to be repositioned in order to be in the center of the Gauge. In the Solution Explorer select NewClusterBmp. In the Properties panel's [ Bitmap ] section tick the checkbox "Enable Pivot Hint" and configure the Pivot Hint according to the table below.
   
   • After defining the Pivot Hints for both images, the needle should be centered in the gauge.
   • If no change is visible, try to forcing a screen invalidation by pressing the <F5> key.
     

     Solution Explorer	Properties panel [ Bitmap ]
     Item Name	Pivot Hint X	Pivot Hint Y
     NewClusterBmp	194	194
     NewNeedleBmp	112	8

     

   You may need to trigger a refresh by hitting the <F5> button on your keyboard if the images' positions are not updated automatically.

 

Configure Digital Speed Display

A "Text Value" Control will be used to display the current speed as digits

1. From the Toolbox panel under [ Controls ] - [ Common ] drag a "Text Value" control to the Scene Editor just below the Gauge Control.
   • In the Properties panel's [ Transformation ] section adjust the position as follows:
     

     Item Name	Position X	Position Y
     Text Value	468	492

   • In the Properties panel's [ Control ] section configure the following properties
     

     Item Name	Format Text	Text Alignment
     Text Value	%3d	Auto

   • The Format Text property is a template for the text using the standard printf value formatter syntax (%d for int or %03d for a 3 digit integer).
   • The Text Value control is now positioned and configured correctly.
     
     
     

     
     

2. From the Toolbox panel under [ Controls ] - [ Common ] drag a "Text" control to the Scene Editor and perform the following configurations in the Properties panel's [ Transformation ] and [ Control ] section.
3. The Text control that displays a static text is now positioned and configured correctly.
   

   	Transformation		Control
   Item Name	Position X	Position Y	Text	Text Style
   Text	482	522	km/h	OpenSans35

    

5. 

Gauge

Control

The Text Value control will now be connected to the Gauge control, so that both controls display the same value.

Select the Gauge Control in the Scene Tree and drag and drop a "Forward Value Behavior from Toolbox -> Behaviors -> Value Processing" to the Behaviors section on the right side of the Scene Tree Panel.

The

Forward

Value

Behavior

can

be

found

in

the

the Toolbox panel's [ Behaviors ] section under "Value Processing".

The Forward Value behavior is configured as behavior for the Gauge control. This behavior is responsible for copying the speed value from the gaugeGauge control to the textTextValue control.

Configure a TargetNode for the Forward Value behavior, so it knows, where it should forward the value control.to. ToIn dothe this,right Textside of the Scene Tree select the Forward Value Nodebehavior hasand to be configured ascheck the behavior'sProperties TargetNode.panel. In
order to changeClick the TargetNode, please click the corresponding magnifying glass iconnext andto choosethe TargetNode property.

The Choose Item dialog will be opened. Navigate to the Text Value Control,control, thatselect canit beand foundclick under[ ScenesOK >]. SceneHome

>The Text Value.Value control is selected as TargetNode for the Forward Value behavior.
Item Name
TargetNode Forward Value
Scenes/SceneHome/CompositeNode2D:Text Value

Next, we'll add

Add a FlipBook control to the right upper corner. Drag and drop a FlipBook from the ToolBox Controls - Common to the Scene Editor with the following configuration:

The top center of our home screen is decorated with a Digital Clock"DigitalClock" control. ThisWe will also add a "FlipBook" control canto the upper right corner of the scene. 

Drag and drop a DigitalClock control from the ToolBox (under [ Controls ] - [ Common ]) to the Scene Editor.

A DigitalClock control will be foundplaced into the scene. Configure its properties in the ToolBoxProperties underpanel's Controls[ -Transformation Common.] section.
Item Name
Position X
Position Y DigitalClock
439 116 Drag and drop a FlipBook from the ToolBox (under [ Controls ] - [ Common ]) to the Scene Editor. Place it in the upper right corner.

A FlipBook control will be placed into the scenescene. andConfigure positionits itproperties toin X=439,the Y=116.Properties panel's [ Transformation ] section.
Item Name
Position X
Position Y Scale X
Scale Y
FlipBook
745 121 0.50 0.50

The first screen/scene is now finished. You can show the result in a SceneComposer Display View which represents the final rendered result via the view/Display/Display-0 menu.

To be able to simulate the final application it is necessary to export the asset of the application. An asset contains only used resources from your project (controls, scenes, images, …). This asset might be stored into flash on a real embedded target. For now we generate this asset to have it available as input for our Player application (simulation driver). To generate (export) the asset you can press CTRL+G or use the File Menu and select the "Generate Asset Library…" menu entry.

Use the Browse button to choose where the output file will be stored. Now press the generate button. The asset will be written.

If you want to run the Player from SceneComposer, you can do so by clicking the Play button in the menu bar.

Just make sure that the item Generate and Play is selected, so that an asset file will be generated internally, before running the Player.

In some cases you have to choose your target device. Set the checkmark in front of the SceneHome on the middle left. You now should see the newly created scene. You can now manipulate the Gauge value for example. Please use the controls on the left half of the Player and set the values as you can see above. When the Value "0,200" now is manipulated to example "0,35" the Gauge will display a speed of 35 km/h.