Status |
---|
subtle | true |
---|
colour | Red |
---|
title | in-progress |
---|
|
Overview
...
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 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
Image RemovedImage Added
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.
Image Added
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
- To install Node.js and npm - https://nodejs.org/en/download/
- To install Lightning CLI - npm install -g @lightningjs/cli
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
Code Block |
---|
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.Image 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
Image RemovedImage Added
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
Image Removed
On pressing Mic key from remote , Mic icon will be highlighted and voice bar will be displayed (animated wave) instead of search text.
Image Added
Use key up from home ui to navigate to mic
Image Added
Use right key to navigate to search
Image AddedImage Removed
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.
Image Removed
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 app 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
Image Removed
- New fonts are added (Montserrat font)
- Extended Synopsis:
- On selection of Metro App or TV Shown Tiles, an extended synopsis will be shown related to that tile
- for example , Title, IMDB rating , U/A rating and Duration of Video
- Below image portrait the preview for extended synopsis
...
Note: The user should set the timezone in you STB before loading the UI using the curl command
...
If the timezone is not properly set in the box then the UI by default shows Eastern Standard Time.
Key Navigation:
- 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
Image Added
Apps > Launched YouTube App
Image Added
Image Added
Metro Apps > Launched Euro News App
Image Added
Image Added
TvShow > Played Let it Snow
Image Added
Video Playback
Video contents can be played from the TV Shows section.
Key Navigation:
- Use the Left and Right key to navigate through tv-shows
- Use the Enter key from the tiles in the tv show listings to launch the player
- Use M/Home/1 key to exit from playback
- Use the Enter key in the Pause icon to pause the video. Fast-forward and rewind are not supported in the current video(as the video content is not an I-framed one
Image Added
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:
- Use the up/down keys to navigate
- Use backspace/exit to come out from the shutdown dialogue box
Image Added/ TODO
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:
- Use the Enter/Right/left/up/down keys
- to navigate to Settings screen use key up and key right to navigate to settings icon and press Enter/OK
- to move the focus or navigate to next list/tab
- to go back to previous screen
...
- WiFi, USB folders, enable/disable WiFi and Bluetooth
Image Added
Connect to Bluetooth :
The Bluetooth screen supports discovery, pairing, and connecting to Bluetooth devices.
Key Navigation:
- From Bluetooth tab , press right key , focus will be on Enable/Disable Button, Bluetooth Tab background will be changed to black and icon to white colour.
- Button icon will be enlarged on Focused , and return to normal when navigate back to Bluetooth
...
- tab.
- On key press 'Enter' on Button , It will scan for available HID devices and will be displayed on screen, Using Down key user can navigate desired Bluetooth device and
- press enter to connect to the selected device.
Image Added
Connected to Bluetooth device
Image Added
Connect to WIFI
The WIFI screen supports the ability to manage STB's wifi connection.
Key Navigation:
- From WIFI tab , press right key , focus will be on Enable/Disable Button WIFI Tab background is changed to black and icon to white colour.
- Button icon will be enlarged on Focused , and return to normal when navigate back to WIFI tab.
- On key press 'Enter' on Button , It will scan for available SSID’s and will be displayed on the screen, Using Down key user can navigate desired WIFI device and
- pressing enter will connect to selected device.
Image Added
Connected to WIFI device
Image Added
Connected to other available WiFi
Image Added
Virtual keyboard screen to connect to WiFi
Image Added
USB Access Features
- USB tab list will be available on settings screen
- On selection of USB tab on settings screen, an enable/disable button will be shown
- Enable/Disable button will be available on settings screen
◦ Enable/disable button added to control retrieve of USB data once USB connected to Box, so enable only if USB/HDD connected to the box - Folders for video, audio, image along with title will be displayed on settings screen
- You will be able to navigate to USB tab, enable/disable button, video, audio, image folders
- You will be able to launch video, audio, image screen and navigate to the available tiles
- File formats supported to display on screens:
◦ Audio file (supports: .mp3, .MP3, .mpeg, .MPEG)
◦ Video file (supports: .mp4, .MP4, .mov, .MOV, .avi, .AVI, .m3u8, .M3U8, .mpeg2, .MPEG2)
◦ Images (supports: .png, .PNG, .jpg, .JPG, .jpeg, .JPEG) - You will be able to view usb contents on corresponding screens
- You will be able to play usb video content
- You will not be able to play audio content because audio playback is not working with aamp and uve-js. (Note: audio playback functionality not implemented)
- You will be able to see image preview in full screen, and right arrow key will be displayed
- On key right next image will be displayed, right arrow key will be hidden if no preview image available and left arrow key will be displayed
- On key left previous image will be displayed, left arrow key will be hidden if no preview image available
- For audio and video custom tiles will be shown on corresponding screens horizontally along with there name
- Actual images will be shown on image screen which are available in USB
- Preview will be shown for focused item below in all the screens
- On selecting Video items , Video will be played in Full Screen, once playback stops user has to come back to video screen and play next video
- Audio playback is not yet implemented, so playback will not work
- On Video/Audio/Images screen, in top panel back button and IP address will be displayed
- On Navigating Back button and enter, will land in setting screen and Focus will be on USB folders
Steps to enable USB on box
- Connect USB/external HDD to box/device
- Launching controller UI
- $ <BOXIP>:9998
- Enable UsbAccess Plugin
- Login to box using below command:
- Mount usb on box with 'mount' command on box
- Create soft link using below command:
- $ ln -sf /usb /opt/www/usbdrive
Note:
- 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
- USB access plugin should be enabled from controller UI
Image Added
On enable USB
Image Added
USB Video Screen
All mp4 files are listed in a row and focused Item preview shown
Key Navigation:
- Use left/right key to navigate to next and previous tiles/video to see the preview
- On pressing Enter video will play in Full screen
- On pressing key 'M' will exit from Full screen video to Video files screen
- On Navigating to header and pressing back icon , setting screen will launched
Image Added
USB Audio Screen
All mp3 files are listed in row and focused Item preview shown.
Key Navigation:
- Use left/right key to navigate to next and previous tiles/audio to see the preview
- On Navigating to header and pressing back icon, setting screen will launched
Note: audio playback functionality not implemented yet.
Image Added
USB Image Screen
All JPG, PNG files are listed in row and focused Item preview shown
Key Navigation:
- Use left/right key to navigate to next and previous tiles/images to see the preview
- On Navigating to header and pressing back icon , setting screen will launched
Image Added
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.
- Launching controller UI on browser (google chrome)
- http://<BOXIP>:9998
- Enable UsbAccess Plugin
Image Added
USB Access Plugin interaction using the console
User can also interact with 'UsbAccess' plugins using JSON-RPC
1) Create Link:
- Method: $ curl -d '{"jsonrpc":"2.0","id":"3","method":"org.rdk.UsbAccess.1.createLink","params":{}}' http://127.0.0.1:9998/jsonrpc
- Response: {"jsonrpc":"2.0","id":3,"result":{"baseURL":"http://localhost:50050/usbdrive","success":true}}
2) Clear Link:
- Method: $ curl -d '{"jsonrpc":"2.0","id":"3","method":"org.rdk.UsbAccess.1.clearLink","params":{}}' http://127.0.0.1:9998/jsonrpc
- Response: {"jsonrpc":"2.0","id":3,"result":{"success":true}}
3) Get File list:
- Method: $ curl -d '{"jsonrpc":"2.0","id":"3","method":"org.rdk.UsbAccess.1.getFileList","params":{"path":""}}' http://127.0.0.1:9998/jsonrpc
- Response: {"jsonrpc":"2.0","id":3,"result":{"contents":[{"name":"var","t":"f"},{"name":"..","t":"d"},{"name":"pages","t":"d"},{"name":"logs","t":"f"},{"name":".","t":"d"}],"success":true}}
Key Handling
Key | Functionality |
---|
S key | To 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 key | To exit from password panel on WiFi screen |
Down arrow | To 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 174 | To audio increase and decrease |
key Code : 112,142, 116, F1 | To launch shutdown panel |
Create distribution build
Prerequisites: Node.js , npm, Lightning-CLI should be available in PC
- To install Node.js and npm - https://nodejs.org/en/download/
- To install Lightning CLI - npm install -g @lightningjs/cli
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
- 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
- login into box:
- goto dir:
- edit residentApp.sh:
- you will see
- Replace:
- reboot the box, on bootup new ui will be rendered on TV screen
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:
- Execute the below command to flash the image on the SD card
$ 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:
- Download and install Balena Etcher to write the Raspberry Pi SD card: https://www.balena.io/etcher/
- Flash it to the Raspberry Pi's SD card using Etcher
Note: Balena etcher is available for MAC OS, Windows and Linux.
Image Added
Functionality implementation for the USB access are in progress.
Connect to Bluetooth
// TODO
Image Removed
Connect to WIFI
// TODO
USB Access
Image Removed
Image Removed
USB Video Screen
// TODO
USB Audio Screen
Image Removed
USB Image Screen
// TODO