This manual contains information on how to use Tata Elxsi Accelerator UI, which is an user interface for Video Accelerator devices.
- Live Video Playback
- Playback Controls
Home screen UI with following options:
- Recommended Videos
- Premium Apps (YouTube, Amazon, Netflix)
Video on Demand (VOD)
This section provides details on how the user can launch Tata Elxsi Accelerator UI by choosing either of the following 3 options:
- Launch the pre-deployed Lightning UI on accelerator
- Configure pre-deployed Accelerator UI as the default UI on STB boot up
- Build the Lightning UI locally and launch on accelerator device
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
- Pre-deployed url is available at http://18.104.22.168:8080/
- Navigate to Thunder Controller UI (by giving IP address of device on browser)
- Navigate to UX tab
- Enter deployed url (http://22.214.171.124:8080/) in custom URL field and click ‘SET’.
- The accelerator UI will get loaded on UX (web kit browser instance)
(Above figure shows setting URL in the UX)
Option-2: Configure the pre-deployed Accelerator UI as the default UI on STB boot up
Point RDK splash screen to the deployed URL of Accelerator Application. On boot up, Accelerator app will be launched immediately after displaying RDK Splash screen (Default video will be played on launching the Accelerator App)
Option-3: Build the Accelerator UI and launch on accelerator
How to build Accelerator UI code
1.1) Installation of Node.js and npm.
(Latest stable node V12.18.3 is preferred)
1.2) and Lightning-CLI
npm install -g rdkcentral/Lightning-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 firstname.lastname@example.org: core-js@<3 is no longer maintained and not recommended
npm WARN deprecated email@example.com: This package has been deprecated
2. Clone the Accelerator-UI project
git clone firstname.lastname@example.org:rdkcentral/AcceleratorUI.git
(Access restricted as open-sourcing process is in progress)
3. Navigate to the project location in terminal
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
npm warnings like the ones mentioned below can be ignored
npm WARN deprecated email@example.com: request-promise has been deprecated because it extends the now deprecated
npm WARN deprecated firstname.lastname@example.org: this library is no longer supported
npm WARN deprecated email@example.com: 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)
How to bring up Accelerator UI
As mentioned in Launch the pre-deployed Lightning UI on accelerator section, Launch Thunder Controller UI in your web browser by giving IP address of the device.
In Thunder Controller UI, navigate to UX 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 UX(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
|Buttons used in Remote||Keys used in Keyboard|
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.)
(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
To navigate between rows
To navigate between Player options
To select Player controls
Top row has following functionalities
To go to previous channel
To reduce the fast-forwarded streaming speed
Play - Pause button
To play and pause the video
To fasten the streaming speed more than that of the actual speed
To go to next channel
Bottom row has following functionalities
To be Implemented
To be Implemented
To be Implemented
To be Implemented
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 also appears along with the Player control UI. Time, Wi-Fi, Bluetooth and weather information should appear on top right corner of the screen (functionality- to be implemented)
(The above figure shows the Network info appearing on the screen )
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)
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.
In the second row there is Premium Apps, in which three Apps are supported. The user can launch YouTube, Amazon and Netflix in supported platforms by pressing ‘OK /Enter’ key from the tiles.
How to enable Premium Apps
The premium apps - Amazon Prime, Netflix and YouTube are integrated in the application. By default, only YouTube is enabled. To enable/disable Amazon prime and Netflix, follow the below steps:
- Open '.env' file in the application folder - AcceleratorUI (might need 'ls -la' since it is a dot file)
- To enable an app, set corresponding variable in .env file to 'true'.\ Eg: To enable Netflix, set 'APP_NETFLIX=true'.\
- Save the changes, rebuild (lng build) and relaunch (lng serve) the application
- Enabled app will be available under 'Homescreen -> Premium Apps' section.
Launching of all Applications in the third row is achieved by pressing ‘OK/Enter’ key from the tiles in Metrological Apps
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:
‘Up’ and ‘Down Arrow’ keys
To navigate into each side menu item.
To navigate into corresponding screens of the selected menu item.
‘Left Arrow’ key
To bring focus on sidebar or to navigate back into sidebar from any launched screen.
(The above figure shows the Side Menu on launching the Home screen )
(The above figure shows the expanded Side Menu on pressing ‘Left Arrow’ key)
Information like Bluetooth & Wi-Fi 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
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:
‘Left/Right Arrow’ key
1.To navigate in to different categories
2.To navigate through tiles in each row
‘Up/Down Arrow’ key
To navigate through different rows
‘OK/ Enter’ key
1.Streaming of the video from the desired tile.
2.To get the rows corresponding to selected category on top.
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.
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, Network Interfaces and Parental Controls.
Press ‘Enter’ key on ‘Discover Bluetooth Remote' to navigate in to instructions window. On pressing ‘Enter’ key, the system starts scanning for devices. Along with that press and hold ‘Volume Up’ and ‘Channel Up’ keys simultaneously till the green LED on the remote gets steady. Once the keys are released, green LED will start blinking. 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 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.
Press ‘Enter’ key on ‘Bluetooth Remote and Devices’ to go to submenu related to Bluetooth settings.
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.
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.
(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:
To increase the volume level
To decrease the volume level
To mute and unmute
(The above figure shows the volume control UI when in mute)
Features not supported
Following features are not yet implemented in this release
- TV Guide
- Player control UI : Second row of Player control UI
- Info bar : Functionalities in Info bar
- 'Apps' from Side bar : Launching of Apps from fourth menu of Side bar
"See All" option in VOD
Purchase option in VOD screen
Rows corresponding to fourth category onwards in VOD screen
- Settings : Settings options excluding Bluetooth settings
- Bluetooth Settings - 'Other devices' not supported
Known Issues/ Deviations
- Channel next and previous button working is not cyclic/incremental. Now each of the button is mapped to a particular video.
- After a VOD playback is exited, the focus wont be on the corresponding tile, but on the category tile.
- Sometimes, VOD tiles overlaps over ‘See All’ tile on highlight.
- Image loading takes longer time when we launch the app for first time