Introducción a FirefoxOS vol. 3: API de vibración

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Seguimos introduciéndonos en el vasto mundo de la programación para FirefoxOS. En este y los siguientes post, comenzaremos ya con las APIs de acceso al Hardware del dispositivo, y hoy, en concreto, nos centraremos en ver la vibración.

Vibración

Las aplicaciones útiles que tiene la vibración sobre un dispositivo son incontables, desde permitirnos saber que nos están llamando cuando el móvil está en el bolsillo y no somos capaces de escucharlo, hasta interactuar con el usuario de un juego cuando pierde una vida o supera un obstáculo.

Podremos gestionar las vibraciones que queremos que emita nuestra aplicación a través del método window.navigator.vibrate() , que nos permite hacer vibrar un dispositivo una vez aislada, o siguiendo un intervalo de tiempo, veamos los dos métodos:

Vibración Simple

Lo conseguiremos pasándole como parámetro a la función anterior un número que indicará el tiempo de vibración. El parámetro podrá ser un valor individual, o un array de una sola posición:

1
2
3
4
// Un valor
window.navigator.vibrate(100);
// Un array
window.navigator.vibrate([100]);

En ambos casos anteriores, haremos que el dispositivo vibre durante 100ms.

Vibración a Intervalos

Como adelantaba anteriormente, también podremos crear un patrón que seguirá el dispositivo al vibrar, enviándole como parámetro a la función un array, que irá recorriendo y realizará primero una vibración con tiempo igual al elegido, para luego hacer una pausa con valor de la siguiente posición del array, y así sucesivamente hasta llegar al final del array. Veámoslo en un ejemplo:

1
window.navigator.vibrate([100, 50, 100, 20, 50]);

Primero, el dispositivo vibrará por 100ms, para luego parar durante 50ms antes de volver a vibrar otros 100ms, tras lo cual parará durante 20ms y por último, volverá a vibrar por 50ms.

Podremos pasarle tantos valores como deseemos, teniendo en cuenta que no será necesario enviarle el tiempo de la última pausa, ya que automáticamente, con el último parámetro, parará de vibrar.

Cancelar un patrón de vibración

Pasarle como parámetro a la función window.navigator.vibrate() el valor 0 o un array vacío detendrá la ejecución de cualquier parámetro de vibración que esté en activo.

Comprobar si es compatible

Podemos comprobar si el dispositivo sobre el que estamos ejecutando la aplicación es compatible con la vibración o no simplemente con la siguiente instrucción:

1
var supportsVibrate = "vibrate" in navigator;

De esta manera, podríamos actuar en consecuencia, por ejemplo, ejecutando un sonido como señal en vez de una vibración.

Ejemplo

Vamos a realizar una pequeña aplicación para probar ambos tipos, y la cancelación de uno ya existente, además de reforzar un poco lo que vimos en el primer volumen. La aplicación será sencilla, tres botones nos bastarán para comprobar el funcionamiento de esta API

.

 

Para ello, crearemos una carpeta que llamaremos pruebaVibración y meteremos todos los ficheros en su interior:

Comenzaremos creando el archivo con extensión webapp que ya vimos en el primer volumen:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"name": "Prueba Vibración",
 "description": "Pequeña aplicación para probar la vibración del dispositivo",
 "launch_path": "/",
 "icons": {
    "16": "/images/icon-16.png",
    "48": "/images/icon-48.png",
    "128": "/images/icon-128.png"
 },
 "developer": {
    "name": "AdrianBornas"
 },
 "default_locale": "es"
}

En un fichero a parte, en la carpeta js, situaremos el contenido de las funciones que harán vibrar el dispositivo (para este ejemplo, necesitamos una copia de la librería jQuery en la misma carpeta):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
   var supportsVibrate = "vibrate" in navigator;
   if(supportsVibrate)
   {
       $('#vibracionSimple').click(function(){
           window.navigator.vibrate(1000);
       });
       $('#vibracionIntervalo').click(function(){
           window.navigator.vibrate([1000, 500, 1000, 200, 500]);
       });
       $('#pararVibracion').click(function(){
           window.navigator.vibrate(0);
       });
   }
   else
   {
       console.log("Vibración no soportada");
   }
});

Y por último, crearemos el html que pondrán los botones en pantalla:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Prueba Vibración</title>
     <link rel="stylesheet" href="css/style.css"/>
     <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/funciones.js"></script>
    </head>
<body class="app">
   <section id="main">
         <section id="inicio">
             <header>
                 <h1>Prueba Vibración</h1>
             </header>
         <section id="botones">
            <article class="btn-index">
                <a id="vibracionSimple" href="#" title="">Simple</a>
            </article>
            <article class="btn-index">
                <a id="vibracionIntervalo" href="#" title="">Intervalo</a>
             </article>
             <article class="btn-index">
                <a id="pararVibracion" href="#" title="">Parar</a>
            </article>
         </section>
         </section>
    </section>
</body>
</html>

 

El código es bastante sencillo, asociamos a unos botones un id, que a través de jQuery detectamos el evento click, y hacemos que se ejecute la función de vibrar.

En cuanto a el estilo que queráis darle a la aplicación, como es un tema artístico que a algunos se le dan mejor que a otros, no comentaré nada.
Y hasta aquí este pequeño tutorial sobre la vibración de los dispositivos a través de la API que Mozilla nos brinda.

Todo el mundo tiene uno o varios puntos de inflexión en su vida, y el mio vino cuando conseguí una SuperNintendo. Desde entonces, decidí que quería dedicarme al desarrollo de videojuegos, y estudié Ingeniería Informática. Por el camino, descubrí lo interesante que era desarrollar páginas web, y más tarde, aplicaciones para móviles. No sé qué me deparará mañana, pero seguro que estaré por aquí.

Comentarios arrow No hay comentarios

Escribe un comentario

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.