Handling System UI Event

From webOS TV 3.0, the visibility of the virtual keyboard and the cursor can be detected by using the following events:

 

 

You can use these events to figure out the remote control's navigation mode or whether your app is focused or blurred. This article explains how to handle visibility event with simple code.

Handling keyboardVisibilityChange Event

When the virtual keyboard appears or disappears, the keyboardVisibilityChange event will occur and return the following event.detail.visibility property value:

  • true: Virtual keyboard appeared.
  • false: Virtual keyboard disappeared.
 
The following code snippet shows how to handle the keyboardVisibilityChange event.
function keyboardVisibilityChange(event) {
    var visibility = event.detail.visibility;
    if(visibility){
        console.log("Virtual keyboard appeared");
        // Do something.
    }
    else{
        console.log("Virtual keyboard disappeared");
        // Do something.
    }
}
document.addEventListener('keyboardStateChange', keyboardVisibilityChange, false);

 

You can test the virtual keyboard visibility with the code below. This code also includes additional event handlers for key input (input, change, keypress, keyup, and keydown events). Details can be found after the code.

<html>
<head>
<script>

	function load() {
		document.addEventListener('keyboardStateChange', keyboardVisibilityChange, false);
		var textinput = document.getElementById("text1");
		textinput.addEventListener('input', inputfunc, false);
		textinput.addEventListener('change', inputfunc, false);
		textinput.addEventListener('keypress', keyfunc, false);
		textinput.addEventListener('keyup', keyfunc, false);
		textinput.addEventListener('keydown', keyfunc, false);
	}

	function keyboardVisibilityChange(event) {
		var visibility = event.detail.visibility;
		if(visibility)
			Log("Virtual keyboard appeared");
		else
			Log("Virtual keyboard disappeared");
	}

	function inputfunc(event) {
		var x = document.getElementById("text1");
		Log(event.type + ": " + x.value);
	}

	function keyfunc(event) {
		Log(event.type + ': keyCode=' + event.keyCode + ' which=' + event.which);
	}

	var line = 0;
	function Log( msg ) {
		console.log(msg);
		document.getElementById('log').innerHTML += ++line + ": " + msg + "<br>";
	}
</script>
</head>
<body onload="load()" style="background-color:black; color:white">
	<input id="text1" type="text">
	<div id="log"> </div>
</body>
</html>
 
  • input event handler
    Detects every character input on the text input field. The input event is useful when you check the key input from the virtual keyboard.
     
  • change event handler
    Detects the value change of the text input field. The change event is useful when you want to check whether the enter key is pressed on the virtual keyboard.
     
  • keypress, keyup, keydown event handlers
    These events are usually used for detecting the key press. However, these events do not work for the webOS TV's virtual keyboard. Therefore, the keyfunc callback function in this code will not work when using virtual keyboard.
    Note. These events can only detect the status changes of the control keys on the webOS TV's virtual keyboard. Control keys include the enter key and back space key.

Handling cursorVisibilityChange event

When the cursor of the Magic Remote or HID pointing device appears or disappears, cursorStateChange event will occur and return the following value with event.detail.visibility property:

  • true: Cursor appeared.
  • false: Cursor disappeared.
 
The following code snippet shows how to handle the keyboardVisibilityChange event.
function cursorVisibilityChange(event) {
    var visibility = event.detail.visibility;
    if(visibility){
        console.log("Cursor appeared");
        // Do something.
    }
    else{
        console.log("Cursor disappeared");
        // Do something.
    }
}
document.addEventListener('cursorStateChange', cursorVisibilityChange, false);

 

You can test cursor visibility with the code below. This code also includes additional event handlers:

  • blur and focus event handlers
    These events are fired when your app has lost or gained focus. When an overlay type system UI element such as Launcher or Settings menu appears, your app cannot receive pointer events. You can use these events to figure out whether your app is focused.
<html>
<head>
<script>
	function load() {
		document.addEventListener("cursorStateChange", onCursor, false);
		document.addEventListener("visibilitychange", function () { Log(document.visibilityState);}, false);
		window.addEventListener("blur", function() { Log("Focus off");}, false);
		window.addEventListener("focus", function() { Log("Focus on");}, false);
	}

	function onCursor(event) {
		if (event.detail.visibility)
			Log("Cursor on");
		else
			Log("Cursor off");
	}

	var line = 0;
	function Log( msg ) {
		console.log(msg);
		document.getElementById('log').innerHTML += ++line + ": " + msg + "<br>";
	}
</script>
</head>
<body onload="load()" style="background-color:black; color:white">
	<div id="log"> </div>
</body>
</html>
Navigation