Quick Start Guide

The purpose of this tutorial is to explain how to create a basic dashboard cluster solution with CGI Studio Scene Composer and how to simulate it with CGI Player.

Creating a new Solution

The first step is to create a new solution with Scene Composer. A solution is a project file containing resources for a single project. Selecting a template makes it easy to create a new Solution.

  1. Double-click on the Empty template in Samples and Templates.
    • Selecting an Empty template creates a solution based on the template.
      drawing-4-1707807542.png


  2. Click the "Save solution..." icon on the toolbar or use the keyboard shortcut Ctrl + S.
    • The Windows "Save As" dialog will be opened, where you can define the location and file name for your solution.

      You can also save a your solution via the menu: "File" - "Save Solution" or "File" - "Save Solution as...".


      drawing-4-1714387445.png


  3. In the "Save As" dialog choose a location, enter a suitable filename and click [Save].
    • Your solution will be saved at the specified location. 
    • This completes the creation of a new solution.

Importing resources (Smart Importer)

Import contents into each scene in the solution using the Smart Importer, which uses AI to analyze Photoshop files to detect, suggest, and create controls for the Scene Composer solution. This step describes the operation of assigning appropriate controls to images on a resource using the Smart Importer.

Gauge Control

  1. From the menu bar, select "Import" and then "Smart Importer > From Local File...", select the resource to be imported
    • A file selection dialog will be opened.

      If your solution contains unsaved changes you will be prompted to save your solution before importing. Clicking [OK] in the prompt will save your solution.


      Resource to be Imported
      Path Filename
      \cgi_studio_content\2D\PSD\ Car_Cluster.psd

      drawing-4-1714387557.png


  2. In the Smart Importer file selection dialog choose the resource to be imported as specified in the table below, then click [Open]. 
    • The Smart Importer dialog box will be opened.

      For more information on the Smart Importer dialog box, click here.

    • Before clicking the [OK] button at the bottom of the Smart Importer dialog box, follow the configuration instructions in the steps below.

  3. In the Smart Importer dialog's Layer tree expand "Cluster" by clicking on the white triangle on its left and select "Gauge Left".
    • A control list appears on the right side of the dialog, listing the available controls.
    • The number displayed to the right of each control indicates the AI's detection confidence for that specific item.
      drawing-5-1726817579.png


  4. In the Control list press the [Apply] button on the right side of the Gauge control.
    • "Gauge left" will be displayed in a different text color with a different icon. This indicates a successful assignment of a Scene Composer control.
    • The Appearance tab will be automatically selected on the right side of the dialog.

  5. Configure the following settings under [Appearance] and [Basic Properties] sections of "Gauge Left".
    • For the specifications and specific operation for [Appearance] and [Basic Properties], please refer to here.

      If no "BackgroundImage" is set for layer mapping, the default background of the Gauge control will be used instead of the image from the Photoshop file.

      Gauge left
      Target Tab Target Item Setting Value
      Appearance
      		 

      To configure the image properties, select [Select layers] from the drop-down menu. This will open a dialog where the appropriate ImageLayers can be selected.
      After selecting the image, check [Pivot Point].

      BackgroundImage

      Scala kmh

      Gauge Background

      Pivot Point: Center (X: 209, Y: 209)

      NeedleImage

      NeedleImage
      Basic Properties

      Name

      InputMax
      RotationMax

      SpeedGauge

      240
      225
  6. In the Smart Importer dialog's Layer tree select the Text "000" which can be found directly below "Speed Gauge". In the Control List apply the control "Text Value" and configure its properties according to the table below.
    Gauge left
    Target Tab Target Item Setting Value
    Basic properties

    Name

    SpeedValue
  7. Configure "Gauge Right" in the same manner by following the instructions from step 3 through step 7. Apply the settings provided in the table below.
    • The configuration of the Gauge controls is now complete.
      Gauge Control
      Target Tab Target Item Setting Value
      Appearance
      		 
      To configure the image properties, select [Select layers] from the drop-down menu. This will open a dialog where the appropriate ImageLayers can be selected.
      After selecting the image, check [Pivot Point].

      BackgroundImage

      Scala rpm

      Gauge Background

      Pivot Point: Center  (X: 209, Y: 209)

      NeedleImage

      NeedleImage
      Basic Properties

      Name

      InputMax

      RPMGauge
      8000
      Text Value control
      Basic Properties

      Name

      RPMValue

Duplicate and Configure Scenes

In the Smart Importer's Layer Tree expand the Cluster > Middle group. There you can see that the photoshop file to be imported provides 3 scenarios for the middle part:

The goal of the following steps is to create separate scenes for each of the 3 scenarios.

  1. In the Smart Importer's "Import Settings" section under "Scenes" right-click on the Car_Cluster scene and choose [Duplicate Scene...] from the context menu.
    • The [Clone Scene...] dialog will be opened.
      drawing-4-1707873213.png

  2. In the "Clone Scene..." dialog enter the scene name as specified in the table below, then click [OK].
    • A new scene configuration has been created.
    • In the "Import Settings" tab the new "Car_Status" scene will be displayed and actively selected.
    • The Preview window displays the Car_Status scene.
    • The Layer tree displays the Car_Status scene's layers.
      Clone Scenes...
      Property Value
      Name Car_Status

  3. With the "Car_Status" scene selected in the "Import Settings" tab under "Scenes", expand "Cluster" > "Middle" in the Layer Tree.
    • There is a checked checkbox in front of "Car". The checkboxes of "Car Status" and "Incoming Call" are unchecked.

  4. In the Layer Tree uncheck and uncheck the checkboxes as specified in the image and table below.
    • The Smart Importer's Preview window will be updated accordingly, displaying the checked and hiding the unchecked layers.
      drawing-4-1714388079.png
      Scene "Car_Status": Cluster > Middle
      Layer Checkbox
      Car unchecked
      Car Status checked
      Incoming Call unchecked


  5. Repeat operations 1 through 4 above, this time checking and unchecking the Layers as provided in the table below.
    • There are 3 scenes in the "Import Settings" tab's Scenes section: Car_Cluster, Car_Status and Incoming_Call.
    • The import configuration is completed.
      Clone Scenes...
      Property Value
      Name Incoming Calls
      Scene "Incoming_Call": Cluster > Middle
      Layer Checkbox
      Car unchecked
      Car Status unchecked
      Incoming Call checked
  6. In the Scene's section of the Import Settings tab select each scene and verify its content in the Preview. Once all of the scenes have been reviewed, click the [OK] button in the Smart Importer dialog box to initiate the import.

2D scene composition

Once the import operation is initiated in the Smart Importer, the data is transformed into editable scenes based on the configurations specified within the Smart Importer. These are located in the Solution Explorer panel under [Resources > Car_Cluster > Scenes].

If the Solution Explorer is not displayed, you can enable it via the menu bar choosing [View] > [Solution Explorer].

Imported Scenes

  1. In the Solution Explorer move the three scenes to the Scenes folder according to the table below.
    • The scenes have been moved as shown in the image below.
      Scenes Move From Folder Move To Folder

      Car_Cluster

      Car_Status

      Incoming_Call

      		 Solution > Resources > Car_Cluster > Scenes Solution > Scenes
drawing-4-1729471278.png


Configure Controls

The default text setting is "Trip: 0000km" for the areas where the Text Value control was applied during import. In order to display the appropriate speed and RPM values, the formatting of the Text Value control must be changed.

  1. In the Solution Explorer, double-click [ Scenes>Car_Cluster ].
    • The "Car_Cluster" scene appears in the scene tree.

  2. In the Scene Tree panel select [SpeedGauge_Group > SpeedValue].
    • In the Properties panel the SpeedValue property will be displayed.

  3. In the Properties panel's Control section configure the SpeedValue's properties according to the table below.
    • The %d is a format string used in programming, representing a placeholder for text in integer format.
    • Represents the way text is dynamically formatted.
      Target Item Setting Value
      Format Text %d
      Text Alignment center
      drawing-5-1726820313.png

  4. In the Scene Tree panel select [RPMGauge_Group > RPMValue] and apply the same configuration as for the SpeedValue in step 3.

Control: Behaviors and Fusion

As demonstrated in the previous step, using the Smart Importer for an import operation enables you to apply available controls during the import process. Each item shown in the scene tree is referred to as a node. Nodes with applied controls are marked with the control's distinct icon. A control represents a compound node, consisting of multiple nodes and behaviors designed to achieve a specific functionality.

Behaviors are general-purpose functions that provide interactions or small operations to graphics nodes.

Confirm behavior configuration

The behavior configuration for controls can be viewed following the steps below. The operation is performed on the scene tree of Car_Cluster.

  1. In the Scene Tree panel double-click the [RPMGauge] control.
    • The Scene Tree panel changes from displaying the Car_Cluster scene tree to displaying the Gauge control's tree.
    • The behavior configuration of the Gauge control will be displayed in the Extra Scene Tree.
    • Additionally, by clicking [ Fusion... ] at the top of the Extra Scene Tree the Fusion panel will be opened, displaying the Gauge Control's Fusion diagram.

  2. To return to the 'Car_Cluster' view, click the left-arrow button located in the upper-left corner of the scene tree panel.

Fusion combines a behavior tree view, and a properties panel for selected nodes. This provides an alternative way to manage behaviors.

Display Settings

Configure the display in the Render Target panel. This tutorial uses the Empty template, so by default, a camera is configured for a 2D scene (Scene2D\Camera) and a camera for a 3D scene (Scene3D\Camera). Since each scene's camera has been added by importing resources, the next step is to link it to the render target.

For more information on display configuration, see Display Configuration.

  1. Displays the [Render Targets] panel.
    • The [Render Targets] panel is located in the upper right corner of Scene Composer by default.
    • If it is hidden, select [Libraries > Render Targets] from the menu bar under "View" .

  2. Uncheck the default cameras (Scene2D\Camera and Scene3D\Camera).
    • The checkboxes associated with the cameras toggle.
      Default Cameras Action in Render Targets Panel
      Scene2D\Camera uncheck
      Scene3D\Camera uncheck

  3. Check the checkboxes for the three cameras added during the resource import (Car_Cluster\DocumentView(0), Car_Status\DocumentView(0), and Incoming_Call\DocumentView(0)).
    • The checkboxes associated with the cameras toggle.
      Imported Cameras Action in Render Targets Panel
      Car_Cluster\DocumentView check
      Car_Status\DocumentView check
      Incoming_Call\DocumentView check

      drawing-5-1726820557.png

To see a preview of the display, select [Display > Display-0] from the menu bar under "View".

The 2D scene configuration work is completed. In the next step, we will explain how to configure HMI logic using Fusion.

HMI Logic Configuration

This section describes how to configure the Gauge control to forward its value to the TextValue control using Fusion.

CGI Studio provides a feature called Behaviors to apply logic to nodes without programming. The built-in behaviors provided in SceneComposer offer great versatility, thanks to their extensive configuration possibilities. One common use of behaviors is event-based linking, which allows data to be easily transferred between two behaviors.

Fusion combines a behavior tree view that appears to the right of a selected node in the scene tree (extra scene tree) and a properties panel for the selected node. This provides an alternative way to manage behaviors. As a result, Fusion allows you to structure your scene interactions in a more graphical and intuitive way.


  1. In the Solution Explorer double-click [Scenes>Car_Cluster].
    • "Car_Cluster" will appear in the scene tree.
    • An extra scene tree will appear to the right of the scene tree.

  2. In the Scene Tree panel select the RPMGauge control, then click [Fusion...] in the Extra Scene Tree.
    • Fusion panel will be opened, displaying the Fusion diagram for the RPMGauge control. The diagram only contains one Fusion Node: RPMGauge.
      drawing-4-1730460832.png

  3. The RPMGauge's Fusion Node offers a Behaviors connector in its top right corner (a white circle next to the label "Behaviors"). Drag this connector, then release it again.
    • The [Select Behavior] dialog will be displayed.

  4. In the [Select Behavior] dialog enter "Forward Value" into the search field at the top.
    • The list of behaviors in the dialog will be narrowed down to [Value Processing > Forward Value].
      drawing-4-1714388659.png
  5. Double-click [Forward Value].
    • A new Fusion Node "Forward Value" has been added to the diagram.
    • The RPMGauge Fusion node and the Forward Value Fusion node are connected by a link.

  6. In the Forward Value Fusion node, click on the select item icon on the right side of the [TargetNode] section.
    • The [Choose Item] dialog will be displayed.
      drawing-4-1714388721.png

  7. In the [Choose Item] dialog navigate to the Target Node listed in the table below, then click [OK].
    • [RPMValue] is configured to be the Target Node of the Forward Value behavior.
    • The RPMGauge control is configured to forward its value to the  TextValue control "RPMValue".
      Fusion Node Target Node
      RPMGauge > Forward Value Scenes > Car_Cluster > RPMGauge_Group > RPMValue

      drawing-4-1714389489.png

  8. In the Scene Tree panel select the SpeedGauge control, then click [Fusion...] in the Extra Scene Tree. Perform steps 2 through step 7 similarly for the "SpeedGauge" control. Configure Forward Value node's Target Node according to the table below.
    • The SpeedGauge control is configured to forward its value to the  TextValue control "SpeedValue".
      Fusion Node Target Node
      SpeedGauge > Forward Value  Scenes > Car_Cluster > SpeedGauge_Group > SpeedValue

With the configuration described above, the values from the RPMGauge and SpeedGauge controls are automatically forwarded to the corresponding TextValue controls, RPMValue and SpeedValue. 

To verify the functionality of this configuration switch to the Scene Editor panel. In the Scene Tree panel select one of the Gauge controls and modify its value property in the Properties panel. You should see the corresponding TextValue node update in the Scene Editor accordingly.

If the TextValue node does not update automatically, press the <F5> key on your keyboard to refresh the view.

Operation checks related to this setting can be performed here. During simulation, the value at the center of the gauge dynamically updates in sync with the movement of the gauge needle.

Multi-languages Settings

CGI Studio's multi-language support feature allows you to easily switch between languages. This section describes how to use this feature to switch between English and Japanese units of measure such as miles and kilometers.

For more information about SceneComposer's Multi Language Support and the Culture feature, refer to the documentation for the Translator Plugin.

Culture Solution Options

To display text in multiple languages, you must first create a culture.

  1. In the menu bar click [Language] then select [Culture Solution Options...]. Alternatively click the [Culture Solution Options] button in the toolbar.
    • The [Solution Options: Cultures] dialog will appear.
    • The dialog's list of cultures contains one entry: Master [00].
      drawing-4-1714390665.png


  2. In the [Solution Options: Cultures] dialog click on the [Add Culture] icon located in the upper-left corner of the dialog.
    • A new culture will be added to the list of cultures.
      drawing-4-1714390750.png

  3. For the newly created culture select "English[en]" from the pull-down menu.
    • The culture of this list entry is set to English.

      You can narrow down the list by typing "English" at the top of the pull-down menu, then select your favored list entry with a mouse click.


  4. Configure the English culture's Layout Direction to "Left to Right" using the pull-down menu.
    • The English culture has been configured successfully.

      A culture's Layout Direction is usually similar to a language's reading direction.

  5. Repeat steps 2 to 4 to add another culture entry for Japan. From the pull-down menu, select "Japanese [ja]". To narrow down the list, type "Japanese" at the top of the pull-down menu.
    • A new culture for Japan has been created and configured.

  6. Press the [OK] button at the bottom of the dialog to confirm your configurations and close the dialog.
    drawing-5-1761304340.png

You can configure multiple languages as needed by following the steps above.

Language Table Configuration

After configuring the culture settings, you need to set up a Language Table that includes the language-specific variations of each text. In the steps below we will configure English and Japanese language variations for a text of a TextNode2D.

  1. In the Solution Explorer, navigate to [Scenes>Car_Cluster] and open the Car_Cluster scene with a double-click.
    • In the Scene Editor you can see that Scene "Car_Cluster" is opened.
    • In the Scene Tree panel you can see the scene tree of "Car_Cluster" scene.

  2. In the Scene Tree panel, expand "StatusBottom" and click on "78.321 km" displayed.
    • In the Properties panel, "78.321km (TextNode2D)" will be displayed.
      drawing-4-1730460725.png

  3. In the Properties panel's [2D Text Node] section, click the select item icon on the right side of the Text property.
    • The [Language Table Selection] dialog will be opened.

      The [Language Table] dialog box can also be opened via the menu bar [Languages] - [Language Tables...].

      drawing-5-1726821534.png


  4. In the [Language Table Selection] dialog, make sure that "Master[00]"  is selected as Current Culture, them click the [Add] button 
    • A new entry will be added to the Language Table.
      drawing-5-1761314131.png


  5. In the [Language Table Selection] dialog, enter "78.321 km" into the [Text] input field of the newly added Language Table entry.
    • This text input value will be displayed if "Master" is selected as the actively displayed language.

      If no text for the Master language is defined, the text ID will be displayed.


  6. In the upper-right corner of the [Language Table Selection] dialog, switch the [Current Culture] to "English" and enter "78.321miles" into the [Text] input field of the displayed Language Table.
    • After switching to "English", only the texts defined for the English language will be displayed.
    • You might have noticed that the ID stayed the same after switching to English.
    • This text input value will be displayed whenever "English" is selected as the actively displayed language.
  7. Similarly, switch [Current Culture] to "Japanese" and enter "78.321 km" in the [Text] input field of the displayed Language Table.
    • After switching to "Japanese", only the texts defined for the Japanese language will be displayed.
    • This text input value will be displayed when "Japanese" is selected as the actively displayed language.
  8. Press the [OK] button at the bottom of the dialog to close it.
    • The Language Table Selection dialog will be closed.

This completes the configuration of text to be displayed in response to language switching.

Operation Confirmation

Verify that the settings configured in the previous section are working correctly in SceneComposer.

  1. In the SceneComposer's toolbar use the pull-down menu to the right of the [Cultural Solution Options] to switch languages. 
    • In Scene Editor you can observe the changes in the StatusBottom's range display.
    • When English is selected, the unit will be displayed as "miles".
    • When Japanese or Master is selected, the unit will be displayed as "km".
      drawing-5-1761316106.png

For further information and an advanced configuration example, please refer to our Tutorial for Globalization Support.

State Configuration

CGI Studio enables application logic through an integrated state machine model. State machines, combined with controls and behaviors, support the construction of complex application logic without programming.

This section describes how to set up transitions between scenes using state machines. The ultimate goal is to trigger scene transitions by clicking on specific nodes within a scene.


Opening the State Machine Editor

The state machine editor is displayed by the following operations

  1. Expand [Solution > State Machines] in the Solution Explorer.
    • "State Machines" is expanded and "GlobalStateMachine" is displayed.
      drawing-4-1714391154.png


  2. In the Solution Explorer select the "GlobalStateMachine". In the Properties panel check the [IsGlobal] property if it isn't checked already.
    • The [IsGlobal] checkbox is checked.
    • The "GlobalStateMachine" is global.

  3. In the Solution Explorer double-click the "GlobalStateMachine".
    • The State Machine Editor will be opened.

      The State Machine Editor panel can also be opened via the menu bar [View > State Machine > State Machine Editor].

The State Machine Editor displays the GlobalStateMachine's diagram. Like any newly created StateMachine, it contains the following elements:

  Visual representation Explanation
Initial State circle Entry point for the state machine.
State

rectangle

Represents a certain logic status. OnEntryActions and OnExitActions can be configured.
Transition

arrow

Transition from one State to another. Sender, Event and Condition for triggering the transition can be configured.
drawing-5-1726822092.png


State Configuration for Scene Car_Cluster

The following steps configure the GlobalStateMachine to activate scene Car_Cluster when the entering the State Machine's "State" and to deactivate scene Car_Cluster when exiting the "State".

  1. In the State Machine Editor select the State.
    • The properties of the selected State are displayed in the Properties panel.

  2. In the Properties panel, change the [Name] of the General category to "Car_Cluster".
    • In the State Machine Editor, the name of the State is changed to "Car_Cluster".
      drawing-5-1726822161.png

  3. While "Car_Cluster" is selected in the State Machine Editor, click on the [Fusion...] button in the State Machine Editor's left lower half.
    • Fusion will be opened, displaying the Fusion diagram for "Car_Cluster".
    • The diagram contains two fusion nodes: Car_Cluster and Transition Request. The Transition Request Fusion node is connected to the Car_Cluster at the On Entry Actions connector.
    • In the Transition Request Node, the [RequestType] is set to "Active".
      drawing-4-1714391578.png

  4. In the Transition Request Fusion node, click on the Select item icon to the right of the [Identifier].
    • The [Choose Item] dialog will be opened.
      drawing-4-1714391725.png

  5. In the Choose Item dialog, navigate to and select [Solution > Scenes > Car_Cluster], then press the [OK] button.
    • The [Choose Item] dialog will be closed.
    • With this setting, the "Car_Cluster" scene will be activated when entering State "Car_Cluster".
      drawing-4-1714391771.png


  6. In the State Machine Editor, click the Car_Cluster Fusion node's On Exit Actions connector.
    • The [Select Behavior] dialog will be opened.
      drawing-4-1714391809.png

  7. In the [Select Behavior] dialog's search field, enter "Transition Request".
    • The list of behaviors in the dialog is narrowed down to [Action > Transition > Transition Request].

  8. In the [Select Behavior] dialog, double-click "Transition Request".
    • A Transition Request Fusion node is linked to the "On Exit Actions" connector of the Car_Cluster Fusion node.
      drawing-4-1714391889.png

  9. In Fusion configure the newly created Transition Request Fusion node, that is connected to the "On Exit Actions" connector, according to the table below.
    • With this setting, the Car_Cluster scene is deactivated when exiting State "Car_Cluster".
      RequestType Deactivate
      Identifier Solution > Scenes > Car_Cluster
  10. Switch back to the State Machine Editor either via the up arrow icon in the upper right corner of the Fusion panel or using the tabs of the open Scene Composer editors.
    • The State Machine Editor is opened, displaying the GlobalStateMachine's diagram

Adding and Configuring States for Scene Car_Status and Incoming_Call

  1. In the State Machine Editor, select the "Car_Cluster" State. Copy the state either by right-clicking and selecting [Copy] from the context menu or via the keyboard-shortcut <Strg + C>.
    drawing-4-1707889373.png

  2. Click anywhere into the State Machine Editor to deselect the Car_Cluster state. Then paste the state either by right-clicking and selecting [Paste] form the context menu or via the keyboard-shortcut <Strg + P>.
    • A State named "Car_Cluster_1" will be added to the State Machine diagram.

  3. In the State Machine Editor, select the new state "Car_Cluster_1". In the Properties panel, change the [Name] of the General category to "Car_Status".
    • In the State Machine Editor, the name of State will be changed to "Car_Status".

  4. While "Car_Status" is selected in the State Machine Editor, click on the [Fusion...] button in the State Machine Editor's left lower half.
    • Fusion will be opened, displaying the Fusion diagram for "Car_Status".
    • The diagram contains a Car_Status Fusion node and two Transition Request Fusion nodes, connected via the On Entry Actions and On Exit Actions connectors.

  5. In Fusion, configure the Transition Request according to the table below.
    • The configuration of State Car_Status is completed.
      On Entry Actions
      RequestType Activate
      Identifier Solution>Scenes>Car_Status
      On Exit Actions
      RequestType Deactivate
      Identifier Solution>Scenes>Car_Status
  6. Repeat steps 1 through 6 above, to add another State for the Incoming_Call scene. Configure the State according to the table below.
    • A new state for Incoming_Call has been created and configured.
    • In State Machine Editor, the diagram of the GlobalStateMachine looks like in the figure below.
      Name
      Incoming_Call
      On Entry Actions
      RequestType Activate
      Identifier Solution>Scenes>Incoming_Call
      On Exit Actions
      RequestType Deactivate
      Identifier Solution>Scenes>Incoming_Call

      drawing-4-1714391994.png

The above operation completes creating States for our Cluster scenes. The next step is to configure the transition logic between these States.

Transitions configuration

This page describes how to set up transitions between the three States created in the previous operation. These state transitions can be configured in the State Machine Editor. 

More information about state transitions can be found here.

State Transition Configuration

The Transition function of the State Machine Editor defines how and when the system moves from one state to another. Transitions are indicated by connecting two states with an arrow.

  1. Drag a State Transition from the State Machine Editor's top toolbar, and drop it onto the "Car_Cluster" State (Transition start side).
    • A State Transition arrow is created, the tail of which is linked to the "Car_Cluster" State.
    • The State Transition arrow's head can now be dragged across the diagram to define the target state.
      drawing-4-1714458011.png


  2. Drag the State Transition arrow's head onto the "Incoming_Call" State and attach it with a mouse-click.
    • The two states, "Car_Cluster" and "Incoming_Call", are connected by a State Transition arrow.
      drawing-4-1714392159.png

  3. Select the State Transition in the State Machine diagram and click the [Fusion...] button in the Behavior/Fusion Configuration Panel in the State Machine Editor's bottom left.
    • Fusion will be opened, displaying the Transition's Fusion diagram.
    • A Check Click Fusion node is connected to the Transition Fusion node's Condition connector.

  4. Click on the Transition Fusion node's Actions connector.
    • The [Select Behavior] dialog will be opened.

      Instead of clicking on the Actions connector, you can click and drag the connector to a desired location in the diagram where the new Fusion node will be positioned.

      drawing-5-1762512316.png

  5. Enter "Transition Request" in the search field at the top of the dialog.
    • While typing, the list of behaviors in the dialog will be narrowed down.

  6. Double-click [Action > Transition > Transition Request].
    • A new Transition Request Fusion node will be created. It is linked to the Actions connector of the Transition Fusion node.

  7. Configure the Transition Request Fusion node according to the table below. The scene assigned to the property [Identifier] determines the destination of the transition.
    • This operation completes the configuration of the transition from "Car_Cluster" to "Incoming_Call".
    • Click the up arrow icon in the upper right corner of the Fusion panel to navigate back to the State Machine Editor.
      Property Configuration
      RequestType Activate
      Identifier Solution > Scenes > Incoming_Call

      drawing-5-1762513559.png

  8. Repeat steps 1 through step 7 to configure the following five transitions.
    • This finalizes the configuration of our State Transitions.
    • Scene Car_Status is activated whenever State Car_Status is entered. Scene Car_Cluster is entered whenever State Car_Cluster is entered etc.
    • The final State Machine diagram will look like the image shown below.
      Transition RequestType Identifier
      From To
      Incoming_Call Car_Status Activate Solution>Scenes>Car_Status
      Car_Status Car_Cluster Activate Solution>Scenes>Car_Cluster
      Car_Cluster Car_Status Activate Solution>Scenes>Car_Status
      Car_Status Incoming_Call Activate Solution>Scenes>Incoming_Call
      Incoming_Call Car_Cluster Activate Solution>Scenes>Car_Cluster

    drawing-4-1712032875.png


Handle Control State

In the previous section, we configured the State Transitions and the activation of the respective scene. Next, we will define the conditions for triggering these transitions . Each State Transition has an attached "Check Click" Condition Behavior by default. In the following steps we will add a "Handle Control State" behavior to the TellTale controls "IndicatorLeft" and "IndicatorRight". This makes the Indicators behave like a control, enabling them e.g. to emit click events.

  1. In the Solution Explorer, navigate to [Solution > Scenes > Car_Cluster] and double-click the scene.
    • The Scene Editor will be opened, displaying the scene "Car_Cluster".
    • The Scene Tree panel will show the scene's scene tree.
    • In the Scene Tree panel's right side, an extra scene tree is available, displaying the [Fusion...] button and the currently selected RenderNode's Behaviors and Effects.

  2. In the Scene Tree panel, expand the scene tree along the following path: Cluster > StatusTop > Telltales. 
    • The Group2D nodes Brake, AirBag, Engine, OpenDoors, IndicatorRight, and IndicatorLeft will be displayed.

      To expand a Group2D node, you can either double-click it or you can single-click on the little triangle to it's left.


  3. In the Scene Tree panel, select the IndicatorRight Group2D node, then click on the [Fusion...] button in the Extra Scene tree.
    • Fusion will be opened, displaying the Fusion diagram of IndicatorRight.
      drawing-5-1762524801.png

  4. In Fusion, click the Behaviors connector on the IndicatorRight Fusion node.
    • The [Select Behavior] dialog will be opened.

  5. In the Select Behavior dialog, enter "Handle Control State" in the search field at the top.
    • The list of behaviors in the dialog will be narrowed down to [Control > Internal > Handle Control State].

  6. Double-click the "Handle Control State".
    • A Handle Control State Fusion node will be linked to the IndicatorRight Fusion node.
      drawing-4-1714394152.png

  7. Perform steps 3 through 6 for "IndicatorLeft" as well.
    • IndicatorLeft and IndicatorRight are now behaving like controls. They are e.g. able to emit click events.

  8. Repeat steps 1 through 7 for scenes "Car_Status" and "Incoming_Call", adding Handle Control State behaviors to their IndicatorLeft and IndicatorRight component in the same manner.

With the configurations above, IndicatorLeft and IndicatorRight are configured to behave like a control. They are e.g. able to emit click events.

Conditions for the State Transitions

Finally, each State Transition's 'Check Click Condition Behavior' has to be configured with a sender - the control that emits the click event. We have set up IndicatorLeft and IndicatorRight to send click events, so they can be configured as senders.

  1. In the State Machine Editor, select the state transition from "Car_Cluster" to "Incoming_Call".

  2. Click the [Fusion...] button in the lower left of the State Machine Editor .
    • Fusion will be opened, displaying the Fusion diagram of the selected state transition.
    • The Transition Fusion node's Condition connector is linked to the Check Click Fusion node.

  3. In Fusion at the Check Click Fusion node, click the 'Select item' icon to the right of the [Sender] property.
    • The [Choose Item] dialog will be opened.

  4. In the Choose Item dialog, navigate to and select [Solution > Car_Cluster > Cluster > StatusTop > IndicatorRight], then click [OK].
    • IndicationRight will be displayed in the Sender property of Check Click.
      drawing-4-1714394249.png
  5. Click the up arrow icon located in the upper-right corner of the Fusion panel.
    • The State Machine Editor panel will be opened, displaying the State Machine diagram.

  6. Repeat steps 1 through 5 to configure the sender property for the remaining Check Click Condition behaviors, applying the configurations from the table below.
    • All state transitions are now configured correctly.
      Transition
      		Check Click > Sender
      From To
      Incoming_Call Car_Status Incoming_Call > ... >IndicatorRight
      Car_Status Car_Cluster Car_Status > ... > IndicatorRight
      Car_Cluster Car_Status Car_Cluster > ... > IndicatorLeft
      Car_Status Incoming_Call Car_Status > ... > IndicatorLeft
      Incoming_Call Car_Cluster Incoming_Call > ... > IndicatorLeft

This completes the setup of the state transitions triggered by click events emitted by a control, which then leads to an activation of a new scene. On the next page, we will confirm the functionality of our configuration.

Simulation by Player

Use Player to check the behavior of the newly created cluster. This application allows you to view scenes from asset files and run simulations. An asset file is a file output by Scene Composer that contains the graphic resources of a scene and is loaded into Candera's graphics engine so that rendering can be performed.

Run Player 

To start the Player, press the [ Play selected scenario... ] icon in the toolbar.

drawing-4-1714394310.png

If the solution saving operation has not been performed before this operation is executed, a dialog box will appear prompting you to save the solution. In this case, press the [ OK ] button in the dialog. An asset file will be automatically generated and opened with CGI Player.

When CGI Player is executed, three windows will appear as shown in the figure below.

drawing-5-1726824092.png
Window 1 A command line interface for sending commands to CGI Panel.
Window 2 This display panel shows a simulation of the scene according to the settings.
Window 3

A graphical user interface (GUI) for detailed configuration of asset files called CGI Panel.

Screen Transition confirmation

Player is used to confirm the screen transitions set up on the previous page.

  1. Press the [ Play selected scenario... ] icon on the toolbar to launch Player.

  2. Click on the left and right indicators at the top left and right of the Player display.
    • Click on the indicator on the right side of the "Car_Cluster" scene to move to the "Incoming Call" scene.
    • Click on the indicator on the left side of the "Car_Cluster" scene to move to the "Car_Status" scene.
      drawing-4-1708474552.png


  3. Close the CGI Panel and exit Player.  
    • All three windows that were running will close.

Run simulation by Value Generator  

This section describes the simulation operation using the Player's Value Generator.

  1. Press the [ Play selected scenario... ] icon on the toolbar to launch Player.

  2. From the items displayed in the scene view of the CGI Panel, make sure that the "Scenes#Car_Cluster" checkbox is checked.
    • If it is not checked, check it.
    • The checked scene will appear in the display panel.

  3. Click "Scenes#Car_Cluster".

    • "Scenes#Car_Cluster" will be highlighted in red.

  4. Click "Controls" tab in the CGI Panel.
    • [ Controls ] will be highlighted in red.
    • The controls included in the "Car_Cluster" scene will be listed.

  5. Click "SpeedGauge".
    • The properties for "SpeedGauge" will be listed.

  6. In the property list, check the Simulation checkbox under Value.
    • "Value" is set to "Int32" by default, and simulation by Wave (sine) is applied.

  7. Click the [ Start and Stop Value Generation Mode ] icon on the CGI Panel toolbar to start the simulation.
    • Values are automatically generated based on the settings in the Value Generator tab.
      drawing-5-1726824244.png
       

If Forward Value is set in the HMI Logic Configuration, the gauge center value changes in accordance with the movement of the gauge needle.

The Value Generator can be used to simulate changes in control values. This makes it easy to simulate controls without having to implement logic.