App Inventor 2 - Inclinomètre pour 4x4

I - Cahier des charges:

Le cahier des charges est assez simple:

• Afficher le roulis et le tangage d'un 4x4, de façon graphique mais aussi chiffrée.
• Afficher le cap via une boussole et sous forme chiffrée
• Présenter l'ensemble sur la globalité de l'écran, en mode paysage

Je prends la précaution de rappeler que tout ce qui est présenté ici a simplement valeur d'exemple, pour apprendre à développer facilement des applications Android. L'application proposée n'a pas vocation à rivaliser avec des solutions professionnelles.

II - Création de l'interface:

Au moment de passer à la création graphique de l'écran, l'interface de MIT App Inventor 2 trouve rapidement ses limites. Il est impossible d'avoir un rendu fiable du placement des objets. Il est obligatoire de vérifier le placement en direct sur le smartphone connecté sous AI Companion. Le dimensionnement et le placement des objets se fait à taton. Je vous épargnerai se travail fastidieux en vous donnant toutes les dimensions et coordonnées.

Pour commencer, vous allez récupérer le paquet zippé des images disponible ici: INCLINO-4X4.zip

Je vous donne même le fichier au format vectoriel dans lequel j'ai réalisé toutes les images sous Inkscape. Si ce travail vous était d'une quelconque utilité...

Vous pouvez maintenant créer le projet sur http://ai2.appinventor.mit.edu en le nommant INCLINO_4X4

II.1 Paramétrage l'écran principal:

On configure l'écran screen1 avec les paramètres suivants:

• ScreenOrientation: Landscape
• Background: Black
• AlignHorizontal: Center
• Title: INCLINO 4x4
• Icon: logo.png (disponible dans le paquet d'images téléchargé)

II.2 Titre de l'écran:

On ajoute un Label qu'on renomme LabelTitre et auquel on donne les paramètres suivants:

• FonteSize: 24
• Text: INCLINOMETRE 4X4
• TextAlignement: Center
• TextColor: Green
• Width: 300 pixels
• Height: 30 pixels

II.3 - Capteur d'orientation:

On ajoute le capteur d'orientation en traînant un OrientationSensor1 vers la fenêtre Viewer

II.4 - Bandeau d'informations:

Nous allons créer le bandeau qui affichera toutes les données numériques sous la forme:
ROULIS 2° TANGAGE 15° AZIMUT 331°

Ce bandeau est composé d'un objet HorizontalArrangement qui contient 9 Labels

Créez l'objet HorizontalArrangement1 puis donnez lui les valeurs suivantes:

• Width: 540 pixels
• Height: 50 pixels

Placez ensuite 9 Labels à l'intérieur, que vous renommerez respectivement:

• LabelRoll - LabelRollVal - LabelDegre1
• LabelPitch - LabelPitchVal - LabelDegre2
• LabelAzimuth - LabelAzimuthVal - LabelDegre3

Configurez ensuite ces 9 Labels en respectant les données suivantes:

Label	FontSize	Text	TextAlignment	TextColor	Width	Height
LabelRoll	16	ROULIS	right	White	70	Auto
LabelRollVal	30		right	Green	40	40
LabelDegre1	30	°	left	Green	90	Auto
LabelPitch	16	TANGAGE	right	White	80	Auto
LabelPitchVal	30		right	Green	40	40
LabelDegre2	30	°	left	Green	80	Auto
LabelAzimuth	16	AZIMUT	right	White	65	Auto
LabelAzimuthVal	30		right	Green	55	40
LabelDegre3	30	°	left	Green	Auto	Auto

Vous noterez que Azimut en français, perd le h à la fin. Si vous l’orthographiez à l'anglaise, le h se retrouvera à la ligne suivante.

II.5 - Ajout des images:

Pour pouvoir être animées, les images doivent être déclarées sous la forme d'ImageSprites à l'intérieur d'un Canvas (disponible dans Drawing and Animation).

Créez le Canvas1 en lui donnant les propriétés suivantes:

• BackgroundColor: Black
• Width: 600 pixels
• Height: 400 pixels

Créez 5 ImagesSprites à l'intérieur du Canvas1. Configurez ensuite ces 5 ImagesSprites en respectant les données suivantes:

Name	Picture	X	Y	Width	Height
Image4x4back	4x4-back.png	41	0	160	160
Image4x4side	4x4-back.png	246	0	160	160
ImageAngles	4x4-angles.png	24	16	400	128
ImageBoussole	boussole.png	435	10	140	140
ImageCurseur	boussole-curseur.png	496	-9	17	18

Votre écran doit ressembler à ça:

III - Création du code:

Nous verrons ici que le choix de l'orientation en mode paysage posera quelques soucis sur le comportement de notre application.

III.1 - Animation des images - Affichage des valeurs numériques:

Pour animer les images, il suffit de renvoyer la valeur du capteur d'orientation dans Image.Heading:
Set Image4x4back.Heading to OrientationSensor.Roll...

On procède de même pour afficher les valeurs d'orientation dans les différentes Label:
Set LabelRollVall.Text to OrientationSensor1.Roll

Voici le code complet:

On peut procéder aux premiers test via AI Companion.

On constate rapidement les premiers défauts:
a - Pour l'inclinaison, les informations sont inversées. Quand le 4x4 descend une pente, l'image indique qu'il monte. Idem pour le roulis, quand on penche à droite, l'image indique que l'on penche à gauche.
b - Le même constat vaut pour les valeurs numériques. En fait, le signe n'est ici d'aucune utilité, pas plus que les chiffres après la virgule.
c - La boussole est fausse. Elle indique un décalage de 90°, quand on va vers le Nord, elle indique l'Ouest.
d - Les valeurs sont affichées en 1/10ème de degré, ce qui ne présente aucun intérêt.

III.2 - Correction des défauts:

a - Pour obtenir le bon sens de rotation des vues du 4x4, il suffit d'intercaler un opérateur neg dans le calcul de la rotation des deux vues.

b - Pour supprimer le signe et les chiffres après la virgule, il suffit d'intercaler un opérateurabsolute (valeur absolue) et un opérateur round (arrondi) dans le calcul des valeurs numériques du roulis et du tangage.

c - En ce qui concerne la boussole, le défaut vient du fait que le cap est donné par le smartphone en mode portrait. Nous utilisons le mode paysage, aussi il faut corriger de 90° la boussole.

Pour l'image de la boussole, c'est relativement simple, nous ajoutons 90 à la valeur livrée par OrientationSensor1.Azimuth

Pour la valeur numérique de l'azimut, il ne suffit pas d'ajouter 90, car au-delà de 270° nous pourrons afficher des valeurs qui dépassent les 360°. Il faut donc procéder à un test:

Si OrientationSensor1.Azimuth < 270
- alors LabelAzimuthVal.Text = OrientationSensor1.Azimuth + 90
- sinon LabelAzimuthVal.Text = OrientationSensor1.Azimuth - 270

Au passage, on arrondi la valeur donnée par le capteur et on obtient le test suivant:

Au final le code devrait ressembler à ceci:

Vous pouvez tester l'ensemble.

Si le fonctionnement ne parait pas encore satisfaisant, les données affichées n'en sont pas moins justes. Nous verrons dans le prochain exercice, comment améliorer le fonctionnement de cette application.

à suivre...

---

Le projet a évolué, mais je n'ai pas trouvé le temps de faire un article:

Améliorations:
- Possibilité d'étalonner l'inclinaison;
- Possibilité de fixer des limites avec alarme sonore;
- Possibilité de couper l'alarme...

Le projet est en ligne sur MIT Appp Inventor, dans Gallery, faire une recherche avec la requête "4x4"

---