NeTV local UI

From Studio Kousagi Wiki
Jump to: navigation, search

NeTV local UI is entirely rendered by Webkit browser, running in a chromeless/fullscreen fashion.
The UI is written in JavaScript & HTML.
Hardware integration is supported by submitting POST/GET request to http://localhost/bridge. See NeTV_web_services.

A local copy of the UI is stored in /usr/share/netvserver/docroot
From firmware 25 onwards, the latest UI code is pulled from github when NeTVBrowser start/restart to /media/storage/docroot
Any local changes are discarded, hence it is not advisable to modify this 2 folder directly.
To develop your own UI, see NeTV_tricks#Using_a_local_custom_Control_Panel_.28firmware_23.29

The overlay effect is done using chroma key compositing.
Any pixel color that is (240,0,240 or #F000F0) will be transparent & hence reveals the background video stream.


The executable file is located at /usr/bin/NeTVBrowser
In order to initialize supporting drivers & start it correctly, use a helper script

/etc/init.d/chumby-netvbrowser start
/etc/init.d/chumby-netvbrowser stop
/etc/init.d/chumby-netvbrowser restart

Setting URL

By default, tab 0 of the browser is pointing to http://localhost In order to point the browser at a different URL, use:

NeTVBrowser SetUrl

files:// protocol is not supported
A keep-alive timer will kick in within 1 minute and switch it back to default URL. See "Keep-alive timer" section below


The recommended way to keep a page on screen without losing the Control Panel is to use the browser's multi-tab feature

NeTVBrowser Tab hideall (hide all tabs except tab 0, will keep the tabs running)
NeTVBrowser Tab closeall (destroy all tabs except tab 0)
NeTVBrowser Tab 1
NeTVBrowser Tab 1 load
NeTVBrowser Tab 1 hide (will keep the tab running)
NeTVBrowser Tab 1 show (will not destroy other tabs)
NeTVBrowser Tab 1 close (destroy the tab)

Where the '1' argument is the index of the tab. Maximum 10 tabs are supported (index 9).
Tab 0 is reserved for NeTV UI, can be changed but do keep in mind there's a keep-alive timer.

Keep-alive timer

A keep-alive timer kicks in every 1 minute to check that tab 0 is alive & the modules are loaded correctly.
The timer essentially calls a JavaScript function fCheckAlive() and make sure that it returns 'true', otherwise it will reset tab 0 to default URL.
To turn off the keep-alive timer

NeTVBrowser KeepAlive off

If you are using custom UI on tab 0, it is recommended to take advantage of this keep-alive timer rather than shutting it off.
This is to make sure your UI doesn't freeze and become useless.

Inject JavaScript

To call or inject JavaScript function from SSH console (remember to escape special characters):

NeTVBrowser JavaScript "console.log('hello console');"

A new JavaScript function can be injected as followed:

NeTVBrowser JavaScript "my_function();  function my_function() { console.log('hello console'); }"

Screen rotation

By default, NeTV displays in landscape mode.
It can be switched to inverted landscape, portrait and inverted portrait modes by the following command:

NeTVBrowser Rotate 0/90/180/270

When changing mode, a native browser resize event is triggered. JavaScript code can hook to this event to customize the behaviour.

Show debug traces & JavaScript output

By default, all console output from NeTVBrowser, including JavaScript print out, are muted.
To re-enable them, NeTVBrowser's start up script needs to be modified.

mount -o remount,rw /
vi /etc/init.d/chumby-netvbrowser

Replace NeTVBrowser -qws -nomouse > /dev/null 2>&1 & with NeTVBrowser -qws -nomouse &

mount -o remount,ro /

Simulate/Inject a keyboard event

A keyboard event can be triggered from console as followed:

NeTVBrowser Key valid_key_name

Some commonly used key names are: cpanel,widget,up,down,left,right,enter,center,esc,del,backspace,space & alphanumeric keys.
A full list of supported key names can be seen at the bottom of this source file This was designed only for quick testing from console terminal.
It is very efficient for injecting long text string.

Non-native keyboard input

By default, buttons on infra-red remote control are override converted to JavaScript function calls on the current tab.
To catch this event, implement a JavaScript function as below in the top level JavaScript document.

function fButtonPress(vButtonName, vCount, vOnHold)
    //vButtonName: cpanel, widget, up, down, left, right, center, setup
    //vCount: number of keypress within 1.5 second, only applicable to 'setup' button
    //vOnHold: true/false indicates that this is a key-repeat event

Example code is available in /usr/share/netvserver/docroot/js/NeTV.js -> fButtonPress function

Native keyboard input

Buttons on infra-red remote control are treated as native keyboard keys in NeTV's Linux kernel (/dev/input/event1).
However, by default NeTVBrowser overrides key press events in order to handle key counting, key sequence/combo, page scrolling & delivered directly to HTML Control panel as a JavaScript function call.
Example: Hold the control panel button on IR remote for more than 3 seconds & release it will reload/reset the Control Panel.
In order to have the IR buttons events delivered directly to JavaScript as normal keyboard events, use:

NeTVBrowser Nativekb on

The JavaScript in the loaded HTML page will have to handle scrolling & counting of key presses manually. The above mentioned reset functionality will be lost. An example of JavaScript code for handling keyboard event (based on jQuery) is available in /usr/share/netvserver/docroot/html_config/js/index.js

Native mouse input

If an external mouse is connected to NeTV via USB extension board, NeTVBrowser will initialize its driver at start.
However, by default NeTVBrowser hides mouse cursor. In order to show the mouse cursors, use:

NeTVBrowser MouseCursor on

NeTV UI was not design to work with mouse. Therefore clicking on the menu items has no effects. The WiFi configuration was partially made mouse-compatible. To try, go to Setting -> Reconnect to WIFI and turn on mouse cursor.