GettingStartedControls Part 1

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 Solutionsolution

Choose the Empty Solution template and save it as shownstarting inpoint.

Creating

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

Inside the file selector box create a new Solution

You should have now the following file structure on disk:

The file GettingStartedControls.scs is createdthe main solution file and saved.

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

Please select ["Display(0)" Displayas (0)can ].be Inseen above. This selection will show the Properties panel below change the display's X and Y Resolution.

The "X Resolution" and "Y Resolution" properties have to be defined.

Preparing the Scene

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.

ImportDeletion Imagesof 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 imagesfirst neededscreen forof 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 solutiontutorial 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 imported.opened. SomePlease of them will be used as plain static images, but most will be used to configure controls.

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

Select

The images are now processed and the "Import Images ]Images" dialog will be opened

The

After pressthe [import OKthe ].Solution

The images haveare been imported into the solution and arenow ready to be used infor SceneHome.
our

Position Images

Drag the Bitmap "Navi60Bmp" and drag it into the Scene Editor.

The

image

Repeat your actions with the speed"NewWarning80Bmp".

Your willscene could now look like this:

It is now time to improve the placement of the images to make room for the speedometer. To be placedable to move the images using the mouse, change the Editor panel mode. You can find icons in the Scenetoolbar Editor.

The current mode is for selecting elements in the Scene TreeEditor panel.

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 TreeTree. panelWhen selectan theelement imagesis individuallyselected and(such modifyas theirbelow)

Position

X

and

Y

Its properties are shown in the Properties panel on the bottomlower right.right

 Y=121.

Render Node

Configure

Tell

Tale Controls

ControlsPlease areposition specialimage 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.changes Theyare called Controls. You can befind foundthese controls in the Controls section on top of the Toolbox,Toolbox.

The most common control is a Button. In our home scene we used a "TellTellTale" Tale" ControlsControl to indicate weather alerts, charging statusor information andan incoming calls.

Connect TextValue Control and Gauge Control

Add a FlipBook