Overview

This sampletutorial aims to help users master the state transition and behavior control mechanisms between multiple scenes using the state machine functionality in CGI Studio. Specifically, the tutorial covers a step-by-step approach to developing practical HMI (Human-Machine Interface) applications, including UI construction, scene management, switching behaviors based on user interactions, managing history, conditional branching, and displaying the number of aincoming simplecalls.

IVI

Through demonstratesthis tutorial, users will learn the configurationfollowing:

possibilitiesandfunctionality Page Theme

Main work content

Part 1 Basics of Scene Composer'sComposition Stateand Machine.UI Design

Understanding how to create and manage multi-scene UIs in CGI Studio.

Part 2 Basics of State Machine inand Transition Control

Learning how to control scene transitions using a waystate somachine.

that

Recreating a global state machine and linking it to scenes.

Controlling scene visibility using OnEntry/OnExit actions.

Configuring transitions using key inputs (left/right arrow keys).

Verifying transitions and behaviors in the userPlayer.

is able Part 3 Transition Optimization with Subcharts and History State

Using Subcharts and History State for advanced scene management.

Converting the Media State into a Subchart to switchmanage fromsub-scenes for Radio, Bluetooth, and USB.

Implementing History State to retain information about the previously active scene.

Configuring bidirectional transitions and state restoration between scenes.

Verifying scene toselection and behavior using the up/down arrow keys.

Part 4 Adding Incoming Call Scene and Popup Control

Implementing popup control and state transitions for incoming calls.

Creating an IncomingCall scene based on the existing Phone scene.

Controlling the display with the keyboard'sEnter arrowkey keys.for call display and the ESC key for hiding.

Using

Constructing CallActive/CallInactive state machines.

Customizing the Statevisuals Machine'susing HistorySolidColorNode.

State, the following scenario willbePart implemented:5
TheCounting MediaIncoming scene has options for Radio, BluetoothCalls and USB.Updating TheUI user can

Understanding e.g. change the Media source from Radio (default)how to Bluetoothsend and switch to the Navigation or Phone scene. When he comes back to the Media scene, the correct media source will be selected.

With a second global State Machine an incoming call can be simulated. The incoming call overlay is displayed above the IVI scenes (Navigation, Media and Phone). While this overlay is displayed the user can navigateevents through the IVIstate scenesmachine inand update the backgroundUI. as usual.

• Values can be sent from the State Machine to the scenes, triggering the content of the scene to change. Using this mechanism,

  Adding a countertext countingnode receivedwith calls“Received canCalls: be%d” configured that will be displayed into the Main Menu Scene.scene.

Counting the number of incoming calls when entering the CallActive State.

Sending relative values as events using Send Value As Event.

Displaying call count information in real time using Format String.

The following chapters describe these scenarios. Please note that they are based on each other and it is recommended to work them through from Chapter 1 to Chapter 5.