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: 튜토리얼: 빌드 및 실행을 참조하십시오.

애플리케이션 구조 및 관련 클래스

이 애플리케이션은 MVC(Model-View-Controller) 패턴을 따릅니다. 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의 예제 프로젝트