Port to Qt 6.3.0 due CMake/Wasm fixes

KDABLabs · Apr 26, 2022 · 1d02cfe · 1d02cfe
1 parent c8445a7
commit 1d02cfe
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 110 deletions.
diff --git a/CMakeLists.txt b/CMakeLists.txt
@@ -9,16 +9,32 @@
 
 project(KDABBoatDemo)
 cmake_minimum_required(VERSION 3.9)
-find_package(Qt5 CONFIG REQUIRED COMPONENTS Core Gui Quick)
+
+find_package(Qt6 6.3.0 COMPONENTS Core Quick Core5Compat REQUIRED)
+
+set(QT_WASM_INITIAL_MEMORY "64MB")
+
 set(CMAKE_INCLUDE_CURRENT_DIR ON)
 set(CMAKE_AUTOMOC TRUE)
 set(CMAKE_AUTORCC TRUE)
 
-add_executable(KDABBoatDemo
-  main.cpp
-  imagesMaps.qrc
-  imagesMaps2.qrc
-  images.qrc
-  data.qrc
+qt_add_executable(KDABBoatDemo
+    MANUAL_FINALIZATION
+    main.cpp
+    imagesMaps.qrc
+    imagesMaps2.qrc
+    images.qrc
+    data.qrc
+)
+
+target_compile_definitions(KDABBoatDemo
+  PRIVATE $<$<OR:$<CONFIG:Debug>,$<CONFIG:RelWithDebInfo>>:QT_QML_DEBUG>)
+target_link_libraries(KDABBoatDemo
+  PRIVATE
+    Qt::Core
+    Qt::Gui
+    Qt::Quick
+    Qt::Core5Compat
 )
-target_link_libraries(KDABBoatDemo Qt5::Core Qt5::Gui Qt5::Quick)
+qt_import_qml_plugins(KDABBoatDemo)
+qt_finalize_executable(KDABBoatDemo)
diff --git a/main.cpp b/main.cpp
@@ -22,9 +22,11 @@
 
 int main(int argc, char *argv[])
 {
-    QGuiApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);
     QGuiApplication app(argc, argv);
 
+    QQmlApplicationEngine engine;
+
+#if !defined(Q_OS_WASM)
     QCommandLineParser parser;
     parser.setApplicationDescription("KDAB Nautical UI - concept of the next generation UI for sailing boats");
     parser.addHelpOption();
@@ -64,13 +66,13 @@ int main(int argc, char *argv[])
     if (!primaryScreen)
         qFatal("Cannot determine the primary screen");
 
-    QQmlApplicationEngine engine;
-    engine.rootContext()->setContextProperty("_canCloseDemoFromUI", QVariant::fromValue(parser.isSet(quitOption)));
-    engine.rootContext()->setContextProperty("_showFullscreen", QVariant::fromValue(parser.isSet(fullscreenOption)));
-
     if (parser.isSet(portraitOption) && parser.isSet(landscapeOption))
         qFatal("Cannot set both landscape and portrait at the same time");
 
+
+    engine.rootContext()->setContextProperty("_canCloseDemoFromUI", QVariant::fromValue(parser.isSet(quitOption)));
+    engine.rootContext()->setContextProperty("_showFullscreen", QVariant::fromValue(parser.isSet(fullscreenOption)));
+
     const bool portrait = [&]() {
         if (parser.isSet(portraitOption)) {
             return true;
@@ -98,6 +100,13 @@ int main(int argc, char *argv[])
         engine.rootContext()->setContextProperty("_windowWidth", QVariant::fromValue(portrait ? 720 : 1280));
         engine.rootContext()->setContextProperty("_windowHeight", QVariant::fromValue(portrait ? 1280 : 720));
     }
+#else
+    engine.rootContext()->setContextProperty("_windowWidth", -1);
+    engine.rootContext()->setContextProperty("_windowHeight", -1);
+    engine.rootContext()->setContextProperty("_portrait", false);
+    engine.rootContext()->setContextProperty("_isLowRes", false);
+    engine.rootContext()->setContextProperty("_showFullscreen", true);
+#endif
 
     const QUrl url(QStringLiteral("qrc:/resources/Main.qml"));
     QObject::connect(

diff --git a/resources/Main.qml b/resources/Main.qml
@@ -36,120 +36,124 @@ ApplicationWindow {
     }
 
     Item {
-        anchors.centerIn: base.contentItem
-        width: _portrait ? base.height : base.width
-        height: _portrait ? base.width : base.height
-        rotation: _portrait ? 90 : 0
-
-        Background {
-            anchors.fill: parent
-            rotateCompass: menuArea.expanded
-        }
+        anchors.fill: parent
 
-        AppPage {
-            id: pagesArea
-            width:  parent.width*1.4
-            height: parent.height
-            widthOffset: width - parent.width + 80
-            x: menuArea.expanded ? parent.width : 80
-            title: menuArea.currentItemText
+        Item {
+            anchors.centerIn: parent
+            width: _portrait ? parent.height : parent.width
+            height: _portrait ? parent.width : parent.height
+            rotation: _portrait ? 90 : 0
 
-            SwipeView {
+            Background {
                 anchors.fill: parent
-                anchors.rightMargin: pagesArea.widthOffset
-                interactive: false
-                currentIndex: menuArea.currentIndex
-                clip: true
+                rotateCompass: menuArea.expanded
+            }
 
-                Loader {
+            AppPage {
+                id: pagesArea
+                width:  parent.width*1.4
+                height: parent.height
+                widthOffset: width - parent.width + 80
+                x: menuArea.expanded ? parent.width : 80
+                title: menuArea.currentItemText
+
+                SwipeView {
+                    anchors.fill: parent
+                    anchors.rightMargin: pagesArea.widthOffset
+                    interactive: false
+                    currentIndex: menuArea.currentIndex
                     clip: true
-                    visible: SwipeView.isCurrentItem
-                    sourceComponent: _isLowRes ? smallBoatStatus : normalBoatStatus
-                    Component {
-                        id: normalBoatStatus
-                        BoatStatusContents { }
+
+                    Loader {
+                        clip: true
+                        visible: SwipeView.isCurrentItem
+                        sourceComponent: _isLowRes ? smallBoatStatus : normalBoatStatus
+                        Component {
+                            id: normalBoatStatus
+                            BoatStatusContents { }
+                        }
+                        Component {
+                            id: smallBoatStatus
+                            BoatStatusContentsSmall { }
+                        }
                     }
-                    Component {
-                        id: smallBoatStatus
-                        BoatStatusContentsSmall { }
+
+                    Loader {
+                        clip: true
+                        visible: SwipeView.isCurrentItem
+                        sourceComponent: _isLowRes ? smallBoatSailing : normalBoatSailing
+                        Component {
+                            id: normalBoatSailing
+                            BoatSailingContents { }
+                        }
+                        Component {
+                            id: smallBoatSailing
+                            BoatSailingContentsSmall { }
+                        }
                     }
-                }
 
-                Loader {
-                    clip: true
-                    visible: SwipeView.isCurrentItem
-                    sourceComponent: _isLowRes ? smallBoatSailing : normalBoatSailing
-                    Component {
-                        id: normalBoatSailing
-                        BoatSailingContents { }
+                    PageNavigation {
+                        visible: SwipeView.isCurrentItem
+                        clip: true
                     }
-                    Component {
-                        id: smallBoatSailing
-                        BoatSailingContentsSmall { }
+                    Radio {
+                        visible: SwipeView.isCurrentItem
+                        clip: true
+                    }
+                    PlayItem {
+                        visible: SwipeView.isCurrentItem
+                        clip: true
                     }
-                }
-
-                PageNavigation {
-                    visible: SwipeView.isCurrentItem
-                    clip: true
-                }
-                Radio {
-                    visible: SwipeView.isCurrentItem
-                    clip: true
-                }
-                PlayItem {
-                    visible: SwipeView.isCurrentItem
-                    clip: true
-                }
 
-                AboutItem {
-                    id: aboutItem
-                    visible: SwipeView.isCurrentItem
+                    AboutItem {
+                        id: aboutItem
+                        visible: SwipeView.isCurrentItem
+                    }
                 }
             }
-        }
 
-        AppMenu {
-            id: menuArea
-            height: parent.height
+            AppMenu {
+                id: menuArea
+                height: parent.height
 
-            model: ListModel {
-                ListElement {
-                    name: qsTr("Boat Status")
-                    iconText: "icon1"
-                }
-                ListElement {
-                    name: qsTr("Sailing")
-                    iconText: "icon2"
-                }
-                ListElement {
-                    name: qsTr("Navigation")
-                    iconText: "icon5"
-                }
-                ListElement {
-                    name: qsTr("Com. Radio")
-                    iconText: "icon3"
-                }
-                ListElement {
-                    name: qsTr("Music Player")
-                    iconText: "icon4"
-                }
-                ListElement {
-                    name: qsTr("About KDAB")
-                    iconText: "icon6"
+                model: ListModel {
+                    ListElement {
+                        name: qsTr("Boat Status")
+                        iconText: "icon1"
+                    }
+                    ListElement {
+                        name: qsTr("Sailing")
+                        iconText: "icon2"
+                    }
+                    ListElement {
+                        name: qsTr("Navigation")
+                        iconText: "icon5"
+                    }
+                    ListElement {
+                        name: qsTr("Com. Radio")
+                        iconText: "icon3"
+                    }
+                    ListElement {
+                        name: qsTr("Music Player")
+                        iconText: "icon4"
+                    }
+                    ListElement {
+                        name: qsTr("About KDAB")
+                        iconText: "icon6"
+                    }
                 }
             }
-        }
 
-        MouseArea {
-            onClicked: Qt.quit()
-            enabled: canCloseDemoFromUI
-            anchors.right: parent.right
-            anchors.top: parent.top
-            width: 50
-            height: 50
-        }
+            MouseArea {
+                onClicked: Qt.quit()
+                enabled: canCloseDemoFromUI
+                anchors.right: parent.right
+                anchors.top: parent.top
+                width: 50
+                height: 50
+            }
 
+        }
     }
 }
 
diff --git a/resources/Map.qml b/resources/Map.qml
@@ -21,7 +21,7 @@ Flickable {
     flickDeceleration: 350
     Image {
         id: image
-        source: "/img/maps/resources/images/maps/shot"+map.numberi
+        source: "/img/maps/resources/images/maps/shot" + map.numberi + (Qt.platform.os === "wasm" ? ".png" : "")
         anchors.centerIn: parent
     }
 }
diff --git a/resources/Mask.qml b/resources/Mask.qml
@@ -9,7 +9,7 @@
 */
 
 import QtQuick 2.0
-import QtGraphicalEffects 1.0 // for OpacityMask
+import Qt5Compat.GraphicalEffects // for OpacityMask
 
 Item {
     id: mask