GettingStartedControls Part 1

This

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

Inside

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 tabpanel on the top right ofand select [ Display (0) ]. In the SceneComposer.

Pleasebelow select "Display(0)" as can be seen above. This selection will showchange the propertiesdisplay's X and Y Resolution.

The "X Resolution" and "Y Resolution" properties have towill be changeddefined.

You

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.

Import

Deletion of unused ScenesImages

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 contentimages needed for this solution will be imported. Some of athem solutionwill isbe alwaysused displayedas inplain thestatic Solutionimages, Explorerbut onmost thewill top left side of SceneComposer.

In the Solution Explorer a tree view isbe used to visualizeconfigure allcontrols.

There are two scenes available. Pleasefolder, select theall Scene3Dfiles using your right mouse button and select "Delete"provided in thethis context"Cluster" menu. As an alternative you can select the scene with a left clickfolder and press the[ deleteOpen 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

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

The

Afterand thepress import[ theOK Solution]. Explorer

Drag

Position Images

The

Repeat your actionsimage with the "NewWarning80Bmp".

Yourlimit scene could now look like this:

It is now time to improve the placement of the images to make room for the speedometer. Towill be able to move the images using the mouse, change the Editor panel mode. You can find iconsplaced in the toolbarScene whichEditor.

The current mode is for selecting elementsappears in the EditorScene Tree 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 Tree.Tree Whenpanel anselect elementthe isimages selectedindividually (suchand asmodify below)

Transformation

Position

X

and

Its properties are shownY in the Properties panel on the lowerbottom rightright. of

Render Node

Configure

Tell

PleaseControls positionare 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.

Specialspecial types of nodes that already contain logic for handling of user actions (touch, click) and state changeschanges. are called Controls. YouThey can findbe these controlsfound in the Controls section on top of the Toolbox.Toolbox, which is by default located in the top right corner.

The most common control is a Button. In our home scene we used auses "TellTale"Tell ControlTale" Controls to indicate weather alerts, charging orstatus aninformation and incoming call.calls.