Touch
This topic describes how your application can detect and receive input from touch
Related Info
For touch supported devices, user can interact with your application using touch events
Multiple concurrent touch events are supported (Support up to 20 multi-touch)
Enable/Disable Touch Support
Touch on LPF5DS model are disabled by default. To enable touch function in your application, the touch.device.support
metadata key should be set to enable
on application's "config.xml" file:
<tizen:metadata key="http://samsung.com/tv/metadata/touch.device.support" value="enable"/>
Floating Menu
Floating menu is provided in the form of an overlay menu to navigate and use functions of a remote control by using touch
The floating.navigation
metadata key was introduced starting from 2024 products (Tizen 8.0) to configure the Floating menu.
Enable/Disable Floating Menu:
The Floating menu is enabled by default. The floating.navigation
metadata key does not need to be explicitly added to the application's "config.xml" to enable the Floating menu.
To disable the Floating menu, the value of the floating.navigation
metadata key should be set to false
.
<tizen:metadata key="http://samsung.com/tv/metadata/floating.navigation" value="false"/>
Floating Menu Types:
Type (1): Basic Floating Menu
This is used if the application supports both input from touch touch.device.support=’enable’
and floating menu floating.navigation=’true’
Below overlay menu appears on touch
Type (2): Floating menu with D-pad for screen navigation
This is used if the application does not support input from touch touch.device.support=’disable’
but supports floating menu floating.navigation=’true’
Below overlay menu appears on touch
Below pop-up appears on touch
Handling Touch Event
The supported touch events are described in the W3C Touch Events.
To receive notification for touch events, for example, the touchstart
event:
- Create a listener for the
touchstart
event. The listener is notified each time a finger comes in contact with the element
<div id='touchable' ... ontouchstart='handleTouch();'> ... </div>
or
document.getElementById('touchable').addEventListener('touchstart', handleTouch);
- Define the listener:
function handleTouch () {
// Something you want to do
...
}
Supported Touch Gestures
Gesture | Occurs When |
---|---|
Tap | User touch and release the screen |
Long Press | User touch and holds the screen |
Swipe | User touch the screen and move around |
Fling | User lifted a finger during scroll with enough velocity |