Skip to main content

Part 3: Configure Behaviors

The following interactions can be configured with Behaviors using Fusion.

  • Changing the state of the temperature progress bar by pressing the heater buttons
  • Change in playback time value by moving the progress bar for playback music

Configuring the Music's Playback Time Slider

  1. In the Scene Tree panel navigate to and select the Slider control, which can be found following the path below.
    • The Slider Control is selected.
      Scene Tree Path
      IVI_Sample > IVI_Sample > Music > Slider
  2. In the Menu select [View > Fusion > Fusion].
    • The Fusion editor will be opened, hiding the Scene Editor.
    • The Slider Fusion Node is displayed as Top node with a set of properties.

  3. In the [Slider] Fusion Node drag the Behaviors connector circle to the right and release the mouse.
    • A Select Behavior dialog will be opened.
    • This dialog has an input field on top and a list of behaviors organized as a tree on the bottom.
    • This list of behaviors is similar to the one in the Toolbox panel's [Behaviors] section.

  4. In the Select Behavior dialogue's input field start typing "Forward Value".
    • While you are typing the list of behaviors gets smaller as the content of the input field serves as a filter.

  5. In the Select Behaviors dialog double-click the Forward Value behavior.
    • In Fusion a new [Forward Value] node is created, which is connected to the Slider's Behaviors connector.

  6. In the [Forward Value] node click the search icon next to the property "Target Node".
    • The Choose Item dialog will be opened.

  7. Select the IVI_Sample scene's DigitalClock_Time control, which can be found following the path below and click [OK].
    • DigitalClock_Time is set as Forward Value's TargetNode.
    • When the Slider's value is changed, the value will be forwarded to DigitalClock_Time.
      Path IVI_Sample > IVI_Sample > Music > DigitalClock_Time


Configuring Seat Heater Setting

Creating Fusion Nodes

  1. In the Scene Tree panel select the Seat_Right's "Icon_Button_-", which can be found following the path below.
    • Fusion displays the Fusion Node for "Icon_Button_-".
      Path IVI_Sample > IVI_Sample > Comfort> Seat_Right > Icon_Button_-
  2. Drag the Icon_Button's Behaviors connector to the right and release the mouse button.
    • The Select Item dialog will open.
  3. Find the "Event Handler" behavior and double-click it.
    • A Fusion node for the Event Handler behavior is created.
  4. Using the Event Handler's Condition connector connect a Check Click condition.
    • A Fusion node for the Check Click condition is created.
  5. Using the Event Handler's Actions connector, connect a Send Value As Event behavior.
    • A Fusion node for the Send Value As Event behavior is created.
  6. Select the 3 Fusion Nodes you have just created (Event Handler, Check Click, Send Value As Event) and copy them either using the context menu "Copy" or via the keyboard shortcut <Ctrl + C>.
    • Fusion Nodes are copied and ready to be pasted into another Fusion diagram.
  7. Select the following IconButtons one by one and paste these Fusion Nodes into their Fusion diagrams either using the context menu "Paste" or via the keyboard shortcut <Ctrl + P>.
    • EventHandler, Check Click condition and Send Value As Event behavior have been created for all 4 seat heating Icon_Buttons.

 

Configuring Fusion Nodes

When pressing Icon_Button_-, the value should be decreased (-1,00) and when pressing Icon_Button_+, the value should be increased (+1,00). These value changes need to be reflected in the corresponding ProgressBar, which will be set as TargetNode.

  1. In Fusion configure the Send Value As Event Nodes that you created in "Creating fusion nodes" as in the table below.
    • The Send Value As Event Nodes are fully configured and functional.
      Seat_Right
      Icon_Button_-
      Icon_Button_+
      TargetNode
      Seat_Right > ProgressBar
      Seat_Right > ProgressBar
      Value
      -1,00
      1,00
      Change Value
      Relative
      Relative

      Seat_Left
      Icon_Button_-
      Icon_Button_+
      TargetNode
      Seat_Left > ProgressBar
      Seat_Left > ProgressBar
      Value
      -1,00
      1,00
      Change Value
      Relative
      Relative

Next, we will add a Forward Value behavior to the ProgressBars of Seat_Right and Seat_Left. Drag and Drop a ForwardValue behavior from the ToolBox onto the ProgressBar. Select the Forward Value Behavior to view the behavior's Properties in the Properties panel. Configure the TargetNode to the TextValue_Temperature of the respective group. (If it is a ProgressBar of Seat_Right, set the TextValue_Temperature of Seat_Right.)

drawing-5-1729853505.png

Run in Player

Save your solution and click the Play button in the menu bar to run CGI Player.

drawing-5-1729854630.png
  • In the Music section: Click onto the progress bar below the Song title or drag it around. You can see that the progress time is changed according to your operation.
  • In the Comfort section: Press either +/- buttons in Seat heater section and watch the value and progress bar being updated according to your operation.
drawing-5-1695991627.png