Vibration API in Tizen Web app
PUBLISHED
Introduction
To provide tactile feedback to user or to interact with user even when the device volume is low, vibration can provide a better user experience and improve the perception of application. When it comes to Tizen app development, external third party library is not required to implement vibration as this is included in Tizen API.
In this document, a simple web app is developed to show the use of vibration in different patterns and types in Tizen Web app.
Test Settings:
Type |
Tizen Web App |
SDK |
Tizen SDK 2.4 |
Tested on |
Samsung Z3 |
Tool |
Tizen Studio |
Step 1: UI needs to be created for checking different types of vibration. Hence, three different buttons are created for three different vibration patterns.
<!--Button click calls singleVibration()--> <button id="singleVibration"> Single vibration </button > <!--Button click calls patternVibration()--> <button id="patternVibration"> Pattern vibration </button > <!--Button click calls stopVibration()--> <button id="stopVibration"> Stop vibration </button>
Step 2: Add Event Listener and corresponding callback for each buttons
var singleVibration = document.getElementById('singleVibration'); singleVibration.addEventListener('click', singleVibrationCB); var patternVibration = document.getElementById('patternVibration'); patternVibration.addEventListener('click', patternVibrationCB); var stopVibration = document.getElementById('stopVibration'); stopVibration.addEventListener('click', stopVibrationCB);
Step 3: Implementation of single vibration
function singleVibrationCB() { //Vibrate for 2 seconds navigator.vibrate(2000); }
Step 4: To launch a vibration that uses a pattern of vibration and still periods, define the pattern as the vibrate() method parameter:
function patternVibrationCB() { // Vibrate in a given pattern: 1 sec on, 1 sec off, 2 sec on, 2 sec off navigator.vibrate([1000, 1000, 2000, 2000, 1000]); }
Step 5: To stop the vibration before it ends naturally, use the vibrate() method with 0 or [] as a parameter. The method call cancels all existing vibrations.
function stopVibrationCB() { navigator.vibrate(0); // or navigator.vibrate(); // or navigator.vibrate([]); }
Demo: Please download sample code and run the app to check various vibration patterns.
Figure: Tizen Vibration
Reference: