diff --git a/examples/SimpleViewer/ControlPanel.qml b/examples/SimpleViewer/ControlPanel.qml index 79eed11..6a1ca40 100644 --- a/examples/SimpleViewer/ControlPanel.qml +++ b/examples/SimpleViewer/ControlPanel.qml @@ -1,81 +1,24 @@ // SPDX-FileCopyrightText: 2023 Jonas Kalinka // SPDX-FileCopyrightText: 2023 basysKom GmbH - +// // SPDX-License-Identifier: LGPL-3.0-or-later + import QtQuick 2.15 -import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 -Rectangle { - id: root +GroupBox { + id: container - signal clicked(var modelData) + property alias model: buttonList.model + property alias delegate: buttonList.delegate - property alias model: buttonRepeater.model - property alias delegate: buttonRepeater.delegate - property alias title: title.text - property int highlightedIndex: -1 + implicitWidth: 200 - clip: true - color: "white" + ListView { + id: buttonList - ColumnLayout { anchors.fill: parent - anchors.margins: 2 - - Text { - id: title - text: "Title" - color: "black" - } - - ScrollView { - id: scrollView - Layout.fillHeight: true - Layout.fillWidth: true - clip: true - background: Rectangle { - color: "white" - } - - Column { - id: buttonColumn - anchors.fill: parent - spacing: 1 - - Repeater { - id: buttonRepeater - - delegate: Button { - id: buttonDelegate - flat: true - padding: 2 - - checkable: true - checked: highlightedIndex === index - - text: { - let result = "" - - if (modelData.id !== undefined) { - result = "ID: " + modelData.id + " " - } - - if (modelData.name) { - result += "Name: " + modelData.name - } else { - result = modelData - } - - return result - } - onClicked: { - root.clicked(modelData) - } - } - } - } - } + clip: true } } diff --git a/examples/SimpleViewer/RiveInspectorView.qml b/examples/SimpleViewer/RiveInspectorView.qml index af611d1..261a126 100644 --- a/examples/SimpleViewer/RiveInspectorView.qml +++ b/examples/SimpleViewer/RiveInspectorView.qml @@ -1,7 +1,8 @@ // SPDX-FileCopyrightText: 2023 Jonas Kalinka // SPDX-FileCopyrightText: 2023 basysKom GmbH - +// // SPDX-License-Identifier: LGPL-3.0-or-later + import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 @@ -9,7 +10,7 @@ import QtQuick.Controls 2.15 import RiveQtQuickPlugin 1.0 Item { - id: root + id: container property alias fileSource: riveItem.fileSource @@ -17,160 +18,144 @@ Item { anchors.fill: parent ControlPanel { - title: "Artboards" + Layout.fillHeight: true + title: "Artboards" model: riveItem.artboards - highlightedIndex: riveItem.currentArtboardIndex visible: model !== undefined ? model.length > 0 : false - onClicked: modelData => { - if (riveItem.currentArtboardIndex === modelData.id) { - riveItem.currentArtboardIndex = -1 - } else { - riveItem.currentArtboardIndex = modelData.id - } - } + delegate: CheckDelegate { + width: ListView.view.width + autoExclusive: true + checked: riveItem.currentArtboardIndex === modelData.id + text: modelData.name - Layout.fillHeight: true - Layout.minimumWidth: 200 - Layout.minimumHeight: 200 + onClicked: riveItem.currentArtboardIndex = modelData.id + } } ControlPanel { - title: "Animations" + Layout.fillHeight: true + title: "Animations" model: riveItem.animations - highlightedIndex: riveItem.currentAnimationIndex visible: model !== undefined ? model.length > 0 : false - onClicked: modelData => { - if (riveItem.currentAnimationIndex === modelData.id) { - riveItem.currentAnimationIndex = -1 - } else { - riveItem.currentAnimationIndex = modelData.id - } - } + delegate: CheckDelegate { + width: ListView.view.width + checked: riveItem.currentAnimationIndex === modelData.id + text: modelData.name - Layout.fillHeight: true - Layout.minimumWidth: 200 - Layout.minimumHeight: 200 + onClicked: riveItem.currentAnimationIndex = riveItem.currentAnimationIndex === modelData.id ? -1 : modelData.id + } } ControlPanel { - title: "State Machines" + Layout.fillHeight: true + title: "State Machines" model: riveItem.stateMachines - highlightedIndex: riveItem.currentStateMachineIndex visible: model !== undefined ? model.length > 0 : false - onClicked: modelData => { - if (riveItem.currentStateMachineIndex === modelData.id) { - riveItem.currentStateMachineIndex = -1 - } else { - riveItem.currentStateMachineIndex = modelData.id - } - } + delegate: CheckDelegate { + width: ListView.view.width + checked: riveItem.currentStateMachineIndex === modelData.id + text: modelData.name - Layout.fillHeight: true - Layout.minimumWidth: 200 - Layout.minimumHeight: 200 + onClicked: riveItem.currentStateMachineIndex = riveItem.currentStateMachineIndex === modelData.id ? -1 : modelData.id + } } ControlPanel { id: dynamicProperties - title: "Properties" + Layout.fillHeight: true + + title: "Properties" model: riveItem.stateMachineInterface.riveInputs visible: riveItem.stateMachineInterface.riveInputs.length > 0 - delegate: Button { - id: buttonDelegate + delegate: ColumnLayout { + width: ListView.view.width - width: dynamicProperties.width + ItemDelegate { + Layout.fillWidth: true - flat: true - padding: 2 - - checkable: false - - text: { - if (modelData.type == RiveStateMachineInput.RiveTrigger) { - return modelData.text + visible: modelData.type != RiveStateMachineInput.RiveBoolean + text: { + if (modelData.type == RiveStateMachineInput.RiveTrigger) { + return modelData.text + } else if (modelData.type == RiveStateMachineInput.RiveNumber) { + return modelData.text + ": " + riveItem.stateMachineInterface.listenTo(modelData.text).value + } else { + return modelData.text + " " + modelData.type + } } - if (modelData.type == RiveStateMachineInput.RiveBoolean - || modelData.type == RiveStateMachineInput.RiveNumber) { - return modelData.text + ": "+riveItem.stateMachineInterface.listenTo(modelData.text).value + onClicked: { + if (modelData.type == RiveStateMachineInput.RiveTrigger) { + riveItem.stateMachineInterface.callTrigger(modelData.text) + } } - return modelData.text + " " + modelData.type } - onClicked: { - if (modelData.type == RiveStateMachineInput.RiveTrigger) { - riveItem.stateMachineInterface.callTrigger(modelData.text) - } - if (modelData.type == RiveStateMachineInput.RiveBoolean) { - riveItem.stateMachineInterface.setRiveProperty(modelData.text, - !riveItem.stateMachineInterface.listenTo(modelData.text).value) - } + SwitchDelegate { + Layout.fillWidth: true + + text: modelData.text + visible: modelData.type == RiveStateMachineInput.RiveBoolean + checked: riveItem.stateMachineInterface.listenTo(modelData.text).value + + onClicked: riveItem.stateMachineInterface.setRiveProperty(modelData.text, + !riveItem.stateMachineInterface.listenTo(modelData.text).value) } Slider { id: slider - visible: modelData.type == RiveStateMachineInput.RiveNumber - - anchors.fill: parent + Layout.fillWidth: true from: 1 value: visible ? riveItem.stateMachineInterface.listenTo(modelData.text).value : 0 to: 100 stepSize: 1 + visible: modelData.type == RiveStateMachineInput.RiveNumber onValueChanged: riveItem.stateMachineInterface.setRiveProperty(modelData.text, value) } } - - Layout.fillHeight: true - Layout.minimumWidth: 200 - Layout.minimumHeight: 200 } Rectangle { - color: "black" - Layout.fillHeight: true Layout.fillWidth: true + Layout.fillHeight: true - Rectangle { - anchors.fill: parent - anchors.margins: 30 - color: "grey" - border.color: "red" + color: "grey" + border.color: "red" - RiveQtQuickItem { - id: riveItem + RiveQtQuickItem { + id: riveItem - anchors.fill: parent - anchors.margins: 1 + anchors.fill: parent + anchors.margins: parent.border.width - currentArtboardIndex: 0 - currentStateMachineIndex: -1 + currentArtboardIndex: 0 + currentStateMachineIndex: -1 - renderQuality: RiveQtQuickItem.Medium - postprocessingMode: RiveQtQuickItem.None - fillMode: RiveQtQuickItem.PreserveAspectFit + renderQuality: RiveQtQuickItem.Medium + postprocessingMode: RiveQtQuickItem.None + fillMode: RiveQtQuickItem.PreserveAspectFit - onStateMachineStringInterfaceChanged: { - dynamicProperties.model = riveItem.stateMachineInterface.riveInputs + Label { + anchors { + top: parent.top + right: parent.right + margins: 5 } + color: "red" + text: riveItem.frameRate + font.pixelSize: 30 + } - Text { - anchors { - top: parent.top - right: parent.right - margins: 5 - } - color: "red" - text: riveItem.frameRate - font.pixelSize: 30 - } + onStateMachineStringInterfaceChanged: { + dynamicProperties.model = riveItem.stateMachineInterface.riveInputs } } } diff --git a/examples/SimpleViewer/main.cpp b/examples/SimpleViewer/main.cpp index 53f5b47..5a32d28 100644 --- a/examples/SimpleViewer/main.cpp +++ b/examples/SimpleViewer/main.cpp @@ -1,17 +1,14 @@ - // SPDX-FileCopyrightText: 2023 Jeremias Bosch // SPDX-FileCopyrightText: 2023 basysKom GmbH // // SPDX-License-Identifier: LGPL-3.0-or-later -#include #include #include #include int main(int argc, char *argv[]) { - QSurfaceFormat f; f.setSamples(4); QSurfaceFormat::setDefaultFormat(f); @@ -30,11 +27,6 @@ int main(int argc, char *argv[]) QQmlApplicationEngine engine; - const auto &pathList = engine.importPathList(); - for (const QString &path : pathList) { - qDebug() << " " << path; - } - const QUrl url(QStringLiteral("qrc:/main.qml")); QObject::connect( &engine, &QQmlApplicationEngine::objectCreated, &app, diff --git a/examples/SimpleViewer/main.qml b/examples/SimpleViewer/main.qml index 6413a57..2739ec1 100644 --- a/examples/SimpleViewer/main.qml +++ b/examples/SimpleViewer/main.qml @@ -1,11 +1,13 @@ // SPDX-FileCopyrightText: 2023 Jeremias Bosch // SPDX-FileCopyrightText: 2023 Jonas Kalinka // SPDX-FileCopyrightText: 2023 basysKom GmbH - +// // SPDX-License-Identifier: LGPL-3.0-or-later + import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 +import Qt.labs.folderlistmodel 2.15 import RiveQtQuickPlugin 1.0 @@ -13,11 +15,10 @@ ApplicationWindow { visible: true width: 1800 height: 1024 - color: "#222222" + color: "#444c4e" + header: TabBar { + id: tabBar - TabBar { - id: bar - width: parent.width TabButton { text: qsTr("Inspector") } @@ -25,130 +26,109 @@ ApplicationWindow { text: qsTr("Discover") } } - - Rectangle { - id: separator - anchors.top: bar.bottom - anchors.left: parent.left - anchors.right: parent.right - - height: 5 - - color: "black" + footer: ToolBar { + Label { + anchors.left: parent.left + anchors.right: parent.right + elide: Label.ElideRight + color: "crimson" + text: qsTr("Could not load rive file:") + riveItem.fileSource + visible: riveItem.loadingStatus === RiveQtQuickItem.Error + } } StackLayout { - anchors.top: separator.bottom - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom + anchors.fill: parent - currentIndex: bar.currentIndex + currentIndex: tabBar.currentIndex - RowLayout { - ScrollView { - id: scrollView + Page { + id: inspectorTab - Layout.fillHeight: true - Layout.minimumWidth: 200 - Layout.minimumHeight: 200 + padding: 5 - hoverEnabled: true + RowLayout { + anchors.fill: parent - padding: 16 + GroupBox { + id: fileListView - clip: true - background: Rectangle { - color: "lightgray" - } + Layout.fillHeight: true + implicitWidth: 200 - Column { - id: buttonColumn + title: "Files" - Layout.fillHeight: true - Layout.fillWidth: true + ListView { + anchors.fill: parent + + clip: true + model: FolderListModel { + folder: "qrc:/rive/" + } + delegate: ItemDelegate { + width: ListView.view.width + text: model.fileName + + onClicked: dropView.fileSource = model.filePath + } + footerPositioning: ListView.OverlayFooter + footer: Button { + width: ListView.view.width + text: "Clear" - spacing: 16 - - Repeater { - id: buttonRepeater - model: ["basyskom.riv", "cannonball-man.riv", "rivebot-transform.riv", "simple-strokes.riv", "pathfinder.riv", "glow-grid.riv", "sith-de-mayo.riv", "electrified-button.riv", "joystick.riv", "naridon-oni-fan-art.riv", "nested-artboards-demo.riv", "travel-icons-pack.riv", "Clear"] - delegate: Button { - text: modelData - onClicked: { - if (modelData === "Clear") - dropView.fileSource = "" - else - dropView.fileSource = ":/rive/" + modelData - } + onClicked: dropView.fileSource = "" } } } - } - - RiveInspectorView { - id: dropView - Layout.fillHeight: true - Layout.fillWidth: true + RiveInspectorView { + id: dropView - Item { - anchors.fill: parent + Layout.fillWidth: true + Layout.fillHeight: true - Text { - visible: !dropView.fileSource - text: "Drop some .riv file" - color: "white" + Label { anchors.centerIn: parent + text: "Drop some .riv file" + visible: !dropView.fileSource } DropArea { id: dropArea + anchors.fill: parent - onEntered: { - drag.accept(Qt.LinkAction) - } - onDropped: { - console.log(drop.urls) - dropView.fileSource = drop.urls[0].toString().slice(7) - } + + onEntered: (drag) => drag.accept(Qt.LinkAction) + onDropped: (drop) => dropView.fileSource = drop.urls[0].toString().slice(8) } } } } - Item { - id: discoverTab - - ColumnLayout { - anchors.fill: parent - RiveQtQuickItem { - id: riveItem - - Layout.fillWidth: true - Layout.fillHeight: true - Layout.minimumHeight: 500 - fileSource: ":/rive/water-bar-demo.riv" + Page { + id: discoverTab - interactive: false + padding: 5 + footer: Slider { + id: slider - currentArtboardIndex: 0 - currentStateMachineIndex: 0 + from: 1 + value: 25 + to: 100 + stepSize: 0.1 + } - stateMachineInterface: RiveStateMachineInput { - property real level: slider.value - } - } + RiveQtQuickItem { + id: riveItem - Slider { - id: slider + anchors.fill: parent - Layout.fillWidth: true - Layout.fillHeight: true - from: 1 - value: 25 - to: 100 - stepSize: 0.1 + fileSource: ":/rive/water-bar-demo.riv" + interactive: false + currentArtboardIndex: 0 + currentStateMachineIndex: 0 + stateMachineInterface: RiveStateMachineInput { + property real level: slider.value } } } diff --git a/examples/hellorive/main.qml b/examples/hellorive/main.qml index be1bfb9..1223eea 100644 --- a/examples/hellorive/main.qml +++ b/examples/hellorive/main.qml @@ -12,152 +12,100 @@ import RiveQtQuickPlugin ApplicationWindow { id: window - property int contentWidth: 600 - property int controlPanelWidth: 250 - - width: contentWidth + controlPanelWidth + width: 800 height: 600 visible: true color: "#444c4e" - title: qsTr("Rive Plugin Demo") - - Item { - id: content - anchors { - top: parent.top - bottom: parent.bottom - left: parent.left - right: controlPanel.left + footer: ToolBar { + Label { + anchors.left: parent.left + anchors.right: parent.right + elide: Label.ElideRight + color: "crimson" + text: qsTr("Could not load rive file:") + riveItem.fileSource + visible: riveItem.loadingStatus === RiveQtQuickItem.Error } + } + + SplitView { + anchors.fill: parent RiveQtQuickItem { id: riveItem - anchors.fill: parent - fillMode: RiveQtQuickItem.PreserveAspectFit + SplitView.fillWidth: true + SplitView.minimumWidth: window.width / 2 + + fillMode: RiveQtQuickItem.PreserveAspectFit // not used by software backend renderQuality: RiveQtQuickItem.Medium postprocessingMode: RiveQtQuickItem.SMAA fileSource: ":/rive/travel-icons-pack.riv" - onArtboardsChanged: console.log("ARTBOARDS", artboards); - } + DropArea { + id: dropArea - Text { - id: errorMessage - anchors.centerIn: parent - width: window.width - horizontalAlignment: Text.AlignHCenter - font.pointSize: 24 - color: "crimson" - text: qsTr("Could not load rive file:\n") + riveItem.fileSource - visible: riveItem.loadingStatus === RiveQtQuickItem.Error - } + anchors.fill: parent - DropArea { - id: dropArea - anchors.fill: parent - onEntered: { - drag.accept(Qt.LinkAction) - } - onDropped: { - riveItem.fileSource = drop.urls[0].toString().slice(7) + onEntered: (drag) => drag.accept(Qt.LinkAction) + onDropped: (drop) => riveItem.fileSource = drop.urls[0].toString().slice(8) } } - } - Rectangle { - id: controlPanel - - anchors { - top: parent.top - bottom: parent.bottom - right: parent.right - } + Pane { + id: controlPanel - width: controlPanelWidth + SplitView.minimumWidth: window.width / 5 - color: "#203133" + ColumnLayout { + anchors.left: parent.left + anchors.right: parent.right - Rectangle { - id: separator - anchors { - top: parent.top - bottom: parent.bottom - left: parent.left - } - width: 2 - color: "black" - opacity: 0.3 - } + Label { + Layout.fillWidth: true - Column { - id: column + text: qsTr("Artboards") + } - anchors { - fill: parent - leftMargin: 16 - rightMargin: 16 - topMargin: 32 - } + ComboBox { + Layout.fillWidth: true - spacing: 8 + model: riveItem.artboards.map(artboard => artboard.name) - Label { - width: parent.width - wrapMode: Label.Wrap - horizontalAlignment: Qt.AlignLeft - text: qsTr("Artboards") - } + onActivated: (index) => riveItem.currentArtboardIndex = index + } - ComboBox { - model: riveItem.artboards.map(artboard => artboard.name) - anchors.left: parent.left - anchors.right: parent.right + Label { + Layout.fillWidth: true - onActivated: (index) => riveItem.currentArtboardIndex = index - } + text: qsTr("Animations") + } - Item { width: 1; height: 32 } + ComboBox { + Layout.fillWidth: true - Label { - width: parent.width - wrapMode: Label.Wrap - horizontalAlignment: Qt.AlignLeft - text: qsTr("Animations") - } + model: riveItem.animations.map(animation => `${animation.name} (${animation.duration} ms)`) - ComboBox { - model: riveItem.animations.map(animation => `${animation.name} (${animation.duration} ms)`) - anchors.left: parent.left - anchors.right: parent.right + onActivated: (index) => riveItem.currentAnimationIndex = index + } - onActivated: (index) => riveItem.currentAnimationIndex = index - } + Label { + Layout.fillWidth: true - Item { width: 1; height: 32 } + text: qsTr("State Machines") + } - Label { - width: parent.width - wrapMode: Label.Wrap - horizontalAlignment: Qt.AlignLeft - text: qsTr("State Machines") - } + ComboBox { + Layout.fillWidth: true - ComboBox { - model: [qsTr('Disabled')].concat(riveItem.stateMachines.map(stateMachine => stateMachine.name)) - anchors.left: parent.left - anchors.right: parent.right + model: [qsTr('Disabled')].concat(riveItem.stateMachines.map(stateMachine => stateMachine.name)) - onActivated: (index) => riveItem.currentStateMachineIndex = index - 1 + onActivated: (index) => riveItem.currentStateMachineIndex = index - 1 + } } - - } - } - } - +