Try an EPUB with Embedded Haptics
We have set up an instance of the Readium EPUB reader which will load the
sample book immediately. Read the book, about geometric shapes, and explore the shapes with your finger. You can download the
sample EPUB file and try it on your own device.
How to Add a Haptic SVG to an EPUB 3 File
- Create or open an existing EPUB XHTML content file. Add the SVG image to your file. Below is a sample XHTML file, with the SVG – in this case, a square shape is included:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8"></meta>
<title>Haptic SVG Test</title>
<link rel="stylesheet" type="text/css" href="epub.css"/>
</head>
<body>
<section id="ch1">
<h1>Haptic SVG Test</h1>
<div id="haptic-svg-test">
<p>The SVG image, a square, has been added below.</p>
<!-- SVG Head -->
<svg baseProfile="full" height="400" version="1.1" width="100%" viewBox="0.0 0.0 371.0 363.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- SVG Content -->
<clipPath id="p.0">
<path d="m0 0l371.0 0l0 363.0l-371.0 0l0 -363.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path id="p1" fill="#000000" fill-opacity="0.0" d="m0 0l371.53543 0l0 363.03412l-371.53543 0z" fill-rule="nonzero"></path>
<path id="f1" fill="#ea9999" d="m112.0 96.0l160.0 0l0 160.0l-160.0 0z" fill-rule="nonzero"></path>
<path id="l1" stroke="#ff0000" stroke-width="8.0" stroke-linejoin="round" stroke-linecap="butt" d="m112.0 96.0l160.0 0l0 160.0l-160.0 0z" fill-rule="nonzero"></path>
</g>
</svg>
<p>The text continues here . . .</p>
</div>
</section>
</body>
</html>
- Create a JavaScript file to add vibration to the SVG. Below is code from a sample file called “vibrate.js.”
var curVibe = 0;
var tmint;
function initHaptics() {
// Listen for touchmove and touchend.
document.body.addEventListener("touchmove", buzzPos, false);
document.body.addEventListener("touchend", buzzStop, false);
tmint = window.setInterval(buzzTime, 100);
}
function buzzTime() {
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;
// If the element is part of the SVG we wish to have vibrate, make it so.
if (e.id == "f1") { window.navigator.vibrate(75); curVibe = 75; }
if (e.id == "li") { window.navigator.vibrate(75); curVibe = 75; }
}
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 .xhtml file. Example below:
<head>
<meta charset="utf-8"></meta>
<title>Haptic SVG Test</title>
<link rel="stylesheet" type="text/css" href="epub.css"/>
<script type="text/javascript" src="test.js"></script>
</head>
- Modify your .xhtml file to call the appropriate JavaScript function on page load, as follows:
<body onload="initHaptics()">
- Make sure your EPUB3 will support your JavaScript file by adding an “item” for it to the “manifest” in your package.opf file. Example below:
<manifest>
. . .
<!-- Javascript files -->
<item id="js" href="test.js" media-type="text/javascript"/>
. . .
</manifest>
- Make sure your .xhtml file is set to support both SVG and scripting by adding a “properties” attribute to its “item” entry in the “manifest” of your package.opf file, as follows:
<manifest>
. . .
<item id="t1" href="text.xhtml" media-type="application/xhtml+xml" properties="svg scripted"/>
. . .
</manifest>
- Your book is now ready. Open this publication in Readium (web version) in Chrome or FireFox on an Android tablet with vibration capabilities. Go to the page of the EPUB containing the SVG image and explore the images with a single finger. You should feel a vibration as the finger passes over the shape.
