...

The RDK Accelerator Home UI version 3 is the latest stable version (rdk-nextRDK_apps/6.0.0-rc4/accelerator-home-ui/settings.jsonjson#16 platformSettings version) 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
• Downloadable application bundles (DAC Apps) from DAC App-store

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.

Note: The Gracenote logo will be visible only on the device where required keys are provisioned.

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.

...

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.

...

.

UIv3.9 onwards Navigator UI will prefer to use Remote Control plugin on supported platforms to pair with RCU instead of classic Bluetooth plugin. Only one plugin shall be used to onboard the RCU - if preferred Remote Control plugin is available it will not fall back to use Bluetooth plugin to scan and pair with RCU.

...

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.

Based on user selection; active language shall be saved as user preference in platform configuration.

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

...

Prime Video, YouTube, Xumo and the metrological apps can be launched from app listings if the device has respective support integrated.

Sample Video contents including HLS & DASH FOG Live Streams can be played from the Featured Video 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.

Alexa support

Preview Mode: Navigator UIv3.10 supports UI supports basic Alexa skills on aligning to Alexa Voice Integration Manual on a supported platform using Voice Control plugin. This implementation now has RDK's OOBE implementation for authenticating Alexa users

•  Reporting application state and device settings changes to Alexa (ApplicationStateReport, PlaybackStateReport, Volume change, Language & TimeZone change reporting)
•  Support for Search & Play voice query redirection to YouTube.

RDK's OOBE for Alexa authentication will be activated only when user is at HOME page and internet is available. User shall have an option to disable this support by selecting "Skip" button. Later onwards UI shall deny all the Alexa related notifications until a Clear Cache or Factory reset is done through the UI.

Image RemovedImage RemovedImage RemovedImage Added Image AddedImage AddedImage Added Image Added

UI shall display following Alexa SDK status[DISCONNECTED, CONNECTING, CONNECTED] if enabled and authenticated. The following screen shall be displayed to user on each SDK status change and shall time out itself without any need for user interaction.

...

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.Featured Content row will display app icons based on platform capability. 

Note: The web apps will now auto-exit in case if the http status code is not 200.

Peacock App

Image Removed

The UI can display popular movies in Home screen with the help of Gracenote metadata if platform support is enabled. UI upon detecting required runtime configuration shall display "Popular Movies" row at the top as detailed below.

...

Home Screen for TV Profile

Featured Content row will display app icons based on platform capability. 

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

...

Guide Screen

•  EPG guide is a 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.

...

• When playing the content user has the ability to view all the channels as an overlay.
• This feature allows user to change channels while playing the content.

• Version 3.8 comes with a new feature to open premium apps Apps (Amazon , Netflix and YouTube etc) can be launched 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

My Apps, App Catalog, Manage Apps tabs now is dedicated for supporting DAC Apps or app-store on a supported device and firmware with provisioned ASMS Cloud app-store functionality.

On selecting the Apps Icon from left banner; User shall be presented a new page with 3 tabs highlighted with "MyAppsMy Apps" which shall list the list of all available Apps installed app bundles 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.

Image Removed

Featured Video Player

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

Image Removed

• Navigation
  • The overlay screen has timeout of 5 sec. You can bring up the overlay by pressing Arrow UP key.
  • Enter to pause and play.
  • 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.

Image Removed

Native Frame State:

Image Removed

Network Configuration

Image Removed

This page contains three subsections detailed below:

• Network Info - This page presents the current network interface status details to user such as Connection type and status, IP address, MAC address, signal strength etc.

Image Removed Image Removed

If no installed app bundles are found; user shall be presented with the "App Catalog" tab which will display all available downloadable app bundles from remote server from which user shall be able to install selected app. Installation progress shall be displayed when user interacts with that selected App Icon. After installation competes; that app will be displayed under "My Apps" as well as "Manage Apps" tabs. From "My Apps"; user shall be able to launch the App. To "EXIT" from that app instance; user need to press HOME key which will redirect him to UI HOME page. From "Manage Apps"; user shall be able to uninstall the installed App.

Respective snapshots are listed below for reference.

•  Note: "App Catalog & Manage Apps" are supporting only the basic LISA API features. In future it will have the extended features of details of apps, view memory usage etc.

Image AddedImage Added Image AddedImage Added

ASMS App Catalog Support

Known supported RDKV machine configurations:

Navigator UI supports ASMS Cloud based app store out of the box without any manual configuration if proper configuration is embedded within the device firmware at build time. LISA metadata API shall confirm if the platform supports ASMS App Store if it has proper auxMetadata information matching following template.

curl -X POST http://127.0.0.1:9998/jsonrpc -d '{"jsonrpc": "2.0", "id": 1, "method": "LISA.1.getMetadata", "params": {"id": "lisa.dac.config", "type": "application/LISA", "version": "0"}}'
{"jsonrpc":"2.0","id":1,"result":{"appName":"","category":"","url":"","auxMetadata":[{"key":"dacBundlePlatformNameOverride","value":"<UnequeASMSRegisteredPlatformName>"},{"key":"dacBundleFirmwareCompatibilityKey","value":"<UniqueUnequeASMSRegisteredPlatformFirmwareKey>"},{"key":"asmsUrl","value":"<ASMSAppStoreConfigurationUri>"}]}}

Featured Video Player

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

Image Added

• Navigation
  • The overlay screen has timeout of 5 sec. You can bring up the overlay by pressing Arrow UP key.
  • Enter to pause and play.
  • 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.

Image Added

Native Frame State:

Image Added

Network Configuration

Image Added

This page contains three subsections detailed below:

• Network Info - This page presents the current network interface status details to user such as Connection type and status, IP address, MAC address, signal strength etc.

Image Added Image Added

• Network Interface - This page allows the user Network Interface - This page allows the user to change current network configuration - option to choose between Wi-Fi and Ethernet. If Wi-Fi is selected, next page will allow user to join with a wireless network. Join Another Option from Wi-Fi page gives user an option to connect to hidden networks around them - User has to provide Network name, select the proper security and password.
• Note: Previously connected SSID will not ask for password again and it will get connected if we click on previous connected SSID, and only connect with SSID that is saved [3.8 NEW FEATURE]. Only last saved one SSID is remembered.

...

Below Images shows the flow.

Voice Remote Control

...

UI now uses Remote Control plugin to display connected remote control unit's details.

On a Remote Control plugin supported platform following section will activate the remote control plugin if not activated previously and pairs the RCU and shall expose the current information of the paired Remote Control Unit.

...

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 - [Updated in UIv3.9] User  User shall be able to clear the ResidentApp's cache and local storage without triggering a system reboot. This section allows user to reset the Alexa authentication details as well on a supported platform.
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.

...

The Scan section exposes various DVB tuner sub-systems; DVB-S, DVB-T and DVB-C based on respective stack integration support.

•  New Feature: UIv3UIv4.X - DVB T/T2: Upcoming
•  New Feature: UIv3UIv4.X - DVB-C: Upcoming

DVB-S/S2

...

Overlay Screen

Generic Settings Overlay

•  New Feature: UIv3.8

In this new release settings is are added as a overlay through widgets where user shall be able to launch settings though hot keypress on remote. Settings Hot-Key is Settings_Shortcut (Reference: accelerator-home-ui/src/Config/Keymap.js).

...

Supported Hotkey is Picture_Setting_Shortcut (Reference: accelerator-home-ui/src/Config/Keymap.js).

PartnerApp Support

•  Note: This feature will not be supported when UI is in Firebolt mode of operation.

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.

...

Customization (Theme and Logo)

...

User has to export a specific theme for it to apply through the UI and rebuild or re-gernerate the app bundle.

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

...

• 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.

TBD

...

• 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 "

...

Web Version

To experience UIv3.X on a firebolt compliant RDK stack, below url can be used. Moving forward it shall get deprecated.

Current Stable Version(3.9): https://apps.rdkcentral.com/rdk-apps/accelerator-home-ui/index.html#splash

...

API Documentation

This section details the necessary platform integration support required to ensure the smooth functionality of Navigator 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

  App Lifecycle Management

• Network Configuration

...

• Video

• Audio

...

operationStatus

getStorageDetails, getList

resumeApplication

• Xcast Feature

...

• App Catalog

• Live TV

• Voice Remote Control

• HDMI Input

...

• Voice

onServerMessage

onSessionBegin

onStreamBegin

onStreamEnd

...

How To...

The following section details about few debug steps to confirm some generic issues and doubts when working with an RDK-V stack and this UI.

...