Datos de sensor y orientación de la pantalla (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

Los datos de sensor procedentes de las clases Accelerometer, Gyrometer, Compass, Inclinometer y OrientationSensor se definen por medio de sus ejes de referencia. Estos ejes se definen a su vez mediante la orientación horizontal del dispositivo y, por tanto, giran con el dispositivo cuando el usuario lo voltea. Si tu aplicación admite el giro automático, es decir, si cambia su orientación para amoldarse al dispositivo cuando el usuario lo gire, deberás ajustar los datos de sensor para el giro antes de usarlos.

Orientación de la pantalla y orientación del dispositivo

Para poder comprender los ejes de referencia de los sensores, debes distinguir entre la orientación de la pantalla y la orientación del dispositivo. La orientación de la pantalla es la dirección en la que se muestran las imágenes y el texto en la pantalla, mientras que la orientación del dispositivo es el posicionamiento físico del dispositivo. En la imagen siguiente, tanto la orientación de la pantalla como la del dispositivo es Landscape.

Orientación de la pantalla y del dispositivo en Landscape

En la siguiente imagen se muestran ambas orientaciones, de la pantalla y del dispositivo, en LandscapeFlipped.

Orientación de la pantalla y del dispositivo en LandscapeFlipped

En la siguiente imagen se muestra la orientación de pantalla en Landscape y la orientación del dispositivo en LandscapeFlipped.

Orientación de pantalla en Landscape con la orientación del dispositivo en LandscapeFlipped.

Los valores de orientación se consultan a través de la clase DisplayInformation, usando para ello el método GetForCurrentView con la propiedad CurrentOrientation. Luego, se puede crear lógica contrastándolos con la enumeración DisplayOrientations. No olvides que, por cada orientación que admitas, deberás admitir también una conversión de los ejes de referencia a dicha orientación.

Dispositivos con orientación horizontal predeterminada y dispositivos con orientación vertical predeterminada

Los fabricantes ahora producen dispositivos tanto con orientación horizontal predeterminada como con orientación vertical predeterminada Cuando integran los componentes en los dispositivos, lo hacen de una forma unificada y coherente para que todos los dispositivos funcionen dentro del mismo marco de referencia. En la siguiente tabla se muestran los ejes de sensor para ambos dispositivos, con orientación horizontal predeterminada y con orientación vertical predeterminada.

Orientación Con orientación horizontal predeterminada Con orientación vertical predeterminada

Landscape

Dispositivo con orientación horizontal predeterminada en orientación Landscape Dispositivo con orientación vertical predeterminada en orientación Landscape

Portrait

Dispositivo con orientación horizontal predeterminada en orientación Portrait Dispositivo con orientación vertical predeterminada en orientación Portrait

LandscapeFlipped

Dispositivo con orientación horizontal predeterminada en orientación LandscapeFlipped Dispositivo con orientación vertical predeterminada en orientación LandscapeFlipped

PortraitFlipped

Dispositivo con orientación horizontal predeterminada en orientación PortraitFlipped Dispositivo con orientación vertical predeterminada en orientación PortraitFlipped

 

Orientación de la pantalla y encabezado de brújula

El encabezado de brújula depende de los ejes de referencia, de modo que cuando la orientación del dispositivo lo hace. La compensación se efectúa siguiendo esta tabla (suponiendo que el usuario mira al norte).

Orientación de la pantalla Eje de referencia y encabezado de brújula Encabezado de brújula de API al mirar al norte Compensación del encabezado de brújula

Landscape

-Z

0

Encabezado

Portrait

Y

90

(Encabezado270) % 360

LandscapeFlipped

Z

180

(Encabezado180) % 360

PortraitFlipped

Y

270

(Encabezado+90) % 360

 

Modifica el encabezado de brújula como se indica en la tabla para que dicho encabezado se muestre correctamente, como aquí.

function readingChanged(e) {
    var heading = e.reading.headingMagneticNorth;
    var displayOffset;

    // Calculate the compass heading offset based on
    // the current display orientation.
    var displayInfo = Windows.Graphics.Display.DisplayInformation.getForCurrentView();
    
    switch (displayInfo.currentOrientation) {
        case Windows.Graphics.Display.DisplayOrientations.landscape:
            displayOffset = 0;
            break;
        case Windows.Graphics.Display.DisplayOrientations.portrait:
            displayOffset = 270;
            break;
        case Windows.Graphics.Display.DisplayOrientations.landscapeFlipped:
            displayOffset = 180;
            break;
        case Windows.Graphics.Display.DisplayOrientations.portraitFlipped:
            displayOffset = 90;
            break;
     }

    var displayCompensatedHeading = (heading + displayOffset) % 360;

    // Update the UI...
}

Orientación de la pantalla con acelerómetro y girómetro

Esta tabla convierte los datos de acelerómetro y girómetro para los datos de la pantalla.

Ejes de referencia X Y Z

Landscape

X

Y

Z

Portrait

Y

-X

Z

LandscapeFlipped

-X

-Y

Z

PortraitFlipped

-Y

X

Z

 

Este es un ejemplo de código con el que estas conversiones se aplican al girómetro.

function readingChanged(e) {
    var reading = e.reading;
    var displayOffset;

    // Calculate the gyrometer axes based on
    // the current display orientation.
    var displayInfo = Windows.Graphics.Display.DisplayInformation.getForCurrentView();
    switch (displayInfo.currentOrientation) {
        case Windows.Graphics.Display.DisplayOrientations.landscape: 
            x_Axis = reading.angularVelocityX;
            y_Axis = reading.angularVelocityY;
            z_Axis = reading.angularVelocityZ;
            break;
        case Windows.Graphics.Display.DisplayOrientations.portrait: 
            x_Axis = reading.angularVelocityY;
            y_Axis = -1 * reading.angularVelocityX;
            z_Axis = reading.angularVelocityZ;
            break; 
        case Windows.Graphics.Display.DisplayOrientations.landscapeFlipped: 
            x_Axis = -1 * reading.angularVelocityX;
            y_Axis = -1 * reading.angularVelocityY;
            z_Axis = reading.angularVelocityZ;
            break; 
        case Windows.Graphics.Display.DisplayOrientations.portraitFlipped: 
            x_Axis = -1 * reading.angularVelocityY;
            y_Axis = reading.angularVelocityX;
            z_Axis = reading.angularVelocityZ;
            break;
     }

    // Update the UI...
}

Orientación de la pantalla y orientación del dispositivo

OrientationSensor se cambia de otra forma. Pensemos en las distintas orientaciones al girar en el sentido contrario al de las agujas del reloj hacia el eje Z, deberemos revertir el giro para regresar a la orientación del usuario. En el caso de los datos de cuaternión, podemos emplear la fórmula de Euler para definir un giro con un cuaternión de referencia. También podemos usar una matriz de giro de referencia.

Fórmula de Euler

Para obtener la orientación relativa que deseas, multiplica el objeto de referencia por el objeto absoluto. Este cálculo no es commutativo.

Multiplicar el objeto de referencia por el objeto absoluto

En la expresión anterior, los datos de sensor devuelven el objeto absoluto.

Orientación de la pantalla Giro en el sentido contrario a las agujas del reloj en torno a Z Cuaternión de referencia (giro inverso) Matriz de giro de referencia (giro inverso)

Landscape

0

1 + 0i + 0j + 0k

[1 0 0

0 1 0

0 0 1]

Portrait

90

cos(-45⁰) + (i + j + k)*sin(-45⁰)

[0 1 0

-1 0 0

0 0 1]

LandscapeFlipped

180

0 - i - j - k

[1 0 0

0 1 0

0 0 1]

PortraitFlipped

270

cos(-135⁰) + (i + j + k)*sin(-135⁰)

[0 -1 0

1 0 0

0 0 1]