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:

LabelFontSizeTextTextAlignmentTextColorWidthHeight
LabelRoll16ROULISrightWhite70Auto
LabelRollVal30
rightGreen4040
LabelDegre130°leftGreen90Auto
LabelPitch16TANGAGEright White80Auto
LabelPitchVal30
rightGreen4040
LabelDegre230°leftGreen80Auto
LabelAzimuth16AZIMUTrightWhite65Auto
LabelAzimuthVal30
rightGreen5540
LabelDegre330°leftGreenAutoAuto


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:

inclino4x4-2.png

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:
inclino4x4-3.png

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.

inclino4x4-4.png

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.

inclino4x4-5.png

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

inclino4x4-6.png

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:

inclino4x4-7.png

Au final le code devrait ressembler à ceci:

inclino4x4-8.png

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"