Démarrage rapide : réponse à un mouvement de l’utilisateur avec l’accéléromè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 l’accéléromètre pour répondre aux mouvements de l’utilisateur dans une application écrite en JavaScript. Une application basée sur un accéléromètre n’utilise généralement qu’un ou deux axes en entrée. Elle peut cependant utiliser l’événement de secousse en tant qu’autre source d’entrée.
Objectif: Après ce démarrage rapide, vous comprendrez comment utiliser l’accéléromètre pour détecter les changements dans les déplacements.
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 accelerometer;
var app = WinJS.Application;
// This function responds to all app activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
if (accelerometer == null) {
accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();
// Establish the report interval
var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;
// Establish the event handler
accelerometer.addEventListener("readingchanged", onDataChanged);
}
WinJS.UI.processAll();
}
};
// This function is called each time an accelerometer event
// is fired by the driver.
function onDataChanged(e) {
var reading = e.reading;
var accelX = reading.accelerationX;
var accelY = reading.accelerationY;
var accelZ = reading.accelerationZ;
id('eventOutputX').innerHTML = accelX.toFixed(2);
id('eventOutputY').innerHTML = accelY.toFixed(2);
id('eventOutputZ').innerHTML = accelZ.toFixed(2);
}
// This function is invoked within onDataChanged to
// retrieve the given identifier from the HTML document.
function id(elementId) {
return document.getElementById(elementId);
}
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="scenarioOutput">
X: <a id="eventOutputX">no data</a>
<br />
Y: <a id="eventOutputY">no data</a>
<br />
Z: <a id="eventOutputZ">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 de l’accéléromètre dans votre application.
L’application établit une connexion avec l’accéléromètre par défaut dans la fonction onactivated. Ceci se produit sur la ligne suivante.
accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();
Les nouvelles données de l’accéléromè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.
accelerometer.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="scenarioOutput">
X: <a id="eventOutputX">no data</a>
<br />
Y: <a id="eventOutputY">no data</a>
<br />
Z: <a id="eventOutputZ">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 simple, les étapes suivantes vont généralement impliquer l’intégration de l’entrée de l’accéléromètre avec la sortie graphique.
Par exemple, vous pourriez créer un podomètre avec un affichage graphique montrant le mouvement de l’utilisateur.