Overview

The RDK Accelerator Home UI version 3 is the latest version (3.8) of the RDK reference UI which provides a full featured UI with a modern minimalistic design using a dark theme.

...

• OEM logo with color accents which are customizable
• Multiple Language Support
• Casting Feature from mobile phones to premium apps such as YouTube
• Overlay Screen
• Extensive settings pages to interact with various Video, Audio, Connectivity options
• Generic UI Keymap option
• On-screen Keyboard Component for Bluetooth & Wi-Fi
• Partner-App side loading

Splash Screen

The app loads a new splash logo when the device boots up which remains for a few seconds and then leads to user on-boarding screens if device is booting up afresh.

User on-boarding

This screens shall appear only once the device is booting up.  Criteria used to detect the fresh boot is by verifying whether any previous Remote Control Unit (hereafter RCU) pairing information is available or not. If yes, device shall skip these on-boarding screens and land at the Home screen.

Same features and functionalities are exposed under Settings menu as well for the user to interact later.

Remote Pairing

UI initiates Bluetooth scan for HID profile to connect and pair with at this point with a configured time-out. How to put the RCU in Bluetooth pairing mode is dependent on the RCU design which is not within UI scope.

...

Note: this feature of automatic RCU pairing requires RCU model support integrated with BLERCUDaemon at platform firmware build time. If your RCU does not support this feature yet, you can still pair your RCU through the "Settings" menu detailed in later section - "Pair Remote Control".

Language Selection

The UI currently supports two languages,  English and Spanish. New language support can be integrated with proper resource files added along with the defaults as detailed in upcoming sections. UI will reload to refresh the entire settings and during that time user may see display going blank and a spinner appearing for the reload time.

Note: this spinner is being spawned as a separate app instance.

Network Selection

Network selection screen allows the user to configure connectivity method for internet access to the device.

...

Keyboard seen in above snapshot is implemented using Lightning UI Components and has been customized to fit with present Keyboard layout.

Home Screen

This new app has redesigned ‘Home UI’ screen with new background, shadow and animation effects. It contains sections for Featured content, Lightning Apps, Featured Video on Demand, and Voice and Settings icons displayed on top section.

...

User can access the device settings by interacting with the Settings icon which will redirect him on to dedicated settings screen. Time display is also available in the home UI.

Home Screen for Set-Top-Box Profile

Note: Voice Search Functionality implementation for the mic is not yet available, up-coming feature with BLERCUDaemon integration.

...

curl -X POST http://127.0.0.1:9998/jsonrpc -d '{"jsonrpc":"2.0","id":"3","method":"org.rdk.PersistentStore.1.setValue","params":{"namespace":"gracenote","key":"apiKey","value":"SecretAPIKey"}}'
curl -X POST http://127.0.0.1:9998/jsonrpc -d '{"jsonrpc":"2.0","id":"3","method":"org.rdk.PersistentStore.1.getValue","params":{"namespace":"gracenote","key":"apiKey"}}'

Home Screen for TV Profile

•  Upcoming Feature: Extend support for Composite Input and HDMI CEC Sink.

...

Here it is! This new feature allows users to select HDMI inputs connected your TV. It allows seamless switching between the UI and HDMI inputs.

Guide Screen

•  EPG guide is continuous updating menu that shows scheduling information for current and upcoming programs.
•  EPG/Guide can be invoked by clicking on the second icon of the side panel.
•  EPG Guide will show list of channels and shows which are currently airing. It will also show user the upcoming programs.
•  One can scroll through channels by using up and down arrow keys and through shows by using left and right arrow keys.

...

• Version 3.8 comes with a new feature to open premium apps (Amazon , Netflix and YouTube) from the guide screen.
• These three clickables will take place of the first three channels.
• In presence of DTV plugin other channels will follow these three apps.
• In absence of a DTV plugin , the guide screen will still openable with these three items populated.

Apps Screen

On selecting the Apps Icon from left banner; User shall be presented a new page with 3 tabs highlighted with "MyApps" which shall list the list of all available Apps on that particular platform. User shall be able to launch selected App from this page as well.

•  Note: The other tabs "App Catalog & Manage Apps" are kept reserved for upcoming feature - to support DAC Apps. In this UI version these pages shall display Empty listing.

Featured Video Player

The redesigned video player utilizes UVE implementation and has kept the minimal controls such as a progress bar with pause, play, next and previous buttons. Various player controls are detailed below.

...

• Navigation
  • The overlay screen has timeout of 5 sec. You can bring up the overlay by pressing Arrow UP key.
  • Enter to pause, Left and Right to navigate between options
  • Back and Home key will take you back to home screen from Featured video player instance.

Settings Screen

Settings screen has several new options which allows user to interact with device capabilities.

Native Frame State:

Network Configuration

This page contains three subsections detailed below:

...

• Check Internet Access - This allows the user to confirm that the device has internet connectivity

Pair Remote Control

Allows user to connect to Human Interface devices like Remote, Bluetooth keyboard etc.

...

Below Images shows the flow.

Video Settings

Video settings provide users to change resolution of the screen. HDR and HDCP options are read only fields which confirms certain requirements for premium apps.

...

This screen presents the common resolutions supported by both source(device) and sink(display).

Audio

Provides option to change Output mode of the device.

Note: Transparent contents are currently work in progress

• Output Mode

Other Settings

• Sleep Timer

Sleep Timer turns off the screen upon selecting a particular time frame from the options provided. Device will be in Light Sleep mode by default. User can change the default sleep(standby) mode from Energy Saver section.

...

1. Deep Sleep - Which releases the resources in the device and suspend the UI. Lowest power consumption mode except power off.
2. Light Sleep - Turns off the display but the background processes remain active.

• Language

Allows user to change the menu language of the UI. If changed, the UI will reload to refresh the entire settings and in that process user may see display going blank and a spinner appearing for the reload time.

...

youtube languages changes with respect to device support

• Privacy

1. Local Device Discovery - This feature allows user to control (enables/disable) the DIAL casting support of the device - YouTube app. If enabled; user shall be able to see the device in his mobile App(under casting option in YouTube mobile app) which is in the same local network. Upon selecting it will directly link your mobile to device and open the YouTube app in the UI.
2. USB Media Device - User shall be able to enable or disable USB external media support. If enabled and media device is connected with the device then the USB icon will appear in Featured Content section as detailed in "USB Feature" section.
3. Audio Input/Clear Cookies and App Data - under development
4. Privacy Policy and License - This provides a template for future integration. Gives Information about Privacy and License policy which user shall be abiding to.

• Advanced Settings 

1. CEC Control - This plugin allows user to configure HDMI Consumer Electronic Control on a device. This will enable user to control TV and set-top box using one remote provided same is enabled and supported by the display device also.
2. Device Details -The basic device specific details page which presents details of the platform, manages firmware details and helps user to trigger a system reboot.

...

• Device Details - Reboot - Rebooting of the device within the UI.
• Factory Reset Confirmation Screen

Live TV

Dependent on DTV Plugin. This feature enables user to interact with the Tuner configuration and related features such a as Live TV - scan, channel tuning, Guide population, its playback etc.

...

•  New Feature: UIv3.7+ - DVB-S/S2 Support
•  New Feature: UIv3.X - DVB T/T2: Upcoming
•  New Feature: UIv3.X - DVB-C: Upcoming

DVB-S/S2

This subpage exposes various DVB-S Tuner parameters such as Satellite selection, Frequency, Polarity, Symbol rate etc. Each section allows user to select respective predefined option or enter a custom value(for selected parameters).

...

Based on the scan response, Guide screen shall get populated with actual live channel listing. User shall b e able to interact with the current available channels to initiate playback. From playback screen, user shall be able to change the channel also by bringing up the channel listing overlay.

Sample snapshots from DVB-S2 supported Device

Settings page tuner scan configurations and status:

Guide population:

Player:

USB Media Support Feature

In this version you will get full access to USB Media device related features if the device has required support integrated. To name a few - viewing images, playing audio and video file, accessing internal folders of the USB Media device.

...

Overlay Screen

Generic Settings Overlay

•  New Feature: UIv3.8

In this new release settings is added as a overlay through widgets where user shall be able to launch settings though hot keypress on remote. Settings Hot-Key code is F10 equivalent (121).

Overlay Screen for Set Top Box Profile

New widget for overlay - to display notifications such as volume change etc.

Below snapshot shares how the overlay appears on various sections; At Home page, At Apps page and on a Playback screen.

Overlay Screen for TV Profile

TV profile supported stack has overlay for Volume change. Adding to that; it adds additional overlay screens for changing TV related settings as detailed below.

Input Selection Overlay

This overlay allows the user to switch between available Input options while enjoying an Input option.

Supported Hotkey is F3 (keycode 114).

Picture Settings Overlay

Numeric value settings like brightness backlight, contrast etc can only be changed when picture mode is set to custom and color temperature is set to user defined.

Supported Hotkey is F4 (keycode 115).

PartnerApp Support

This feature allows the app developers to quickly test any app without modifying the Accelerator UI source code by adding details of the custom app in app manager registry file present in device(if not present; can be created one with valid json content inside it). After updating this restart the device or residentapp service to reload the Home page which shall display a new row at home page with the Icon image. A sample app manager registry configuration and resulting UI screen will be as given below.

...

...

Key Mapping

The version 3 UI supports a configurable keymap. Below lists the general functionality and keycode of keys. Detailed information of the default keycode mappings can found here.

Customization (Theme and Logo)

One among the new feature in this version of UI is it allows to change the focus color, background color and logo if an operator wishes to by making necessary changes in config.js. Default config.js for reference is as below.

...

export var CONFIG = {
    theme: themeOptions['partnerOne'],
    language: localStorage.getItem('Language')!=null ? language[localStorage.getItem('Language')] : language['english']
}

...

Clone and Build Instructions

This section details about how to customize the current UI source code and develop further.

...

• Firstly install Lightning CLI

• Type lng to confirm the installation. You will see the below output.

  Code Block

  $ npm install -g @lightningjs/cli $ lng Usage: index lightning-cli <command> [options] Options: -V, --version output the version number -h, --help display help for command Commands: create - Create a new Lightning App build - Build a local development version of the Lightning App serve - Start a local webserver and run a built Lightning App in a web browser watch - Watch for file changes and automatically rebuild the App dev - Build a local Lightning App, start a local webserver, run a built Lightning App in a web browser and watch for changes docs - Open the Lightning-SDK documentation dist [options] - Create a standalone distributable version of the Lightning App upload - Upload the Lightning App to the Metrological Back Office to be published in an App Store update - Update the Lightning-CLI to the latest version help [command] - display help for command

• Clone repo

  Code Block
  $ git clone "https://code.rdkcentral.com/r/components/opensource/RDK_apps" $ cd RDK_apps $ git checkout rdk-next $ cd accelerator-home-ui Note: if you are not able to launch offline UI, add .env file inside accelerator-home-ui/ and add 'LNG_BUNDLER=esbuild' to force the bundler. Make sure you have esbuild dependency (npm install esbuild) $ npm install

• Build

  Code Block
  $ lng build

• Install as offline-app

  Code Block
  $ cd RDK_apps/accelerator-home-ui/dist/<es6>/Replace the dummy icons with original and then tar the entire contents to deploy on the offline UI location on device.

  Note: On a RDKV reference device; the lighttpd webserver is configured to load the offline UI from DOCROOT which includes the alias of the above dist file mapped for loading. Usually the dist directory contents are placed in the STB's /home/root/lxresui/

• Host the app locally to test
  

  Code Block
  $ lng serve

  It will print the local url as : http://127.0.0.1:8080 which can be loaded as url to the residentApp.sh which is responsible for offline UI url loading on STB.

...

Reference

The UI uses localstorage feature of WebkitBrowser's ResidentApp configuration for storing the user preferences. PLUGIN_RESIDENT_APP_LOCALSTORAGE and PLUGIN_RESIDENT_APP_PERSISTENTPATHPOSTFIX variables need to be configured build-time itself.

Note: the localstorage directory shall be pointed to a persistent ReadWrite section on device.

Steps to make Accelerator Home UI v3 as Device UI

Packages that are needed for Accelerator UI v3 are from meta-rdk-video layer. They will get installed into the final rootfs with necessary startup and configuration scripts if the machine configuration is enabled with below mentioned DISTRO_FEATURES.

$ DISTRO_FEATURES_append = " offline_apps build_rne "

Performance Matrix

This section details the average loading time, CPU and memory utilization for this version of the UI alone. It has been measured by loading the offline version of the UI on a pre-activated webkitbrowser instance.

...

Web Version

To experience UIv3.X on a firebolt compliant RDK stack, below url can be used.

...

Previous Stable Version(3.6): https://apps.rdkcentral.com/rdk-apps/device-ui/index.html#splash 

API Documentation

This section details the necessary platform integration support required to ensure the smooth functionality of UI version 3. Below are the details of RDKServices provided methods and notifications used in each UI feature or page implementation which shall aid debugging any functionality and integration or modification of the same. The Featured Video Player - UVE is used for Video-On-Demand sample streams.

• Home Screen

• Network Configuration

• Bluetooth

• Video

• Audio

• Sleep Timer

• Energy Saver

• Privacy Settings - USB

• Privacy Settings - Local Device Discovery

• CEC Activation

• Device Screen

• Global APIs

• Xcast Feature

• USB Screen

• Live TV

• HDMI Input

• Picture Settings

• TimeZone

• Volume