Blitzanzeige

Lightning Viewer ist eine Anwendung, die simulierte Blitzschlagdaten von WebSocket empfängt und diese in Echtzeit auf einer Karte anzeigt. Sie verfügt über eine responsive Benutzeroberfläche, die sich gut an Bildschirme von Mobilgeräten, Tablets und Desktops sowohl im Quer- als auch im Hochformat anpasst. Blitzeinschläge werden als Symbole auf der Karte angezeigt, und eine separate Überlagerung zeigt die Entfernung und den Zeitpunkt des letzten Einschlags an. Diese Datenebenen lassen sich über Umschaltflächen ein- und ausblenden, die durch Drücken der Schaltfläche „Kartenebenen“ aufgerufen werden. Außerdem gibt es einen Schalter zum Wechseln zwischen Kartentypen und eine Schaltfläche, mit der die Karte auf den Standort des Nutzers zentriert wird.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Anwendungsstruktur und relevante Klassen

Diese Anwendung folgt dem Model-View-Controller-Muster (MVC). Die Klasse „ LightningItemModel “ dient als Modell. Sie speichert eine Liste von „ LightningItemData “-Objekten und stellt Methoden zum Einfügen neuer Daten sowie zum Abrufen von Informationen über die neuesten Streiks bereit. Die Ansicht wird in mehreren QML-Komponenten definiert, die die Daten und die Benutzeroberfläche anzeigen und die Benutzerinteraktion verarbeiten. Die Klasse „ Controller “ verwaltet den Datenfluss zwischen dem „ LightningItemModel “ und den QML-Komponenten. Die Klasse „ LightningProvider “ öffnet eine „ WebSocket “-Verbindung zu einem Online-Server, von dem sie für jeden simulierten Blitzschlag eine JSON-Nachricht empfängt. Sie analysiert die Nachrichten und leitet die Daten über ein Signal, das mit einem Slot in der Klasse „ Controller “ verbunden ist, an den „ LightningItemModel “ weiter:

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

Jeder Blitzschlag wird durch eine ` LightningItemData `-Struktur dargestellt. Diese enthält den Zeitstempel sowie den Breiten- und Längengrad des Blitzschlags und verfügt über Methoden, die die Entfernung und Richtung vom Benutzerstandort zurückgeben, der als ` QGeoCoordinate` angegeben wird. Die ` LastStrikeInfo `-Struktur enthält Informationen zum letzten Blitzschlag.

LightningView.qml dient als Hauptansicht der Anwendung. Sie ist für die Anzeige der Karten- und Blitzdaten über die Komponente ` MapView.qml` sowie der Benutzerelemente über die Komponente ` ActionsLayer.qml` zuständig. Beim Start der Anwendung wird die Komponente ` LightningSplash.qml ` über der Hauptansicht angezeigt. Wenn das Qt Lottie Animation Modul verfügbar ist, zeigt dieser Startbildschirm eine Vektoranimation an, die mithilfe der CMake-Funktion ` qt_target_qml_from_lottie()` aus einer Lottie-Datei importiert wurde. Andernfalls wird ein statisches Bild angezeigt.

MapView.qml steuert das Zoomen und Verschieben der Karte. Es nutzt ein ` PositionSource `, um den aktuellen Standort des Benutzers zu ermitteln, und ein ` Map `, um die Karte anzuzeigen. Darüber hinaus enthält es ein ` LightningMapLayer.qml ` zur Darstellung der Blitzdaten sowie ein ` DistanceTimeLayer.qml ` zur Anzeige von Informationen zum letzten Blitzeinschlag.

ActionsLayer.qml bietet eine Schaltfläche zum Neuzentrieren der Karte und ein benutzerdefiniertes Umschaltelement, SwitchMap.qml, zum Wechseln zwischen verschiedenen Kartentypen. Außerdem enthält es eine Schaltfläche „Kartenebenen“, die die Umschaltelemente für die Kartenebenen anzeigt. Diese Umschaltelemente sind in MapLayersItem.qml definiert. Im Querformat erscheinen sie neben der Schaltfläche „Kartenebenen“, während sie im Hochformat in einem Drawer platziert sind, das in MapLayersDrawer.qml definiert ist.

Datenquelle für Blitzeinschläge

Die Anwendung empfängt simulierte Blitzschlagdaten von einem von Qt betriebenen Server. Der Server stellt eine WebSocket-API bereit, die Verbindungen unter der folgenden URL akzeptiert:

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

Nach dem Verbindungsaufbau zum Server löst die Anwendung den Live-Datenfeed aus, indem sie die folgende JSON-Nachricht an den Server sendet:

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

Quelldateien

Beispielprojekt auf code.qt.io