App Inventor : Première application - Orientation du smartphone

La programmation va se faire en plusieurs temps:

1. Création de l'application sur App Inventor Servers
2. Définition et affichage des valeurs de l'azimut, du tangage et du roulis à l'aide de labels (étiquettes) sur App Inventor Designer
3. Définition du fonctionnement des différents objets sur App Inventor Blocks Edition
4. Test de l'application sur l'AndroidPhone (ou sur un émulateur)
5. Transmission de l'application sur l'AndroidPhone

App Inventor Servers

Connectez le smatphone en mode synchronisation et allez sur le serveur MIT App Inventor : http://beta.appinventor.mit.edu/

Dans My Projects, cliquez sur New et créez le projet Orientation. validez par Ok, l'interface de création apparait. Vous avez 4 zones d'édition: Palette - Viewer - Components - Properties

Palette offre le menu des différents objets disponibles pour la programmation : boutons, images, médias...
Viewer simule l'affichage de l'écran du smartphone et permet de positionner les objets utilisés.
Components donne la liste des objets utilisés et permet de les sélectionner pour les définir dans Properties.
Properties permet de définir les différentes propriétés des objets.

App Inventor Designer

Dans la zone Components sélectionnez screen1 et changez le Title dans Properties. Renommez "screen1" en "Orientation". Le bandeau change de nom dans Viewer.

Dans la zone Palette, ouvrez le menu Basic, glissez l'objet Label vers la zone d'écran du smartphone dans Viewer. Répétez l'opération afin d'avoir 6 Labels : Label1, Label2, Label3...

Sélectionnez un à un les 6 Labels pour remplacer le Text (texte) dans la zone Properies par les valeurs suivantes :

• Text for Label1 -> Roulis
• Text for Label2 -> 0
• Text for Label3 -> Tangage
• Text for Label4 -> 0
• Text for Label5 -> Azimut
• Text for Label6 -> 0

Ajoutez l'objet OrientationSensor disponible dans Sensors (zone Palette) en dessous des 6 Labels. Vous obtenez l'écran ci-dessous:

Vous noterez que l'objet OrientationSensor1 s'est placé dans la zone des objets non-visibles.

Vous pouvez déjà sauver votre projet en cliquant sur Save.

App Inventor Blocks Edition

Cliquez sur Open the Blocks Editor.

Java va chercher AppInventorForAndroidCodeblock et la fenêtre de Java App Inventor Blocks Edition s'ouvre.

Dans le menu de gauche, nous avons les objets pré-définis (Built-in), ceux que nous avons créés (My Blocks) et les fonctions avancées (Advanced).

Nous allons définir le fonctionnement de l'objet OrientationSensor1. Ouvrez cet objet dans My Blocks. Glissez le premier Item qui gère le changement d'orientation, vers la droite.

Nous allons répondre à la question suivante : Que doit-on faire si les capteurs d'orientation du smartphone détectent un changement ? When OrientationSensor1.OrientationChanged do ?

La réponse est : les Labels 2, 4 et 6 doivent recevoir respectivement les valeurs de Roulis, Tangage et Azimut (Roll, Pitch et Azimuth).

Pour répondre à cette question, il suffit de compléter le puzzle avec d'autres items :

Dans My Blocks, ouvrir Label2 et choisir set Label2.Text to pour le glisser en face de do du premier item déposé.
Dans My Blocks, ouvrir OrientationSensor1 et choisir OrientationSensor1.Roll pour le glisser au bout de l'item Label2.Text.

Nous venons de répondre "donner au text du Label2, la valeur roulis du capteur d'orientation".

Il suffit d'agir de même avec les Labels 4 et 6, pour obtenir l'affichage de Tangage et d'Azimuth. Nous obtenons le graphique ci-dessous:

Test sur l'AndroidPhone

Cliquez sur Connect to Device en haut à droite, puis choisissez la référence de votre smartphone (pour moi c'est HT126RX03781). L'application s'affiche sur le Smartphone. Elle est déjà opérationnelle. Il suffit de faire bouger l'appareil pour voir les valeurs évoluer.

A ce stade, on peut faire des modifications, aussi bien dans App Inventor Blocks Edition, que dans App Inventor Designer. Les modifications sont prises en compte en temps réel.

Transfert de l'application sur l'AndroidPhone

Revenez sur l'écran de design : App Inventor Designer

Cliquez sur Package for Phone, puis Download to Connected Phone pour installer l'application directement sur le Smartphone.

Le serveur compile l'application et la transfère vers le Smartphone. Vous pouvez débrancher l'appareil et tester l'application.

---

Nota : Azimuth donne la valeur d'orientation par rapport au Nord magnétique.