라이트닝 뷰어

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

개요

번개뷰어는 WebSocket 에서 시뮬레이션된 낙뢰 데이터를 수신하여 실시간으로 지도에 표시하는 애플리케이션입니다. 모바일, 태블릿, 데스크톱 크기의 화면에 가로 및 세로 방향 모두에 잘 적응하는 반응형 UI가 특징입니다. 낙뢰는 지도에 아이콘으로 표시되며, 마지막 낙뢰의 거리와 시간은 별도의 오버레이로 표시됩니다. 이러한 데이터 레이어는 지도 레이어 버튼을 눌러 액세스할 수 있는 토글을 사용하여 숨기거나 표시할 수 있습니다. 또한 지도 유형 간 전환을 위한 스위치와 사용자 위치에서 지도를 중앙에 배치하는 버튼도 있습니다.

애플리케이션 구조

이 애플리케이션은 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 를 통해 제어합니다.

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