Guidelines on how to adapt your app navigation to Titan OS controls and customizable input methods. Whether you’re using a remote control or an on-screen keyboard, the options are designed to enhance your interaction with the device.
Typically, the remote control facilitates standard 5-way navigation with additional physical keys serving as shortcuts for common operations. The following buttons are available for application use:
Button | App Usage |
---|---|
OK | Select/Enter |
Up Arrow | Moves focus to up |
Right Arrow | Moves focus to the right |
Down Arrow | Moves focus to down |
Left Arrow | Moves focus to the left |
Back | Returns to the previous panel, or returns to the Home screen if there is no previous page. |
Number Buttons | Input number |
Color Buttons: Red, Green, Yellow, Blue | Customizable by the app |
Video control buttons: play, pause, stop, fast forward, rewind | Control video playback |
Button | key | keyCode | Keycode HTML5 |
---|---|---|---|
Enter | "Enter" | 13 | VK_ENTER |
Left | "ArrowLeft" | 37 | VK_LEFT |
Down | "ArrowDown" | 40 | VK_DOWN |
Right | "ArrowRight" | 39 | VK_RIGHT |
UP | "ArrowUp" | 38 | VK_UP |
0-9 | "Numpad0" -"Numpad9" | 48 -57 | VK_0 - VK_9 |
Back | "Backspace" | 8 | VK_BACK |
Red | "ColorFORed" | 403 | VK_RED |
Green | "ColorF1Green" | 404 | VK_GREEN |
Yellow | "ColorF2Yellow" | 405 | VK_YELLOW |
Blue | "ColorF3Blue" | 406 | VK_BLUE |
Play | "MediaPlay" | 415 | VK_PLAY |
Pause | "MediaPause" | 19 | VK_PAUSE |
Play/Pause | "MediaPlayPause" | 179 | VK_PLAY_PAUSE |
Stop | "MediaStop" | 413 | VK_STOP |
Fast fwd | "MediaTrackNext" | 417 | VK_FAST_FWD |
Rewind | "MediaRewind" | 412 | VK_REWIND |
Channel UP | "PageUp" | 33 | VK_CHANNEL_UP |
Channel DOWN | "PageDown" | 34 | VK_CHANNEL_DOWN |
The Back/Return button is a mandatory button on the remote control to go back or close the app. The app may handle the Back/Return key event. If it handles the Back/Return key, the app must handle both 8
/ VK_BACK
and VK_BACK_SPACE
to ensure compatibility between current and legacy devices. On the remote control, the key may be marked with “Back”, “Return” or similar. The Back/Return key should provide the user with typical back navigation, and finally, an exit path via window.close();
to leave the app and return to the previous screen.
NOTE: Ensure the app does not use incorrect keycodes like 27
(ESC
key) for
the back key.
In case of multi-page application: The app should use the historical behavior like window.history.go(-1)
Back Behavior: window.history.go(-1)
Clean Exit:
In case of single-page application: The app should use hierarchical behavior.
To Exit the app, use window.close()
method.
Every single key press operation consists of corresponding keydown and keyup events. To prevent processing a key twice, act on either the keydown event or the keyup event, not both. Handling both events can lead to overlapping actions. It is most common to act on keydown.
Description: Actions are triggered twice due to handling both keydown and keyup events.
Solution: Ensure the app handles only one of the events, preferably the keydown event.
Description: The app listens for the wrong keycode (e.g., 27 instead of 8).
Solution: Update the app to use the correct keycode (8) or the constant window.VK_BACK for better readability.
Description: The back key does not perform the expected action, such as navigating to the previous screen.
Solution: Verify the keycode handling in the app and ensure it aligns with TitanOS standards. Check if VK_BACK is implemented correctly in the app’s code.
Description: Pressing the back key exits the app instead of navigating within it.
Solution: Ensure the back key functionality is limited to navigation within the app and only exits the app from the main menu or home screen.
Description: When pressing the back key during video playback, an intermediate screen is briefly displayed before returning to the content page.
Solution: Review and adjust the key event handling and navigation logic to ensure that pressing the back key during playback directly returns to the content page without intermediate screens. Ensure proper state management to avoid temporary state changes that cause intermediate screens to display.
Test Thoroughly: Regularly test the back key functionality in various scenarios to ensure consistent behavior.
Follow Standards: Adhere to TitanOS documentation and guidelines for keycode handling and app behavior.
User Experience: Consider user experience when implementing the back key functionality, ensuring intuitive and expected navigation within the app.
Titan OS features a system keyboard that is automatically displayed on the screen when the focus is placed in an input field. Referred to as the on-screen keyboard (OSKB), it serves as the primary text input method for Titan OS. Utilising the system keyboard is optional - it is possible to use your own on-screen keyboard solution if preferred or required.
Titan OS’ OSKB incorporates variations in its user interface across different devices to ensure usability. However, it generally adheres to the following characteristics:
The OSKB supports multiple layouts, including:
If the system keyboard does not meet your application’s requirements or if you seek UI consistency within your app, you can define a custom keyboard. Considerations for implementing a custom keyboard include:
Enabling a custom keyboard will require adjustments to the input box, such as adding disabled properties, etc.
When a user presses the Enter key in an <input>
tag, it triggers the platform OSKB (On-Screen Keyboard). This may cause two keyboards to appear on the screen. This behavior can be adjusted by following one of the approaches below.
Avoid using <input>
tags.
Instead of using the <input>
tag, implement the input field using a different element, such as a <div>
. This allows you to use the app’s OSKB without interference from the platform OSKB.
Use <input>
tags with Platform OSKB
If you prefer to use the <input>
tag, ensure that only the platform OSKB is called and not the app’s OSKB. This ensures a consistent user experience without triggering multiple keyboards.
Guidelines on how to adapt your app navigation to Titan OS controls and customizable input methods. Whether you’re using a remote control or an on-screen keyboard, the options are designed to enhance your interaction with the device.
Typically, the remote control facilitates standard 5-way navigation with additional physical keys serving as shortcuts for common operations. The following buttons are available for application use:
Button | App Usage |
---|---|
OK | Select/Enter |
Up Arrow | Moves focus to up |
Right Arrow | Moves focus to the right |
Down Arrow | Moves focus to down |
Left Arrow | Moves focus to the left |
Back | Returns to the previous panel, or returns to the Home screen if there is no previous page. |
Number Buttons | Input number |
Color Buttons: Red, Green, Yellow, Blue | Customizable by the app |
Video control buttons: play, pause, stop, fast forward, rewind | Control video playback |
Button | key | keyCode | Keycode HTML5 |
---|---|---|---|
Enter | "Enter" | 13 | VK_ENTER |
Left | "ArrowLeft" | 37 | VK_LEFT |
Down | "ArrowDown" | 40 | VK_DOWN |
Right | "ArrowRight" | 39 | VK_RIGHT |
UP | "ArrowUp" | 38 | VK_UP |
0-9 | "Numpad0" -"Numpad9" | 48 -57 | VK_0 - VK_9 |
Back | "Backspace" | 8 | VK_BACK |
Red | "ColorFORed" | 403 | VK_RED |
Green | "ColorF1Green" | 404 | VK_GREEN |
Yellow | "ColorF2Yellow" | 405 | VK_YELLOW |
Blue | "ColorF3Blue" | 406 | VK_BLUE |
Play | "MediaPlay" | 415 | VK_PLAY |
Pause | "MediaPause" | 19 | VK_PAUSE |
Play/Pause | "MediaPlayPause" | 179 | VK_PLAY_PAUSE |
Stop | "MediaStop" | 413 | VK_STOP |
Fast fwd | "MediaTrackNext" | 417 | VK_FAST_FWD |
Rewind | "MediaRewind" | 412 | VK_REWIND |
Channel UP | "PageUp" | 33 | VK_CHANNEL_UP |
Channel DOWN | "PageDown" | 34 | VK_CHANNEL_DOWN |
The Back/Return button is a mandatory button on the remote control to go back or close the app. The app may handle the Back/Return key event. If it handles the Back/Return key, the app must handle both 8
/ VK_BACK
and VK_BACK_SPACE
to ensure compatibility between current and legacy devices. On the remote control, the key may be marked with “Back”, “Return” or similar. The Back/Return key should provide the user with typical back navigation, and finally, an exit path via window.close();
to leave the app and return to the previous screen.
NOTE: Ensure the app does not use incorrect keycodes like 27
(ESC
key) for
the back key.
In case of multi-page application: The app should use the historical behavior like window.history.go(-1)
Back Behavior: window.history.go(-1)
Clean Exit:
In case of single-page application: The app should use hierarchical behavior.
To Exit the app, use window.close()
method.
Every single key press operation consists of corresponding keydown and keyup events. To prevent processing a key twice, act on either the keydown event or the keyup event, not both. Handling both events can lead to overlapping actions. It is most common to act on keydown.
Description: Actions are triggered twice due to handling both keydown and keyup events.
Solution: Ensure the app handles only one of the events, preferably the keydown event.
Description: The app listens for the wrong keycode (e.g., 27 instead of 8).
Solution: Update the app to use the correct keycode (8) or the constant window.VK_BACK for better readability.
Description: The back key does not perform the expected action, such as navigating to the previous screen.
Solution: Verify the keycode handling in the app and ensure it aligns with TitanOS standards. Check if VK_BACK is implemented correctly in the app’s code.
Description: Pressing the back key exits the app instead of navigating within it.
Solution: Ensure the back key functionality is limited to navigation within the app and only exits the app from the main menu or home screen.
Description: When pressing the back key during video playback, an intermediate screen is briefly displayed before returning to the content page.
Solution: Review and adjust the key event handling and navigation logic to ensure that pressing the back key during playback directly returns to the content page without intermediate screens. Ensure proper state management to avoid temporary state changes that cause intermediate screens to display.
Test Thoroughly: Regularly test the back key functionality in various scenarios to ensure consistent behavior.
Follow Standards: Adhere to TitanOS documentation and guidelines for keycode handling and app behavior.
User Experience: Consider user experience when implementing the back key functionality, ensuring intuitive and expected navigation within the app.
Titan OS features a system keyboard that is automatically displayed on the screen when the focus is placed in an input field. Referred to as the on-screen keyboard (OSKB), it serves as the primary text input method for Titan OS. Utilising the system keyboard is optional - it is possible to use your own on-screen keyboard solution if preferred or required.
Titan OS’ OSKB incorporates variations in its user interface across different devices to ensure usability. However, it generally adheres to the following characteristics:
The OSKB supports multiple layouts, including:
If the system keyboard does not meet your application’s requirements or if you seek UI consistency within your app, you can define a custom keyboard. Considerations for implementing a custom keyboard include:
Enabling a custom keyboard will require adjustments to the input box, such as adding disabled properties, etc.
When a user presses the Enter key in an <input>
tag, it triggers the platform OSKB (On-Screen Keyboard). This may cause two keyboards to appear on the screen. This behavior can be adjusted by following one of the approaches below.
Avoid using <input>
tags.
Instead of using the <input>
tag, implement the input field using a different element, such as a <div>
. This allows you to use the app’s OSKB without interference from the platform OSKB.
Use <input>
tags with Platform OSKB
If you prefer to use the <input>
tag, ensure that only the platform OSKB is called and not the app’s OSKB. This ensures a consistent user experience without triggering multiple keyboards.