Description de l’IHM¶

L’application se compose de trois grandes parties:

Horizon Artificiel¶

La première est composée d’un horizon artificiel qui représente l’altitude, ainsi que les inclinaisons que subit le drone. Cette partie a été réalisée en utilisant la bibliothèque graphique SFML qui a été très facile à prendre en main.

Cependant nous avons eu beaucoup de problèmes au niveau algorithmique lors de la mise à jour de l'assiette en fonction des données reçues. Après plusieurs essais d'implémentations différentes, nous sommes arrivés à un résultat qui nous convient.

Cet horizon artificiel est composé de plusieurs éléments :
1 – Curseur et Graduation Angulaire
Le curseur indique l'angle d'inclinaison sur l'axe X du drone.
Ainsi lorsque le drone va bouger, le curseur va bouger, nous pourrons donc lire l'angle en se reportant à la graduation angulaire du dessus. Chaque indicateur représente 10°.
2 – Altimètre
L’altimètre lui représente l'altitude à laquelle le drone se trouve. Il est composé de 9 indicateurs représentant chacun ½ mètres.
Ainsi lors de la montée ou la descente du drone, nous pouvons bien voir l'altimètre qui boucle.
3 – Fond de l'assiette
Le fond est composé de deux parties : une représentant le ciel (bleu) et une représentant la terre (marron) Le fond va bouger en même temps que le curseur et ainsi pouvoir donner une impression réaliste à cet horizon artificiel.
Il y a une option qui permet de changer la couleur de chaque partie ou au contraire de revenir aux couleurs par défaut.
Voici quelques images de cet horizon en mouvement :

Localisation GPS¶

La deuxième partie a été réalisé dans le but de localiser le drone en utilisant l’API Google Maps pour visualiser à l’aide d’une vue satellite l’environnement dans lequel le drone évolue.

Pour pouvoir utiliser cette API, il a fallu créer un compte Google et demander une clé pour l'API Maps. Cette clé est passée en argument dans l'adresse URL ce qui va permettre à Google d'observer si nous ne dépassons pas la limite de courtoisie de 25 000 requêtes par jour, la limite facturable étant de 500 000 requêtes par jour.

Dans un premier temps, nous avons eu du mal à interpoler les déplacements du drone simulé en coordonnées GPS car ce dernier envoi que des déplacements en mètre. Ainsi grâce à l’aide de nos tuteurs, nous avons réussi à transposer des données en mètres en coordonnées GPS.

Il reste néanmoins un détail au niveau du suivi du drone, car l’IUT est orienté à environ 25° sur la vue satellite contrairement au modèle 3D où la scène est à zéro.
Nous avons utilisé une matrice de rotation 2D comme ci-dessous :

Nous avons fait des calculs pour rectifier cela, mais ceci ne s'avère pas cohérent.

Ainsi nous savons que le point de départ du drone se situe devant le bloc informatique et nous pouvons voir son déplacement simulé sur la carte.

Pour ce qui est du drone réel, il n’y a pas de problème, car celui-ci possède un module GPS qui renvoie ses coordonnées sans qu’il n’y ait besoin de modifications.

De plus, la carte affichée possède un curseur rouge qui clignote pour indiquer le déplacement du drone dans son environnement. Il y a possibilité à l'utilisateur de désactiver le positionnement GPS, si c'est le cas, alors une page HTML/CSS contenant du JavaScript est affichée pour indiquer qu'il ne reçoit pas de trame GPS.

Ci-dessous on peut voir un exemple de localisation GPS devant l’IUT ainsi que la page indiquant à l’utilisateur qu’il ne reçoit pas de trames GPS.

Graphe¶

La troisième partie permet de visualiser les données de vol du drone. Ainsi nous pouvons voir l’altitude, les rotations sur les trois axes (X, Y, Z), mais aussi les coordonnées GPS du drone. Cet outil a été conçu pour permettre à l'utilisateur de regrouper toutes les informations dans une seule fenêtre et ainsi de pouvoir contrôler l'attitude du drone dans son environnement.

Nous pouvons visualiser la variation de son altitude via une courbe générée avec la bibliothèque Qwt qui utilise un widget graphique réalisé sous Qt.

Au début, nous avons eu du mal à utiliser cette bibliothèque de dessin de courbe, car nous ne comprenions pas bien comment nous pouvions afficher une telle courbe.
Ainsi nous avons utilisé la documentation sur leur site internet, mais aussi la recherche sur des forums pour comprendre son fonctionnement.

Différentes fonctionnalités ont été implémentées pour permettre à l'utilisateur de stocker les informations de vols.

Il y a deux fonctionnalités importantes :

1 – Exporter la courbe de l'altitude en format PDF pour pouvoir l'imprimer par la suite
2 – Exporter toutes les données de vol dans un fichier XML pour permettre par la suite de faire des graphiques de statistiques, ou de pouvoir revivre un vol précédemment effectué

Cette fenêtre affiche aussi l'état du drone (vol, arrêt) en parsant les trames reçues.

Après avoir parlé de ces trois parties, il subsiste quelques outils à l’IHM qui mérite d'être plus expliqué.

Nous allons aborder deux nouvelles parties :

Une sur le réseau avec les explications du récepteur UDP avec ses 2 parseurs et une autre sur les options de configurations de l’IHM.

Client UDP¶

L’IHM possède une classe qui permet de recevoir des trames en UDP, ainsi lorsque l'on clique sur le bouton de connexion au serveur Java, le récepteur va émettre une trame à destination du serveur pour s'authentifier, il fait de même lorsque l'on quitte l’IHM pour indiquer au serveur que l'on coupe la connexion. Entre ces 2 phases, le client UDP se met en mode réception, et capte chaque trame émise depuis le serveur.

C'est le parseur qui va permettre au client UDP, d'analyser les trames reçues et de faire les actions associées à ces trames.

Nous avons fait deux parseurs, car le protocole réseau pour le drone est trop complexe pour le simulateur étant donné que le parseur drone utilise des informations que le simulateur n'est pas capable de renvoyer. Ainsi pour faciliter les choses, nous avons implémenté notre propre protocole pour le simulateur et un autre pour le drone, mais tout ceci ne change rien au niveau du client UDP.

Parseur Simulateur¶

Le parseur simulateur gère les trames envoyées depuis le serveur Java. Les types de trames sont limités.
Voici dans un tableau le but de chaque trame.

Option de Configurations¶

L’IHM propose différentes options de configuration. Ainsi voici une énumération de toutes les options et leur impact. Quelques captures d’écran viendront éclairer les explications.

Option 1 : Changer la couleur de l'assiette

C'est peu utile, mais si l'utilisateur veut changer la couleur avec des couleurs plus chaude, il peut le faire.

Exemple :

Nous pouvons donc changer la couleur du ciel et de la terre ou décider de la remettre aux couleurs initiales.

Option 2 : Choix du périphérique

Nous avons décidé d'avoir 2 parseurs différents. Ainsi il faut savoir quand utiliser l’un ou l'autre.

Par défaut, le choix est sur le simulateur, mais si on clique sur drone, ça détruit le parseur simulateur et çà instancie un parseur drone et vice versa

Option 3 : Activation ou Désactivation de l'affichage GPS

Si l'utilisateur ne possède pas de quoi se connecter à un internet, alors plutôt que d’afficher une page blanche parce qu'il n'y a pas de connexion, vous pouvez désactiver l'affichage GPS et afficher la page no_signal en HTML.

Vous pouvez désactiver cet affichage pour d'autres raison, il faut juste savoir qu'il est possible de le faire.

Option 4 : Configurer IP et Port du Serveur Java
Vous pouvez changer l'adresse et le port par défaut du serveur Java.

Prenons par exemple que le serveur n'est pas lancé sur votre machine, vous devez remplacer ces données indiquer l'adresse de la machine distante et le port sur lequel communiquer.

Option 5 : Configuration de l'outil Graphe

Vous pouvez configurer l'altitude minimum et le maximum pour éviter que la courbe ne dépasse du canevas mais aussi la base de temps pour fixer l'axe des abscisses.