...

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.

...

Alexa support

Preview Mode: Navigator UIv3 UI supports basic Alexa skills on aligning to Alexa Voice Integration Manual on a supported platform using Voice Control plugin.

...

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 ASMR ASMS Cloud app-store functionality.

...

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

...

ASMS App Catalog

...

Support

Known supported RDKV machine configurations:

Navigator UI supports ASMS

...

UI supports ASMR 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.

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

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

Image Removed  Image Removed  Image Removed

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

1. To add a device navigate to add a device option and press enter.
2. User will be directed to pairing screen where you will list of devices scanned by the UI. Press enter to setup connection.
3. Notification message will be shown to confirm the connection.

Below Images shows the flow.

Image Removed  Image Removed  Image Removed  Image Removed Image Removed

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.

Image RemovedImage Removed

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.

Note: Transparent(advanced settings) contents are currently work in progress

Image Removed

• Resolution

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

Image Removed

Audio

Provides option to change Output mode of the device.

Note: Transparent contents are currently work in progress

Image Removed

• Output Mode

Image Removed

Other Settings

Image Removed

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

Image Removed

• Screen Saver

Screen saver is activated if user inactivity is detected for selected time frame . The screen saver is cancelled and returns to the previous screen when the remote control is operated.

Note: To reduce the UI size and to comply with repo management rules the screensaver video file is not checked in along with the the UI code. Please install Screensaver.mp4 video file in the locally hosted UI at ${DOCROOT}/lxresui/static/images/Screensaver.mp4 in the device.

Image Removed

• Energy Saver

Energy Saver page allows user to configure the default sleep mode from the supported standby modes.

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.

Image Removed

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

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

Image Removed Image Removed

youtube languages changes with respect to device support

Image RemovedImage Removed

• 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 - [Updated in UIv3.9] 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.

Image Removed

• Advanced Settings 

Image Removed

...

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 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. Only last saved one SSID is remembered.

Image Added  Image Added  Image Added

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

1. To add a device navigate to add a device option and press enter.
2. User will be directed to pairing screen where you will list of devices scanned by the UI. Press enter to setup connection.
3. Notification message will be shown to confirm the connection.

Below Images shows the flow.

Image Added  Image Added  Image Added  Image Added Image Added

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.

Image AddedImage Added

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.

Note: Transparent(advanced settings) contents are currently work in progress

Image Added

• Resolution

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

Image Added

Audio

Provides option to change Output mode of the device.

Note: Transparent contents are currently work in progress

Image Added

• Output Mode

Image Added

Other Settings

Image Added

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

Image Added

• Screen Saver

Screen saver is activated if user inactivity is detected for selected time frame . The screen saver is cancelled and returns to the previous screen when the remote control is operated.

Note: To reduce the UI size and to comply with repo management rules the screensaver video file is not checked in along with the the UI code. Please install Screensaver.mp4 video file in the locally hosted UI at ${DOCROOT}/lxresui/static/images/Screensaver.mp4 in the device.

Image Added

• Energy Saver

Energy Saver page allows user to configure the default sleep mode from the supported standby modes.

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.

Image Added

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

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

Image Added Image Added

youtube languages changes with respect to device support

Image AddedImage Added

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

Image Added

• Advanced Settings 

Image Added

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.

Image AddedImage Added

• Device Details - Info - Lists down information about device like chipset, location, supported DRM systems, Firmware version etc.

Image Added

• Device Details - Time Zone - This page allows the User to change the device TimeZone settings
  Dependent on System plugin feature support. Note: this does not change the device's time. Only the UI displayed time is affected. This configuration will be persisted.

Image Added Image Added

• Device Details - Check for Updates - This page shows the current firmware version and also allows user to trigger a check for new firmware availability (download and install happens without UI involvement).

Image Added

• Device Details - Reboot - Rebooting of the device within the UI.

Image Added

• Factory Reset - This section allows the User to trigger a complete factory reset on the supported platform. This is followed by a device Reboot. It will reset the Alexa authentication as well on supported platform. Following are the Confirmation Screens

Image Added  Image Added

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.

Image Added Image Added

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

•  New Feature: UIv4.X - DVB T/T2: Upcoming
•  New Feature: UIv4.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).

Image Added Image Added Image Added Image Added Image Added Image Added Image Added Image Added Image Added Image Added

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:

Image Added  Image Added  Image Added

Guide population:

Image Added

Player:

Image Added

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.

Note: only the multimedia files are exposed through UI which are supported by UVE Player.

When the USB is plugged in UI will show USB icon on Featured Content row as shown in below content. New design allows the user to disable and enable USB Media support feature from Privacy Setting.

Image Added

User can view the contents by pressing enter and he will see contents sorted based on Video, Audio, Photo, Folder.

Image Added Image Added

You can traverse using Left/Right/Up/Down and to access the content - press Enter. File format supported is limited only by UVE support and USBAccess plugin filter.

• Video Content shall be accessible using the same UVE player. Seek bar gives timeline of video, Next and Previous icons will allow user to switch to respective content.

Image Added

• Audio Content - UI shows a static image to indicate audio file is playing.

Image Added

• Image Content - When viewing images Left/Right key presses will change images.

Image Added

• Folder Content - The contents of USB will replace when the user traverse a particular directory.

Related RFC: 

Overlay Screen

Generic Settings Overlay

In this new release settings 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

...

Image RemovedImage Removed

• Device Details - Info - Lists down information about device like chipset, location, supported DRM systems, Firmware version etc.

Image Removed

• Device Details - Time Zone - This page allows the User to change the device TimeZone settings
  Dependent on System plugin feature support. Note: this does not change the device's time. Only the UI displayed time is affected. This configuration will be persisted.

Image Removed Image Removed

• Device Details - Check for Updates - This page shows the current firmware version and also allows user to trigger a check for new firmware availability (download and install happens without UI involvement).

Image Removed

• Device Details - Reboot - Rebooting of the device within the UI.

Image Removed

• Factory Reset - This section allows the User to trigger a complete factory reset on the supported platform. This is followed by a device Reboot. It will reset the Alexa authentication as well on supported platform. Following are the Confirmation Screens

Image Removed  Image Removed

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.

Image Removed Image Removed

The Scan section exposes various DVB tuner sub-systems; DVB-S, DVB-T and DVB-C based on respective stack integration 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).

Image Removed Image Removed Image Removed Image Removed Image Removed Image Removed Image Removed Image Removed Image Removed Image Removed

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:

Image Removed  Image Removed  Image Removed

Guide population:

Image Removed

Player:

Image Removed

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.

Note: only the multimedia files are exposed through UI which are supported by UVE Player.

When the USB is plugged in UI will show USB icon on Featured Content row as shown in below content. New design allows the user to disable and enable USB Media support feature from Privacy Setting.

Image Removed

User can view the contents by pressing enter and he will see contents sorted based on Video, Audio, Photo, Folder.

Image Removed Image Removed

You can traverse using Left/Right/Up/Down and to access the content - press Enter. File format supported is limited only by UVE support and USBAccess plugin filter.

• Video Content shall be accessible using the same UVE player. Seek bar gives timeline of video, Next and Previous icons will allow user to switch to respective content.

Image Removed

• Audio Content - UI shows a static image to indicate audio file is playing.

Image Removed

• Image Content - When viewing images Left/Right key presses will change images.

Image Removed

• Folder Content - The contents of USB will replace when the user traverse a particular directory.

Related RFC: 

Overlay Screen

Generic Settings Overlay

In this new release settings 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).

Image RemovedImage RemovedImage RemovedImage Removed

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.

Image Removed Image Removed Image Removed

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 Inputs_Shortcut (Reference: accelerator-home-ui/src/Config/Keymap.js).

Image Removed

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 Picture_Setting_Shortcut (Reference: accelerator-home-ui/src/Config/Keymap.js).

Image Removed

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.

root@HP44HRDK:~# cat /opt/appmanagerregistry.conf
{
  "applications":[
    {
      "displayName":"SampleApp",
      "uri":"https://keycode.info/",
      "applicationType":"HtmlApp",
      "url":"http://127.0.0.1:50050/lxresui/static/images/info.png"
    }
  ]
}

List of supported launch type for apps(applicationType)

...

...

Image AddedImage AddedImage AddedImage Added

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.

Image Added Image Added Image Added

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 Inputs_Shortcut (Reference: accelerator-home-ui/src/Config/Keymap.js).

Image Added

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 Picture_Setting_Shortcut (Reference: accelerator-home-ui/src/Config/Keymap.js).

Image Added

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.

root@HP44HRDK:~# cat /opt/appmanagerregistry.conf
{
  "applications":[
    {
      "displayName":"SampleApp",
      "uri":"https://keycode.info/",
      "applicationType":"HtmlApp",
      

...

"url":"http://127.0.0.1:50050/lxresui

...

/static/images/info.png"
    }
  ]
}

List of supported launch type for apps(applicationType)

Image Removed

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 in Keymap.js.

Image Added

...

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 in Keymap.js.

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.

const themeOptions = {
    partnerOne: {
      hex: 0xfff58233,
      logo: 'RDKLogo.png',
      background: '0xff000000'
    },
    partnerTwo: {
      hex: 0xff91c848,
      logo: 'RDKLogo.png',
      background: '0xff000000'
    },
}

User can define an object inside theme options which need three parameters:

hex - Color accents on the UI. Default one is shade of orange.
logo - Logo at the splash and top left side on the home screen.
background - background color of the components.

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 belowUser has to export a specific theme for it to apply through the UI and rebuild or re-gernerate the app bundle.

exportconst var CONFIG = {
    theme: themeOptions['partnerOne'],themeOptions = {
    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.

Follow the commands to run the application on you laptop.

partnerOne: {
      hex: 0xfff58233,
      logo: 'RDKLogo.png',
      background: '0xff000000'
    },
    partnerTwo: {
      hex: 0xff91c848,
      logo: 'RDKLogo.png',
      background: '0xff000000'
    },
}

User can define an object inside theme options which need three parameters:

hex - Color accents on the UI. Default one is shade of orange.
logo - Logo at the splash and top left side on the home screen.
background - background color of the components.

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']
}

...

Clone and Build Instructions

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

Follow the commands to run the application on you laptop.

• 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

• 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 uploadserve - Upload the Start a local webserver and run a built 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

...

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

...

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.12): 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

...

• App Catalog

• Live TV

...