Getting Started

This document describes briefly how to get started with CGI Studio, Player and SceneComposer.

Note:
The following information is given to describe certain components or functionalities and shall not be considered as warranted characteristics.

Candera CGI Studio Editions

Candera CGI Studio is currently available in three different editions:

  1. Enterprise Edition - provides the maximum level of features and flexibility for embedded projects  
  2. Professional Edition - focuses on ease of use for creating embedded projects 
  3. Community Edition - a free edition for creating projects for non-commercial applications 

Documentation

The documentation is created for all versions of CGI Studio, as the differences are only affecting the data binding and platform support. The Professional Edition has an easier Python based data binding and supports a selected set of platforms. Moreover, there is a specific blood pressure sample for the Professional Edition to explain how its data binding works, but the sample would work for all version.

Release Package Signature

CGI Studio Release Packages are released with a Release Package Signature. This way you can always make sure that the delivery is from Candera GmbH and it includes the original files without any change.

The Signature File

The signature is a CGI Studio File Catalog that can be found here: 

/cgi_studio_docs/Signature/CGIStudioFileCatalog.cat

Required Tools

The CGI Studio File Catalog is created using the following windows batch file script that is also part of the delivery: 

/cgi_studio_docs/Signature/catalog.bat

Creating a signature file

To create a CGI Studio File Catalog your own, please follow the steps below. 

  1. Make sure, that Windows Kits 8.1 is installed on your PC (should be the case for all Windows7 and Windows10 installations). 
  2. Add the following to your "PATH" environment variable: C:\Program Files (x86)\Windows Kits\8.1\bin\x64 
  3. Check that the path length to the /cgi_studio_docs/Signature/catalog.bat batch file is minimal. 
  4. Run the /cgi_studio_docs/Signature/catalog.bat batch file. 

 

System Requirements and Preparation

CGI Studio Package Installation/Unpacking Requirements

Please be aware of the following requirements when installing CGI Studio,　

Software Development Environment Required

Software Development Environment for Host

Install the following software for host development if not yet available:

For execution only, redistributable package is sufficient. For widget development,
 MS Visual Studio (min. C++ and C#) or 
 MS Visual Studio C++ Express Edition and MS Visual Studio 2015 (minimal) C# Express Edition is mandatory. 

Software Development Environment for Target Platforms

Please refer to the Application Development section of this document for device specific target setup documentation.

Monitor resolution (recommended)

FHD(1920×1080) or higher display 



CGI Studio Installation

Unzip the delivered zip file to the desired installation root directory. The installation root directory <installation-path>/CGI-Studio_<version_number>_<package_type> is further referenced in this document as <cgi-studio-root>.

HASP License Activation

Note that the HASP license applies only to the Enterprise Edition.

For a Dongle or client-side Network License, the following installations steps are required:

  1. Execute instlic.cmd after unziping hasp_installer.zip delivered within <cgi-studio-root>/cgi_studio_3psw/bin/HASP. This will install the HASP License software driver. 
  2. Insert the dongle to a USB port. 
  3. Invoke SceneComposer or other protected software from the CGI Studio installation directory to prove a successful HASP installation. 

In Windows 10 environments, the license driver is automatically installed by simply inserting the dongle on a USB port the first time. 
Local admin rights are required to install the HASP driver.

For a Software License (time-limited trial license), please perform the following installation steps:

  1. Execute instlic.cmd delivered by CGI Studio Customer Support. This will install the HASP License software driver. 
  2. Access http://localhost:1947 via your browser and select 'Update/Attach' in the left menu 
  3. Click 'Browse ..." and select the according .v2c file, which has been sent to you by customer support; confirm with 'Apply File' button. 
  4. Invoke SceneComposer or other protected software from the CGI Studio installation directory. The software license will be active for a certain period of time as agreed in your specific license agreement. 

Take care to call HASP installation files from a local directory. There are known issues related to installing licenses from a network drive.

For HASP license server installation and configuration for floating licenses of CGI Studio.

Running SceneComposer and Player

Refer to Starting SceneComposer for options as how to start SceneComposer.

To load a SceneComposer asset in the Player demo application on Windows host simulation, execute

For instructions as how to build an own version of the Player demo application, please refer to section CGI Studio Build System.

HASP License Updates

Note that the HASP license applies only to the Enterprise Edition.

To perform an upgrade of your dongle or network license, the following steps are required:

1. Create a HASP C2V file and send to Candera GmbH

2. Apply HASP V2C file received from Candera GmbH

In some cases, it is required to format the dongle for updating the license.
 When you apply an update file that formats the dongle, a new c2v file is generated by the license-update-tool. 
 This new c2v file needs to be transmitted to Candera GmbH again. 
 Candera GmbH will return another update v2c file. After applying this file, the final license is installed. 

Running CGI Studio Android Evaluation Package on Target

The release contains two ready-made Android installer packages with file extension APK (which stands for Android Package Kit) named:

There's no need to individually compile binaries for your Android device. An Android installer package can be run by copying it to the device and opening it with a local file manager.

The CourierSampleApp application is used to run the specific CGI-Studio Asset, generated from the Solution file found in: cgi_studio_courier_apps\src\CourierSampleApp\SCSolution\Android. 
It should be generated as "AssetLibCff_CourierSampleApp.bin" and placed in the /sdcard location in the target device.

The CGIPlayerLauncher application is a generic player application that will play a number of CGI-Studio Sample Assets. 
Those can be placed in /sdcard and in any subfolder below /sdcard and can conveniently be run from a selection list after starting the CGIPlayerLauncher application.


Patch installation procedure

After downloading the patch executable from bitbox or from the download link provided you can start the patch installation by running the installer. 

  1. When you run the installer, you will be asked if you want to apply the patch if this installer has your permission to make changes to your computer. If not, this process will stop. You can restart at any time.

  2. You will be asked if you want to apply the CGI-Studio patch.
    • Select [ Yes ] to continue with the installation.
    • Click the [ No ] button to cancel applying the patch.
      drawing-4-1718277985.png


  3. A window will open with a progress bar for extracting compressed data.  
    • After the extraction process, the CGI patch installer will open.
      drawing-4-1718277994.png

      • To cancel the extraction process, press the [ X ] button (orange box below) or the [ Cancel ] button (red box below) in the upper right corner of the window.
        drawing-4-1718277999.png

        • Pressing any of the buttons will bring up a dialog to reconfirm work cancellation.
        • To execute the work cancellation, press the [ Yes ] button.
        • To cancel the work cancellation and continue the extraction process, press any button other than the [ Yes ] button.

  4. After the extraction process, the CGI Studio Patch Installer dialog opens.
    drawing-4-1718278024.png

    • To open the release notes (PDF) about the patch, click the [ Open Patch Notes ] button (orange box above).

    • The patch installer displays the following patch information.

      Version

      CGI Studio version.
      Customer

      Patch provider (customer name).
      Target OS Target operating system on which Player can run.
      Target Platform Target machine name on which thePlayer will run.
      Patch Number The sequence number of the patches. Patches must be applied in the correct sequence.
      Patch Files Number of files to which the patch will be applied.
      Version Check Compatibility check of the patch.

  5. To start the Version Check and continue the installation process, press the [ Select ] button (orange box below) and select the path where CGI Studio is currently installed.
    • You can also enter the path directly in the red box below.
      drawing-4-1718278049.png


  6. As soon as [ CGI-Studio Installation Path ] is selected, a Version Check will begin.
    • If all Patches with lower Patch Numbers are applied and target the same Customer, Operating System, CGI Version (Note: Patch Number is different from CGI Version), and Target Platform, then the Patches are compatible. The patches are compatible if they target the same Customer, Operating System, CGI Version (Note: Patch Number is different from CGI Version), and Target Platform.

  7. The results of the check are displayed in the [ Version Check ] part of the dialog.  
    • If this check fails (Mismatch), the installation will stop.
    • If Match is not displayed, try a different folder path.
    • If the check results in confirmed compatibility (Match) or unknown compatibility (Unknown), installation is enabled and the [ Install ] button is activated.

  8. If the [ Install ] button is enabled, press the [ Install ] button to continue the installation.
    • The Install window opens and the patch is applied.
      drawing-4-1718278044.png


  9. If the Patch installation is successful, the message shown below will be displayed.
    • Press the [ Exit ] button to complete the Patch installation.
      drawing-4-1718198430.png

In case of any questions, please contact our Support team on CGI Studio Lighthouse.

CGI Studio Components

CGI Studio Components

CGI Studio consists of the following Components

Bin

The Bin component contains all binaries for CGI Studio Tools:

CGI Studio 3PSW

"Third Party Software" comprises a set of external software (in library or source) that are used by CGI Studio: 

3rd Party Software Version More Information
bin2srec V2014.12.119.1
HASP

DevIL (lib)

OpenGLES (lib)

ComplexScriptLib
[more]
DevIL (src) 1.7.8
freetype 2.14.1
GStreamer 1.22.7 [more]
harfbuzz 12.1.0
json 0.5.0
libpng 1.5.9
libunibreak 1.0
Lua 5.3.5 5.3.5 [more]
Monotype iType
 6.2.2
 [more]
Monotype WT-Shaper
 5.0.0
 [more]
OpenGLES (src)

zlib 1.2.8

CGI Studio Apps

This component contains the Scene Composer Solution of the Construction Kit. The Construction Kit provides predefined 3D Shapes, Building Blocks, Controls, and various Resources, like Appearances, Fonts, Icons, Meshes, Shaders, TextStyles and Textures.

CGI Studio Candera

The Candera Graphic Engine enables embedded applications to render and control externally designed content, especially 3D content.

CGI Studio Content

The component Content contains some resources (fonts, images and shaders).

CGI Studio Controls

This component consists of Controls and Behaviors.
A Control is a reusable structure that can have a specific functionality, which is delegated to the Behaviors it consists of. A Control is created in SceneComposer only while a Behavior must be implemented.

Controls are template scenes created for later reuse via control nodes. They are meant to be interactive. To make them interactive they can be filled with Behaviors. A control collects part of the scene graph and Behaviors into a single entity, which can be instantiated in another scene.

Behaviors are small re-usable functional blocks that communicate via events. Together they process input from application and use the Candera engine API to manipulate graphical objects. There is a huge amount of predefined Behaviors that comes with CGI Studio. Combining the Behaviors offers a great variety of functionalities. [more]

CGI Studio Courier

The Courier framework implements the Model-View-Control architecture pattern. It has defined extension points for 3rd party state machine integration. Courier is focusing on Message Handling and Data Binding and depends on CGI Studio Candera graphics functionality. [more]

CGI Studio Courier Apps

The Courier Apps component comprises the CourierSampleApp and the IpcApplications "CourierIpcHaroldApp" and "CourierIpsMaudeApp".

CGI Studio Docs

Docs contains documentation, release notes, license information and test reports.

Player

The Player is an application which provides insights into a generic CGI Studio application driven by the courier messaging framework. It also provides samples of several features. These features are core components like showing or hiding views or trigger animations but also sample implementation of models with databinding. On top of that, the Player shall be an application to test and play around with an asset and the functionality of the framework itself. The focus is not on the customer specific logic but on the core logic of the customer’s specific asset. [more]

CGI Studio Schost

SCHost is a device specific dynamic library (dll) used by SceneComposer to render the content of the current solution and to provide editing support including widgets manipulation. It represents the "glue" between the Scene Composer graphical user interface and the Candera engine.

FeatStd

FeatStd is the short form for FEAT Standard library. It's purpose is to provide common basic functionalities, like Datatypes, Classes, Macros, Platform/OS abstraction, etc. for various FEAT products. FeatStd is also configurable to the needs of a software product, having feature flags to enable self-contained functionalities, like IPC support, UnitTest framework (based on google test), logging, etc. resp. overall settings like thread-safety support, fractional number handling, etc. [more] 


64-bit support Scene Composer

Since CGI3.13, Scene Composer has become a 64-bit support application. As a result, the following benefits are expected when compared to the 32-bit Scene Composer

On the other hand, the C++ SCHost.dll used for launching Scene Composer has to be built as well in 64-bit mode. For this reason, CGI 3.14 or later has a function to automatically check if SCHost.dll is properly built when starting Scene Composer. If you are using SCHost.dll built in 32-bit, the following error dialog will be displayed.

drawing-4-1712904349.png

The two buttons on the dialog perform the following actions.

[ OK ] button Closes the Scene Composer.
[ Open... ] button Opens the Scene Composer log file with any editor.

For information on building SCHost.dll for 64-bit support, please refer to Build System Setup document.

The 32/64bit compatibility table for each version of CGI Studio is shown below.

CGI Version Scene Composer and SCHost.dll CGI Player
Up to CGI3.3 32bit required 32bit required
From CGI3.4 to CGI3.12 32bit required 32bit or 64bit  required
CGI3.13 and later 64bit required 32bit or 64bit  required

CGI Studio Glossary

This glossary has been created to help users who are new to CGI Studio understand the names of unique features and components used in CGI Studio. It does not include terms related to general HMI development or 2D/3D graphics.

Analyzer

A tool for analyzing how smoothly an application runs on a special computer (such as an in-vehicle device) and how much memory it uses. It helps identify issues when displaying images on the screen and pinpoint causes of slow performance (bottlenecks).
This tool records app activity (events, time, values) and allows you to analyze it on a PC in various views (graphs, tables, etc.). It also includes features for analyzing memory usage and viewing screen display processes in detail (frame debugger). This helps developers identify and resolve performance and resource issues. It can also be launched from the Control Center dashboard.

Asset Tool

This tool is designed to efficiently manage and reuse assets such as images, text, motion data, and screen components (Control) used in screen design within a project. Specifically, it includes features such as importing external files (images, fonts, 3D models, etc.), organizing unused assets, making animations and components reusable as templates, and sharing assets with other projects (SCL).

Behavior

Settings and mechanisms that determine the “movement” and “behavior” of screens created in Scene Composer. By incorporating them into components (Control) such as buttons and meters on the screen, you can define component-specific behaviors such as “change color when pressed” or “move the needle when the value changes. Behavior can be used to achieve more complex screen movements and application functions by combining multiple settings and linking them to State Machine s. This allows you to create not only the screen design but also the interactive movements in detail.

For available behaviors, please refer to this page.

Candera Engine

Candera Engine is a graphics engine developed by Candera that enables embedded applications to render and control externally designed content, particularly 3D content. Guidelines are provided to optimize content according to the constraints of embedded hardware. It renders both 2D and 3D content via the OpenGL ES API.

CGI Studio Connector

This tool enables you to seamlessly connect screens (user interfaces) created with Scene Composer.
Using this tool, you can define how screens and control systems exchange information (data, operations, events, etc.) and automatically generate the necessary code for integration. This makes it easy to implement integration such as specific functions being activated when a button on the screen is pressed. It is also possible to connect to simulations of other systems (such as IAR visualSTATE) to verify functionality. This tool helps streamline the development of the entire system.

CGI Studio Enterprise Edition

One of the two editions of CGI Studio.
This version provides maximum flexibility for embedded system screen development. You can customize the program (Player) that runs the screens to optimize performance and memory usage. Data Binding can also be freely customized and programmed. It is suitable for developing complex screens or in special environments.

CGI Studio Professional Edition

This version is designed to simplify and accelerate the development of screens for embedded systems.
Even users with limited specialized knowledge can get started easily. There is no need to prepare (compile) the program (Player) that runs the screens yourself, and data integration (Data Binding) can be done with simple settings or predefined methods. This version is ideal for designers and others who want to focus on creating screens.

Control Center

This integrates various CGI Studio tools such as Scene Composer, Player, and Analyzer into a single interface.
From here, you can manage and edit the launch of each tool, app builds, detailed settings, and more. Beginners can use it to launch main tools, while advanced users can also edit data binding definitions and more. Information is stored in units called Control Center solutions, which can be easily shared among multiple users. You can edit solution details and reference paths in the General & CGI Studio tab. This tool is useful for accessing the functions necessary for development and working efficiently.

Control

Pre-built “components” used to create application screens (user interfaces). Examples include commonly used controls such as Button, Slider, and List, which have predefined appearances and behaviors.
These components can be placed directly on the screen or used as “templates” for creating new components. They are convenient for reusing the same components across multiple screens, and by adding additional elements or setting behaviors, they help streamline and accelerate screen development. They can be easily placed on the screen from the Toolbox, and their properties can be modified or their structure edited.

For a list of available controls, please refer to this page. You can also learn how to use the main controls in the GettingStarted Control s sample solution.

Core Control

A lightweight set of controls with minimal standard control. These controls reduce size and improve performance, making them ideal for low-end platforms and as a foundation for creating custom controls.

Courier Editor

Courier Editor is part of CGI Studio's Courier system, which facilitates data exchange between screen designs and applications. This tool allows you to edit files (XCDL/XHCDL) that define the rules for how data (e.g., temperature or speed) and messages are sent and received between screen designs and applications. These rules are managed in a clear, list-based format.

Courier

An important framework that serves as the foundation for building applications. It is designed to enable various elements within an app (such as screens, data, and operations) to communicate with each other through messages, thereby enabling seamless integration.
In particular, it includes a Data Binding feature that automatically connects app data (such as numerical values) with the visual appearance on the screen (such as buttons and text). When data changes, the screen updates automatically, streamlining development. It also handles screen display, integration with external systems, and touch operations.

Culture

A feature that enables text displayed on screen designs to be switched between multiple languages. By registering translated text for each language you wish to display (e.g., Japanese, English), you can easily switch the language of text displayed on screen with simple operations. This is a crucial feature when developing HMI with multilingual support.

Data Binding

A feature that automatically links various elements displayed on the application screen (meter needles, text, buttons, etc.) with data handled within the program (numbers, states, etc.).
This allows the appearance of the screen to be automatically updated in real time as data changes. This eliminates the need for manual screen updates, significantly improving development efficiency. You can set up binding by clicking the dedicated button for the desired item and verify the behavior in the live preview panel.

Diagram Bird's Eye

This feature allows you to display complex diagrams (diagrams) showing screen designs and movement flows, such as Fusion and State Machine , in a separate window. It is useful for confirming where you are looking in the diagram and where you are in the whole diagram, and for quickly moving to the part you want to see by moving the small window. This helps you to proceed with your work without losing sight of the big picture, even with complex settings.

Dirty Area Management

This feature optimizes screen updates by updating only the parts of the screen that have actually been changed, thereby improving performance. It provides automatic calculation of invalidation dependencies for Dirty Area Management, along with new scene and camera invalidation handling based on the invalidation dependencies stored in assets.

Easy Mode

This feature allows you to adjust properties related to various elements used in a project, such as colors and shapes, in an easy-to-view manner. Among numerous settings, you can hide unused settings or prevent accidental changes by making them uneditable.
This enables you to display only the necessary settings based on the user (e.g., designers or programmers), thereby helping to streamline development work. Settings can also be saved and shared as files.

Embedded Player

Like the Player, the Embedded Player is an application for actually running and displaying HMI screens (user interfaces) created with Scene Composer.
It can load screen information (assets) designed in Scene Composer and simulate screen behavior and switching (transitions). You can test the movement of screen components (controls), animations, transitions between screens, and more.
In addition, because the Embedded Player operates as a Scene Composer panel, you can display the Scene Editor and Embedded Player side by side, allowing you to instantly check updates to your Scene Composer solution.

FeatStd

Abbreviation for FEAT Standard Library. It provides basic functions (data types, classes, macros, platform/OS abstraction, etc.). It includes feature flags to enable self-contained functions such as IPC support, UnitTest framework, logging, and thread-safe support. It serves as the foundation for multithreading-related features (asynchronous jobs, asynchronous asset loading, asynchronous text rendering). It is one of the components of CGI Studio.

Fusion

A feature in Scene Composer that allows you to define the movement and Behavior of components (Control and Nodes) on the screen. This is an editor that allows you to intuitively create complex HMI logic without programming by combining multiple “behaviors” (sets of movements and settings) while viewing diagrams. Select components and connect them with lines to create a mechanism. It also works with State Machine . You can also use the Diagram Bird's Eye function to get an overview of the entire system.

HASP License

A system used for license management in CGI Studio. Depending on the license type (dongle, client-side network license, software license, etc.), specific activation procedures are required. It is listed as one of the third-party software components used in CGI Studio.

HMI Report

This feature compiles information about the entire screen created in CGI Studio. It automatically collects information such as how many images are used in the created project and where buttons and other components (controls) are located.
This report is output in a web browser-friendly format (such as HTML), making it easy to understand the overall status of the HMI. This helps identify unnecessary data, understand the structure, and efficiently advance HMI development.

Node

A “component” that serves as the basis for creating screen designs. All elements displayed on the screen (Scene Editor), such as images, text, shapes, and even groups that organize the screen's structure, are treated as nodes. When creating a screen, you select the necessary nodes (such as buttons, meters, or images) from the toolbox and place them in the Scene Editor or Scene Tree. You then configure various settings for each node, such as position, size, color, and visibility. Nodes can also be grouped into parent-child relationships for easier management, which helps organize the screen's structure.

Player

An application that runs and displays HMI screens (user interfaces) created in Scene Composer.
It can load the information (assets) of screens designed in Scene Composer and simulate screen operations and transitions (transitions). You can test the movement of screen components (controls), animations, and transitions between screens.

Render Target

This is where CGI Studio draws the “image” of the screen. It serves as the location for displaying the final image on the screen or as a temporary “image” (texture) of what the camera sees, which can then be applied to other screen components. It determines what content to draw through the camera. This is an essential feature for achieving complex screen layouts and special visual effects.##### Scene Composer

The main development tool in CGI Studio, used to create screen designs (HMI) for in-vehicle systems and other applications. It allows you to place images, text, 3D models, and other elements on the screen, add animations, and build mechanisms (logic) such as button responses. The created screens can be tested within the tool, enabling visual and intuitive operations. In addition, up to four scene editors can be displayed, allowing you to check the screen design from multiple angles simultaneously.

Scene Editor

The Scene Editor is the main part of Scene Composer. Here, you can freely place “components,” such as images, text, and shapes, that you want to display on the screen. Once you've placed nodes on the screen, you can adjust their appearance in detail, such as position, color, and size. You can drag nodes from the toolbox on the left side of the screen to place them, or manipulate nodes selected in the scene tree on the left side of the screen, working in conjunction with other features.
When you want to add movement (animation) to nodes, you can visually adjust their motion directly within the Scene Editor. This is the central location where you work while keeping an eye on the overall design of the screen.

Scene Tree

A place where all elements (called Nodes) in the screen design (scene) being created, such as images, text, and shapes, can be viewed in an organized list format. The parent-child relationships between elements are displayed in a hierarchical structure, making it easy to understand the screen structure at a glance. From this list, you can select elements and perform basic operations such as renaming, toggling display/hide, and deleting.

SCHost

This is the part responsible for executing the application to actually display the screens (user interfaces) created in CGI Studio as images. It receives information designed in Scene Composer, moves screen components, updates information, and applies basic settings for how images are drawn.
This is a critical component prepared (built) for specific target devices where the app runs, enabling the screen design to be realized as actual visuals. It supports both 2D and 3D display processing.

Smart Importer

A feature that allows you to import files directly from Photoshop and other design tools (Adobe XD, Axure RP, Sketch, etc.) and map elements within the files to Control using built-in AI services. This improves the import and memory processing of large and complex assets.

Solution

A project unit for developing screen designs (HMI) using Scene Composer. All data required for a single screen design project, such as image files, fonts, screen layout information, animation settings, and operation mechanisms, is managed within this “ Solution .” When starting a new HMI project, you first create this Solution .

State Machine

This mechanism manages the “states” of applications developed with Scene Composer and defines “state transition rules” that determine how to transition from one state to another when specific conditions (events) are met.

This allows you to easily configure and build the flow of the entire app using a dedicated “State Machine Editor” without programming, while viewing diagrams. It is used to coordinate the movements of components (Behavior and Control) on the screen and to control the switching between multiple screens in detail. Advanced elements such as Subchart and History State are also available for complex movements.
The Diagram Bird's Eye feature allows you to see the big picture.

Toolbox

One of the panels in the Scene Composer screen, this is where various “components” used to create screen designs (HMI) are organized by type. It includes Control elements such as buttons and sliders, elements that display images and text (Nodes), and settings that give elements specific movements or reactions (Behavior). You can select items here, then drag and drop them into the Scene Editor or the Scene Tree to use them.

Construction Kit

A collection of pre-built components (such as Control and Behavior) used to develop application screens (user interfaces). Examples include Button, Slider, and List controls.
These components can be used as is in your project or copied as templates to create new ones. Using the Construction Kit lets you develop screens faster and more efficiently. The kit is also used in many sample projects.

XCDL/XHCDL

An XML-formatted definition file used in CGI Studio's Courier data exchange mechanism to describe information about screen design (HMI) elements (such as messages and data items). Based on the information in this file, the Courier Generator generates program code, and the Scene Composer performs Data Binding settings to link screen elements with data items.

Scene Composer main features Overview

 

This section provides an overview of the Scene Composer main features and links to pages describing their general use.

1 Solution

GUI creation in Scene Composer is managed in units called "solutions”. Therefore, to use Scene Composer, you must first create a Solution. There are also various features for editing solutions.

Manage Solutions
2 Import of Resources

Scene Composer can import various file formats (images, fonts, shaders, SVG, FBX, glTF and so on) as resources.

Import of Resources
3 Smart Importer

The Smart Importer allows AI to analyze imported files and automatically apply controls with optimal HMI functionality. The Smart Importer can also import files designed in Photoshop (.psd), Adobe XD (*.xd), Axure RP (,rp), Sketch (*.sketch), and Figma.

Smart Importer
4 Creating a Scene

In Scene Compsoer, you build a "scene" of the content you actually want to display. There are two types of scenes, 2D scenes and 3D scenes, so create scenes according to the content you wish to create.

Manage Scenes
5 Editing a Scene

Edit a scene by using the Scene Editor, the main panel of Scene Composer. You can also see how the scene will appear. Editing tools are available to adjust the position, size, and rotation of the nodes you have created, as well as to manipulate the camera and display options.

2D Scene Editor

3D Scene Editor
6 Fusion

Fusion is a highly usable editor that allows you to graphically and intuitively structure scene interactions, easily manage the functionality and logic in your scene, and build complex HMI elements.

Fusion
7 State Machine

The State Machine Editor allows you to visually compose complex state transitions in your application. Specifically, you can define a state of a specific object or node at a certain point in time and configure the following settings with simple operations.

  • Transition to another state based on input/events received by the state.
  • perform any "Action"

State Machine
8 Animation

Each parameter (position, size, color and so on) of the nodes in the scene can be set the animation. The animation-related panels (Animation Timeline, Animation Values) allow you to set up animations with only a few simple operations.

Animation Design
9 Culture (Localization)

This feature switches the text in a scene to be displayed in multiple languages.

SceneComposer Translator Plugin
10 Behavior

Behaviors allow you to set various behaviors and controls for the nodes in a scene with simple operations, even if you have no coding knowledge. Behaviors are configured in the extra scene tree and in Fusion, so please refer to the pages related to them as well.

Behavior
11 Control

Controls are UI elements such as buttons or progress bars. Scene Composer provides a number of ready-to-use controls, or you can create your own.

Control

Scene Composer User Interface

Scene Composer User Interface

Overview

The Scene Composer interface consists of three parts: the menu bar, the toolbar, and the panels. The menu bar contains operation menus arranged by category, such as File and Edit. The toolbar contains icons for frequently used operations. In addition, for each function, a window called a panel is provided for working with Scene Composer. For more information, see the description page for each part.

  1. Menu bar
  2. Tool bar
  3. Panel: Solution Explorer/Imports
  4. Panel: Scene Tree/Search/Output etc.
  5. Panel: Scene Editor/State Machine Editor/Fusion etc.
  6. Panel: Toolbox/Render Targets etc.
  7. Panel: Properties
drawing-5-1732867854.png

Panels 3 through 7 above can be customized to any layout. Customized layouts can also be managed as perspectives. (For more information, see Perspective Support.)

Scene Composer User Interface

Menu bar

Each feature of Scene Composer can be selected and executed from the menu bar. The menu bar contains "File," "Edit," "View," and other major items, and each feature and various settings are arranged under these major items, just as in a general application. Each feature and setting can also be executed using the key commands at the right end of the menu bar. This page explains the functions and various settings for each major item.

File

Menu name Description Note
New Solution... Create a new solution. [ Detail ]
Open Solution... Opens an existing solution. [ Detail ]
Close Solution Closes the currently open solution. ー
Source Control Import/checkout source control. [ Detail ]
Save Solution Overwrites the currently open Solution. [ Detail ]
Save Solution As... Save the currently open solution as. [ Detail ]
Clear Solution Cache Clears the solution cache. [ Detail ]
Recent Soltions Displays recently opened solutions. [ Detail ]
Solution Reports... Displays the Solution Report. [ Detail ]
Preferences... Opens the "Preferences" dialog. [ Detail ]
Solution Options... Opens the "Solution Options" dialog. [ Detail ]
Generate Asset Library... Generate Asset Library [ Detail ]
Export SCL... Exports SCLs (Shared Component Libraries). [ Detail ]
Automation Scripts... Sets up automatic execution of user-defined scripts. [ Detail ]
Export Symbolic Names... Exports a header file (.h) with a list of symbolic names. [ Detail ]
Define application specification

Sets up application specifications (definitions for the connection between the Scene Composer solution and the CGI Panel).

 [ Detail ]
Set External Resources Path… Sets the folder where external resources will be placed. [ Detail ]
Exit Exit Scene Composer. ー

Edit

Menu name Description Note
Undo Undo the previous operation. [ Detail ]
Redo Redo the previous operation. [ Detail ]
Go To Previous Element Moves to the previous element. ー
Do Layout Apply layout. ー
Go To Next Element Moves to the next element. ー

View

Menu name Description Note
New perspective Saves a new perspective (Scene Composer layout). [ Detail ]
Delete Perspective Deletes the active perspective. [ Detail ]
Restore Default Layout Resets the Scene Composer layout to default. ー
Toolbar

Shows/hides the icons related to the Navigation/Animation/Editor Profile/Script System contained in the toolbar.

 [ Detail ]
2D Editing Utilities Enables/disables various features of the 2D scene editor. [ Detail ]
3D Editing Helpers Enables/disables various 3D scene editor features. [ Detail ]
Panels Display/Hide various panels. [ Detail ]

The Render Slots panel cannot be used unless Safety function is enabled. For more information about the Safety function, please contact our representative.

Platform

Menu name Description Note
New Display... Add a new display. [ Detail ]
New Render Target... Add a new render target. [ Detail ]
Manage Render Targets... Opens the Manage Render Targets dialog included in the solution. [ Detail ]
Device Capabilities... The specifications of the simulation device and target device are displayed [ Detail ]
SCHost Information... SCHost information is displayed. [ Detail ]

Shader

Menu name Description Note
New Shader... Add a new shader. [ Detail ]
New Shader Program... Add a new shader program. [ Detail ]
Compile Shader Compile shaders. [ Detail ]

Script

Menu name Description Note
New Script... Create a new script. [ Detail ]
Validate Script Validate a script. [ Detail ]
Start | Pause Script System Runs a script system or pauses a running script system. [ Detail ]
Stop Script System Stops the script system from running. [ Detail ]

Import

Menu name Description Note
Import Resources.... Imports various resources. [ Detail ]
Import Raw Resources... Import raw resources. [ Detail ]
Import Benchmarks... Import render benchmarks (.crsms) exported from CGI Analyzer. [ Detail ]
Import From Solution... mport various resources from existing solution files. [ Detail ]
Smart Importer Import various graphics resources via the Smart Importer. [ Detail ]
Configure Automatic Imports,,, Set up automatic import (image and fbx files only). 
 [ Detail ]
Image Update... Import images from any folder at once. [ Detail ]
Delete Unused Imports... Delete imported but unused items. [ Detail ]

Scene

Menu name Description Note
New 2D Scene... Create a new 2D scene. [ Detail ]
New 3D Scene... Create a new 3D scene. [ Detail ]
Refresh Scene Reload the active scene. [ Detail ]

Animation

Menu name Description Note
New Animation Group... Creates a new animation group. [ Detail ]
Start Animation Start an existing animation. [ Detail ]
New Animation... Create a new animation. [ Detail ]
Stop Animation Stops an existing animation that is starting. [ Detail ]

State Machine

Menu name Description Note
New State Machines... Create a new state machine. ー
Attach... Make a TCP connection to the application. ー
Validate Active State Machine Validate the active state machine. ー

Report

Menu name Description Note
HMI Report...

Opens the HMI Report dialog, where you can configure various settings related to HMI reports and create HMI reports.

 [ Detail ]
Text Size Report...

Open the Text Size Report dialog. Select the scene and culture for which you want to run the text size report and run the text size report.

 [ Detail ]

Language

Menu name Description Note
Culture Solution Options... Opens the Culture Solution option. [ Detail ]
Export Languages... Open the Select Cultures dialog. Select the language for output. [ Detail ]
Import languages Opens the Import Languages dialog. Select the file to import.
 [ Detail ]
Language Usage...

Opens the Language Usage dialog where all text properties of the solution are listed.

 [ Detail ]
Language Table...

Opens the Language Table dialog where users can add, edit, or delete translatable text.

 [ Detail ]

Help

Menu name Description Note
Help Open the CGI Studio help documentation (this document). [ Detail ]
Quick Start Guide Open the CGI Studio Basic Usage tutorial. [ Detail ]
Welcom Screen Opens the Welcome to Scene Composer dialog. ー
Hot keys.,, Opens a list of shortcut keys. [ Detail ]
Licenses... Opens the License dialog. [ Detail ]
Visit Lighthouse Opens the Lighthouse (support/forums page). ー
Feedback Opens a dialog for submitting feedback about CGI Studio. ー
About... Displays information about Scene Composer. ー

Scene Composer User Interface

Tool bar

The toolbar is lined with icons for frequently used operations.

Each number in the image below corresponds to the below icon descriptions.

drawing-7-1763364625.png
  1. Create a new solution
  2. Opne an existing solution
  3. Save solution...
  4. Open asset library generator dialog...
  5. Open safety asset library generator dialog...
  6. Run/Stop Player/Embedded Player, Update Embedded Player
  7. Select Player/Embedded Player setting (6. Select the player to launch when clicked.)
  8. Open automation scripts dialog...
  9. Undo
  10. Redo
  11. Add a new 2D scene
  12. Add a new 3D scene
  13. Add a new safety scene
  14. Select active scene
  15. Select perspective (Scene Design/Animation Design/User created perspective）
  16. Display/Hide Scene Editor
  17. Open Culture solution option dialog
  18. Select culture
  19. Create new animation
  20. Select animation
  21. Start animation
  22. Stop animation
  23. Animation fast forward speed
  24. Animation fast forward
  25. Go back to one previous active item
  26. Go forward to one previous active item
  27. Edit current profile
  28. Add a new profile
  29. Delete current profile
  30. Select profile
  31. Start the execution of the script system
  32. Stop the execution of the script system

Icons through 19 to 32 can be shown or hidden from the menu bar under [ View > Toolbars ]. (Animation: 19 to 24, Navigation: 25 and 26, Editor Profiles: 27 to 30, Scripting System: 31 and 32)

By mousing the separators in the toolbar, you can customize the placement of icons on a separator-by-separator basis.

Scene Composer User Interface

Panel

The Scene Composer user interface is composed of parts called panels. This page describes each panel, for which corresponding explanations can be found below.

drawing-4-1738545034.png

This page is explained according to the default layout for convenience.

1. Solution Explorer/Imports

Panel name Description Note
Solution Explorer

All items in the solution are displayed.

You can add new items, edit existing items and so on.

 [ Detail ]
Imports

Displays all items imported into the solution.

 [ Detail ]

2. Scene Tree/Search/Output etc.

Panel name Description Note
Scene Tree

All nodes in the scene are displayed in a tree format.

You can add, edit, delete, etc. nodes.

 [ Detail ]
Search

Displays trace information about the Scene Composer.

 [ Detail ]
Output

Displays trace information about the Scene Composer.

 [ Detail ]
Problems

Displays errors/warnings/messages.

 [ Detail ]
Text Size Report

Displays a text size report.

 [ Detail ]

3. Scene Editor/State Machine Editor/ Fusion etc.

Panel name Description Note
Scene Editor

The main panel of Scene Composer allows you to view and edit the nodes contained in a scene.

 [ 2D Scene ]
[ 3D Scene ]
Fusion

Various actions can be configured by adding Fusion nodes to the nodes selected in the scene tree.

 [ Detail ]
State Machine Editor

You can edit the selected state machine in the Solution Explorer.

 [ Detail ]
Shader Editor

You can edit the selected shaders in the Shaders panel.

 [ Detail ]
Script Editor

You can edit the selected script in the Solution Explorer or in the Toolbox.

 [ Detail ]
SCML Editor

You can edit the SCML.

 [ Detail ]
Appearance Editor

You can edit node attachment templates.

 [ Detail ]
Graph Dependencies

Visualize the dependencies of the nodes in the scene tree.

 [ Detail ]

Transition Rules Editor

/Transition Execution

Transitions between scenes can be set up.

 [ Detail ]

Player/CGIPane

The Embedded Player validates solutions created with Scene Composer.

 [ Detail ]

4. Toolbox/Render Targets etc.

Panel name Description Note
Toolbox

Items (controls, nodes, effects, behaviors, and scripts) that can be added to scenes and other objects are listed.

 [ 2D Toolbox ]
[ 3D Toolbox ]
RenderTargets

Create/edit new render targets.

[ Detail ]
Tempates

View templates included in the solution.

[ Detail ]
Diagram Bird's Eye

View a bird's eye view of the Fusion diagram or the entire State Machine Editor.

[ Detail ]
Scopes

Set up camera culling and light culling.

[ Detail ]
Shaders

Shaders included in the solution are displayed.

[ Detail ]
Render Statistics

A performance indicator for the display is shown during rendering.

[ Detail ]
Text Search

This panel allows you to search for text contained in the solution or selected scenes.

[ Detail ]

5. Properties

Here displays the properties of the selected item in the Solution Explorer, scene tree, and various editors. You can also edit the value of each property.

Animation Panels

The animation-related panel appears when [ Animation Design ] is enabled via the mode-switching button on the toolbar.

drawing-4-1738545071.png
Panel name Description Note
Animation Timeline

Graphically view or edit animation-related settings.

[ Detail ]
Animation Values

View or edit animation-related settings with information in text format.

[ Detail ]
Animation Configuration

Nodes in the solution are displayed in a tree format, with only the nodes related to the active animation highlighted.

 [ Detail ]

Other panels

Panel name Description Note

Live Preview

The definition of the data binding used in the selected scene can be displayed. You can also simulate the behavior of data binding by dynamically setting values for the definitions.

[ Detail ]

Candera Logging

Trace information about the Candera Graphic Engine is displayed.

[ Detail ]
Widgets User custom widgets can be used.
 [ Detail ]
Render Order Bins Manage the rendering order in a 3D scene.
 [ Detail ]

CGI Panel Overview

The CGI Panel (Player) is an application which provides insides into a generic CGI Studio application driven by the courier messaging framework. It also provides samples of several features. These features are core components like showing or hiding views or trigger animations but also sample implementation of models with databinding.

On top of that, the CGI Panel (Player) shall be an application to test and play around with an asset and the functionality of the framework itself. The focus is not on the customer specific logic but on the core logic of the customer’s specific asset. Therefore, some of the content within the application is not required for customer made applications. Especially the Features and Sample Components folder.

For more information on CGI Panel, please refer to this Chapter.

Controls and Behaviors

Controls and Behaviors

A Control is a reusable structure for a control that can have specific functionality. This means that a Control can exist of Behaviors (or Widgets). It is recommended that a Control is composed of Behaviors instead of Widgets because Behaviors are more flexible. There is no way to implement a Control as its functionality is delegated to the Behaviors it consists of. A Control is created in SceneComposer only while a Behavior must be implemented. It is possible to expose the properties of a Behavior to the Control which makes them public in the scene in which the Control exists.

More detailed information about Controls and Behaviors can be found in chapter Controls and Behaviors.

Predefined Controls

SceneComposer comes with a variety of predefined Controls. They are placed in the Construction Kit which is referenced in every sample Solution. They consist of HMI controls that allow to design a user interface in a simple way. Controls for Cluster- and IVI-HMIs exist. The IVI-Controls even react on touch-input. Sample Controls for IVI use cases are a button, list, slider, check-box and radio button. For Cluster-HMIs, Controls for telltales, progress-bars and gauges exist, for instance.

For a complete list of controls please refer to Predefined Controls.

drawing-5-1726816811.png

Predefined Behaviors

SceneComposer also includes a huge variety of predefined Behaviors in order to add dynamics to a static scene structure. Behaviors can easily be used in Scene-Composer by people without any coding knowledge. With their configurable properties they can be adapted to apply in multiple different scenarios. Reacting on a user's input or setting a timer or a condition for a certain action, all those things can be configured using the predefined behaviors that are included in the Construction Kit that comes with CGI Studio SceneComposer. For a complete list of behaviors please refer to Predefined Behaviors.

drawing-5-1726816874.png


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.

Quick Start Guide

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.

Quick Start Guide

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.
Quick Start Guide

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.

Quick Start Guide

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.

Quick Start Guide

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.

Quick Start Guide

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.

Quick Start Guide

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.

Quick Start Guide

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.

Getting Started on Android

Getting Started on Android

Introduction

This manual gives brief instructions to get the Matlab-Connector sample applications built and deployed on Android. Namely, those are MLC-Cluster and MLC-Signals.

This Guide addresses the experienced user, therefore the obvious points will not be explained here. Topic are only the essential steps, but not things like the usage of the build tool CMake.

 

Abbreviations / Terminology

Abbreviation Terminology
CANDERA CANDERA GmbH
ADB Android Debug Bridge, an important management tool
Getting Started on Android

Prerequisites

CMake GUI

For building, the tool cmake-gui is needed. Navigate to https://cmake.org/download/ and download the latest stable version for your PC, 64bit etition and install it.

Ninja build tool

For building android applications, yet another build tool is required.

 

Android Studio

Getting Started on Android

Building an Application Library

Getting Started on Android

Deploying the Asset Library

Before an android application can be launched, the asset library has to be deployed on the Android device. Now the tool ADB (Android Debug Bridge) comes into play, which is part of the sdk-platform tools. It is a command line tool which has to be called e.g. within a Windows CMD. ADB is a general device management tool for Android.

The most important tasks are:

The most important commands for this work are:

drawing-5-1706252739.png

 Steps for deploying the AssetLib on the Android device:

 /sdcard is the internal or external storage on Android. That’s the location, where the app expects the asset library.

Getting Started on Android

Generating and deploying an Android-App

Now an android studio project skeleton is needed for constructing a so-called apk file, which is the format of android app packages, like those on Google AppStore.

Getting Started on Android

Trouble-Shooting