GettingStartedControls Part 1

---

Setting up the SceneComposer solution

Choose the Empty Solution template as starting point.

Save the new solution using Save Solution As... from File menu.

Inside the file selector box create a new folder "GettingStartedControls". Please choose freely where to store this folder. Navigate into this new folder and name the solution "GettingStartedControls" and hit the Save button.

You should have now the following file structure on disk:

The file GettingStartedControls.scs is the main solution file and can later be loaded via "Open Solution..." from SceneComposer.

Our GettingStartedControls solution will use a screen resolution of 1024x768 pixels. Since the default resolution settings are different we have to adapt them within the RenderTargets tab on the top right of the SceneComposer.

Please select "Display(0)" as can be seen above. This selection will show the properties of the selected display within the properties tab in the lower right of SceneComposer.

The "X Resolution" and "Y Resolution" properties have to be changed to 1024 and 768 respectively. The aspect ratio of the display will be calculated automatically.

You should now save the solution using CTRL+S keyboard combination or by navigating to the file menu and selecting "Save Solution".

Tip: 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.

---

Deletion of unused Scenes

All content that we want to display is organized into scenes. There are available scenes for 2D and 3D content. In the beginning we will only use 2D scenes to keep things a little easier. In our current solution we already have scenes of both types available. And because we don't need a 3D scene, we will delete it now.

The content of a solution is always displayed in the Solution Explorer on the top left side of SceneComposer.

In the Solution Explorer a tree view is used to visualize all the content similar to Windows File Explorer. Please click the small triangle to the left of the Scenes folder at the bottom of the Solution Explorer.

There are two scenes available. Please select the Scene3D using your right mouse button and select "Delete" in the context menu. As an alternative you can select the scene with a left click and press the delete key from your keyboard to delete it.

There are some dependencies to other objects, therefore SceneComposer asks us how to handle it. Please select the following settings within the dropdown menus on the right side and press OK to discard the dialog.

You can save the solution again.

---

Creation of the first screen

The first screen of our GettingStartedControls application will look like this:

In order to start easy, the screen will consist mainly of static images. Only the gauge (speedometer) and the text displaying the current speed will have real functionality behind them. At the bottom border a few tabs are shown wherein the user can later switch between different screens of the application. These tabs therefore are not static image elements but controls which are able to react on user (touch) input. The orange tab marks our current screen which is our home (cluster) screen.

As already mentioned, SceneComposer is using scenes to organize content which can be shown to the app user. These scenes typically contain only parts of application screens. As a cinema film is using scenes to put in order segments of a story, scenes in our context is playing a similar role. During this tutorial we will create a scene per tab content and an additional scene which contains the tab bar itself.This will help us to not repeat ourselves. If we had organized the scene exactly like the screen content we would have to use a tab bar in every screen.

We are now renaming the left over Scene2D into "SceneHome" to have it easier later to find our home content. Please select the Scene2D and press F2 (or use the context menu) to enter "SceneHome" as the new name.

Please double click on the "SceneHome" to show this scene within the Scene Tree panel below the Solution Explorer.

The scene editor will show the whole content of an opened scene. If a scene is opened its visual content is also displayed in the Scene Editor window in the center of SceneComposer. If the scene is empty you can only see a yellow border which is representing the size of the application's screen resolution. You can zoom in and out using the mouse wheel. By holding the mouse wheel and dragging you can move around the content of your view while retaining the Zoom factor. To get back to the original 100% size, please use the icon in the toolbar (Set selected camera to predefined location and orientation).

To be able to show some "fancy" graphics we have to import the images into our solution. We use the import images function of SceneComposer which you can find in the import menu.

You will now be asked to save your solution. Please confirm!

A Windows File Explorer titled "Import Resources" will be opened. Please navigate to the Cluster folder: 

<cgi-studio-root>/cgi_studio_content/Resources/GettingStartedControls/Cluster

Select all files provided in this Cluster folde and press the Open button.

The images are now processed and the "Import Images" dialog will be displayed:

The list on top is used to show the differences of the solution before and after the import. Green means that the images are newly added to the solution. Below you can see and change the target folder of the solution where the images will be stored. Please use the settings as shown in the screenshot.

After the import the Solution Explorer shows the new structure:

The images are now ready to be used for our home scene.

Drag the Bitmap "Navi60Bmp" from the Solution Explorer into the Scene Editor panel

Repeat your actions with the "NewWarning80Bmp".

Your scene could now look like this:

It is now time to improve the placement of the images to make room for the speedometer. To be able to move the images using the mouse, change the Editor panel mode. You can find icons in the toolbar which offer the different Editor panel modes.

The current mode is for selecting elements in the Editor panel. It is represented by the blue icon. The icon marked with an orange square offers the translation mode which we need for movement of elements (translation). With the next icon you can change the scale of elements, and the icon to the right of the scale mode is used for rotation of elements. Please use now the translation mode to at least roughly arrange the elements as shown above. By the way, you can also move the entire Editor panel contents using the middle mouse button and then dragging the position of the content. If you have no middle mouse button you can hold CTRL and SHIFT and use the left mouse button instead.

To be able to place an element to a predefined position, select the element (in this case the Navi60Bmp) either using a click on the element in the editor panel or in the Scene Tree. When an element is selected (such as below)

Its properties are shown in the Properties panel on the lower right of SceneComposer. Within the Transformations Group you can find the position properties. You can enter coordinates (in pixel units) to adapt the element's position. The desired position for the Navi60Bmp is X=38 and Y=121.

Please position image NewWarning80Bmp to X=38 and Y=612.

In a real application, elements will be placed using layout controls to be able to adapt to different screen sizes or culture settings. Nevertheless direct placement is often needed within layout controls or where an application designer specifies absolute placement.

With dragging the images directly from the Solution Explorer we used a direct method to create RenderNodes containing the dragged image. Normally we choose directly the node type within the Toolbox (top right of SceneComposer) and configure the properties in the next step.

Special types of nodes that already contain logic for handling of user actions (touch, click) and state changes are called Controls. You can find these controls in the Controls section on top of the Toolbox.

The most common control is a Button. In our home scene we used a "TellTale" Control to indicate weather alerts, charging or an incoming call. Drag and drop three TellTale controls into the SceneEditor. TellTale controls can be configured with two images in the Properties panel: one for the off-state and one for the on-state. The images can be configured by pressing the magnifying glass icon next to the corresponding property.

This will open the "Choose Item" dialog. In the left panel you can navigate to Solution > Resources > Cluster and select the correct image.

The TellTale's state can be configured choosing between On, Off and Blinking. For the blinking option the On Time and Off Time in ms can also be set. In the image below you can see the configuration for Tell Tale_Call.

You can now configure the TellTale controls' images and positions as follows:

Another control which is used in our home scene is the "Gauge". It is very often used for Speedometers or visualization of RPM.

Please use the Toolbox and drag a "Gauge" control into the center of the Editor panel.

As you might have figured out the Gauge we have placed looks different to the one from the overview at the beginning. We will now use other images for the background and needle to realize the desired look.

Use the Properties panel of our Gauge to change the images and edit the values:

Click magnifying glass to the right of the background image to select our previously imported ClusterBmp background image. Navigate to the resource directory of our solution and select the NewClusterBmp.

Press OK and repeat the same steps for the Needle Image selecting NewNeedleBmp.

As you can see the needle needs to be repositioned to be in the center of the Gauge. In order to do this, click NewClusterBmp in the Solution Explorer, and click the Enable Pivot Hint checkbox in the Properties panel. Input the values 194 and 194 into the X and Y fields.

Do the same for NewNeedleBmp, this time using X=112 and Y=8.

The needle image should now be positioned to the center of the gauge.

Now, place the control at the center of the scene (X=319, Y=217).

In the Gauge's Properties the Value property represents the current speed. Input Min and Input Max is the allowed range of speed (0-300 km/h). The Rotation Min and Rotation Max define the start and end point of the angles used (- 45° - 223°). The Internal Value Change Per Second property is used when a speed value is changed. That means in our case the needle moves up to 300 value units per second. Because the whole range is 0-300 within one second the speedometer will always be able to reach the targeted value. The Dampening Filter Constant is used to further smoothen the movement of the needle.

To display the digital speed please drag a Text Value control to the lower middle of the gauge (X=468, Y=492). You can find here the required settings:

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

Add a text control to display the unit text "km/h" to position X=482, 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.