Introduction

This manual contains information on how to use Tata Elxsi Accelerator UI, which is a user interface for Video Accelerator devices.

Features

1. Live Video Playback
2. Playback Controls

3. Home screen UI with following options:

   1. Recommended Videos
   2. Premium Apps (YouTube)

   3. Metrological Apps

4. Video on Demand (VOD)

5. General Settings 
   1. Resolution Settings
      

6. Bluetooth Settings

7. Wi-Fi Settings 
8. Diagnostics screen

9. Volume Control

Set Up  

This section provides details on how the user can launch Tata Elxsi Accelerator UI by choosing either of the following 3 options:

1. Launch the pre-deployed Lightning UI on accelerator
2. Configure pre-deployed Accelerator UI as the default UI on STB boot up
3. Build the Lightning UI locally and launch on accelerator device  

Note:

Using pre-deployed url (option 1) is the easiest way, but NOT the recommended way as DEV version is deployed which undergo continuous development. Preferred option is to setup a build locally from Github code - Option 3

Option-1: Launch the pre-deployed Lightning UI on accelerator 

1. Pre-deployed url is available at http://35.155.171.121:8088/index.html
2. Navigate to  Controller UI ( Controller UI can be loaded with the RPi / box's IP address with port number 9998 (http://<Rpi's /Box's IP address>:9998). )
3. Navigate to Resident App tab
4. Enter deployed url (http://35.155.171.121:8088/index.html) in custom URL field and click ‘SET’.
5. The accelerator UI will get loaded on Resident App (web kit browser instance)

(Above figure shows setting URL in the Resident App)  

Option-2: Configure the pre-deployed Accelerator UI as the default UI on STB boot up 

Point Resident app to the deployed URL of Accelerator Application. On boot up, Accelerator app will be launched immediately after displaying the box console screen . Default video will be played on launching the Accelerator App. (For RPI RDKV image, we need to add the URL in /opt/residentapp.conf. *** It may vary depends on the builds )

Option-3: Build the Accelerator UI and launch on accelerator 

How to build Accelerator UI code

1. Pre-requisites:

1.1) Installation of Node.js and npm. 

             Latest stable node V12.18.3 is preferred on windows

     https://nodejs.org/en/download/
(Note: latest version of nodejs v16.x is preferred on linux)

1.2) and Lightning-CLI

    npm install -g @lightningjs/cli

      (Use sudo in case of permission issues like this: 
      npm ERR! code EACCES
      npm ERR! syscall access)
      
      Ignore npm warnings like this:
      npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended 
      npm WARN deprecated rollup-plugin-babel@4.4.0: This package has been deprecated  

2. Clone the Accelerator-UI project

     git clone git@github.com:rdkcentral/AcceleratorUI.git   

(Note : You have to add ssh keys to github inorder to checkout the code.

# Create an SSH key.

• • ssh-keygen

# Copy this to the GitHub SSH key page.

• • cat ~/.ssh/id_rsa.pub
  • (Github -> profile -> settings -> SSH and GPG keys -> Add New SSH key )

# Clone the git repository with SSH.

• • git clone git@github.com:rdkcentral/AcceleratorUI.git)

3. Navigate to the project location in terminal

     cd AcceleratorUI

4. Run:  npm install

It downloads all the dependent packages.

       In case of errors from Husky like this:

             husky > Setting up git hooks
             ENOENT: no such file or directory, mkdir 'node_modules/husky/.git/hooks'
             husky > Failed to install        

              Please upgrade git version by following below mentioned steps and repeat npm install             

             sudo add-apt-repository ppa:git-core/ppa -y
             sudo apt-get update
             sudo apt-get install git -y
             git --version 

             npm warnings like the ones mentioned below can be ignored

             npm WARN deprecated request-promise@4.2.6: request-promise has been deprecated because it extends the now deprecated 
             npm WARN deprecated har-validator@5.1.5: this library is no longer supported
             npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage 

5. lng build :  will create a standalone bundle that you can run in the browser.

6. lng serve :  will start a local webserver and run the App.

 The port information of the server will be shown in the terminal.

 Application will be up and running at (http://<hostIP>:8080)

 eg: http://127.0.0.1:8080 and http://<host_ip>:8080

How to bring up Accelerator UI 

As mentioned in Launch the pre-deployed Lightning UI on accelerator section, Launch Controller UI in your web browser by giving the URL in specified format.

In Controller UI, navigate to Resident tab and Enter the Application URL ( URL of the application getting from 'lng serve' ) in 'Custom URL' field and click on 'SET' button.

The Lightning accelerator UI will get loaded in the Resident App(webkit browser instance)

To configure this as the default UI on bootup:

Follow steps mentioned in Configure the pre-deployed Accelerator UI as the default UI to configure your locally deployed application (http://<IPaddress>:8080) as the default UI on STB boot up

Keys Used for Navigation

Functional Specification

User Management

Live playback

Live video playback will be running by default on the screen.  Dash, HLS and MP4 format of videos are supported by the media player.

(The above figure shows an instance of video playback before the user launches the UI)

Playback Controls

(The above figure shows the player control UI)

On pressing ‘Down Arrow’ key, Player control UI will be displayed. It has two rows of controls.

Following keys are used for navigation in Player control UI

Top row has following functionalities

Bottom row has following functionalities

Channel Information

Along with the Player control UI, channel name and channel logo also appear on top of the screen.

(The above figure shows an example of the Channel Info)

Network Information

Network information also appears along with the Player control UI. Time, Wi-Fi/Ethernet/No network, Bluetooth and weather information should appear on top right corner of the screen. Weather information functionality is to be implemented. 

(The above figure shows the Network info appearing on the screen )

Accelerator UI

On pressing ‘Home’ key (or ← key) from the live playback  (or Backspace from keyboard), the Accelerator UI will get launched. Exiting from the UI at any stage is also done in the similar fashion by pressing ‘Home/Backspace’ key.

(The above figure shows the launched Accelerator UI on the screen)

Home Screen

In the Accelerator UI that has launched, the user will be in Home screen by default.   On Pressing ‘Enter’ key from the home menu on Sidebar, the focus will be on Recommended for you.  Underneath Recommended for you, there are rows corresponding to Premium Apps and Metrological Apps. The user can navigate into various rows using 'Up-Down Arrow’ keys.                                                             

(The above figure shows the launched Accelerator UI Home Screen)

Premium Apps

In the second row there is Premium Apps, in which YouTube, Netflix and Amazon Prime Apps are supported. The user can launch YouTube / Netflix/Amazon prime by pressing ‘OK /Enter’ key from the tiles.

Direct launch of YouTube and Netflix

Apart from launching directly from UI, the user can launch YouTube and Netflix directly by a key press from RCU. Tested Netflix launch and YouTube launch using random keycodes.

TE mapped keycode 50 for Netflix and keycode 48 for YouTube and verified using XR5 RCU and XR11 RCU. The keymapping can be changed accordingly to use in other remotes.

Move to front and back for premium apps and metro apps can also be performed directly by a key press from RCU.

TE mapped keycode 114 and keycode 77 for this feature and verified using BT RCU and XR RCU. The keymapping can be changed accordingly to use in other remotes.

Metrological Apps

Launching of all Applications in the third row is achieved by pressing ‘OK/Enter’ key from the tiles in Metrological Apps. To exit from metro apps, press on 'Home' button.

Side Menu

On launching the Home screen, Side bar would be visible on the left-hand side of the screen which comprises of menu items like Home, TV guide, App, VOD and Settings. By pressing ‘Left Arrow’ key from Home screen, the Side Menu will expand.

If the user goes back to Player from any menu other than Home screen and then launch back using ‘Menu/Back Space’ key, then the application is not launched to the default screen (Home screen), instead it launches to the previous state.

Following keys are used to navigate in side menu:

Shrink view

(The above figure shows the Side Menu on launching the Home screen )

Expanded view

(The above figure shows the expanded Side Menu on pressing ‘Left Arrow’ key)

Info bar

Information like Bluetooth & Wi-Fi/Ethernet connectivity, weather information and time are displayed in Info bar seen on the top right corner of the Home screen. InfoBar appears along with the launching of Player controls UI. This information status toggles with the logo, and once in every 2 mins logo is shown. 

(The above figure shows the logo displayed on the InfoBar) 

Every minute Bluetooth connectivity check happens, to get the Bluetooth connection status. Based on which the Bluetooth icon will appear on the InfoBar.

Based on the internet connectivity status appropriate icon will be shown in the InfoBar. Every minute connectivity check happens, to get the connection status.  

If the board is connected to Ethernet, then the Ethernet icon will be displayed 

(The above figure shows the Ethernet icon on the InfoBar) 

Similarly, if the board is connected to Wi-Fi, then the Wi-Fi icon will be displayed. If the board is connected to both Ethernet and Wi-Fi simultaneously, only Wi-Fi icon will be displayed. 

(The above figure shows the Wi-Fi icon on the InfoBar) 

If the board has no network connection then the no network icon will be displayed. 

(The above figure shows the No-Network icon on the InfoBar) 

TV Guide [To be Implemented]

For navigating into TV guide, press ‘Enter’ key from the TV guide menu on Sidebar and thus the TV guide UI appears.

Video on Demand

Navigate Down through the Side bar menu and press ‘Enter’ key on VOD and the VOD screen appears. On the top of the screen, the list of categories of videos will be available. Among them FOR YOU category will be highlighted.

Navigation through each category is possible by using ‘Left Arrow’ and ‘Right Arrow’ keys. Pressing ‘Enter’ key from any such categories will display the videos on that category as rows of tiles.

As shown in the above figure, tiles corresponding to the selected category will be displayed on the top. Only three rows of categories are supported by now. Pressing ‘Down Arrow’ key from entered category will navigate you to all rows and focus will be on ‘See All’ tile. Streaming of the video is initiated by pressing the ‘Enter’ key from the desired tile.

Following keys are used to navigate in VOD:

While navigating through VOD tiles, the description box showing the description about the video along with its   ratings and quality will appear at the bottom of each tile as shown in the figure. The cost of each video will be visible while that particular tile is on highlight but the purchase options are not yet implemented.

Settings

Navigate down through Sidebar menu and press ‘Enter’ key on settings menu to get settings window. Settings window comprise of General Settings, Bluetooth Remote & Devices, Diagnostics and WIFI Settings. 

(The above figure shows settings window)

General Settings will be in highlight by default. Using ‘Left Arrow’ and ‘Right Arrow’ keys, the navigation through each settings tile can be achieved.

General Settings

General Settings will be in highlight by default. Using ‘Left Arrow’ and ‘Right Arrow’ keys, the navigation through each settings tile can be achieved. 

Press ‘Enter’ key on ‘General Settings ' to navigate in to the General Settings screen which contains Resolution Settings and Language Settings. Press ‘Enter’ key on ‘Resolution settings’ or ‘Language Settings’ to navigate to the respective Settings Screen. 

( The above figure shows the General Settings window)

Resolution Settings

Press ‘Enter’ key on ‘Resolution Settings ' to navigate in to the Resolution settings Screen. On pressing ‘Enter’ key on ‘Resolution settings’, the system starts scanning for all the available TV resolutions. 

(The above figure shows the Resolution Settings window)

Using ‘Up Arrow’ and ‘Down Arrow’ keys, the navigation through each resolution tile listed can be achieved. The highest resolution will be set and will be in highlight by default. Press ‘Enter’ key on the desired resolution tile to set the resolution, then that particular tile will be highlighted and ‘Not Set’ label changes to ‘Set’. 

Language Settings

Press ‘Enter’ key on ‘Language Settings ' to navigate in to the Language settings Screen. On pressing ‘Enter’ key on ‘Language settings’, the system starts scanning for all the available languages.

(The above figure shows the Language Settings window)

Using ‘Up Arrow’ and ‘Down Arrow’ keys, the navigation through each language tile listed can be achieved. The highest language will be set and will be in highlight by default. Press ‘Enter’ key on the desired language tile to set the language, then an automatic reload of the UI will take place and  then that particular tile will be highlighted and ‘Not Set’ label changes to ‘Set’. 

Bluetooth Settings 

Press ‘Enter’ key on ‘Bluetooth Remote and Devices’ to go to submenu related to Bluetooth settings. 

(The above figure shows Bluetooth settings window)

Press ‘Enter’ key on ‘Discover Bluetooth Remote' to navigate in to instructions window. On pressing ‘Enter’ key, the system starts scanning for devices. The instructions to discover Bluetooth remote are displayed for 10 seconds while the scanning process goes on in background. The countdown ends on successful scanning or after 10 seconds and lists the devices discovered and shows the connection status as ‘Not Ready’. 

(The above figure shows Discover Bluetooth Remote window)

For pairing and connecting the scanned devices, press ‘Enter’ key from corresponding device in the list. This gives ‘Pair and connect’ window as shown below (with any instructions required for pairing, if any). 

(The above figure shows Bluetooth Pair and Connect window)

On Pressing ‘Enter’ key from ‘Pair and Connect’, the user can connect the device and gets navigated into ‘Discover window’ in which the connection status will be updated as ‘Ready’. On Pressing ‘Enter’ key from ‘Disconnect’, the user can disconnect the selected device.

Wi-Fi Settings 

Press ‘Enter’ key on ‘Wifi’ to go to submenu related to Wifi settings. A screen appear from the right side and Wifi scan starts automatically. (On power on, make sure that box/RPI is not connected to Ethernet). On completion of scan, a list of available networks (access points) will be visible and if no networks were found, user can try again by using the "Discover WiFi" button on screen.

(The above figure shows Wi-Fi in the settings window) 

On choosing a network, it will be directed to a screen with "Connect" and "OK" options. Selecting the "OK" option takes the control back to the previous screen

(The above figure shows Wi-Fi Connect window)

For an open network, the "Connect" option connects to the network. For a secure network, user will be prompted for the password. An alphanumeric keyboard is implemented for this purpose. A "Done" button lets user submit the password and connect to the network and if the password is wrong, a text is provided to let the user know of the same

(The above figure shows Wi-Fi Alphanumeric Keyboard)

On successful connection, it is returned back to the previous screen with the list of available networks and user can see that the device has been connected to the desired network. On choosing the connected network from the list again, user shall be able to view the details of this network such as ssid, bssid, rate, noise, security, signal strength and frequency. It also gives the option to disconnect from this network and on disconnect a new scan starts automatically

Diagnostics Screen

Press ‘Enter’ key on ‘Diagnostics' to navigate in to Diagnostics Screen. In the diagnostics screen all the system Information like STB version, STM timestamp Serial Number, Time, uptime, Total RAM, Free RAM, Device Name, CPU Load, current resolution etc. will be displayed. 

(The above figure shows diagnostics in the settings window) 

Volume Control

(The above figure shows volume control UI )

The volume level of the videos played is controlled by the volume control UI which will be visible by pressing ‘Volume Up’ key. Increasing and decreasing of the volume level are done by using ‘Volume Up’ and ‘Volume Down’ keys respectively.

Following keys are used in Volume control UI:

(The above figure shows the volume control UI when in mute)

Tata Elxsi Accelerator UI Customization

For Tata Elxsi Accelerator UI Customization refer Tata Elxsi Accelerator UI Customization .

Future Plans

Following features are in radar of our future scope 

• TV Guide  
• Player control UI : Second row of Player control UI  
• Info bar : weather Functionality in Info bar  
• 'Apps' from Side bar : Launching of Apps from fourth menu of Side bar 
• VOD  

• • "See All" option in VOD  
  • Purchase option in VOD screen  
  • Rows corresponding to fourth category onwards in VOD screen  

Known Issues in the App with RDK services

1. Time is not set according to locale. 
2. Voice search feature not implemented. 
3. Second row of Player control UI not implemented. 
4. Volume control feature doesn’t work inside premium/metro applications.

Appendix

Whom to contact for Support 

te_rdkm_lightningui@tataelxsi.co.in