Create Design Studio project

.gitignore

+.DS_Store
+ui/*.db
+ui/*.qtds
+ui/*.db-shm
+ui/*.db-wal

CMakeLists.txt

@@ -31,7 +31,8 @@ endif()
 qt_add_executable(${PROJECT_NAME}
     src/main.cpp
     src/backend.cpp src/backend.h
-    resources/resources.qrc
+    ui/main.qml
+    ui/resources.qrc
 )
 
 target_link_libraries(${PROJECT_NAME} PRIVATE
@@ -48,15 +49,17 @@ set_property(TARGET ${PROJECT_NAME}
 APPEND PROPERTY QT_ANDROID_PACKAGE_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/android
 )
 
-if(EXISTS ${ANDROID_OPENSSL_PATH})
-    message(STATUS "Found OpenSSL for Android. Path: ${ANDROID_OPENSSL_PATH}")
-    set_property(TARGET ${PROJECT_NAME} PROPERTY QT_ANDROID_EXTRA_LIBS
-        ${ANDROID_OPENSSL_PATH}/libcrypto_3.so
-        ${ANDROID_OPENSSL_PATH}/libssl_3.so)
-else()
+if(NOT EXISTS ${ANDROID_OPENSSL_PATH})
     message(WARNING "Cannot find OpenSSL for Android. Path: ${ANDROID_OPENSSL_PATH}")
+    message(FATAL_ERROR "Please set ANDROID_OPENSSL_PATH to the path of OpenSSL for Android.")
 endif()
 
+message(STATUS "Found OpenSSL for Android. Path: ${ANDROID_OPENSSL_PATH}")
+set_property(TARGET ${PROJECT_NAME} PROPERTY QT_ANDROID_EXTRA_LIBS
+    ${ANDROID_OPENSSL_PATH}/libcrypto_3.so
+    ${ANDROID_OPENSSL_PATH}/libssl_3.so)
+
 set_property(DIRECTORY APPEND PROPERTY ADDITIONAL_MAKE_CLEAN_FILES ${CMAKE_INSTALL_PREFIX})
 
 qt6_import_qml_plugins(${PROJECT_NAME})
+

README.md

@@ -17,7 +17,8 @@ Qt Design Viewer works with minimum Android 33.
 * cicd: GitLab pipeline files
 * resources: UI related files
 * android: Files needed for Android build system
-* src: Source files
+* src: Backend source files
+* ui: UI source files
 * qtquickdesigner-components: Required 3rd party QML components
 
 ## Building
@@ -42,6 +43,7 @@ cmake \
     -G Ninja \
     -DCMAKE_TOOLCHAIN_FILE=<qt-android-path>/lib/cmake/Qt6/qt.toolchain.cmake \
     -DCMAKE_INSTALL_PREFIX=<qt-android-path> \
+    -DCMAKE_PREFIX_PATH=<qt-android-path> \
     -DANDROID_SDK_ROOT=<android-sdk-path> \
     -DANDROID_NDK_ROOT=<android-sdk-path>/ndk/<ndk-version> \
     -DANDROID_OPENSSL_PATH=<openssl-path>

ui/CMakeLists.txt

+cmake_minimum_required(VERSION 3.21.1)
+
+option(LINK_INSIGHT "Link Qt Insight Tracker library" ON)
+option(BUILD_QDS_COMPONENTS "Build design studio components" ON)
+
+project(DesignViewerApp LANGUAGES CXX)
+
+set(CMAKE_AUTOMOC ON)
+
+find_package(Qt6 6.2 REQUIRED COMPONENTS Core Gui Qml Quick)
+
+if (Qt6_VERSION VERSION_GREATER_EQUAL 6.3)
+    qt_standard_project_setup()
+endif()
+
+qt_add_executable(DesignViewerApp src/main.cpp)
+
+qt_add_resources(DesignViewerApp "configuration"
+    PREFIX "/"
+    FILES
+        qtquickcontrols2.conf
+)
+
+target_link_libraries(DesignViewerApp PRIVATE
+    Qt6::Core
+    Qt6::Gui
+    Qt6::Qml
+    Qt6::Quick
+)
+
+if (BUILD_QDS_COMPONENTS)
+    include(${CMAKE_CURRENT_SOURCE_DIR}/qmlcomponents)
+endif()
+
+include(${CMAKE_CURRENT_SOURCE_DIR}/qmlmodules)
+
+if (LINK_INSIGHT)
+    include(${CMAKE_CURRENT_SOURCE_DIR}/insight)
+endif ()
+
+install(TARGETS DesignViewerApp
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

ui/DesignViewer.qmlproject

+import QmlProject
+
+Project {
+    mainFile: "main.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+
+    QmlFiles {
+        directory: "content"
+    }
+
+    QmlFiles {
+        directory: "imports"
+    }
+
+    JavaScriptFiles {
+        directory: "content"
+    }
+
+    JavaScriptFiles {
+        directory: "imports"
+    }
+
+    ImageFiles {
+        directory: "content"
+    }
+
+    ImageFiles {
+        directory: "asset_imports"
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Files {
+        filter: "*.ttf;*.otf"
+    }
+
+    Files {
+        filter: "*.wav;*.mp3"
+    }
+
+    Files {
+        filter: "*.mp4"
+    }
+
+    Files {
+        filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag"
+    }
+
+    Files {
+        filter: "*.qsb"
+    }
+
+    Files {
+        filter: "*.mesh"
+        directory: "asset_imports"
+    }
+
+    Files {
+        filter: "*.qml"
+        directory: "asset_imports"
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+        QML_COMPAT_RESOLVE_URLS_ON_ASSIGNMENT: "1"
+        QT_LOGGING_RULES: "qt.qml.connections=false"
+        QT_ENABLE_HIGHDPI_SCALING: "0"
+        /* Useful for debugging
+       QSG_VISUALIZE=batches
+       QSG_VISUALIZE=clip
+       QSG_VISUALIZE=changes
+       QSG_VISUALIZE=overdraw
+       */
+    }
+
+    qt6Project: true
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports", "asset_imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/DesignViewer"
+
+    qdsVersion: "4.2"
+
+    quickVersion: "6.5"
+
+    /* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */
+    widgetApp: true
+
+    /* args: Specifies command line arguments for qsb tool to generate shaders.
+       files: Specifies target files for qsb tool. If path is included, it must be relative to this file.
+              Wildcard '*' can be used in the file name part of the path.
+              e.g. files: [ "content/shaders/*.vert", "*.frag" ]  */
+    ShaderTool {
+        args: "-s --glsl \"100 es,120,150\" --hlsl 50 --msl 12"
+        files: [ "content/shaders/*" ]
+    }
+
+    multilanguageSupport: true
+    supportedLanguages: ["en"]
+    primaryLanguage: "en"
+
+}

ui/asset_imports/asset_imports.txt

+Imported 3D assets and components imported from bundles will be created in this folder.

ui/content/CMakeLists.txt

+### This file is automatically generated by Qt Design Studio.
+### Do not change
+
+qt_add_library(content STATIC)
+qt6_add_qml_module(content
+    URI "content"
+    VERSION 1.0
+    QML_FILES
+        App.qml
+        Screen01.ui.qml
+    RESOURCES
+        fonts/fonts.txt
+)

ui/content/fonts/fonts.txt

+Fonts in this folder are loaded automatically.

ui/imports/CMakeLists.txt

+### This file is automatically generated by Qt Design Studio.
+### Do not change
+
+add_subdirectory(DesignViewer)

ui/imports/DesignViewer/CMakeLists.txt

+### This file is automatically generated by Qt Design Studio.
+### Do not change
+
+qt_add_library(DesignViewer STATIC)
+set_source_files_properties(Constants.qml
+    PROPERTIES
+        QT_QML_SINGLETON_TYPE true
+    )
+
+qt6_add_qml_module(DesignViewer
+	URI "DesignViewer"
+	VERSION 1.0
+	QML_FILES
+		Constants.qml
+		DirectoryFontLoader.qml
+		EventListModel.qml
+		EventListSimulator.qml
+)

ui/imports/DesignViewer/Constants.qml

+pragma Singleton
+import QtQuick 6.5
+import QtQuick.Studio.Application
+
+QtObject {
+    readonly property int width: 1920
+    readonly property int height: 1080
+
+    property string relativeFontDirectory: "fonts"
+
+    /* Edit this comment to add your custom font */
+    readonly property font font: Qt.font({
+                                             family: Qt.application.font.family,
+                                             pixelSize: Qt.application.font.pixelSize
+                                         })
+    readonly property font largeFont: Qt.font({
+                                                  family: Qt.application.font.family,
+                                                  pixelSize: Qt.application.font.pixelSize * 1.6
+                                              })
+
+    readonly property color backgroundColor: "#c2c2c2"
+
+
+    property StudioApplication application: StudioApplication {
+        fontPath: Qt.resolvedUrl("../../content/" + relativeFontDirectory)
+    }
+}

ui/imports/DesignViewer/DirectoryFontLoader.qml

+// Copyright (C) 2019 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+import QtQuick 6.5
+import Qt.labs.folderlistmodel 6.5
+
+QtObject {
+    id: loader
+
+    property url fontDirectory: Qt.resolvedUrl("../../content/" + relativeFontDirectory)
+    property string relativeFontDirectory: "fonts"
+
+    function loadFont(url) {
+        var fontLoader = Qt.createQmlObject('import QtQuick 2.15; FontLoader { source: "' + url + '"; }',
+                                            loader,
+                                            "dynamicFontLoader");
+    }
+
+    property FolderListModel folderModel: FolderListModel {
+        id: folderModel
+        folder: loader.fontDirectory
+        nameFilters: [ "*.ttf", "*.otf" ]
+        showDirs: false
+
+        onStatusChanged: {
+            if (folderModel.status == FolderListModel.Ready) {
+                var i
+                for (i = 0; i < count; i++) {
+                    loadFont(folderModel.get(i, "fileURL"))
+                }
+            }
+        }
+    }
+}

ui/imports/DesignViewer/EventListModel.qml

+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+import QtQuick 6.5
+
+ListModel {
+    id: eventListModel
+
+    ListElement {
+        eventId: "enterPressed"
+        eventDescription: "Emitted when pressing the enter button"
+        shortcut: "Return"
+        parameters: "Enter"
+    }
+}

ui/imports/DesignViewer/EventListSimulator.qml

+// Copyright (C) 2018 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+import QtQuick 6.5
+import QtQuick.Studio.EventSimulator 1.0
+import QtQuick.Studio.EventSystem 1.0
+
+QtObject {
+    id: simulator
+    property bool active: true
+
+    property Timer __timer: Timer {
+        id: timer
+        interval: 100
+        onTriggered: {
+            EventSimulator.show()
+        }
+    }
+
+    Component.onCompleted: {
+        EventSystem.init(Qt.resolvedUrl("EventListModel.qml"))
+        if (simulator.active)
+            timer.start()
+    }
+}

ui/imports/DesignViewer/designer/plugin.metainfo

+MetaInfo {
+    Type {
+        name: "DesignViewer.EventListSimulator"
+        icon: ":/qtquickplugin/images/item-icon16.png"
+
+        Hints {
+            visibleInNavigator: true
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+            canBeDroppedInView3D: false
+        }
+    }
+}

ui/imports/DesignViewer/qmldir

+Module DesignViewer
+singleton Constants 1.0 Constants.qml
+EventListSimulator 1.0 EventListSimulator.qml
+EventListModel 1.0 EventListModel.qml
+DirectoryFontLoader 1.0 DirectoryFontLoader.qml
+

ui/insight

+### This file is automatically generated by Qt Design Studio.
+### Do not change
+
+if (EXISTS ${CMAKE_CURRENT_SOURCE_DIR}/qtinsight.conf)
+    if (QT_VERSION GREATER_EQUAL 6.5.0)
+        find_package(Qt6 REQUIRED COMPONENTS InsightTracker)
+
+        qt_add_resources(${CMAKE_PROJECT_NAME} "configuration"
+            PREFIX "/"
+            FILES
+            qtinsight.conf
+        )
+        target_link_libraries(${CMAKE_PROJECT_NAME} PRIVATE
+            Qt6::InsightTracker
+        )
+    else()
+        message(WARNING "You need Qt 6.5.0 or newer to build the application.")
+    endif()
+endif()

resources/main.qml → ui/main.qml

-
-/*
-This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
-It is supposed to be strictly declarative and only uses a subset of QML. If you edit
-this file manually, you might introduce QML code that is not supported by Qt Design Studio.
-Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
-*/
-import QtQuick 6.4
-import QtQuick.Controls 6.4
-import QtQuick.Controls.Material
-import QtQuick.Layouts
-import QtQuick.Window 2.2
-
-Rectangle {
-    id: root
-    width: 400
-    height: 800
-    color: "#EAEAEA"
-
-    Material.theme: Material.Light
-    Material.accent: Material.Blue
-    Material.primary: Material.Blue
-
-    ColumnLayout {
-        id: bar
-        y: 50
-        anchors.bottom: column.top
-        anchors.bottomMargin: 24
-        anchors.horizontalCenter: parent.horizontalCenter
-        ProgressBar {
-            id: progressBar
-            Layout.minimumWidth: 380
-            to: 100
-            value: backend.downloadProgress
-        }
-    }
-
-    ColumnLayout {
-        id: column
-        height: 113
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
-        anchors.rightMargin: 22
-        anchors.leftMargin: 22
-        TextField {
-            id: urlTextField
-            horizontalAlignment: Text.AlignHCenter
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            Layout.fillWidth: true
-            placeholderText: qsTr("Enter URL")
-        }
-
-        Button {
-            id: downloadButton
-            text: qsTr("Download and Run")
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            onClicked: backend.downloadAndRun(urlTextField.text)
-        }
-    }
-
-    Item {
-        id: header
-        width: 351
-        height: gridLayout.height
-        anchors.top: parent.top
-        anchors.topMargin: 12
-        anchors.horizontalCenter: parent.horizontalCenter
-
-        GridLayout {
-            id: gridLayout
-            anchors.horizontalCenter: parent.horizontalCenter
-            rows: root.height > 420 ? 2 : 1
-            columns: root.height > 420 ? 1 : 2
-
-            Image {
-                id: qdsicon
-                x: 47
-                y: -23
-                width: 204
-                height: 202
-                source: "dvicon.png"
-                fillMode: Image.PreserveAspectFit
-            }
-
-            ColumnLayout {
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                Label {
-                    id: label
-                    text: qsTr("Android Design Viewer")
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                }
-
-                Label {
-                    id: label1
-                    text: qsTr("Technology Preview")
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                }
-
-                Label {
-                    id: label2
-                    text: backend.buildInfo
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                    horizontalAlignment: "AlignHCenter"
-                }
-            }
-        }
-    }
-
-    Rectangle {
-        id: log
-        visible: root.height > 620
-        color: "#EAEAEA"
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: header.bottom
-        anchors.bottom: bar.top
-        anchors.topMargin: 15
-        anchors.bottomMargin: 24
-        anchors.leftMargin: 22
-
-        ScrollView {
-            id: scrollArea
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            topPadding: 13.1
-            clip: false
-            anchors.topMargin: 9
-            anchors.rightMargin: 2
-
-            Item {
-                width: scrollArea.width
-                height: logTextArea.height
-                TextArea {
-                    y: 20
-                    id: logTextArea
-                    text: backend.logs
-                    rightInset: 20
-                    width: scrollArea.width
-                    readOnly: true
-                    anchors.topMargin: 5
-                    placeholderText: qsTr("Application Logs")
-                }
-            }
-        }
-    }
-}
+
+/*
+This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
+It is supposed to be strictly declarative and only uses a subset of QML. If you edit
+this file manually, you might introduce QML code that is not supported by Qt Design Studio.
+Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
+*/
+import QtQuick 6.4
+import QtQuick.Controls 6.4
+import QtQuick.Controls.Material
+import QtQuick.Layouts
+import QtQuick.Window 2.2
+
+Rectangle {
+    id: root
+    width: 400
+    height: 800
+    color: "#EAEAEA"
+
+    Material.theme: Material.Light
+    Material.accent: Material.Blue
+    Material.primary: Material.Blue
+
+    ColumnLayout {
+        id: bar
+        y: 50
+        anchors.bottom: column.top
+        anchors.bottomMargin: 24
+        anchors.horizontalCenter: parent.horizontalCenter
+        ProgressBar {
+            id: progressBar
+            Layout.minimumWidth: 380
+            to: 100
+            value: backend.downloadProgress
+        }
+    }
+
+    ColumnLayout {
+        id: column
+        height: 113
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        anchors.rightMargin: 22
+        anchors.leftMargin: 22
+        TextField {
+            id: urlTextField
+            horizontalAlignment: Text.AlignHCenter
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.fillWidth: true
+            placeholderText: qsTr("Enter URL")
+        }
+
+        Button {
+            id: downloadButton
+            text: qsTr("Download and Run")
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            onClicked: backend.downloadAndRun(urlTextField.text)
+        }
+    }
+
+    Item {
+        id: header
+        width: 351
+        height: gridLayout.height
+        anchors.top: parent.top
+        anchors.topMargin: 12
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        GridLayout {
+            id: gridLayout
+            anchors.horizontalCenter: parent.horizontalCenter
+            rows: root.height > 420 ? 2 : 1
+            columns: root.height > 420 ? 1 : 2
+
+            Image {
+                id: qdsicon
+                x: 47
+                y: -23
+                width: 204
+                height: 202
+                source: "content/images/dvicon.png"
+                fillMode: Image.PreserveAspectFit
+            }
+
+            ColumnLayout {
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+                Label {
+                    id: label
+                    text: qsTr("Android Design Viewer")
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                }
+
+                Label {
+                    id: label1
+                    text: qsTr("Technology Preview")
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                }
+
+                Label {
+                    id: label2
+                    text: backend.buildInfo
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                    horizontalAlignment: "AlignHCenter"
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: log
+        visible: root.height > 620
+        color: "#EAEAEA"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: header.bottom
+        anchors.bottom: bar.top
+        anchors.topMargin: 15
+        anchors.bottomMargin: 24
+        anchors.leftMargin: 22
+
+        ScrollView {
+            id: scrollArea
+            anchors.fill: parent
+            topPadding: 13.1
+            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+            TextArea {
+                clip: false
+                id: logTextArea
+                wrapMode: TextEdit.Wrap
+                anchors.fill: parent
+                text: backend.logs
+                rightInset: 20
+                readOnly: true
+                anchors.topMargin: 5
+                placeholderText: qsTr("Application Logs")
+            }
+        }
+    }
+}

ui/qmlcomponents

+### This file is automatically generated by Qt Design Studio.
+### Do not change
+
+message("Building designer components.")
+
+set(QT_QML_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/qml")
+
+include(FetchContent)
+FetchContent_Declare(
+    ds
+    GIT_TAG qds-4.1
+    GIT_REPOSITORY https://code.qt.io/qt-labs/qtquickdesigner-components.git
+)
+
+FetchContent_GetProperties(ds)
+FetchContent_Populate(ds)
+
+target_link_libraries(${CMAKE_PROJECT_NAME} PRIVATE
+    QuickStudioComponentsplugin
+    QuickStudioEffectsplugin
+    QuickStudioApplicationplugin
+    FlowViewplugin
+    QuickStudioLogicHelperplugin
+    QuickStudioMultiTextplugin
+    QuickStudioEventSimulatorplugin
+    QuickStudioEventSystemplugin
+)
+
+add_subdirectory(${ds_SOURCE_DIR} ${ds_BINARY_DIR})
+
+target_compile_definitions(${CMAKE_PROJECT_NAME} PRIVATE
+  BULD_QDS_COMPONENTS=true
+)