Skip to main content

Part 4: Add an Incoming Call

If CGI Studio Scene Composer supports multiple global StateMachines, you can add an incoming call scene that will pop up on a pressing e.g. key_enter and vanishes again when pressing e.g. key_escape.


Prepare an Incoming Call Scene

In the Solution Explorer, copy the already existing Phone scene and paste it into the Scenes folder using CTRL+C and Ctrl+V. Rename the new scene to "Phone IncomingCall".

drawing-7-1676622248.pngdrawing-5-1694770684.png

Open the scene "Phone IncomingCall", select the TextNode and change its text to "Phone – Incoming Call" in the Properties Panel. Add a line-break into the Text property by keeping Key_Shift pressed while hitting Key_Enter. Adjust the TextNode's Position in the Transformation properties.

drawing-7-1676622295.pngdrawing-5-1694771925.png

To make this Incoming Call more noticeable, add a SolidColorNode into the background of the TextNode. To do this, drag and drop a SolidColorNode from the ToolBox into the Scene Editor.

Make sure that the SolidColorNode is placed in the background of the TextNode. You might want to change the front and back order of the TextNode and the SolidColorNode in the Scene Tree by dragging the TextNode onto the "Phone IncomingCall" item. This will bring the TextNode into the foreground. You can see the correct order of this scene's nodes in the picture on the right below.

drawing-7-1676622346.pngdrawing-5-1694772095.png

The next step is to change the SolidColorNode's position.

drawing-7-1676622374.pngdrawing-5-1694776499.png

To adjust the SolidColorNode's size and color select the SolidColorNode in the Scene Tree Panel. This makes its behaviors and effects visible just a few centimeters to the right in the same panel. Select the SolidColorBrushBlend effect to see its properties in the Properties Panel.

drawing-7-1676622400.pngdrawing-5-1694772332.png

Change the FillColor by clicking on the rectangle or use the input fields for Red, Green and Blue. Change the size so that the SolidColorNode works as a background.

drawing-7-1676622420.pngdrawing-5-1694772729.png
Adjust the Scene's Camera

The Phone IncomingCall scene should be rendered above any other content scene. Therefore we have to correct render order in the Render Targets Panel. Our Phone IncomingCall Camera needs to have Sequence Number 4, the Swap Camera's Sequence number has to be increased as well (5).

drawing-7-1676622471.pngdrawing-5-1694774813.png

Create IncomingCall State Machine

Create a new State Machine to handle the Phone IncomingCall scene using the menu and change the name to IncomingCall_StateMachine.

drawing-7-1676624020.pngdrawing-5-1694775032.png

You can see the newly created StateMachine in the Solution Explorer. Double click the IncomingCall StateMachine in the Solution Explorer to edit it in the StateMachine Editor. In the Properties Panel change the State Machine to global.

drawing-7-1676624081.pngdrawing-5-1694775146.png

Add States for Active and Inactive Call

Drag and Drop an Initial State and two normal States into the State Machine Editor. And change the states names to something more meaningful like Call Inactive and Call Active.

You can rename a state by selecting it in the list on the left of the State Machine Editor and change the name in the Properties Panel. Or select the state in the list, right-click and use the shortcut menu.

drawing-7-1676624133.pngdrawing-5-1694775413.png


Configure the States - OnEntry and OnExit Actions

Select the CallActive State and add an OnEntry as well as an OnExit Action in the Properties Panel. Do this by clicking on the + sign.

  • For the OnEntry Action configure a Transition Request of type Activate. Choose the Phone IncomingCall Scene as Identifier. To choose the identifier, click on the magnifying glass icon and select the Scene in the Select Item dialog.
  • For the OnExit Action configure a Transition Request of type Deactivate. Choose the Phone IncomingCall Scene as Identifier.
drawing-7-1676624374.pngdrawing-5-1694775605.png

Insert Transitions

Connect these States with transitions:

  • From the initial state to state Call Inactive.
  • From state Call Inactive to state Call Active.
  • From state Call Active to state Call Inactive.
drawing-7-1676624408.pngdrawing-5-1694775984.png

Configure State Transitions

Configure the State Transitions to define which keypress will trigger an incoming call and which keypress will end the incoming call. In our example we will configure that the Key_Enter will initiate the incoming call and the Key_Escape will end the incoming call.

  • Select the Transition that goes from the Call Inactive state to the Call Active state. In the Properties panel change the name to something more meaningful like Activate Call. Define the Key Event and the KeyCode as in the picture below.
  • Select the Transition that goes from the Call Active state to the Call Inactive state. Change its name to Deactivate Call and define the Key Event and the KeyCode as you can see below.
drawing-7-1676624456.pngdrawing-5-1694776243.png

Test the Configuration - Start the Player

Save your solution and start the player.

drawing-7-1676624487.pngdrawing-5-1694776350.png

After the Player is opened, you can see the Navigation Scene. When Pressing the Key_RightArrow, the transition to the Media scene is performed and the selected device is the default device "Radio". If you press the Key_Enter, the Incoming Calls Scene gets visible, the Media Scene is still displayed in the background.

drawing-7-1676624550.pngdrawing-5-1694776617.png

You can navigate through the scenes using the Key_RightArrow to arrive at the Phone Scene while the Incoming Call is visible. To end the incoming call, press Key_Escape and the Phone IncomingCall Scene is inactive again, only the Phone Scene is active.

drawing-7-1676624600.pngdrawing-5-1694776717.png