Démarrage rapide : détermination de l’orientation de l’appareil (HTML)

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous pouvez utiliser le capteur SimpleOrientation pour déterminer l’orientation de l’appareil avec une application écrite en JavaScript.

Au lieu de renvoyer des propriétés telles que « Portrait vers le haut » ou « Paysage à gauche », ce capteur renvoie une valeur de rotation : « Sans rotation », « Rotation90DegrésSensAntiHoraire », etc. Le tableau suivant établit une correspondance entre les propriétés d’orientation courantes (« Portrait vers le haut », etc.) et les lectures du capteur.

Objectif: Après ce démarrage rapide, vous comprendrez comment utiliser le capteur SimpleOrientation pour détecter l’orientation d’un appareil.

Prérequis

Vous devez connaître HTML, JavaScript et les événements.

L’appareil ou émulateur que vous utilisez doit prendre en charge un accéléromètre.

Durée de réalisation: 15 minutes.

Instructions

1. Ouvrir Microsoft Visual Studio

Ouvrez une instance de Visual Studio.

2. Créer un projet

Créez un projet, en choisissant une Application vide dans les types de projet Applications du Windows Store/JavaScript .

3. Remplacer le code JavaScript

Ouvrez le fichier default.js de votre projet et remplacez le code existant par ce qui suit.

// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var orientationSensor;
    var app = WinJS.Application;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function onOrientationChanged(e) {
        switch (e.orientation) {
            case Windows.Devices.Sensors.SimpleOrientation.notRotated:
                id('txtOrientation').innerHTML = "Not Rotated";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated90DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 90";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated180DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 180";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated270DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 270";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.faceup:
                id('txtOrientation').innerHTML = "Face Up";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.facedown:
                id('txtOrientation').innerHTML = "Face Down";
                break;
            default:
                id('txtOrientation').innerHTML = "Undefined orientation " + e.orientation;
                break;
        }
    }



    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Retrieve the default orientation sensor
            orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();

            // Set the event handler
            orientationSensor.addEventListener("orientationchanged", onOrientationChanged);
            WinJS.UI.processAll();
        }
    };

    app.start();
})();

4. Ajouter le code HTML pour les applications

Ouvrez le fichier default.html des projets Windows et Windows Phone, puis copiez le code HTML suivant entre les balises BODY du fichier.

<div class="item" id="scenario1Output">
    Orientation: <a id="txtOrientation">no data</a>
</div>

5. Générer, déployer et exécuter l’application

Appuyez sur F5 ou sélectionnez Déboguer > Démarrer le débogage pour générer, déployer et exécuter l’application.

Une fois l’application en cours d’exécution, vous pouvez modifier les valeurs de l’accéléromètre en déplaçant l’appareil ou à l’aide des outils de l’émulateur.

6. Arrêter l’application

1. Appuyez sur Alt+Tab pour revenir dans Visual Studio.
2. Appuyez sur Maj+F5 ou sélectionnez Déboguer > Démarrer le débogage pour arrêter l’application.

Récapitulatif et étapes suivantes

L’exemple précédent montre la faible quantité de code que vous devrez écrire afin d’intégrer l’entrée du capteur d’orientation simple dans votre application.

L’application établit une connexion avec le capteur par défaut dans la fonction onactivated. Ceci se produit sur la ligne suivante.

orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();

Les nouvelles données du capteur sont capturées dans la fonction onOrientationChanged. Chaque fois que le pilote du capteur reçoit de nouvelles données du capteur, il passe les valeurs à votre application à l’aide de cette fonction (ou du gestionnaire d’événements). L’application inscrit ce gestionnaire d’événements sur la ligne suivante.

orientationSensor.addEventListener("orientationchanged", onOrientationChanged);

Ces nouvelles valeurs sont écrites sur l’écran via des mises à jour apportées aux éléments DOM affichés ci-dessous.

<div class="item" id="scenario1Output">
    Orientation: <a id="txtOrientation">no data</a>
</div>

Vous pouvez utiliser les valeurs faceup et facedown pour déterminer quand enregistrer les informations d’état et arrêter votre application.

Vous pouvez utiliser les autres valeurs pour changer l’orientation de l’écran.

Notez que les valeurs faceup et facedown sont mutuellement exclusives avec les valeurs de rotation.

Rubriques associées

SimpleOrientation Sensor class

Exemple de capteur SimpleOrientation