You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 24 Next »

IN-PROGRESS

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 centre 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

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. 

  • Introduced New features

    • On voice input through remote wave (animated wave) will be displayed on the screen and mic icon will be focused
    • Changing the background based on tile selection.
    • Rounded corner image tiles
    • Left/Right arrow in tile rows
    • Added Info section, and will be displayed on focus of Metro apps and TvShows tile
    • New icons for voice search and settings
    • Time, day and date display in home UI
    • Shadow effects

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 the UI by default shows Eastern Standard Time.

Use the Enter/Right/left/up/down keys to move the focus or navigate to apps/metro apps/tv-shows/settings (icon available on top right corner just before time) within the home UI

Use the Enter key to launch apps 
Use Ctrl + M/Home key to exit from the launched apps

Video Playback

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. 

Use the Enter/Right/left/up/down keys to move the focus or navigate to back screen, WiFi, USB folders, enable/disable WiFi and Bluetooth

Functionality implementation for the USB access are in progress. 

Connect to Bluetooth 

Connect to WIFI

USB Access

USB Video Screen

USB Audio Screen

USB Image Screen

Demo Videos and Attachments


AppsLaunch_Demo-v.0.2-2021-07-15.MP4

RDK_Accelerator_NewUI_Demo-v.0.2-2021-07-15.mkv

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

  • Connect your device with lan and get the box/device ip, make sure your dev pc and device is connected with the same network
  • login into box:
    • $ ssh root@<your box ip>
    • $ rm -rf lxresui
  • Extract downloaded pre-build lxresui (dist)  folder in your dev pc 
  • Copy lxresui folder from dev pc  to box/device:
  • configure residentapp.sh file
  • reboot the box, on bootup new ui will be rendered on TV screen


  • No labels

DISCLAIMER: Please note that the use of the RDK Wiki is subject to its Privacy Policy & Terms of Use. In addition, this Wiki may be accessed by all RDK licensees and their contractors.