La comodidad que nos ha dado la comunicación inalámbrica en los últimos años nos ha facilitado variadas tareas, sin embargo, configurar controles remotos desde un dispositivo móvil a una aplicación web sigue siendo bastante tedioso, es por esto que les presentamos remote.js una librería desarrollada por Hack Sparrow con la cual podremos disparar funciones de javascript a través de señales sonoras desde cualquier otro dispositivo; su uso es muy fácil y a continuación presentamos un ejemplo:
Primero debemos crear 2 archivos html, uno será el encargado de controlar y el otro será el controlado, yo llamé a estos 2 archivos index.html y control.html
Receptor
Debemos agregar la librería remote.receiver.js, para añadir las librerías es como cualquier otro script, esto se hace mediante el código:
Para este ejemplo se utilizaron 4 señales para poder cambiar el color de 4 círculos en pantalla, primero debemos crear un arreglo conteniendo los nombres de las señales que utilizaremos, siendo el límite 13 señales distintas, crear un objeto receptor r inicializado con estas señales y añadir un listener para cada una de ellas, en el ejemplo se cambia de la clase nulo a la clase seleccionado por cada círculo, quedando el código final del receptor el siguiente:
|
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 |
var signals = ['Izquierda', 'Derecha', 'Arriba', 'Abajo']; var r = Remote.receiver(signals); r.on('Arriba', function(error, signal) { document.querySelector('#arriba').className = 'seleccionado'; document.querySelector('#abajo').className = 'nulo'; document.querySelector('#izquierda').className = 'nulo'; document.querySelector('#derecha').className = 'nulo'; }); r.on('Abajo', function(error, signal) { document.querySelector('#arriba').className = 'nulo'; document.querySelector('#abajo').className = 'seleccionado'; document.querySelector('#izquierda').className = 'nulo'; document.querySelector('#derecha').className = 'nulo'; }); r.on('Izquierda', function(error, signal) { document.querySelector('#arriba').className = 'nulo'; document.querySelector('#abajo').className = 'nulo'; document.querySelector('#izquierda').className = 'seleccionado'; document.querySelector('#derecha').className = 'nulo'; }); r.on('Derecha', function(error, signal) { document.querySelector('#arriba').className = 'nulo'; document.querySelector('#abajo').className = 'nulo'; document.querySelector('#izquierda').className = 'nulo'; document.querySelector('#derecha').className = 'seleccionado'; }); |
Con esto nuestro receptor quedará configurado de manera correcta, pudiendo pasar a crear el transmisor.
Transmisor
Debemos agregar la librería remote.transmitter.js, igual que con el receptor, esto se hace mediante el código siguiente en la cabecera del html :
El transmisor debe tener los mismos identificadores de las señales del receptor para que estos se puedan comunicar sin ningún problema, también debemos crear un nuevo objeto transmisor t con estas señales para poder así generar los tonos que controlarán al receptor, luego debemos añadir un listener al toque de cada botón que disparen la señal del emisor, quedando así nuestro código de la siguiente manera:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var signals = ['Izquierda', 'Derecha', 'Arriba', 'Abajo', 'alert 0']; var t = Remote.transmitter(signals); document.querySelector('#arriba_btn').addEventListener('click', function() { t.emit('Arriba'); }); document.querySelector('#abajo_btn').addEventListener('click', function() { t.emit('Abajo'); }); document.querySelector('#izquierda_btn').addEventListener('click', function() { t.emit('Izquierda'); }); document.querySelector('#derecha_btn').addEventListener('click', function() { t.emit('Derecha'); }); |
Y así de sencillo tendremos funcionando nuestro ejemplo de control remoto con remote.js, cabe mencionar que a pesar de ser una librería interesante, después de un rato los pitidos pueden llegar a ser molestos y el receptor funciona únicamente (por ahora) en Google Chrome, aún así podemos crear cosas divertidas o funcionales que puedan aprovechar de una mejor manera esta librería.
Pueden descargar o ver el código del proyecto terminado desde aquí.
Y pueden probar este ejemplo usando el control en un dispositivo móvil y el receptor desde chrome en sus computadoras.
Las aplicaciones de remote.js tienen como único límite tu imaginación y conocimientos, si quieres aprender más sobre javascript, html y css inscríbete a nuestro diplomado web developer.
Este post fue escrito por Marco Merida (@zerma) Developer en la división de desarrollo de Activ.