Remote Control

Viewers interact with Senza apps using a remote control, rather than a mouse and keyboard or a touch interface. If you are adapting an existing app that was not designed for a television, you'll want to consider adapting the navigation paradigm to support remote control based navigation. This work falls into these categories:

• Adding a key event listener for remote control button presses.
• Adding focus to user interface elements so the user can see what is selected.
• Navigating using the arrow keys to move focus between elements.
• Performing an action using the OK button (Enter key).
• Letting them go back to the previous screen using the back button (Escape key).
• Finding alternative options to keyboard input.

This is in addition to work that you would need to do to make your app look good on a TV:

• Fixing the resolution to 1920 x 1080 standard definition.
• Hiding scrollbars, and adapting the content so that it isn't necessary to scroll up and down.
• Making sure user interface elements are large enough to be viewed from across the room.

Button presses

When the viewer pushes buttons on the remote control, these button presses will be sent over Bluetooth to the cloud connector, and then over the internet to the browser running in the cloud. From your app's point of view, these button presses will be received exactly as if the user had typed the equivalent keys on the keyboard.

Every app should have a key down event listener pretty much identical to this one:

document.addEventListener("keydown", async function(event) {
	switch (event.key) {
    case "Enter": enter(); break;
    case "Escape": escape(); break;
    case "ArrowUp": up(); break;
    case "ArrowDown": down(); break;    
    case "ArrowLeft": left(); break;
    case "ArrowRight": right(); break;
		default: return;
	}
	event.preventDefault();
});

How you implement the enter(), escape(), up(), down(), left() and right() functions is up to you and depends on your use case.

For more information, see Remote Input.

Adding focus

When the user uses a mouse, they move a pointer around a screen and then click on an element to perform an action. With a touch interface, they simply move their finger over the screen and tap things. With remote control based navigation, this is typically a two-step process: first they move the focus between elements with the arrow buttons, then they press the OK button to perform an action on the selected element.

An easy way to indicate focus is by defining a CSS style that distinguishes the selected element. You could change the color, size, font, style, shadow, or pretty much anything you can do with CSS.

.selected {
    color: #43C6DB;
}

As you move the focus with the arrows, you can use JavaScript to add the selected class to the newly selected element and remove the same class from the previously selected element:

function select(element) {
  element.classList.add("selected");
}
 
function deselect(element) {
  element.classList.remove("selected");
}

Navigating

You can use the arrow buttons for navigating around the page. The two main paradigms for selecting elements are:

1. Keeping the elements in place on the page, and moving the focus from one element to the next.
2. Moving all the elements so that the element with focus stays centered on the screen.

For example, if you are moving the focus between items in a list, you could implement it like this:

function left() {
    deselect(items[index]);
    index--;
    select(items[index]);
}
 
function right() {
    deselect(items[index]);
    index++;
    select(items[index]);
}

Whenever the user presses left or right, we deselect the current element, increment or decrement the index, and then select the current element.

Performing an action

What the OK button does is entirely dependent upon your use case. For example, you could use it to select an option, move to another screen or play a video.

Going back

What it means to "go back" depends upon how your website is implemented. If you are using a framework such as Angular or React to build a single-page app with state management, this will be implementation specific.

An extremely simple function is equivalent to clicking the back button in the browser, and can be useful if your site is implemented using multiple pages or if you want to quit your app and return to where you came from.

function escape() {
  history.back();
}

(Note that Content Apps will run in separate tenants, so there will be a separate functionality for quitting your app and returning to the Content Hub.)

Keyboard alternatives

There's not a convenient way to type using a remote control, so if your application calls for keyboard input you may consider some alternative options.

• Device authentication: Instead of asking the user to sign in using a username and password, it's better to use Device Authentication or QR Code Authentication. If the device is registered to a user in your backend, simply having the device is enough to access the user's account and you don't need to ask them to sign in.
• Mobile: You can pair a mobile device and use the keyboard on that device to type text into your app. See the Smart Remote tutorial for an example.
• Voice: If the user wants to search for content or interact with your application in other ways, consider using voice instead. See the Smart Remote tutorial for an example.
• Onscreen keyboard: You could also consider implementing an onscreen keyboard, although this does not provide a great user interface experience.

Mouse alternatives

• Mobile: See the Smart Remote tutorial for an example of sending gesture input from a mobile device to your app on the TV.

Examples

Here are a few tutorials that illustrate some of the concepts above.

• Video Tutorials — Using arrows to select items in a list
• Selecting Links — Navigating between links on a page.
• Grid Squares — Navigating between squares in a grid.
• 3D Model — Adding remote navigation to a WebGL model.
• Board Game — Navigating between elements in a complex configuration.
• Text Game — Adapting a text-based adventure game.