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:

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:

[1] https://developer.tizen.org/development/guides/web-application/w3chtml5supplementary-features/device/vibration