落雷ビューア

Lightning Viewerは、WebSocket から模擬落雷データを受信し、リアルタイムに地図上に表示するアプリケーションです。横向きでも縦向きでも、モバイル、タブレット、デスクトップサイズのスクリーンにうまく適応するレスポンシブUIが特徴です。落雷は地図上にアイコンとして表示され、別のオーバーレイには最後の落雷の距離と時間が表示される。これらのデータレイヤーは、マップレイヤーボタンを押すと表示されるトグルで、非表示にしたり表示したりすることができる。また、マップの種類を切り替えるスイッチや、ユーザーの位置でマップを中央に表示するボタンもある。

例の実行

から例を実行するには Qt Creatorから例を実行するには、Welcome モードを開き、Examples から例を選択します。詳しくは、Qt Creator:Tutorialをご覧ください：ビルドと実行。

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

このアプリケーションは Model-View-Controller (MVC) パターンに従います。LightningItemModel クラスがモデルとして機能します。LightningItemData オブジェクトのリストを保存し、新しいデータを挿入したり、最新のストライクに関する情報を取得したりするメソッドを提供します。Viewは複数の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 コンポーネントを通してユーザーコントロールを表示します。

MapView.qml は地図のズームとパンを処理します。PositionSource を使ってユーザーの現在地を取得し、Map を使って地図を表示します。さらに、雷データを表示するためのLightningMapLayer.qml と、最後の落雷に関する情報を表示するためのDistanceTimeLayer.qml があります。

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

落雷データソース

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

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

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

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

ソースファイル

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