Overview

RDK Accelerator Home UI - Version 2.0 comes with rich graphic user interfaces and new features, more eye catchy design along with configurable UI for new operator logos and there user interfaces . Version 2.0 app is a Lightning application, and used icons for mic, settings etc., background images used in splash screen, and other places are custom made images, not downloaded from the google or other open source web sites. Old android icons has been completely removed which were used in earlier version of the RDK Accelerator Home UI.   

Splash Screen

The app boots up with new 'splash' screen, which has eye catchy background along with new RDK logo comes with animation on screen load time from left-top corner and sets into the center of the screen. 

Press ‘S’ key to switch to 'Choose a Service' screen, otherwise after 5 sec automatically  'Pair Bluetooth device' screen will be loaded 

Choose a Service

This new app has redesigned ‘Choose a Service’ screen with new background, shadow and animation effects, on navigation key right/left focused operator logo pops up (zoom-in) and background color changes/switches on selection of different operator logo with shadow and animation effect. 

Add New Operator Logo and UI 

Choose a Service screen is fully configurable for the addition of new operator logo and UI or modification in existing operator logos and UI's, it can be done in configuration file easily by following below mentioned steps:

Prerequisites: Node.js , npm, Lightning-CLI should be available in PC

Step 1: Clone the RDKAPPS repo using the below command:

$ git clone "https://code.rdkcentral.com/r/components/opensource/RDK_apps"

Step 2: Switch to version 2 branch (new ui)

$ git checkout version_2

Step 3: Goto Accelerator Home Ui directory

$ cd RDK_apps/accelerator-home-ui/

Step 4: Install npm dependencies

$ npm install

Step 5: Goto 'static/data/UIInfo.js'

you will see below configuration file

export var uiInfo = [
  {
    title: 'DEFAULT', 							
    url: '/images/splash/DefaultUI.png', 		
    uri: '',									
  },
  {
    title: 'LIVE',        							// title of the operator logo
    url: '/images/splash/LiveTv.png',				// operator logo
    uri: 'http://35.155.171.121:8088/index.html',	// operator ui web url
  },

In above configuration file new operator logo and ui can be added or removed.

Remote Pairing 

Remote pairing screen comes with new background image, You will be prompted to the below screen if the Bluetooth remote is not connected to the device

Voice Search

On voice input through remote wave will be displayed on the screen and mic icon will be focused as per below shown in the image

On pressing Mic key from remote , Mic icon will be highlighted and voice bar will be displayed (animated wave) instead  of search text.

Use key up from home ui to navigate to mic

Use right key to navigate to search

Home UI Screen

This new app has redesigned ‘Home UI’ screen with new background, shadow and animation effects, it contains sections for Apps, Metro Apps, TV shows, and Voice and Settings icons displayed on top section. YouTube and the metrological apps can be launched from app listings. Video content can be played from the TV Shows section. Bluetooth and WIFI settings can be managed from the settings screen. Search bar and time display are also available in the home UI. Functionality implementation for the search bar and mic are in progress. 

Note: The user should set the timezone in you STB before loading the UI using the curl command

curl -X POST -H "Content-Type: application/json" 'http://127.0.0.1:9998/jsonrpc' -d '{"jsonrpc":"2.0","id":"3","method":"org.rdk.System.1.setTimeZoneDST","params":{"timeZone":"Asia/Kolkata"}}';echo

If the timezone is not properly set in the box then the UI by default shows Eastern Standard Time.

Key Navigation: 

Apps > Launched YouTube App


Metro Apps > Launched Euro News App

TvShow > Played Let it Snow

Video Playback


Video contents can be played from the TV Shows section. 

Key Navigation:


Shutdown dialogue

On "Power" key press from remote or key "F1" from keyboard shutdown dialogue box will appear with option light sleep and deep sleep.

 Key Navigation:

Settings Screen

This new app has redesigned ‘Settings' screen with new background, shadow and animation effects.

Bluetooth, WiFi, and USB tab displayed as list on the left side panel and on selection corresponding content displayed on right side panel.
Toggle button will be displayed in WiFi and Bluetooth screen to enable and disable WiFi/Bluetooth.
On selection of USB: Video, Audio, Photo folders will be displayed and on selection it will navigate to corresponding views. 

Key Navigation:

Connect to Bluetooth :

The Bluetooth screen supports discovery, pairing, and connecting to Bluetooth devices. 

Key Navigation:


Connected to Bluetooth device 

Connect to WIFI

The WIFI screen supports the ability to manage STB's wifi connection.   

Key Navigation:

Connected to WIFI device

Connected to other available WiFi

Virtual keyboard screen to connect to WiFi

USB Access Features

Steps to enable  USB on box 

 Note:

  1. while creating Soft link use the path where the USB content are mounted for example in above case usb contents are mounted in /usb path
  2. USB access plugin should be enabled from controller UI


On enable USB

USB Video Screen

All mp4 files are listed in a row and focused Item preview shown

Key Navigation:

USB Audio Screen

All mp3 files are listed in row and focused Item preview shown.

Key Navigation:

Note: audio playback functionality not implemented yet. 

USB Image Screen

All JPG, PNG files are listed in row and focused Item preview shown

Key Navigation:

Controller UI 

Users can interact with plugins using Controller UI. It helps the user to activate or deactivate the plugin and the user can go through each plugin and look for properties and methods to execute. 

USB Access Plugin interaction using the console 

User can also interact with 'UsbAccess' plugins using JSON-RPC 

1) Create Link:

2) Clear Link:

3) Get File list:

Key Handling

KeyFunctionality
S keyTo display UI Switch screen from the splash screen
Enter/Right/left/up/down keys

To move the focus to app list/metro apps/tv-shows/settings from Home UI screen

To navigate to USB folders on settings screen

To navigate to Bluetooth tab on settings screen

To navigate to wifi tab on settings screen

Enter key

To select the UI from the UI Switch screen

To launch apps from the app list

To launch player from tv-shows

To launch the settings screen from the home ui screen

To enable/disable Bluetooth scanning in settings screen

To enable/disable wifi scanning in settings screen

To pause player from Player controls

To connect/disconnect/pair/unpair a Bluetooth device from the settings screen

To connect/disconnect a WiFi network in settings screen

Left/Right/Up/Down arrow

To navigate within Home UI

To navigate through available Bluetooth devices on the settings screen

To navigate through available wifi networks in settings screen

To navigate to USB contents 

M/Home/1 key

To exit from launched apps (ex: cobalt, cnn, vimeo)

To exit from player launched 

Esc/M keyTo exit from password panel on WiFi screen
Down arrowTo display player controls menu from Player screen
key Code : 27 , 77, 49 , 36 ,158 To display Home Page
key Code : 112,142

To STANDBY and POWER_ON
Remote power key and keyboard F1 key used for STANDBY and POWER_ON

key Code : 228 , 116 To deep sleep
key Code : 175 174To audio increase  and decrease
key Code : 112,142, 116, F1To launch shutdown panel


Create distribution build

Prerequisites: Node.js , npm, Lightning-CLI should be available in PC

Step 1: Clone the RDKAPPS repo using the below command:

$ git clone "https://code.rdkcentral.com/r/components/opensource/RDK_apps"

Step 2: Switch to version 2 branch (new ui)

$ git checkout version_2

Step 3: Goto Accelerator Home Ui directory

$ cd RDK_apps/accelerator-home-ui/

Step 4: Install npm dependencies

$ npm install

Step 5: Run below command to generate dist folder

$ lng dist

Step 6: Generated dist folder will have directory structure > dist/es6/<compiled files> 

Step 7: Copy <compiled files> into dist and remove es6 dir

Now dist folder is ready for the deployment.

Download Pre-build (dist)

Download compiled code (dist): https://drive.google.com/drive/folders/1-44Zy3tav4SIEY7vF0fm1newcE3hBUg4?usp=sharing

Procedure to Flash Distribution Build and Bring up New UI on Bootup

Download pre-build (morty and dunfell) image's for RPI with Version 2 UI changes

Below per-build morty and dunfell image is available for RPI device created from sd card after flashing dist (compiled version of src code) just to avoid above steps: create distribution build, download pre-build and flash, it has latest version_2 ui changes and on bootup new ui will be rendered on TV screen. 

pre-build dunfell image: https://drive.google.com/file/d/1WCuzFKwENFwq_bEERuHXxDUFyO6AuX7q/view?usp=sharing

pre-build morty image: https://drive.google.com/file/d/1hxbTN-36rgLTposhTqANZs4fcv8jAQ2A/view?usp=sharing

Flash image on SD card

Option 1:

$ sudo dd if=<downloaded image path> of=/dev/sdb bs=1M

ex: sudo dd if=rdk-mc-rpi.img of=/dev/sdb bs=1M

Option 2:

Note: Balena etcher is available for MAC OS, Windows and Linux.