RDK Resources
[*RDK Preferred*]
Code Management Facility
RDK Forums
[RDK Conferences]
RDK Support
Archives
Papers & Presentations Archive
...
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.
...
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.
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 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.
Preview Mode: Navigator UIv3.10 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..
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.
...
...
Featured Content row will display app icons based on platform capability.
Note: Voice Search Functionality implementation for the mic is not yet available, up-coming feature with BLERCUDaemon integration.Note: The web apps will now auto-exit in case if the http status code is not 200.
...
...
Featured Content row will display app icons based on platform capability.
...
...
...
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 "My Apps" which shall list the list of all installed app bundles on that particular platform. 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.
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.
Settings screen has several new options which allows user to interact with device capabilities.
Native Frame State:
This page contains three subsections detailed below:
Known supported RDKV machine configurations:
Family | Platform/Machine Name |
---|---|
RDKV Generic Reference Devices | raspberrypi3 raspberrypi4 |
RDKV Reference Devices | Amlogic
Broadcom
Realtek
|
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.
Code Block | ||
---|---|---|
| ||
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>"}]}}
|
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.
Settings screen has several new options which allows user to interact with device capabilities.
Native Frame State:
This page contains three subsections detailed below:
Allows user to connect to Human Interface devices like Remote, Bluetooth keyboard etcAllows user to connect to Human Interface devices like Remote, Bluetooth keyboard etc.
Below Images shows the flow.
...
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.
...
...
The Scan section exposes various DVB tuner sub-systems; DVB-S, DVB-T and DVB-C based on respective stack integration support.
...
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).
.js).
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.
...
Application Type | Sample appmanagerregistry.conf | Status | |||
---|---|---|---|---|---|
For HTMLApps (online) | { "applications":[ { "displayName":"Bluetooth", "uri":"https://keycode.info/", "applicationType":"HtmlApp", "url":"http://127.0.0.1:50050/lxresui/static/images/info.png" } ] } | Functional | |||
For Native/ResidentApps (offline) | { "applications":[ { "displayName":"Native App", "uri":"http://localhost:50050/lxresui/static/loaderApp/index.html", "applicationType":"applciation/native", "url":"http://127.0.0.1:50050/lxresui/test-tube.png" } ] } | Broken | For LightningApps (online(offline) | { "applications":[ { "displayName":"Lightning Native App", "uri":"<hostedURL>", "applicationType":"LightningApp", "url":"http://127.0.0.1localhost:50050/lxresui/static/loaderApp/iconindex.png" } ] } | Functional |
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.
...
html", "applicationType":"applciation/native", "url":"http://127.0.0.1:50050/lxresui/test-tube.png" } ] } | Broken | |
For LightningApps (online) | { "applications":[ { "displayName":"Lightning App", "uri":"<hostedURL>", "applicationType":"LightningApp", "url":"http://127.0.0.1:50050/lxresui/static/icon.png" } ] } | Functional |
...
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.
Key | Functionality |
---|---|
Keycode - 37,39,38,40 (Left/Right/Up/Down Key) | To Move between the Contents Tiles To Navigate between settings screen |
Keycode - 13 (Enter Key) | To launch app from App list To launch Video Player To Enable/Disable Features To Play/Pause Video |
Keycode - 36 (Home) | To Navigate to home screen To return back to home screen from other apps |
Keycode - 116 (Power Key, F5) | To Power off the device |
Keycode - 174 (AudioVolumeDown Key) | To decrease the volume of the STB |
Keycode - 175 (AudioVolumeUp Key) | To increase the volume of the STB |
Keycode - 173 (AudioVolumeMute Key) | To mute the STB |
Keycode - 113 (Inputs_Shortcut, F2) | To bring up the INPUT list overlay on TV profile device |
Keycode - 114 (Picture_Setting_Shortcut, F3) | To bring up the Picture Settings overlay on TV profile device |
Keycode - 117 (Prime App Hotkey, F6) | Dedicated key to launch Prime Video App |
Keycode - 118 (Netflix App Hotkey, F7) | Dedicated key to launch Netflix App |
Keycode - 119 (YouTube App Hotkey, F8) | Dedicated key to launch YouTube App |
Keycode - 121 (Settings key, F10) | To launch the Settings Overlay over other apps |
Keycode - 120 (Guide_Shortcut, F9) | To go to EPG screen |
Keycode - 122 (AppCarousel, F11) | To bring up the app carousel overlay on top of a child app |
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.
Code Block | ||
---|---|---|
| ||
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.
User has to export a specific theme for it to apply through the UI and rebuild or re-gernerate the app bundle.
Code Block | ||
---|---|---|
| ||
export var CONFIG = {
theme: themeOptions['partnerOne'],
language: localStorage.getItem('Language')!=null ? language[localStorage.getItem('Language')] : language['english']
} |
...
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.
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 |
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.
Code Block | ||
---|---|---|
| ||
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.
User has to export a specific theme for it to apply through the UI and rebuild or re-gernerate the app bundle.
Code Block | ||
---|---|---|
| ||
export var CONFIG = {
theme: themeOptions['partnerOne'],
language: localStorage.getItem('Language')!=null ? language[localStorage.getItem('Language')] : language['english']
} |
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.
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 - UploadStart thea Lightninglocal Appwebserver toand therun Metrologicala Backbuilt Office to be publishedLightning App in ana Appweb Storebrowser updatewatch - 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.
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.
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.
Code Block |
---|
$ DISTRO_FEATURES_append = " offline_apps build_rne " |
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
...
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.
...
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.
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.
Code Block |
---|
$ DISTRO_FEATURES_append = " offline_apps build_rne " |
...
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
...
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.
Functionality | Plugin | Method | Events | |||
---|---|---|---|---|---|---|
Launching Premium apps | org.rdk.RDKShell | launch, launchApplication | ||||
Hide Resident App | org.rdk.RDKShell | setVisibility | ||||
Hot Plug and Unplug of USB | org.rdk.UsbAccess | OnUSBMountChanged | OnUSBMountChanged | |||
Dynamic listing of Apps | org.rdk.RDKShell, Controller, LISA | getAvailableTypes, status, getList | ||||
Suspening / Terminating | Dynamic listing ofApps | org.rdk.RDKShell | suspend, | ControllergetAvailableTypesdestroy, | statuskill |
Functionality | Plugin | Method | Events |
---|---|---|---|
Get Default Network Interface | org.rdk.Network | getDefaultInterface | |
Test Internet Connection | org.rdk.Network | isConnectedToInternet | |
Current IP settings | org.rdk.Network | getIpSettings | |
Get Interfaces | org.rdk.Network | getInterfaces | |
Get Connected SSIDs | org.rdk.Wifi | getConnectedSSID | |
Set Default Interface | org.rdk.Network | setDefaultInterface | |
Discover SSID | org.rdk.Wifi | startScan | |
Stop Scan | org.rdk.Wifi | stopScan | |
Connect to SSID | org.rdk.Wifi | connect | |
Disconnect SSID | org.rdk.Wifi | disconnect | |
Wifi State | org.rdk.Wifi | getCurrentState | |
Enable/Disable Wifi | org.rdk.Wifi | setEnabled | |
Paired SSIDs | org.rdk.Wifi | getPairedSSID | |
Save SSID | org.rdk.Wifi | saveSSID | |
Activate Wifi Plugin | Controller | activate | |
Wifi state change | org.rdk.Wifi | onWifiStateChanged | |
Error | org.rdk.Wifi | onError | |
Available SSID | org.rdk.Wifi | onAvailableSSIDs | |
Wifi state change | org.rdk.Wifi | onWifiStateChanged |
...
Functionality | Plugin | Method | Events |
---|---|---|---|
Activate Bluetooth | Controller | activate | |
Disable Bluetooth | org.rdk.Bluetooth | disable | |
Enable Bluetooth | org.rdk.Bluetooth | enable | |
Start Scan | org.rdk.Bluetooth | startScan | |
Stop Scan | org.rdk.Bluetooth | stopScan | |
Discovered Devices | org.rdk.Bluetooth | getDiscoveredDevices | |
Paired Device | org.rdk.Bluetooth | getPairedDevice | |
Connected Device | org.rdk.Bluetooth | getConnectedDevices | |
Connect to Bluetooth device | org.rdk.Bluetooth | connect | |
Disconnected to Bluetooth device | org.rdk.Bluetooth | disconnect | |
Unpair a device | org.rdk.Bluetooth | unpair | |
Pair a device | org.rdk.Bluetooth | pair | |
Discovered Device | org.rdk.Bluetooth | onDiscoveredDevice | |
Pairing Request | org.rdk.Bluetooth | onPairingRequest | |
Connection Change | org.rdk.Bluetooth | onConnectionChange | |
Discovery Complete | org.rdk.Bluetooth | onDiscoveryCompleted | |
Discovery Started | org.rdk.Bluetooth | onDiscoveryStarted | |
Request Failed | org.rdk.Bluetooth | onRequestFailed | |
Remote Control Auto-Pairing | org.rdk.RemoteControl | startPairing | |
Remote Control Status | org.rdk.RemoteControl | getNetStatus | |
Remote Control Status | org.rdk.RemoteControl | onStatus |
Functionality | Plugin | Method | Events |
---|---|---|---|
Enable Display Setting plugin | Controller | org.rdk.DisplaySettings | |
Get Resolution | org.rdk.DisplaySettings | getCurrentResolution | |
Get HDCP Status | org.rdk.HdcpProfile | getHDCPStatus | onDisplayConnectionChanged, |
Get HRD Settings | DisplayInfo | hdrsetting | |
Supported Resolutions | org.rdk.DisplaySettings | getSupportedResolutions | |
Set Resolutions | org.rdk.DisplaySettings | setCurrentResolution | resolutionPreChange, resolutionChanged |
Functionality | Plugin | Method | Events |
---|---|---|---|
Sound mode | org.rdk.DisplaySettings | getSoundMode | |
Supported Sound Modes | org.rdk.DisplaySettings | getSupportedAudioModes | |
Set Sound Mode | org.rdk.DisplaySettings | setSoundMode |
...
Functionality | Plugin | Method | Events |
---|---|---|---|
Deactivate app | org.rdk.RDKShell | destroy | |
Suspend app | org.rdk.RDKShell | suspend | |
Focus App | org.rdk.RDKShell | setFocus | |
Move app to top of zorder | org.rdk.RDKShell | moveToFront | |
State change of application event | Controller | statechange | |
Add key intercepts | org.rdk.RDKShell | addKeyIntercept | |
Install Downloadable App bundle | LISA | install | operationStatus |
To populate & manage the installed Downloaded App bundles | LISA | getStorageDetails, getList | |
Uninstall Downloadable App bundle | LISA | uninstall | |
Launch/resume Downloaded App bundle | org.rdk.RDKShell | launchApplication, resumeApplication | |
Suspend/Kill Downloaded App bundle | org.rdk.RDKShell | kill | |
User Preferences such as current language | org.rdk.UserPreferences | setUILanguage |
Functionality | Plugin | Method | Events |
---|---|---|---|
Activate Xcast Plugin | Controller (org.rdk.Xcast) | activate | |
Deactivate Xcast Plugin | Controller (org.rdk.Xcast) | deactivate | |
Enable/Disable Xcast Status | org.rdk.Xcast | getEnabled | |
Set Enable/Disable Xcast Status | org.rdk.Xcast | setEnabled | |
Notify Application State | org.rdk.Xcast | onApplicationStateChanged | |
Launch Request event | org.rdk.Xcast | onApplicationLaunchRequest | |
Hide Request event | org.rdk.Xcast | onApplicationHideRequest | |
Resume Request event | org.rdk.Xcast | onApplicationResumeRequest | |
Stop Request event | org.rdk.Xcast | onApplicationStopRequest | |
State Request event | org.rdk.Xcast | onApplicationStateRequest |
...
Functionality | Plugin | Method | Events |
---|---|---|---|
Creates a symbolic link | org.rdk.UsbAccess | createLink | |
Clears or removes the symbolic link | org.rdk.UsbAccess | clearLink | |
Gets a list of files and folders | org.rdk.UsbAccess | getFileList | |
Gets a list of files and folders | org.rdk.UsbAccess | getFileList | |
Triggered when a USB drive is mounted or unmounted | org.rdk.UsbAccess | onUSBMountChanged |
Functionality | Plugin | Method | Event |
---|---|---|---|
Get App Catalog Details, list of apps | LISA | getMetadata, getList | |
Install/uninstall App | LISA | install, uninstall | |
Show the progress of installation / uninstallation | LISA | getProgress | operationStatus |
Functionality | Plugin | Method | Event |
---|---|---|---|
Get available countries | DTV | numberOfCountries | |
Get list of country | DTV | countryList | |
Get list of services(channels with name, uri and other details) | DTV | serviceList@dvbs | |
Get list of available satellites | DTV | serviceList@dvbs | |
Initiates a service search | DTV | startServiceSearch | |
Get available services | DTV | numberOfServices | |
Get schedule for given channel | DTV | scheduleEvents@PARAMS | |
Get current and next event details for channel | DTV | nowNextEvents@PARAMS |
...