Lightning Viewer Example: Use QML Module and Restructure Project Files

Restructure resource file management by relocating QML and asset files
from the resource files (qrc) to their respective modules within the
application. Moreover, the project has been divided into two distinct
submodules: LightningViewer and LightningViewerStyle.

The LightningViewer module includes the project's sources, QML files,
and assets, used for the model, view, and controller aspects.

On the other hand, the LightningViewerStyle module is dedicated to
defining a custom style generated by a tool. The purpose of separating
style-related files from LightningViewer is to simplify updates by
allowing the style generator tool to only modify contents within the
style subdirectory.

Task-number: QTBUG-121123
Pick-to: 6.7
Change-Id: Ib04fb156bd47b4033526c8eb9b33ccab76ab50e9
Reviewed-by: Oliver Eftevaag <oliver.eftevaag@qt.io>

examples/demos/lightningviewer/CMakeLists.txt

@@ -2,10 +2,7 @@
 # SPDX-License-Identifier: BSD-3-Clause
 
 cmake_minimum_required(VERSION 3.16)
-
-set(APP_NAME LightningViewerExample)
-
-project(LightningViewerExample VERSION 0.1 LANGUAGES CXX)
+project(LightningViewerExample VERSION 1.0 LANGUAGES CXX)
 
 if(NOT DEFINED INSTALL_EXAMPLESDIR)
     set(INSTALL_EXAMPLESDIR "examples")
@@ -15,41 +12,36 @@ set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/demos/${PROJECT_NAME}")
 
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
-find_package(Qt6 6.5 REQUIRED COMPONENTS Quick WebSockets Positioning)
+find_package(Qt6 REQUIRED COMPONENTS Quick QuickControls2)
 
-qt_standard_project_setup(REQUIRES 6.5)
+qt_standard_project_setup(REQUIRES 6.6)
 
-set(CMAKE_AUTORCC ON)
-qt_add_executable(${APP_NAME}
+add_subdirectory(LightningViewer)
+add_subdirectory(LightningViewerStyle)
+
+qt_add_executable(${PROJECT_NAME} WIN32
     main.cpp
-    controller.h controller.cpp
-    data/laststrikeinfo.h
-    data/lightningitemdata.h data/lightningitemdata.cpp
-    models/lightningitemmodel.h models/lightningitemmodel.cpp
-    providers/lightningprovider.h providers/lightningprovider.cpp
-    resources/resources.qrc
-    resources/lv_style/lv_style.qrc
 )
 
-target_link_libraries(${APP_NAME} PRIVATE
+target_link_libraries(${PROJECT_NAME} PRIVATE
     Qt6::Quick
-    Qt6::WebSockets
-    Qt6::Positioning
+    Qt6::QuickControls2
+    LightningViewer
+    LightningViewerStyle
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
 # If you are developing for iOS or macOS you should consider setting an
 # explicit, fixed bundle identifier manually though.
-set_target_properties(${APP_NAME} PROPERTIES
-#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appLightningViewer
+set_target_properties(${PROJECT_NAME} PROPERTIES
+    MACOSX_BUNDLE TRUE
+    MACOSX_BUNDLE_GUI_IDENTIFIER "io.qt.examples.LightningViewer"
     MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
     MACOSX_BUNDLE_INFO_PLIST "${CMAKE_CURRENT_SOURCE_DIR}/Info.plist"
     MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
-    MACOSX_BUNDLE TRUE
-    WIN32_EXECUTABLE TRUE
 )
 
-install(TARGETS ${APP_NAME}
+install(TARGETS ${PROJECT_NAME}
     RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
     BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
     LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"

examples/demos/lightningviewer/LightningViewer/ActionsLayer.qml

@@ -6,8 +6,6 @@ import QtLocation
 import QtQuick.Layouts
 import QtQuick.Controls
 
-import lv_style 1.0
-
 Item {
     id: actionsLayer
 

examples/demos/lightningviewer/LightningViewer/CMakeLists.txt

@@ -0,0 +1,52 @@
+# Copyright (C) 2024 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+cmake_minimum_required(VERSION 3.16)
+project(LightningViewer LANGUAGES CXX)
+
+set(CMAKE_AUTOMOC ON)
+
+find_package(Qt6 REQUIRED COMPONENTS Positioning Quick WebSockets)
+
+set_source_files_properties(LightningViewConfig.qml MapType.qml
+    PROPERTIES
+        QT_QML_SINGLETON_TYPE TRUE
+)
+
+qt_add_qml_module(${PROJECT_NAME}
+    URI LightningViewer
+    VERSION 1.0
+    SOURCES
+        controller.h controller.cpp
+        laststrikeinfo.h
+        lightningitemdata.h lightningitemdata.cpp
+        lightningitemmodel.h lightningitemmodel.cpp
+        lightningprovider.h lightningprovider.cpp
+    QML_FILES
+        ActionsLayer.qml
+        DistanceTimeLayer.qml
+        LightningMapLayer.qml
+        LightningView.qml
+        LightningViewConfig.qml
+        Main.qml
+        MapLayersDrawer.qml
+        MapLayersItem.qml
+        MapType.qml
+        MapView.qml
+        SwitchMap.qml
+    RESOURCES
+        icons/distance.svg
+        icons/globe.svg
+        icons/lightning-layer.svg
+        icons/lightning-strike.svg
+        icons/map-layers.svg
+        icons/map.svg
+        icons/recenter.svg
+        icons/user-location.svg
+)
+
+target_link_libraries(${PROJECT_NAME} PRIVATE
+    Qt6::Positioning
+    Qt6::Quick
+    Qt6::WebSockets
+)

examples/demos/lightningviewer/LightningViewer/LightningView.qml

@@ -4,7 +4,7 @@
 import QtQuick
 import QtQuick.Controls
 
-ApplicationWindow {
+Item {
     visible: true
 
     MapView {
@@ -30,11 +30,4 @@ ApplicationWindow {
         property: "distanceTimeLayerEnabled"
         value: actionsLayer.distanceLayerVisible
     }
-
-    Component.onCompleted: {
-        if ((width < 200) || (height < 200)) {
-            width = LightningViewConfig.appWidth
-            height = LightningViewConfig.appHeight
-        }
-    }
 }

examples/demos/lightningviewer/LightningViewer/Main.qml

@@ -0,0 +1,20 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+
+ApplicationWindow {
+    visible: true
+
+    LightningView {
+        anchors.fill: parent
+    }
+
+    Component.onCompleted: {
+        if ((width < 200) || (height < 200)) {
+            width = LightningViewConfig.appWidth
+            height = LightningViewConfig.appHeight
+        }
+    }
+}

examples/demos/lightningviewer/LightningViewer/MapLayersDrawer.qml

@@ -2,11 +2,10 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
-import lv_style 1.0
-
 Item {
     id: drawer
     property int dragMargin: 0

examples/demos/lightningviewer/LightningViewer/MapLayersItem.qml

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 
-import lv_style 1.0
-
 Item {
     id: mapLayersItem
     implicitWidth: width

examples/demos/lightningviewer/LightningViewer/SwitchMap.qml

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 
-import lv_style 1.0
-
 Item {
     id: switchMap
 

examples/demos/lightningviewer/LightningViewer/controller.cpp

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 #include "controller.h"
-#include "data/laststrikeinfo.h"
-#include "models/lightningitemmodel.h"
-#include "providers/lightningprovider.h"
+#include "laststrikeinfo.h"
+#include "lightningitemmodel.h"
+#include "lightningprovider.h"
 
 #include <QGeoPositionInfoSource>
 

examples/demos/lightningviewer/LightningViewer/controller.h

@@ -4,16 +4,17 @@
 #ifndef CONTROLLER_H
 #define CONTROLLER_H
 
-#include "data/laststrikeinfo.h"
-#include "models/lightningitemmodel.h"
-#include "providers/lightningprovider.h"
+#include "laststrikeinfo.h"
+#include "lightningitemmodel.h"
+#include "lightningprovider.h"
 
+#include <QGeoPositionInfoSource>
 #include <QObject>
+#include <QtQmlIntegration>
 #include <QTime>
 
 QT_BEGIN_NAMESPACE
 class QGeoPositionInfo;
-class QGeoPositionInfoSource;
 QT_END_NAMESPACE
 
 class Controller : public QObject
@@ -27,6 +28,9 @@ class Controller : public QObject
     Q_PROPERTY(double lastStrikeDirection READ getLastStrikeDirection NOTIFY lastStrikeInfoUpdated FINAL)
     Q_PROPERTY(bool distanceTimeLayerEnabled READ isDistanceTimeLayerEnabled WRITE setDistanceTimeLayerEnabled NOTIFY distanceTimeLayerEnabledChanged FINAL)
 
+    QML_NAMED_ELEMENT(LightningController)
+    QML_SINGLETON
+
 public:
     explicit Controller(QObject *parent = nullptr);
     ~Controller() override;

examples/demos/lightningviewer/LightningViewer/lightningitemmodel.cpp

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 #include "lightningitemmodel.h"
-#include "../data/laststrikeinfo.h"
+#include "laststrikeinfo.h"
 
 #include <QGeoPositionInfo>
 

examples/demos/lightningviewer/LightningViewer/lightningitemmodel.h

@@ -4,7 +4,7 @@
 #ifndef LIGHTNINGITEMMODEL_H
 #define LIGHTNINGITEMMODEL_H
 
-#include "../data/lightningitemdata.h"
+#include "lightningitemdata.h"
 
 #include <QAbstractListModel>
 

examples/demos/lightningviewer/LightningViewer/lightningprovider.h

@@ -4,7 +4,7 @@
 #ifndef LIGHTNINGPROVIDER_H
 #define LIGHTNINGPROVIDER_H
 
-#include "../data/lightningitemdata.h"
+#include "lightningitemdata.h"
 
 #include <QObject>
 

examples/demos/lightningviewer/LightningViewerStyle/CMakeLists.txt

@@ -0,0 +1,124 @@
+# Copyright (C) 2024 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+cmake_minimum_required(VERSION 3.16)
+project(LightningViewerStyle LANGUAGES CXX)
+
+set(CMAKE_AUTOMOC ON)
+
+find_package(Qt6 REQUIRED COMPONENTS Quick)
+
+set_source_files_properties(Config.qml
+    PROPERTIES
+        QT_QML_SINGLETON_TYPE TRUE
+)
+
+qt_add_qml_module(${PROJECT_NAME}
+    URI LightningViewerStyle
+    QML_FILES
+        Button.qml
+        Config.qml
+        RoundButton.qml
+        StyleImage.qml
+    RESOURCES
+        dark/images/roundbutton-background-checked-disabled@2x.png
+        dark/images/button-background-checked-hovered.png
+        dark/images/roundbutton-background-checked-disabled.png
+        dark/images/flatbutton-background.png
+        dark/images/flatbutton-background-disabled.png
+        dark/images/flatbutton-background-checked-pressed.png
+        dark/images/button-background.png
+        dark/images/flatbutton-background-hovered.png
+        dark/images/button-background-checked-hovered@2x.png
+        dark/images/roundbutton-background-checked-hovered.png
+        dark/images/button-background-checked.png
+        dark/images/flatbutton-background-checked-hovered@2x.png
+        dark/images/roundbutton-background-disabled.png
+        dark/images/flatbutton-background-disabled@2x.png
+        dark/images/roundbutton-background@2x.png
+        dark/images/flatbutton-background-checked-pressed@2x.png
+        dark/images/button-background@2x.png
+        dark/images/button-background-hovered@2x.png
+        dark/images/roundbutton-background-checked-pressed.png
+        dark/images/roundbutton-background-hovered.png
+        dark/images/roundbutton-background-checked.png
+        dark/images/flatbutton-background-checked@2x.png
+        dark/images/roundbutton-background.png
+        dark/images/button-background-pressed@2x.png
+        dark/images/roundbutton-background-disabled@2x.png
+        dark/images/flatbutton-background-checked.png
+        dark/images/button-background-disabled.png
+        dark/images/roundbutton-background-pressed@2x.png
+        dark/images/flatbutton-background-checked-disabled.png
+        dark/images/roundbutton-background-checked@2x.png
+        dark/images/roundbutton-background-checked-hovered@2x.png
+        dark/images/button-background-hovered.png
+        dark/images/flatbutton-background-checked-disabled@2x.png
+        dark/images/button-background-checked-disabled@2x.png
+        dark/images/button-background-checked-disabled.png
+        dark/images/button-background-checked-pressed@2x.png
+        dark/images/flatbutton-background@2x.png
+        dark/images/button-background-checked@2x.png
+        dark/images/button-background-pressed.png
+        dark/images/button-background-checked-pressed.png
+        dark/images/button-background-disabled@2x.png
+        dark/images/flatbutton-background-pressed.png
+        dark/images/flatbutton-background-checked-hovered.png
+        dark/images/flatbutton-background-pressed@2x.png
+        dark/images/roundbutton-background-pressed.png
+        dark/images/roundbutton-background-checked-pressed@2x.png
+        dark/images/flatbutton-background-hovered@2x.png
+        dark/images/roundbutton-background-hovered@2x.png
+        light/images/roundbutton-background-checked-disabled@2x.png
+        light/images/button-background-checked-hovered.png
+        light/images/roundbutton-background-checked-disabled.png
+        light/images/flatbutton-background.png
+        light/images/flatbutton-background-disabled.png
+        light/images/flatbutton-background-checked-pressed.png
+        light/images/button-background.png
+        light/images/flatbutton-background-hovered.png
+        light/images/button-background-checked-hovered@2x.png
+        light/images/roundbutton-background-checked-hovered.png
+        light/images/button-background-checked.png
+        light/images/flatbutton-background-checked-hovered@2x.png
+        light/images/roundbutton-background-disabled.png
+        light/images/flatbutton-background-disabled@2x.png
+        light/images/roundbutton-background@2x.png
+        light/images/flatbutton-background-checked-pressed@2x.png
+        light/images/button-background@2x.png
+        light/images/button-background-hovered@2x.png
+        light/images/roundbutton-background-checked-pressed.png
+        light/images/roundbutton-background-hovered.png
+        light/images/roundbutton-background-checked.png
+        light/images/flatbutton-background-checked@2x.png
+        light/images/roundbutton-background.png
+        light/images/button-background-pressed@2x.png
+        light/images/roundbutton-background-disabled@2x.png
+        light/images/flatbutton-background-checked.png
+        light/images/button-background-disabled.png
+        light/images/roundbutton-background-pressed@2x.png
+        light/images/flatbutton-background-checked-disabled.png
+        light/images/roundbutton-background-checked@2x.png
+        light/images/roundbutton-background-checked-hovered@2x.png
+        light/images/button-background-hovered.png
+        light/images/flatbutton-background-checked-disabled@2x.png
+        light/images/button-background-checked-disabled@2x.png
+        light/images/button-background-checked-disabled.png
+        light/images/button-background-checked-pressed@2x.png
+        light/images/flatbutton-background@2x.png
+        light/images/button-background-checked@2x.png
+        light/images/button-background-pressed.png
+        light/images/button-background-checked-pressed.png
+        light/images/button-background-disabled@2x.png
+        light/images/flatbutton-background-pressed.png
+        light/images/flatbutton-background-checked-hovered.png
+        light/images/flatbutton-background-pressed@2x.png
+        light/images/roundbutton-background-pressed.png
+        light/images/roundbutton-background-checked-pressed@2x.png
+        light/images/flatbutton-background-hovered@2x.png
+        light/images/roundbutton-background-hovered@2x.png
+)
+
+target_link_libraries(${PROJECT_NAME} PRIVATE
+    Qt6::Quick
+)