Visionneuse d'éclairs

Lightning Viewer est une application qui reçoit des données sur les impacts de foudre simulés à partir d'un site WebSocket et les affiche sur une carte en temps réel. Elle est dotée d'une interface utilisateur réactive qui s'adapte bien aux écrans des téléphones portables, des tablettes et des ordinateurs de bureau, que ce soit en orientation paysage ou portrait. Les impacts de foudre apparaissent sous forme d'icônes sur la carte, et une couche séparée indique la distance et l'heure du dernier impact. Ces couches de données peuvent être masquées et révélées à l'aide d'interrupteurs auxquels on accède en appuyant sur le bouton "Couches de la carte". Un bouton permet également de passer d'un type de carte à l'autre et de centrer la carte sur l'emplacement de l'utilisateur.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Structure de l'application et classes pertinentes

Cette application suit le modèle Modèle-Vue-Contrôleur (MVC). La classe LightningItemModel sert de modèle. Elle stocke une liste d'objets LightningItemData et fournit des méthodes pour insérer de nouvelles données et obtenir des informations sur les dernières frappes. La vue est définie dans plusieurs composants QML qui affichent les données et l'interface utilisateur et gèrent l'interaction avec l'utilisateur. La classe Controller gère le flux de données entre LightningItemModel et les composants QML. La classe LightningProvider ouvre une connexion WebSocket à un serveur en ligne qui lui envoie un message JSON pour chaque coup de foudre simulé. Elle analyse les messages et transmet les données à LightningItemModel via un signal connecté à un slot dans Controller:

connect(m_provider.get(), &LightningProvider::dataReady, this, &Controller::onDataReceived);

Chaque coup de foudre est représenté par une structure LightningItemData. Elle contient l'horodatage, la latitude et la longitude du coup de foudre, ainsi que des méthodes renvoyant sa distance et sa direction à partir de l'emplacement de l'utilisateur fourni sous la forme d'une structure QGeoCoordinate. La structure LastStrikeInfo contient des informations sur le dernier coup de foudre.

LightningView.qml sert de vue principale de l'application. Elle est responsable de l'affichage de la carte et des données relatives à la foudre par l'intermédiaire du composant MapView.qml, et des commandes utilisateur par l'intermédiaire du composant ActionsLayer.qml.

MapView.qml gère les zooms et les panoramiques de la carte. Elle utilise un PositionSource pour obtenir la position actuelle de l'utilisateur et un Map pour afficher la carte. En outre, il comprend un composant LightningMapLayer.qml pour afficher les données relatives à la foudre et un composant DistanceTimeLayer.qml pour afficher des informations sur le dernier coup de foudre.

ActionsLayer.qml Le site Web de la Commission européenne fournit un bouton pour recentrer la carte et une commande de commutation personnalisée, SwitchMap.qml, pour passer d'un type de carte à l'autre. Elle comprend également un bouton "Couches de la carte" qui permet d'afficher les boutons de sélection des couches de la carte. Ces boutons sont définis à l'adresse MapLayersItem.qml. En orientation paysage, ils apparaissent à côté du bouton des couches de la carte, tandis qu'en orientation horizontale, ils sont placés dans une zone Drawer définie à l'adresse MapLayersDrawer.qml.

Source de données sur les éclairs

L'application reçoit des données sur les impacts de foudre simulés à partir d'un serveur géré par Qt. Le serveur fournit une API WebSocket acceptant les connexions à l'URL suivante :

wss://ewea0y4bn0.execute-api.eu-north-1.amazonaws.com/production/

Après s'être connectée au serveur, l'application déclenche le flux de données en direct en envoyant le message JSON suivant au serveur :

"{\"action\": \"simulatelightningdata\"}"

Fichiers source

Exemple de projet @ code.qt.io