GettingStartedControls Part 1

This

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 solutionSolution

Choose

Create a new solution using the Empty Solution template and save it as startingshown point.in Creating

Savea thenew Solution

.

A new solution usingis Savecreated Solutionand As...saved.

from File menu.

Inside

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

Properties panel

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

The horizontal and vertical resolution of the selected display within the properties tab in the lower right of SceneComposer.

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

to 1024 and 768 respectively. The aspect ratio of the display will be calculated automatically.
Target Item Setting Value X Resolution
1024
Y Resolution
768

You

should now save

Preparing the Scene

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.
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" 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.
Save the solution using CTRL+the <Ctrl+S> keyboard combination or by navigating tovia the file menu andFile selecting- "Save Solution".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.

---

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.

In the contentmenu similarchoose [ Import ] - [ Import Resources... ] as described in How to WindowsImport FileResources. Explorer.

Please[ clickImport theResources small] triangledialog will be opened
Navigate to the leftfollowing of the Scenes folder at the bottom of the Solution Explorer.

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

all[ files provided in this Cluster folder and press the Open button.

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

opened

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

Use the settings as shown in the screenshot.screenshot

Afterand thepress import[ theOK Solution].

Explorer shows the new structure:

The images arehave nowbeen imported into the solution and ready to be used forin ourSceneHome.
home scene.

Drag

Configure Screen, Position Images

In the Solution Explorer select the Bitmap "Navi60Bmp" fromand 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. Select "NewWarning80Bmp" in the Solution Explorer and drag it into the Scene Editor paneltoo.

Repeat your actionsimage with the "NewWarning80Bmp".

speed

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.

offerIt thealso different Editor panel modes.

The current mode is for selecting elementsappears in the EditorScene Tree panel.

It is represented byIn 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 entireScene 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.Tree Whenpanel anselect elementthe isimages selectedindividually (suchand asmodify below)

their

Its properties are shownY in the Properties panel on the lowerbottom rightright. 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.NewWarning80Bmp are on their final position.

 

Render Node

Transformations
Position X Position Y Navi60Bmp
38
121
NewWarning80Bmp 38
612
Tale Controls

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.

Change