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

Configure Screen, 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

To"Text Value" Control will be used to display the digitalcurrent speed pleaseas digits

From the Toolbox panel under [ Controls ] - [ Common ] drag a "Text Value" control to the lowerScene middleEditor ofjust below the gaugeGauge (X=468,Control. Y=492).

You can find hereIn the requiredProperties settings: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

The Text Value control is now positioned and configured correctly.

Add

From the Toolbox panel under [ Controls ] - [ Common ] drag a text"Text" control to displaythe Scene Editor and perform the unitfollowing textconfigurations "in the Properties panel's [ Transformation ] and [ Control ] section.

Transformation
Control Item Name
Position X
Position Y Text
Text Style
Text
482 522

km/h"h

to position X=482,

OpenSans35

Y=522. Configuration:

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.

This behavior is responsible for copying the speed value from the gauge to the text value control. To do this, Text Value Node has to be configured as the behavior's TargetNode. In order to change the TargetNode, please click the corresponding magnifying glass icon and choose the Text Value Control, that can be found under Scenes > SceneHome > Text Value.

Next, we'll 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 control. This control can be found in the ToolBox under Controls - Common. Drag and drop it into the scene and position it to X=439, Y=116.

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.