aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Nintendo dió un paso de gigante (a mi parecer) al optar por Opera como navegador predeterminado para la consola grande de la familia. Y gracias a esta fusión podemos disfrutar de una nueva forma de acercarnos a Internet. 

Actualmente el ordenador nos permite un nivel mayor de interacción con las páginas web. Haciendo un poco de Rappel, vaticino que el futuro de la mayoría de las conexiones de internet, serán mediante la televisión, se impondrá un sistema cómodo y rápido en el que podrás acceder a todo lo que Internet te ofrece desde tu televisor,  como un canal más.

Parece que a Opera se le ha ocurrido lo mismo y ha decidido hacer pública el API para permitir interactuar con el mando de la Wii. Todo mediante una API de Javascript bastante completa. Mejor ver unos ejemplos para entrar en calor 😀

Función para detectar los mandos activos 

function findRemotes(n,padlength) {
  var offRemotes = [], foundRemotes = [], i;
  if( !window.opera || !opera.wiiremote ) { return foundRemotes; }
  //check through the list of remotes for enabled ones
  for( i = 0; i < 4 && foundRemotes.length < n; i++ ) {
    if( opera.wiiremote.update(i).isEnabled ) {
      //if a remote is enabled, put it in the enabled list
      foundRemotes[foundRemotes.length] = i;
    } else {
      //otherwise, put it in the disabled list
      offRemotes[offRemotes.length] = i;
    }
  }
  //if remotes must be enabled, or enough were found, return immediately
  if( !padlength || foundRemotes.length == n ) { return foundRemotes; }
  //otherwise pad to the desired length from the disabled list
  for( i = 0; i < offRemotes.length && foundRemotes.length < n; i++ ) {
    foundRemotes[foundRemotes.length] = offRemotes[i];
  }
  return foundRemotes;
}

Está función nos permite conocer los mandos activos conectados a nuestra Wii. Pero si eres muy exigente y tienes la Wii, mejor echalé un vistazo a este juego desarrollado en Javascript y juzga tu mismo 😀

El API

El API del Wii Remote nos permite hacer que nuestra página detecte los controladores remotos conectados, hasta 4 a la vez. Esto hace posible que las páginas web interactuen de una forma completamente diferente a lo que actualmente conocemos, dando la posibilidad de interactuar con hasta 4 usuarios a la vez sobre la misma pantalla a la vez, un concepto que no es posible con el sistema tradicional de gestión de eventos.

Sensor de movimiento

Gracias al API podremos conocer el estado actual de los mandos, obteniendo datos como el roll, posición del cursor, distancia con la pantalla y los botones que han sido pulsados. Lamentablemente no ofrece la información sobre la aceleración del mando, aunque no creo que sea algo que se permitan dejar sin implementar.

Aún cuando el mando el mando está perfectamente inmovil sobre una superficie plana, este será detectado, y el movimiento será detectado aunque esté no exista. Esto indica que el proceso de detección se realiza a intervalos periódicos esperando que las variables de movimiento cambien. Por este motivo el API ofrece un sistema mediante el que la gestión del sensor de movimiento se queda en Stand-By, esperando a la orden que le haga volver a registrarlo.

Conociendo el estado del control remoto

Toda la información de nuestro mando está dentro del objeto opera.wiiremote. Este objeto, ofrece métodos simples como opera.wiiremote.update(n) que nos informará del estado del mando (n), siendo (n) un número entre 0-3. El método devuelve un objeto KpadStatus con todas las propiedades que podemos obtener del mando.

El objeto KpadStatus

El objeto KpadStatus, se encarga de contener toda la información que el mando de nuestra Wii puede ofrecernos, y gracias a ella podremos interactuar con nuestro página y modificar los parámetros que la componen.

Es importante remarcar, que si el mando se queda un largo tiempo inactivo, este será automáticamente desconectado, por este motivo es importante comprobar que nuestro remoto está activo antes de usarlo, para ello usaremos la propiedad isEnabled, que nos devolverá un booleano con el estado (1, 0).

if( theKpadStatusObject.isEnabled ) { ... }

Otro punto importante es que los datos válidos son solo cuando la barra del sensor detecta el mando. Aproximadamente en te 55cm y 3 metros, si el mando no es detectado por la barra del sensor el puntero se quedará en la última posición conocida, por eso debemos controlar tambien que esté disponible.

La propiedad KpadStatus.dpdValidity nos permitirá conocer la intensidad con la que es detectado el mando.

Propiedades del objeto KpadStatus

isEnabled:

  
Entero que indica si el control remoto está activo o no
    
(1 = activo / 0 = no activo).
  

isDataValid:

  
Entero que nos informa si los datos del mando son correctos
    
(1 = son correctos / 0 = no son correcto).
  

isBrowsing:

  
Entero que nos informa si el mando es el mando principal y si está siendo usado para navegar.
    
(1 = es el control primário / 0 = no lo és).
  

dpdScreenX:

  
Entero que nos devuelve la posición X relativa del cursor a nuestra página.
    
Generalmente el valor irá desde 0 a 800 (tamaño máximo recomendado). Equivalente a Event.pageX.
  

dpdScreenY:

  
Entero que nos devuelve la posición Y relativa del cursor sobre nuestra página.
    
Generalmente desde -48 y el alto de la página, más el tamaño de la toolbar. Equivalente a Event.pageY.
  

dpdX:

  
Float con la posición horizontal de nuestro cursor en el área visible de nuestra pantalla.
    
0 es el centro de la pantalla, 1 es la derecha y -1 la parte izquierda. El tamaño máximo y mínimo depende de cuanto se acerca o aleja del centro (Por ejemplo.: -1.45 a 1.45).
  

dpdY:

  
Float con la posición vertical, igual que el anterior.
    
0 es el centro de la pantalla, 1 abajo y -1 arriba.
  

hold:

  
Entero que nos devuelve el boton,o botones, pulsados.
  

Button	Bitmask
Left	1
Right	2
Down	4
Up	8
+	16
2	256
1	512
B	1024
A	2048
-	4096
Z (Nunchuk)	8192
C (Nunchuk)	16384

Por defecto, mientras no se pulsa ningún botón el valor de hold es 0.

dpdRollX:

  
Float que nos indica la dirección vertical de nuestro mando.
    
Si el valor es positivo, indica que estamos subiendo y si es negativo este indica que vamos hacia abajo. Incluso podemos conocer el angulo de inclinación mediante una función matemática.
  

Math.atan2(KpadStatus.dpdRollY,KpadStatus.dpdRollX)

dpdRollY:

Float con la dirección horizontal de nuestro mando.
  
Si el valor es positivo indicará que nos dirigimos hacia la derecha y negativa que nos vamos a la izquierda.

dpdDistance:

Float con el que conoceremos la distancia entre el mando y la barra del sensor.
  
El valor será de 0.55 a 3.

dpdValidity:

  
Entero que nos dice el grado de recepción de nuestro mando.
    
(2 = recepción buena / 1 = recepeción baja /  0 = no hay recepción / -1 = recepción muy baja / -2 = recepeción extremadamente baja).
    

  

Ejemplos

Obtener la dirección del 3er. mando en grados.

var remote, roll = 0;
//Checkeamos si el navegador es el apropiado
if( window.opera && opera.wiiremote ) {
  //Cogemos los datos del mando 3 (2)
  remote = opera.wiiremote.update(2);
  //comprobamos que esté activo
  if( remote.isEnabled ) {
    //cogemos el angulo
    roll = Math.atan2( remote.dpdRollY, remote.dpdRollX );
    //lo convertimos a grados
    roll = roll * ( 180 / Math.PI );
  }
}