Difference between revisions of "NeTV local UI"

From Studio Kousagi Wiki
Jump to: navigation, search
(Revamp the entire page)
 
Line 1: Line 1:
NeTV local UI is entirely rendered by Webkit browser, running in a chromeless/fullscreen fashion. The UI is written in JavaScript & HTML.
+
NeTV local UI is entirely rendered by Webkit browser, running in a chromeless/fullscreen fashion.<br/>
Hardware integration is supported by submitting POST/GET request to http://localhost/bridge. See [[NeTV_web_services]].
+
The UI is written in JavaScript & HTML.<br/>
 
+
Hardware integration is supported by submitting POST/GET request to http://localhost/bridge. See [[NeTV_web_services]].<br/>
The starting point for playing with the UI is to edit files found in /usr/share/netvserver/docroot
+
<br/>
This is translated to http://localhost
+
A local copy of the UI is stored in /usr/share/netvserver/docroot<br/>
 
+
From firmware 25 onwards, the latest UI code is pulled from [https://github.com/sutajiokousagi/netv-controlpanel github] when NeTVBrowser start/restart to /media/storage/docroot<br/>
 +
Any local changes are discarded, hence it is not advisable to modify this 2 folder directly.<br/>
 +
To develop your own UI, see [[NeTV_tricks#Using_a_local_custom_Control_Panel_.28firmware_23.29]]<br/>
 +
<br/>
 
The overlay effect is done using chroma key compositing.<br/>
 
The overlay effect is done using chroma key compositing.<br/>
Any color that is (240,0,240 or #F000F0) will take on the color of the background video stream.
+
Any pixel color that is (240,0,240 or #F000F0) will be transparent & hence reveals the background video stream.<br/>
  
The browser executable is located at /usr/bin/NeTVBrowser
+
= Start/stop =
To start/stop/restart the browser, use a helper script
+
The executable file is located at /usr/bin/NeTVBrowser<br/>
  /etc/init.d/chumby-netvbrowser start/stop/restart
+
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
  
<br/>To point the browser at a different URL<br/>Note that, however, a keep-alive timer will kick in within 1 minute and switch it back to http://localhost/
+
= 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 http://www.yoururl.com
 
  NeTVBrowser SetUrl http://www.yoururl.com
 +
Note:<br/>
 +
files:// protocol is not supported<br/>
 +
A keep-alive timer will kick in within 1 minute and switch it back to default URL. See "Keep-alive timer" section below
  
 +
= Multitab =
 
The recommended way to keep a page on screen without losing the Control Panel is to use the browser's multi-tab feature
 
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 hideall (hide all tabs except tab 0, will keep the tabs running)
  NeTVBrowser Tab destroyall (destroy all tabs except tab 0)
+
  NeTVBrowser Tab closeall (destroy all tabs except tab 0)
 
  NeTVBrowser Tab 1 http://www.yoururl.com
 
  NeTVBrowser Tab 1 http://www.yoururl.com
 
  NeTVBrowser Tab 1 load http://www.yoururl.com
 
  NeTVBrowser Tab 1 load http://www.yoururl.com
Line 25: Line 37:
 
Where the '1' argument is the index of the tab. Maximum 10 tabs are supported (index 9). <br/>
 
Where the '1' argument is the index of the tab. Maximum 10 tabs are supported (index 9). <br/>
 
Tab 0 is reserved for NeTV UI, can be changed but do keep in mind there's a keep-alive timer.<br/>
 
Tab 0 is reserved for NeTV UI, can be changed but do keep in mind there's a keep-alive timer.<br/>
A keep-alive timer is responsible to keep it pointing to http://localhost at 1 minute interval. <br/>
 
  
 +
= Keep-alive timer =
 +
A keep-alive timer kicks in every 1 minute to check that tab 0 is alive & the modules are loaded correctly.<br/>
 +
The timer essentially calls a JavaScript function fCheckAlive() and make sure that it returns 'true', otherwise it will reset tab 0 to default URL.<br/>
 
To turn off the keep-alive timer
 
To turn off the keep-alive timer
 
  NeTVBrowser KeepAlive off
 
  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.<br/>
 +
This is to make sure your UI doesn't freeze and become useless.
  
<br/>To call or inject JavaScript function from SSH console (remember to escape special characters):
+
= Inject JavaScript =
 +
To call or inject JavaScript function from SSH console (remember to escape special characters):
 
  NeTVBrowser JavaScript "console.log('hello console');"
 
  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'); }"
 
  NeTVBrowser JavaScript "my_function();  function my_function() { console.log('hello console'); }"
  
<br/>Night mode (Tab 0 only)
+
= Screen rotation =
NeTVBrowser InvertColor on
+
By default, NeTV displays in landscape mode.<br/>
NeTVBrowser InvertColor off
+
It can be switched to inverted landscape, portrait and inverted portrait modes by the following command:
 
 
<br/>Make the browser fullscreen / NOT fullscreen
 
NeTVBrowser Fullscreen
 
NeTVBrowser SetBox 100 100 400 300    //xx yy width height
 
 
 
<br/>Screen rotation
 
 
  NeTVBrowser Rotate 0/90/180/270
 
  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.
  
<br/>Show debug traces & JavaScript console output
+
= Show debug traces & JavaScript output =
 +
By default, all console output from NeTVBrowser, including JavaScript print out, are muted.<br/>
 +
To re-enable them, NeTVBrowser's start up script needs to be modified.<br/>
 
  mount -o remount,rw /
 
  mount -o remount,rw /
 
  vi /etc/init.d/chumby-netvbrowser
 
  vi /etc/init.d/chumby-netvbrowser
Replace NeTVBrowser > /dev/null 2>&1 &
+
Replace '''NeTVBrowser -qws -nomouse > /dev/null 2>&1 &''' with '''NeTVBrowser -qws -nomouse &'''
with NeTVBrowser &
 
 
  mount -o remount,ro /
 
  mount -o remount,ro /
  
<br/>Simulate a keyboard event
+
= Simulate/Inject a keyboard event =
 +
A keyboard event can be triggered from console as followed:
 
  NeTVBrowser Key valid_key_name
 
  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
+
Some commonly used key names are: cpanel,widget,up,down,left,right,enter,center,esc,del,backspace,space & alphanumeric keys.<br/>
 +
A full list of supported key names can be seen at the bottom of this [https://github.com/sutajiokousagi/chumby-netvbrowser/blob/master/mainwindow_common.cpp source file]
 +
This was designed only for quick testing from console terminal.<br/> 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.<br/>
 +
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
  
<br/>Buttons on infra-red 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.
+
= Native keyboard input =
<br/>Example: Hold the control panel button on IR remote for more than 3 seconds & release it will reload/reset the Control Panel. <br/>
+
Buttons on infra-red remote control are treated as native keyboard keys in NeTV's Linux kernel (/dev/input/event1).<br/>
 +
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.<br/>
 +
Example: Hold the control panel button on IR remote for more than 3 seconds & release it will reload/reset the Control Panel. <br/>
 
In order to have the IR buttons events delivered directly to JavaScript as normal keyboard events, use:
 
In order to have the IR buttons events delivered directly to JavaScript as normal keyboard events, use:
  NeTVBrowser Nativekb On
+
  NeTVBrowser Nativekb on
 
The JavaScript in the loaded HTML page will have to handle scrolling & counting of key presses manually.
 
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.
 
The above mentioned reset functionality will be lost.
<br/>
+
An example of JavaScript code for handling keyboard event (based on jQuery) is available in /usr/share/netvserver/docroot/html_config/js/index.js
<br/>
 
  
More interesting stuffs to come...
+
= Native mouse input =
 +
If an external mouse is connected to NeTV via USB extension board, NeTVBrowser will initialize its driver at start.<br/>
 +
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.

Latest revision as of 03:26, 7 December 2011

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.

Start/stop

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 http://www.yoururl.com

Note:
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

Multitab

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 http://www.yoururl.com
NeTVBrowser Tab 1 load http://www.yoururl.com
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.