Mouse UI CP Guide. - Samsung Smart TV Apps Developer Forum
advertisement
Mouse UI CP Guide.
Ver. 0.40
Visual Display Division
Samsung Electronic
Contents
1
Outline ................................................................................................................................................................................... 2
2
Mouse Function and Event ........................................................................................................................................ 3
3
4
2.1
Mouse Function .............................................................................................................................................. 3
2.2
Mouse Event..................................................................................................................................................... 3
2.2.1
Mouseover............................................................................................................................................... 3
2.2.2
Mouseclick ............................................................................................................................................... 3
2.2.3
Wheel Event ............................................................................................................................................ 3
Mouse Event Implementation Preceding Process ........................................................................................ 4
3.1
Moving onkeydown position from anchor to <body> tag ....................................................... 4
3.2
Adding <mouse> tag to Config.xml file ............................................................................................ 4
Mouse Event Reference................................................................................................................................................ 5
4.1
4.2
Wheel Event...................................................................................................................................................... 5
4.1.1
Wheel Event User Guide ................................................................................................................... 5
4.1.2
Wheel Event Processing Method.................................................................................................. 6
Mouse Cursor Current Coordination .................................................................................................... 7
1
1 Outline
1)
This document explains how to add Mouse functions to Samsung Smart TV Applications
2)
This document explains for those who have experience in developing Samsung Smart TV
Applications
3) This document explains for those who have basic knowledge in Web development such
as HTML, CSS, JavaScript, etc.
2
2 Mouse Function and Event
2.1 Mouse Function
- Cursor appears on the screen when connect mouse to TV
- The functions of mouse is active at the cursor
- Cursor can select, activate and do other tasks, and explore pages by scrolling mouse
wheel
2.2 Mouse Event
The basic actions of mouse buttons are as follows
Mouse Button
Left Button
Action
Over
Focus
Click
Select
Right Button
Click
Wheel Button
Scroll
Tools
(When Tools is available)
List Scroll
The event that is followed by the action of mouse button can be accessed or controlled
by referring window object or jQuery function
2.2.1 Mouseover
The event that occurs when mouse cursor enters
2.2.2 Mouseclick
The event that occurs when press mouse button
2.2.3 Wheel Event
The event that occurs when roll mouse wheel
※
Only most used events are written. Other events like mouseOut, mouseUp or mouseMove may
also be implemented according to application's UI.
3
3 Mouse Event Implementation Preceding Process
The way to process mouse event in Smart TV App is not different from JavaScript, except
adding the setups as follows.
3.1 Moving onkeydown position from anchor to <body> tag
Move the fixed focus on anchor to body tag in order to process key event on full screen.
The anchor is inside of index.html file when a new Samsung smart TV app is created.
<body onload="Main.onLoad();" onunload="Main.onUnload();" >
<a href="javascript:void(0);" id="anchor" onkeydown="Main.MainKeyHandler();"></a>
...
</body>
↓
<body onload="Main.onLoad();" onunload="Main.onUnload();"
onkeydown="Main.MainKeyHandler();">
...
</body>
3.2 Adding <mouse> tag to Config.xml file
Administrator of application confirms the value of <mouse> tag and process the
mouse event when launch the application. Mouse automatically gets deactivated
when the value of <mouse> tag is missing.
-
tag value : y
(mouse activation)
-
tag value : n
(mouse deactivation)
<width>960</width>
<height>540</height>
<mouse>y</mouse>
<author>
...
* The way of using IME Module can be different by the value of each tag, please refer to
the link below
(http://www.samsungdforum.com/Guide/ref00006/common_module_ime_object.html)
4
4 Mouse Event Reference
4.1 Wheel Event
4.1.1 Wheel Event User Guide
Samsung Smart TV remote also supports Wheel Event other than mouse click.
The following instructions are about Wheel Event of Samsung Smart TV remote.
1
3
4
2
Pic 1. 2014 Samsung Smart TV remote
The directions are recognized by swiping direction in the red retangular area up, down,
left or right. ① is upper, ② is lower, ③ is left and ④ is right areas of the wheel as the
picture 1 shows. Each area has its own value and it sends the value by recognizing the
movement and the direction of the finger. For instance, if the direction of the wheel
5
starts from upper area to the lower, it sends the value of ② to Wheel Event.
4.1.2 Wheel Event Processing Method
Wheel Event of Samsung Smart TV is called by KeyEvent, NOT onmousewheel of
HTML5. Thus, Wheel Event related logic has to be processed at KeyEvent in order to
receive its corresponding value.
Wheel Event has its own KeyCode unlike other KeyCodes.
The following table explains about KeyCode value and its usage.
Wheel Event is composed with 8 digit numbers. The followings are
explainations of each digit.
ex) 60100100
KeyCode value
of Wheel Event
Examples
(1) 1st digit number : The state of whether it is touched or not.
( 5 is touched, 6 is not touched )
(2) 2nd digit number : No meaning
(3) 3rd digit number : The swiping direction
( 1 : UP, 2 : DOWN, 3 : LEFT, 4 : RIGHT )
(4) 4~8th number : The swiping speed
( 0 ~ Unlimited )
Reference the upper information to implement right logic according to each
situation.
function onKeyDown(){
switch(event.keyCode){
default:
var slidePattern = /^([6|5])0([1|2|3|4])(\d)(\d)(\d)(\d)(\d)$/;
var res = slidePattern.exec( event.keyCode.toString() );
switch (res[2]) {
case '1':
// Up
break;
case '2':
// Down
break;
case '3':
// Left
break;
case '4':
// Right
break;
}
break;
}
}
6
4.2 Mouse Cursor Current Coordination
In 2014 Samsung Smart TV, mouse pointer appears when touch the circle area of
the remote and disappears when finger is taken off from the area. However, the
coordination of the mouse pointer remains the same although it disappears from the
screen. Therefore, Mouse Event doesn’t call “onMouseLeave” but affects focusing of
the buttons on the page.
In order to prevent this from happening, the coordination of the mouse needs to
be collected to find out whether it has moved or not along with the Mouse Event
provided by HTML5, then apply it to focusing process to ensure its normal focusing
process.
7