Inicio rápido: identificación de dispositivos de puntero
Idioma: HTML | XAML

Inicio rápido: identificación de dispositivos de puntero (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Este artículo de inicio rápido te guiará en el proceso de identificar los dispositivos de entrada que están conectados a los sistemas de los usuarios. También te mostrará cómo recuperar las funcionalidades y atributos de cada dispositivo que afectan el modo en que el usuario puede interactuar con tu aplicación.

En Windows 8, un dispositivo señalador remite a una clase de dispositivo que ofrece funcionalidad de mouse, pluma/lápiz o táctil.

En este contexto se admiten los siguientes dispositivos:

PeriodoDescripción

Mouse

Dispositivo de mouse estándar.

Para obtener información específica sobre las interacciones del mouse, consulta Responder a la entrada de mouse.

Pluma/lápiz

Dos tipos:

  • Punto de contacto único, entrada de lápiz activo (como un lápiz de tableta que admite el estado mantener) para digitalizadores resistivos.
  • Punto de contacto único, entrada de lápiz pasivo para digitalizadores capacitivos. Reconocido como dispositivo de entrada táctil.

Si deseas información específica sobre interacciones con pluma/lápiz, consulta Responder a la entrada de pluma y lápiz.

Función táctil

Un solo contacto táctil o varios contactos táctiles simultáneos.

 

Objetivo: Aprender a identificar dispositivos de entrada conectados y sus funcionalidades.

Requisitos previos

Damos por sentado que Puedes crear una aplicación básica de la Tienda Windows desarrollada para Windows con JavaScript que use la plantilla de la Biblioteca de Windows para JavaScript.

Para completar este tutorial, necesitas:

Instrucciones

1. Recuperar las propiedades del mouse

El espacio de nombres Windows.Devices.Input contiene la clase MouseCapabilities que sirve para recuperar las propiedades expuestas por uno o varios mouse conectados. Solo tienes que crear un objeto MouseCapabilities nuevo y obtener las propiedades que te interesan.

Nota  Los valores que devuelven las propiedades que describimos aquí se basan en todos los mouse conectados: las propiedades booleanas devuelven un valor distinto de cero si hay al menos un mouse que es compatible con una funcionalidad específica. Por otro lado, las propiedades numéricas devuelven el valor máximo expuesto por cualquiera de los mouse.
 

El código siguiente usa una serie de elementos div para mostrar las propiedades y los valores de un mouse individual.


function getMouseProperties() {
  var mouseCapabilities = new Windows.Devices.Input.MouseCapabilities();
  id("mousePresent").innerHTML = (mouseCapabilities.mousePresent == true ? "True" : "False");
  id("verticalWheelPresent").innerHTML = (mouseCapabilities.verticalWheelPresent == true ? "True" : "False");
  id("horizontalWheelPresent").innerHTML = (mouseCapabilities.horizontalWheelPresent == true ? "True" : "False");
  id("swapButtons").innerHTML = (mouseCapabilities.swapButtons == true ? "True" : "False");
  id("numberOfButtons").innerHTML = mouseCapabilities.numberOfButtons;
}


2. Recuperar las propiedades del teclado

El espacio de nombres Windows.Devices.Input contiene la clase KeyboardCapabilities que se usa para recuperar si hay algún teclado conectado. Solo tienes que crear un objeto KeyboardCapabilities nuevo y obtener la propiedad KeyboardPresent .

El código siguiente usa un elemento div para mostrar las propiedades y valores del teclado.


function getKeyboardProperties() {
  var keyboardCapabilities = new Windows.Devices.Input.KeyboardCapabilities();
  id("keyboardPresent").innerHTML = (keyboardCapabilities.keyboardPresent == true ? "True" : "False");
}


3. Recuperar las propiedades táctiles

El espacio de nombres Windows.Devices.Input contiene la clase TouchCapabilities que se usa para recuperar si hay algún digitalizador táctil conectado. Solo tienes que crear un objeto TouchCapabilities nuevo y obtener las propiedades que te interesan.

Nota  Los valores que devuelven las propiedades que describimos aquí se basan en todos los digitalizadores táctiles conectados: las propiedades booleanas devuelven un valor distinto de cero si hay al menos un digitalizador que es compatible con una funcionalidad específica. Por otro lado, las propiedades numéricas devuelven el valor máximo expuesto por cualquiera de los digitalizadores.
 

El código siguiente usa una serie de elementos div para mostrar las propiedades y valores táctiles.


function getTouchProperties() {
  var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
  id("touchPresent").innerHTML = (touchCapabilities.touchPresent == true ? "True" : "False");
  id("contacts").innerHTML = touchCapabilities.contacts;
}


4. Recuperar las propiedades del puntero

El espacio de nombres Windows.Devices.Input contiene la clase PointerDevice que se usa para recuperar si hay dispositivos conectados compatibles con entrada de puntero (táctil, pluma o mouse). Solo tienes que crear un objeto PointerDevice nuevo y obtener las propiedades que te interesan.

Nota  Los valores que devuelven las propiedades que describimos aquí se basan en todos los dispositivos de puntero conectados: las propiedades booleanas devuelven un valor true si hay al menos un digitalizador que es compatible con una funcionalidad específica. Por otro lado, las propiedades numéricas devuelven el valor máximo expuesto por cualquiera de los dispositivos de puntero.
 

El siguiente código usa una tabla para mostrar las propiedades y valores correspondientes a cada dispositivo señalador.


function getPointerDeviceProperties() 
{
  var pointerDevices = Windows.Devices.Input.PointerDevice.getPointerDevices();
  var htmlWrite = "";
  for (i = 0; i < pointerDevices.size; i++) 
  {
    var displayIndex = i + 1;
    htmlWrite += "<tr><td>(" + displayIndex + ") Pointer Device Type</td>  <td>" + 
      getPointerDeviceType(pointerDevices[i].pointerDeviceType) + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Is External</td><td>" + 
      (pointerDevices[i].isIntegrated == true ? "False" : "True") + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Max Contacts</td><td>" + 
      pointerDevices[i].maxContacts + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Physical Device Rect</td><td>" +
      pointerDevices[i].physicalDeviceRect.x + "," +
      pointerDevices[i].physicalDeviceRect.y + "," +
      pointerDevices[i].physicalDeviceRect.width + "," +
      pointerDevices[i].physicalDeviceRect.height + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Screen Rect</td><td>" +
      pointerDevices[i].screenRect.x + "," +
      pointerDevices[i].screenRect.y + "," +
      pointerDevices[i].screenRect.width + "," +
      pointerDevices[i].screenRect.height + "</td></tr>";
  }
  id("pointerDevices").innerHTML = htmlWrite;
}


Para ver el ejemplo completo, consulta el tema sobre entrada: muestra de funcionalidades del dispositivo.

Resumen

En este Inicio rápido, creaste una serie de funciones básicas que identifican los dispositivos de entrada y las propiedades disponibles para tu aplicación.

Temas relacionados

Conceptos
Responder a la interacción del usuario
Desarrollar aplicaciones de la Tienda Windows (JavaScript y HTML)
Diseño de la interacción táctil
Referencia
Windows.Devices.Input
Muestras (DOM)
Muestra de desplazamiento, movimiento panorámico y zoom HTML
Entrada: muestra de control de eventos de puntero de DOM
Entrada: muestra de gestos instanciables
Muestras (API de aplicaciones de la Tienda Windows)
Entrada: muestra de funcionalidades del dispositivo

 

 

Mostrar:
© 2016 Microsoft