Skip to main content

Focus Management

Focus Navigation on Computer

The user of the created HMI wants to move the focus from one control to another. When using the computer, usually a keyboard is used for focus navigation.

On a computer, the user can use the following keys to move the focus from one control to the other:

- TAB move the focus to the next control
- CTRL + TAB move the focus to the previous control

On targets without a keyboard, different input methods can be used for changing the focused control. Automotive targets use the rotary for focus navigation. Therefore, focus navigation is only loosely coupled with a keyboard.

 

Focus Navigation in CGI Studio

This section uses a phone keypad like the one below to demonstrate the focus changes.

drawing-4-1676537028.png

The focused button in the example keypad above is the fifth button (Button 5), whose border is significantly wider.

Focus navigation can be performed in the Player. To start the Player click the play button next to "Generate and Play" in the toolbar below the menubar.

drawing-4-1676537050.png

Next/Previous Navigation in CGI Studio

Next Navigation: After selecting a focusable control the focus can be moved to the next focusable control by pressing the TAB key of the keyboard. If you repeat pressing the TAB key, the focus will move to the next until the last focusable node is reached. Pressing TAB on the last focusable node will bring the focus back to the first node again.
Focus order when continuing pressing the TAB key: 5-6-7-8-9-0-1-2-3-4-5-6-7-...

Previous: To navigate the focus back to the previous focusable control, press the CTRL + TAB keys on the keyboard. If you repeat pressing the CTRL + TAB keys, the focus will move to the previous until the first focusable node is reached. Pressing CTRL + TAB on the first focusable node will bring the focus back to the last node.
Focus order when continuing pressing the CTRL + TAB keys: 5-4-3-2-1-0-9-8-7-6-5-4-3-2-1-...

If no focusable control has the focus and a key that navigates the focus (e.g. a key of the cursor control pad or the TAB key) is pressed, the focusable control that has the lowest TAB-order gets the focus.

Geometrical Navigation in CGI Studio

Geometrical Navigation means a navigation in one of the following directions: Left, Right, Up, Down, Up Left, Up Right, Down Left, Down Right
On the computer, navigations in those directions can be performed using the cursor control pad or the numeric pad (for diagonal navigation) of the keyboard.

The following describes the focus change that happens when repeatedly clicking the noted navigation key in the example keypad above. Initally, for every noted navigation key, the focus is on the fifth focusable control as in the image of the keypad above.

  • Navigate Left: 5-4
  • Navigate Right: 5-6
  • Navigate Up: 5-2
  • Navigate Down: 5-8-0

focus_left.png

focus_right.png

focus_up.png

focus_down.png
  • Navigate UpLeft: 5-1
  • Navigate UpRight: 5-3
  • Navigate DownLeft: 5-7
  • Navigate DownRight: 5-9

focus_upleft.png

focus_upright.png

 

focus_downright.png

 

Managing the Focusable Nodes

Each keyboard focusable behavior notifies the KeyboardFocusManager about its view getting activated or deactivated.

  • RegisterNavigation is called when the view gets activated.
  • DeregisterNavigation is called when the view gets deactivated.

 

Concept of the Next/Previous Navigation

The logical order of the focusable nodes is defined by the following criteria:

  1. The tab order of its scene: This order is stored as a dynamic property and can be set by a KeyboardFocusTabOrderBehavior.
  2. The asset order of its scene: This order is defined by the order in which the scene is stored in the asset.
  3. Its tab order: This order is stored as a dynamic property and can be set by a KeyboardFocusTabOrderBehavior.
  4. Its tree order: The tree order in pre-order tree traversal.

KeyboardFocusTabOrderBehavior
The tab order of a node is defined as relative or absolute. The default order is relative.

  • relative considering the parent inherited tab order
  • absolute will stop the inherited tab order

The next/previous navigation updates the logical order for each next/previous navigation event and sorts the focusable nodes, finds the currently focused node in that list and transfers the focus to the next/previous entry in the list.

 

Concept of the Geometrical Navigation (Left, Right, Up, Down, Up Left, Up Right, Down Left, Down Right)

For each geometrical navigation event the bounding box in the display of the node is calculated per camera in the scene. Each keyboard focusable node has one entry in the lookup list for each camera.

The keyboard focused node is extended by the camera that is responsible for the focus. A scene may have several cameras and the focus will be caused by one of them.

The following events may trigger a change of the keyboard focus:

  • Navigate to the Left
  • Navigate to the Right
  • Navigate Up
  • Navigate Down

focus_left.png

focus_right.png

focus_up.png

focus_down.png
  • Navigate to the UpLeft direction
  • Navigate to the UpRight direction
  • Navigate to the DownLeft direction
  • Navigate to the DownRight direction

focus_upleft.png

focus_upright.png

focus_downleft.png

focus_downright.png
focus_left.png
 Navigate to the Left:

1. Find the nearest node of the nodes that are at least partially within the top and the bottom boundary of the keyboard focused node. The distance of the right node boundary to the left boundary of the keyboard focused node is minimal. Limit the right node boundary to the left boundary of the keyboard focused node. For multiple matches use the same order criteria as for the previous/next navigation and take the first one.
2. If no node was found, find the nearest node (where the corner to corner distance is minimal) of the nodes that intersect the left sectors:

  • corner to corner distance for nodes in the top left sector: take the node's bottom right corner (limit that corner to the left boundary of the keyboard focused node) and the keyboard focused node top left corner and calculate the square distance.
  • corner to corner distance for nodes in the bottom left sector: take the node's top right corner (limit that corner to the left boundary of the keyboard focused node) and the keyboard focused node bottom left corner and calculate the square distance.
  • All other sectors are not on the left of the keyboard focused node.
  • For multiple matches use the same order criteria as for the previous/next navigation and take the first one.

focus_right.png

 Navigate to the Right:

The same as navigation to the left but in this case, left is right, right is left, top is top and bottom is bottom in the description. Imagine a mirrored image.

focus_up.png

 Navigate Up:

The same as Left navigation but left is bottom, right is top, top is left and bottom is right in the description. This is a rotation by 90° counter clock wise

focus_down.png

 Navigate Down:

Navigate Down: The same as Left navigation but left is top, right is bottom, top is right and bottom is left in the description. Which is a rotation by 90° clock wise.

focus_upleft.png

 Navigate to the UpLeft direction:

Find the nearest node (corner to corner distance is minimal) of the nodes the intersect the top left sector:

  • corner to corner distance: take the node's bottom right corner (limit that corner to the left and top boundary of the keyboard focused node) and the keyboard focused node top left corner and calculate the square distance.
  • For multiple matches use the same order criteria as for the previous/next navigation and take the first one.

focus_upright.png

 Navigate to the UpRight direction:

The same as UpLeft navigation but left is right, right is left, top is top and bottom is bottom in the description. Imagine a mirrored image.

focus_downleft.png

 Navigate to the DownLeft direction:

The same as UpLeft navigation but left is bottom, right is top, top is left and bottom is right in the description. This is a rotation by 90° counter clock wise.

focus_downright.png

 Navigate to the DownRight direction:

The same as UpLeft navigation but left is top, right is bottom, top is right and bottom is left in the description. This is a rotation by 90° clock wise.

Back to top