Démarrage rapide : détermination de la vitesse angulaire avec le gyromètre (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 gyromètre pour détecter les changements de mouvements de l’utilisateur avec une application écrite en JavaScript. Les gyromètres complètent les accéléromètres en tant que contrôleurs de jeu. Tandis que l’accéléromètre peut mesurer le déplacement linéaire, le gyromètre mesure la vitesse angulaire (ou déplacement rotatoire).
Objectif: Après ce démarrage rapide, vous comprendrez comment utiliser le gyromètre pour détecter les changements du degré de rotation. Cela peut vous permettre de déterminer la rapidité avec laquelle l’appareil pivote, par exemple pour influencer le mouvement d’un personnage dans un jeu.
Prérequis
Vous devez connaître HTML, JavaScript et les événements.
L’appareil ou émulateur que vous utilisez doit prendre en charge un gyromè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 gyrometer;
function id(elementId) {
return document.getElementById(elementId);
}
function onDataChanged(e) {
var reading = e.reading;
id('txtXVelocity').innerHTML = reading.angularVelocityX.toFixed(2);
id('txtYVelocity').innerHTML = reading.angularVelocityY.toFixed(2);
id('txtZVelocity').innerHTML = reading.angularVelocityZ.toFixed(2);
}
var app = WinJS.Application;
// This function responds to all app activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
gyrometer = Windows.Devices.Sensors.Gyrometer.getDefault();
// Choose a report interval supported by the sensor
var minimumReportInterval = gyrometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
gyrometer.reportInterval = reportInterval;
// Set the event handler
gyrometer.addEventListener("readingchanged", onDataChanged);
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">
X: <a id="txtXVelocity">no data</a>
<br />
Y: <a id="txtYVelocity">no data</a>
<br />
Z: <a id="txtZVelocity">no data</a>
<br />
</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
- Appuyez sur Alt+Tab pour revenir dans Visual Studio.
- 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 gyromètre dans votre application.
L’application établit une connexion avec le gyromètre par défaut dans la fonction onactivated. Ceci se produit sur la ligne suivante.
gyrometer = Windows.Devices.Sensors.Gyrometer.getDefault();
Les nouvelles données du gyromètre sont capturées dans la fonction onDataChanged. 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.
gyrometer.addEventListener("readingchanged", onDataChanged);
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">
X: <a id="txtXVelocity">no data</a>
<br />
Y: <a id="txtYVelocity">no data</a>
<br />
Z: <a id="txtZVelocity">no data</a>
<br />
</div>
L’application établit l’intervalle de rapport dans la fonction onactivated. Le code suivant récupère l’intervalle minimum pris en charge par l’appareil et le compare à un intervalle demandé de 16 millisecondes (ce qui représente une fréquence d’actualisation de 60 Hz). Si l’intervalle pris en charge minimum est supérieur à l’intervalle demandé, le code définit la valeur sur l’intervalle minimum. Sinon, il définit la valeur sur l’intervalle demandé.
var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;
Si vous écrivez une application de jeu, les étapes suivantes peuvent impliquer la combinaison de l’entrée du gyromètre et de l’entrée de l’accéléromètre.