Lightning Viewer

Lightning Viewer est une application qui reçoit des données simulées de coups de foudre provenant d'un WebSocket et les affiche sur une carte en temps réel. Elle dispose d'une interface utilisateur réactive qui s'adapte parfaitement aux écrans de mobiles, de tablettes et d'ordinateurs de bureau, aussi bien en mode paysage qu'en mode portrait. Les coups de foudre apparaissent sous forme d’icônes sur la carte, et une superposition distincte indique la distance et l’heure du dernier coup de foudre. Ces couches de données peuvent être masquées ou affichées à l’aide de boutons bascules accessibles en appuyant sur le bouton des couches de la carte. Il existe également un bouton permettant de basculer entre les différents types de cartes et un autre qui centre la carte sur la position de l’utilisateur.

Exécution de l’exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple à l’adresse Examples. Pour plus d’informations, consultez Qt Creator: Tutoriel : Créer et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Structure de l’application et classes associées

Cette application suit le modèle MVC (Modèle-Vue-Contrôleur). La classe ` LightningItemModel ` fait office de modèle. Elle stocke une liste d’objets ` LightningItemData ` et fournit des méthodes permettant d’insérer de nouvelles données et d’obtenir des informations sur les dernières grèves. La vue est définie dans plusieurs composants QML qui affichent les données et l’interface utilisateur, et gèrent les interactions avec l’utilisateur. La classe ` Controller ` gère le flux de données entre ` LightningItemModel ` et les composants QML. La classe ` LightningProvider ` établit une connexion ` WebSocket ` vers un serveur en ligne, à partir duquel elle reçoit un message JSON pour chaque coup de foudre simulé. Elle analyse ces 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. Celle-ci contient l’horodatage, la latitude et la longitude du coup de foudre, et inclut des méthodes renvoyant sa distance et sa direction par rapport à la position de l’utilisateur fournie sous forme d’ QGeoCoordinate. La structure LastStrikeInfo contient des informations sur le dernier coup de foudre.

LightningView.qml sert de vue principale de l’application. Elle est chargée d’afficher la carte et les données sur la foudre via le composant MapView.qml, ainsi que les commandes utilisateur via le composant ActionsLayer.qml. Au démarrage de l’application, le composant LightningSplash.qml s’affiche par-dessus la vue principale. Si le Qt Lottie Animation module est disponible, cet écran de démarrage affichera une animation vectorielle importée depuis un fichier Lottie à l’aide de la fonction CMake ` qt_target_qml_from_lottie()`. Sinon, il affichera une image statique.

MapView.qml gère le zoom et le défilement de la carte. Il utilise un PositionSource pour obtenir la position actuelle de l’utilisateur et un Map pour afficher la carte. De plus, il inclut un LightningMapLayer.qml pour afficher les données sur la foudre et un DistanceTimeLayer.qml pour afficher des informations sur le dernier coup de foudre.

ActionsLayer.qml Il propose un bouton permettant de recentrer la carte et un contrôle de type « switch » personnalisé, SwitchMap.qml, pour basculer entre différents types de cartes. Il comprend également un bouton « couches de la carte » qui affiche les boutons d’activation/désactivation des couches. Ces boutons sont définis dans MapLayersItem.qml. En mode paysage, ils apparaissent à côté du bouton « couches de la carte », tandis qu’en mode portrait, ils sont placés dans un Drawer défini dans MapLayersDrawer.qml.

Source de données sur les coups de foudre

L’application reçoit des données simulées de coups de foudre provenant 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/

Une fois connectée au serveur, l’application déclenche le flux de données en temps réel en envoyant le message JSON suivant au serveur :

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

Fichiers source

Exemple de projet sur code.qt.io