Skip to main content

Handling Remote Control

Hosanna UI provides robust support for handling remote control input, making it easy to build TV and set-top box applications that respond to user navigation and actions.

How Remote Control Input Works​

Hosanna UI abstracts remote control events and provides a unified way to handle navigation (arrows), selection (OK/Enter), back, and other remote-specific keys. This allows you to:

  • Navigate between focusable UI elements (buttons, lists, inputs, etc.)
  • Trigger actions on selection or key press
  • Customize focus behavior and key handling for advanced scenarios

Example: Handling Remote Navigation​

import { Rectangle } from 'hosanna-ui/views/primitives/Rectangle';
import { HGroup } from 'hosanna-ui/views/groups/HGroup';
import { Spacer } from 'hosanna-ui/views/groups/Spacer';
import { VGroup } from 'hosanna-ui/views/groups/VGroup';

VGroup([
  HGroup([
    Rectangle({ width: 100, height: 100, color: '#FF0000' }),
    Rectangle({ width: 300, height: 100, color: '#00FF00' })
  ]).itemSpacing(30),
  Spacer({ height: 50 }),
  HGroup([
    Rectangle({ width: 100, height: 100, color: '#FF0000' }),
    Rectangle({ width: 300, height: 100, color: '#00FF00' })
  ]).itemSpacing(30)
])

In this example, users can use the remote's arrow keys to move focus between rectangles. Pressing OK/Enter can trigger actions if you attach event handlers.

Custom Key Handling​

You can override or extend key handling by using the onKeyEvent handler on focusable views:

Button({
  text: 'Press Me',
  styleKey: 'controls.Button.primary',
}).onKeyEvent((event) => {
  if (event.key === 'ArrowLeft') {
    // Custom behavior for left key
    return true; // Prevent default
  }
  return false; // Allow default
})

Remote Debugging​

Hosanna UI includes a remote debug server and panels for inspecting and interacting with your app remotely. This is useful for:

  • Viewing the current focus state and view hierarchy
  • Sending remote control events for testing
  • Debugging navigation and input issues

To enable remote debugging, launch your app with the appropriate debug options or connect via the provided debug UI overlay.

For more advanced scenarios, see the API docs and explore the remote debug utilities in the hosanna-ui source tree.