Lightning Viewer

Lightning Viewerは、WebSocket からシミュレートされた落雷データを受信し、それを地図上にリアルタイムで表示するアプリケーションです。レスポンシブなUIを採用しており、モバイル、タブレット、デスクトップの各画面サイズに、横向き・縦向きを問わず適切に適応します。 落雷は地図上にアイコンとして表示され、別のオーバーレイで直近の落雷の距離と時刻が表示されます。これらのデータレイヤーは、地図レイヤーボタンを押して表示されるトグルで非表示・表示を切り替えることができます。また、地図の種類を切り替えるスイッチや、地図をユーザーの現在地に中央合わせするボタンも用意されています。

例の動作確認

以下の手順でサンプルを実行できます：

• Qt Creator

  Welcome モードを開き、Examples からこの例を選択してください。詳細については、Qt Creator の「チュートリアル：ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからこのサンプルを選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル: ビルドと実行」を参照してください。

アプリケーションの構造と関連クラス

このアプリケーションは、Model-View-Controller (MVC) パターンに従っています。LightningItemModel クラスはモデルとして機能します。このクラスは、LightningItemData オブジェクトのリストを格納し、新しいデータを挿入したり、最新のストライキに関する情報を取得したりするためのメソッドを提供します。ビューは、データやユーザーインターフェースを表示し、ユーザーの操作を処理する複数のQMLコンポーネントで定義されています。Controller クラスは、LightningItemModel とQMLコンポーネント間のデータフローを管理します。LightningProvider クラスは、オンラインサーバーへのWebSocket 接続を開き、そこからシミュレートされた各落雷についてJSONメッセージを受信します。このクラスはメッセージを解析し、Controller のスロットに接続されたシグナルを介して、データをLightningItemModel に渡します：

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

各落雷は、LightningItemData 構造体によって表されます。この構造体には、落雷のタイムスタンプ、緯度、経度が含まれており、QGeoCoordinate として指定されたユーザーの現在地からの距離や方向を返すメソッドも備えています。LastStrikeInfo 構造体は、直近の落雷に関する情報を保持します。

LightningView.qml は、アプリケーションのメインビューとして機能します。このビューは、コンポーネント `MapView.qml` を通じて地図と落雷データを表示し、コンポーネント `ActionsLayer.qml` を通じてユーザー操作を制御する役割を担っています。アプリケーションの起動時、コンポーネント `LightningSplash.qml ` がメインビューの上に表示されます。 Qt Lottie Animation モジュールが利用可能な場合、このスプラッシュ画面には、qt_target_qml_from_lottie() CMake関数を使用してLottieファイルからインポートされたベクターアニメーションが表示されます。そうでない場合は、静止画像が表示されます。

MapView.qml は、地図のズームおよびパン処理を担当します。ユーザーの現在位置を取得するために `PositionSource ` を使用し、地図を表示するために `Map ` を使用します。さらに、落雷データを表示するための `LightningMapLayer.qml ` と、直近の落雷に関する情報を表示するための `DistanceTimeLayer.qml ` が含まれています。

ActionsLayer.qml 地図の中心を再設定するためのボタンと、異なる地図タイプを切り替えるためのカスタムスイッチコントロール（SwitchMap.qml ）を提供します。また、地図レイヤーのトグルを表示する「地図レイヤー」ボタンも含まれています。これらのトグルはMapLayersItem.qml で定義されています。縦向き表示では地図レイヤーボタンの隣に表示され、横向き表示ではMapLayersDrawer.qml で定義されたDrawer 内に配置されます。

落雷データソース

このアプリケーションは、Qtが管理するサーバーからシミュレートされた落雷データを受信します。サーバーは、以下のURLで接続を受け付けるWebSocket APIを提供しています:

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

サーバーへの接続後、アプリケーションは次の JSON メッセージをサーバーに送信することで、ライブデータフィードを起動します：

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

ソースファイル

code.qt.io 上のサンプルプロジェクト