Adding haptics to an HTML page requires knowledge of javascript, HTML, and an Android tablet that contains a web browser supporting the W3C Vibration API. We have provided sample code below as well as on
GitHub.
How it works
Using javascript, we can programmatically determine where on a tablet display a user istouching, by getting the X and Y coordinates of the touch point. Next, we use the X and Y coordinates to determine which HTML element is being touched. Once we know which element it is, we can determine if there is a haptic effect associated with the element.
In this sample, we are using the ID of the element to trigger any associated haptic effect. If there is a matching ID, we then issue a call to the vibrate API to generate the vibration. As long as the user’s finger is in contact with the element, the vibration will continue. If the finger moves away, the vibration for that element will stop.
Vibration Patterns
Using the vibrate API is quite simple:
window.navigator.vibrate(value);
Where pattern can be a single value or an array of values. To cause the vibration motor to run for 100 milliseconds, you would use the following:
window.navigator.vibrate(100);
To cause a vibration pattern, 100 milliseconds on, 75 milliseconds off, 75 milliseconds on, followed by 100 milliseconds off, you would use the following:
window.navigator.vibrate([100,75,75,100]);
You can create a variety of patterns to differentiate touchable areas.
Javascript Sample Code
Place the following code into an html file, for example, haptics.js:
// Current Vibration Patterm
var curVibe = 0;
// timer event
var tmint;
// initHaptics() must be called from the on loading of the web page
function initHaptics() {
// Listen for touchmove and touchend.
document.body.addEventListener("touchmove", buzzPos, false);
document.body.addEventListener("touchend", buzzStop, false);
// Set a timer event, in this case firing every 150 msec, to repeat
// current vibration pattern. You should adjust this interval to
// correspond the vibration pattern durations you use.
tmint = window.setInterval(buzzTime, 150);
}
function buzzTime() {
// vibrate at the end of each defined time interval
window.navigator.vibrate(curVibe);
}
function buzzPos(event) {
// This makes vibration work in Chrome Beta for Android (although it can cause other issues).
event.preventDefault();
// Find the element where the touch occurs.
e = document.elementFromPoint(event.touches.item(0).clientX, event.touches.item(0).clientY);
curVibe = 0;
// Use the following if statements to assign vibration events based on element ID.
// You can alternatively look for element names or class names.
if (e.id == "f1") { curVibe = 100; window.navigator.vibrate(curVibe); }
if (e.id == "li") { curVibe = 50; window.navigator.vibrate(curVibe); }
}
function buzzStop() {
// This makes vibration work in Chrome Beta for Android (although it can cause other issues).
event.preventDefault();
// Stop vibration.
window.navigator.vibrate(0);
curVibe = 0;
}
Add a link to your JavaScript file in the <head> section of the .html file. Example below:
<head>
<title>Haptic HTML Test</title>
<script type="text/javascript" src="haptics.js"></script>
</head>
Modify your .html file to call the appropriate JavaScript function on page load, as follows:
<body onload="initHaptics()">
Next add ID values to elements which you want to have vibration effects. These ID values should correspond to the ID values used in the javascript.
Save/FTP the file, and then explore the page with a single finger on an Android tablet. You should feel a vibration as the finger passes over any element of the page with an assigned vibration effect.
