落雷ビューア

サンプルを実行する

Qt Creator からサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

概要

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

アプリケーションの構造

このアプリケーションは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