Implement the main window and basic playback controls of viewer

viewer/CMakeLists.txt

@@ -11,11 +11,12 @@ if (NOT CMAKE_BUILD_TYPE)
 endif ()
 
 if (CMAKE_CXX_COMPILER_ID MATCHES "Clang")
-    add_definitions(-Werror -Wall -Wextra -Weffc++ -pedantic -Werror=return-type)
+    add_definitions(-Werror -Wall -Wextra -Weffc++ -pedantic -Werror=return-type -fno-rtti)
 endif ()
 
 if (MSVC)
     add_compile_options("/utf-8")
+    add_compile_options(/GR-)
 endif (MSVC)
 
 # Sets flags
@@ -47,9 +48,10 @@ if (QT_VERSION)
 endif ()
 
 find_package(QT NAMES Qt6 REQUIRED COMPONENTS Core)
-find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core Widgets OpenGL Qml Quick)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core Widgets OpenGL Qml Quick QuickControls2)
 list(APPEND PAG_VIEWER_PLATFORM_LIBS Qt${QT_VERSION_MAJOR}::Core Qt${QT_VERSION_MAJOR}::Widgets
-        Qt${QT_VERSION_MAJOR}::OpenGL Qt${QT_VERSION_MAJOR}::Qml Qt${QT_VERSION_MAJOR}::Quick)
+        Qt${QT_VERSION_MAJOR}::OpenGL Qt${QT_VERSION_MAJOR}::Qml Qt${QT_VERSION_MAJOR}::Quick
+        Qt${QT_VERSION_MAJOR}::QuickControls2)
 qt_add_resources(QT_RESOURCES res.qrc)
 
 if (APPLE)

viewer/qml/ControlForm.qml

@@ -0,0 +1,290 @@
+import QtQuick
+import QtQuick.Controls
+import "components"
+
+Item {
+    id: form
+    required property var pagView
+    property bool hasPAGFile: (pagView && pagView.filePath !== "")
+
+    property bool hasNewVersion: false
+
+    property bool lastPlayStatusIsPlaying: false
+
+    property int sliderHeight: 12
+
+    property int controlFormHeight: 76
+
+    property alias progressSlider: progressSlider
+
+    property alias updateButton: updateButton
+
+    property alias panelsButton: panelsButton
+
+    property alias backgroundButton: backgroundButton
+
+    property alias timeDisplayedText: timeDisplayedText
+
+    property alias currentFrameText: currentFrameText
+
+    property alias totalFrameText: totalFrameText
+
+    PAGRectangle {
+        height: controlFormHeight
+        color: "#20202A"
+        anchors.fill: parent
+        radius: 5
+        leftTopRadius: false
+        rightTopRadius: false
+        rightBottomRadius: !panelsButton.checked
+    }
+    Slider {
+        id: progressSlider
+        height: sliderHeight
+        z: 1
+        padding: 0
+        anchors.top: parent.top
+        anchors.topMargin: -4
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        enabled: hasPAGFile
+        background: Rectangle {
+            x: progressSlider.leftPadding
+            y: progressSlider.topPadding + progressSlider.availableHeight / 2 - height / 2
+            implicitWidth: 200
+            implicitHeight: 4
+            width: progressSlider.availableWidth
+            height: implicitHeight
+            radius: 0
+            color: "#7D7D7D"
+
+            Rectangle {
+                width: progressSlider.visualPosition * parent.width
+                height: parent.height
+                color: "#448EF9"
+                radius: 0
+            }
+        }
+        handle: Rectangle {
+            x: progressSlider.leftPadding + progressSlider.visualPosition * (progressSlider.availableWidth - width)
+            y: progressSlider.topPadding + progressSlider.availableHeight / 2 - height / 2
+            implicitWidth: 12
+            implicitHeight: 12
+            radius: 12
+            color: progressSlider.pressed ? "#f0f0f0" : "#f6f6f6"
+            border.color: "#bdbebf"
+        }
+    }
+    Row {
+        z: 1
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        Row {
+            id: leftControls
+            spacing: 8
+            width: implicitWidth
+
+            /* Space Holder */
+            Item {
+                width: 10
+                height: 1
+            }
+            Button {
+                id: playButton
+                width: 48
+                height: 48
+                visible: true
+                enabled: hasPAGFile
+                focusPolicy: Qt.NoFocus
+                flat: true
+                display: AbstractButton.IconOnly
+                opacity: pressed ? 1 : hovered ? 0.9 : 0.8
+                background: Image {
+                    source: ((pagView && pagView.isPlaying) || form.lastPlayStatusIsPlaying) ? "qrc:/images/pause.png" : "qrc:/images/play.png"
+                }
+                onClicked: {
+                    pagView.isPlaying = !pagView.isPlaying;
+                }
+            }
+            Button {
+                id: previousButton
+                width: 24
+                height: 20
+                enabled: hasPAGFile
+                focusPolicy: Qt.NoFocus
+                display: AbstractButton.IconOnly
+                flat: true
+                anchors.verticalCenter: parent.verticalCenter
+                opacity: pressed ? 1 : hovered ? 0.9 : 0.8
+                background: Image {
+                    source: "qrc:/images/previous.png"
+                }
+                onPressAndHold: {
+                    pagView.previousFrame();
+                    longPressPreTimer.start();
+                }
+                onReleased: {
+                    longPressPreTimer.stop();
+                }
+                onClicked: {
+                    pagView.previousFrame();
+                }
+
+                Timer {
+                    id: longPressPreTimer
+                    interval: 60
+                    repeat: true
+                    running: false
+                    onTriggered: {
+                        pagView.previousFrame();
+                    }
+                }
+            }
+            Button {
+                id: nextButton
+                width: 24
+                height: 20
+                enabled: hasPAGFile
+                focusPolicy: Qt.NoFocus
+                display: AbstractButton.IconOnly
+                flat: true
+                anchors.verticalCenter: parent.verticalCenter
+                opacity: pressed ? 1 : hovered ? 0.9 : 0.8
+                background: Image {
+                    source: "qrc:/images/next.png"
+                }
+                onPressAndHold: {
+                    pagView.nextFrame();
+                    longPressNextTimer.start();
+                }
+                onReleased: {
+                    longPressNextTimer.stop();
+                }
+                onClicked: {
+                    pagView.nextFrame();
+                }
+
+                Timer {
+                    id: longPressNextTimer
+                    interval: 60
+                    repeat: true
+                    running: false
+                    onTriggered: {
+                        pagView.nextFrame();
+                    }
+                }
+            }
+            Text {
+                id: timeDisplayedText
+                color: "#ffffff"
+                text: qsTr("00:00")
+                font.pixelSize: 12
+                anchors.verticalCenterOffset: 1
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            Row {
+                spacing: 2
+                anchors.verticalCenterOffset: 1
+                anchors.verticalCenter: parent.verticalCenter
+
+                Text {
+                    id: currentFrameText
+                    color: "#ffffff"
+                    text: qsTr("0")
+                    font.pixelSize: 12
+                }
+                Text {
+                    id: frameSeparator
+                    color: "#EEEEEE"
+                    text: qsTr("/")
+                    font.pixelSize: 12
+                }
+                Text {
+                    id: totalFrameText
+                    color: "#ffffff"
+                    text: qsTr("0")
+                    font.pixelSize: 12
+                }
+            }
+        }
+        /* Space Holder */
+        Item {
+            id: centerSpace
+            width: parent.width - leftControls.width - rightControls.width
+            height: parent.height
+        }
+        Row {
+            id: rightControls
+            spacing: 2
+
+            CheckBox {
+                id: updateButton
+                width: 44
+                height: 44
+                enabled: hasNewVersion
+                visible: hasNewVersion
+                focusPolicy: Qt.NoFocus
+                opacity: mouseArea.pressed ? 0.5 : 1.0
+                indicator: Image {
+                    width: 44
+                    height: 44
+                    source: "qrc:/images/update-red.png"
+                }
+
+                MouseArea {
+                    id: mouseArea
+                    property bool entered: false
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onEntered: {
+                        entered = true;
+                    }
+                    onExited: {
+                        entered = false;
+                    }
+
+                    ToolTip {
+                        visible: parent.entered
+                        text: qsTr("Discover a new version, click to update")
+                    }
+                }
+            }
+            CheckBox {
+                id: backgroundButton
+                width: 44
+                height: 44
+                enabled: hasPAGFile
+                focusPolicy: Qt.NoFocus
+                anchors.verticalCenterOffset: 0
+                anchors.verticalCenter: parent.verticalCenter
+                indicator: Image {
+                    width: 44
+                    height: 44
+                    source: backgroundButton.checked ? "qrc:/images/background-on.png" : "qrc:/images/background-off.png"
+                }
+            }
+            CheckBox {
+                id: panelsButton
+                width: 44
+                height: 44
+                enabled: hasPAGFile
+                focusPolicy: Qt.NoFocus
+                indicator: Image {
+                    width: 44
+                    height: 44
+                    source: panelsButton.checked ? "qrc:/images/panels-on.png" : "qrc:/images/panels-off.png"
+                }
+            }
+
+            /* Space Holder */
+            Item {
+                width: 18
+                height: 1
+            }
+        }
+    }
+}