Skip to main content

Overview

This tutorial 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 incoming calls.

Through this tutorial, users will learn the following:

Page Theme

Main work content
Part 1 Basics of Scene Composition and UI Design

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

  • Building 9 scenes including Main Menu, Navigation, Media, Phone, etc.

  • Manipulating text nodes, overlay layouts, and node positioning.

  • Adding Clear/Swap scenes to manage buffers and control sequences.
Part 2 Basics of State Machine and Transition Control

Learning how to control scene transitions using a state machine.

  • 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 Player.
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 manage sub-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 selection 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 Enter key for call display and the ESC key for hiding.

  • Constructing CallActive/CallInactive state machines.

  • Customizing the visuals using SolidColorNode.
Part 5 Counting Incoming Calls and Updating UI

Understanding how to send events through the state machine and update the UI.

  • Adding a text node with “Received Calls: %d” to the Main Menu 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.

 

 

 

Back to top