QML Pt. 2: Add demo skin #3907

Holzhaus · 2021-05-25T14:37:48Z

Based on #3891 and #3894. This is just the WIP QML demo skin, no C++ changes.

Swiftb0y

Took a quick look at some of QML code and made some comments about what I consider best practice from my limited research on QML. I haven't had the opportunity to run the demo in practice yet.

Styling is still a topic to be discussed. QtQuick primarily seems to support styling by using visual objects to delegate the drawing to the caller/instatiator. We might want to consider using the same pattern for QML components we ship with mixxx.

Swiftb0y · 2021-05-28T11:02:53Z

res/skins/QMLDemo/Deck.qml

+                        anchors.top: parent.top
+                        anchors.left: parent.left
+                        anchors.bottom: parent.bottom


Suggested change

anchors.top: parent.top

anchors.left: parent.left

anchors.bottom: parent.bottom

anchors.verticalCenter: parent.verticalCenter

anchors.left: parent.left

can you try this out? not sure if it has the same result though...

No, this centers the item, but it won't show up because it has no height. The current code sets the height to that of the parent.

Ok good to know, so the anchor doubles as a responsive layout guide.

Swiftb0y · 2021-05-28T11:04:13Z

res/skins/QMLDemo/Deck.qml

+                        anchors.top: parent.top
+                        anchors.left: parent.left
+                        anchors.bottom: parent.bottom
+                        width: height


Not sure if hardcoding the 1:1 aspect ration here is a good idea, but we can keep it like this for the sake of simplicity I guess. I'd prefer if this was documented in an inline comment though.

FYI I tried to make a separation between skin-local QML and reusable QML that may be reused by multiple skins, similar to controller mappings vs. midi-components. The latter is in the Mixxx QML module (subdirectory).

Wrong comment?
I was primarily talking about that album covers might not be square so we can't assume this in the UI

Ah okay, I misunderstood. We could use an Item/Rectangle instead, and put the image inside of it that keeps the aspect ratio. But let's discuss this later on the qml-coverart PR to avoid merge conflicts. This is just a placeholder.

Swiftb0y · 2021-05-28T11:15:30Z

res/skins/QMLDemo/Deck.qml

+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.11
+
+Item {


This is already quite big, I'd prefer to split everything into its own file if possible. At least Items which are already decoupled. Accessing properties from the deck itself could either be done by making use of QMLs dynamic scoping or by using (alias) properties.

Hmm, I'd rather not make too many changes to not cause too many conflicts with the follow-up QML PRs. This is just a demo skin anyway, so we can refactor later :D It's more important that the reusable components in the Mixxx subdirectory are well-structured.

As long as it is a Demo skin thats fine, but the first QML skin should be well polished and using QML best practices. Otherwise others will copy that mediocre code and we end up with a similar situation as with the mappings.

Yes. I hope that once the demo skin is merged, other people start working on it and improve it, until we end up with a nice, polished skin.

Swiftb0y · 2021-05-28T11:37:47Z

res/skins/QMLDemo/EqKnob.qml

+        background: Image {
+            source: "../LateNight/palemoon/knobs/knob_bg_master.svg"
+            width: 35
+            height: 30
+        }
+
+        foreground: Image {
+            source: "../LateNight/palemoon/knobs/knob_indicator_regular_red.svg"
+            width: 35
+            height: 30
+        }


You could use a Component to keep the code a bit more DRY:

Suggested change

background: Image {

source: "../LateNight/palemoon/knobs/knob_bg_master.svg"

width: 35

height: 30

}

foreground: Image {

source: "../LateNight/palemoon/knobs/knob_indicator_regular_red.svg"

width: 35

height: 30

}

knobImage: Component {

property alias source: image.source

Image: {

id: image

width: 35

height: 30

}

}

background: knobImage {

source: "../LateNight/palemoon/knobs/knob_bg_master.svg"

}

foreground: knobImage {

source: "../LateNight/palemoon/knobs/knob_indicator_regular_red.svg"

}

Its overkill in this case, but a handy technique to create components inline if they don't deserve their own file.

Good point, thanks. Does this work in all QtQuick versions? I have Qt 5.15 and don't know if the current version even works on Qt 5.12.

I'm pretty pretty sure it does work on all versions.
Making the alias properties required would make sense as well, but I'm not sure if that has implications for the Qt version.

Making the alias properties required would make sense as well

Nope, not possible. For normal properties you use one of these:

[default] [required] [readonly] property <propertyType> <propertyName> [default] property <propertyType> <propertyName> : <value>

But for alias properties the signature is:

[default] property alias <name>: <alias reference>

So you can't make them required.

https://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html#property-aliases

Ok, good to know, so I guess alias properties would get required automatically when they refer to a required resource?

I guess so.

Holzhaus · 2021-05-28T16:37:40Z

I also added a pure-QML implementation of spinnies. Ready now.

Holzhaus · 2021-05-28T17:20:49Z

I rebased on latest main. Ready to test and review. I do not intend to do further changes to this PR unless you find issues.

I'm running Qt 5.15, so it's possible that some QtQuick components are not present in Qt 5.12. Maybe someone can check that.

Holzhaus · 2021-05-28T17:33:28Z

OK, apparently I mustn't use any QML modules with a version greater than 2.12 (for Qt 5.12). I'll check if and where I do that.

Swiftb0y · 2021-05-28T17:39:11Z

OK, apparently I mustn't use any QML modules with a version greater than 2.12 (for Qt 5.12). I'll check if and where I do that.

Afaik QML Modules follow the Qt version unless they have not been changed. If they haven't been changed they stay on the version they last have been changed in. In general, we can only use QML modules with a version lower or equal than the minimum Qt version we support.

uklotzde

@Swiftb0y Please merge when you think this is ready.

Holzhaus · 2021-05-29T00:01:03Z

I downgraded all module versions to the Qt 5.12 versions.

Swiftb0y · 2021-05-29T09:43:08Z

I'm building the branch right now to try it out. I'll merge if I don't notice any issues during testing.

Swiftb0y

otherwise LGTM

Swiftb0y · 2021-05-29T10:15:56Z

res/skins/QMLDemo/Mixxx/Controls/Spinny.qml

+
+        group: root.group
+        key: "playposition"
+        onValueChanged: root.update()


I'm a little bit worried how often this will get called. it would be ideal if it was just once per frame but can we guarantee that?

I'll check if we can improve it by using a declarative binding that defines a relationship. I guess QML is then smart enough to figure it out itself.

Swiftb0y

Thank you for your patience

Holzhaus added the skins label May 25, 2021

github-actions bot added build code quality ui labels May 25, 2021

Holzhaus force-pushed the qmldemo branch from 7a3382b to b7bc0bf Compare May 25, 2021 15:14

Holzhaus mentioned this pull request May 25, 2021

QML Pt. 3: Add support for retrieving deck track properties #3911

Merged

Holzhaus changed the title ~~QML: Add demo skin~~ QML Pt. 2: Add demo skin May 25, 2021

Holzhaus force-pushed the qmldemo branch 10 times, most recently from e285327 to 1e744e6 Compare May 27, 2021 23:34

Holzhaus mentioned this pull request May 28, 2021

QML Pt. 1: Add initial support for loading QML skins #3894

Merged

Swiftb0y reviewed May 28, 2021

View reviewed changes

Holzhaus force-pushed the qmldemo branch 2 times, most recently from a66efd6 to 059998f Compare May 28, 2021 16:30

Holzhaus added 8 commits May 28, 2021 19:11

QML: Add some standard Mixxx components

f8ca4ab

skins/QMLDemo: Add initial demo skin

a622f2d

QML: Add initial support for knob arcs

c11ef59

QML: Add support for slider bars

6589d42

skins/QMLDemo: Add knob arcs

f02bdc2

skins/QMLDemo: Add slider bars to example skin

7410bc7

QML: Add barStart property to Mixxx.Controls.Slider

2a3fcb7

skins/QMLDemo: Reorganize demo skin add rate sliders/passthrough switch

22df478

Holzhaus added 2 commits May 28, 2021 19:11

QML: Add Spinny QML Component

d5906fc

skins/QMLDemo: Add spinny to decks

2afa175

Holzhaus force-pushed the qmldemo branch from 059998f to 2afa175 Compare May 28, 2021 17:15

Holzhaus added 2 commits May 28, 2021 20:50

QML: Downgrade all QML modules from x.15 to x.12 for Qt 5.12 support

affb351

skin/QMLDemo: Remove unnecessary layer settings

3d04146

Holzhaus mentioned this pull request May 28, 2021

QML: Enable multisampling #3920

Merged

uklotzde approved these changes May 28, 2021

View reviewed changes

Swiftb0y reviewed May 29, 2021

View reviewed changes

Holzhaus added 2 commits May 29, 2021 13:53

QML: Use declarative bindings for updating the Spinny rotation angle

b90e5e3

QML: Avoid binding loop on Slider control

b6767d3

Holzhaus force-pushed the qmldemo branch from 83b90d0 to b6767d3 Compare May 29, 2021 11:55

Holzhaus requested a review from Swiftb0y May 29, 2021 12:22

Swiftb0y approved these changes May 29, 2021

View reviewed changes

Swiftb0y merged commit 4edb4a1 into mixxxdj:main May 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

QML Pt. 2: Add demo skin #3907

QML Pt. 2: Add demo skin #3907

Holzhaus commented May 25, 2021

Swiftb0y left a comment •

edited

Loading

Swiftb0y May 28, 2021

Holzhaus May 28, 2021

Swiftb0y May 28, 2021

Swiftb0y May 28, 2021

Holzhaus May 28, 2021

Swiftb0y May 28, 2021

Holzhaus May 28, 2021

Swiftb0y May 28, 2021

Holzhaus May 28, 2021

Swiftb0y May 28, 2021

Holzhaus May 28, 2021

Swiftb0y May 28, 2021

Holzhaus May 28, 2021

Swiftb0y May 28, 2021

Holzhaus May 29, 2021 •

edited

Loading

Swiftb0y May 29, 2021

Holzhaus May 29, 2021

Holzhaus commented May 28, 2021

Holzhaus commented May 28, 2021

Holzhaus commented May 28, 2021

Swiftb0y commented May 28, 2021

uklotzde left a comment

Holzhaus commented May 29, 2021

Swiftb0y commented May 29, 2021

Swiftb0y left a comment

Swiftb0y May 29, 2021

Holzhaus May 29, 2021

Holzhaus May 29, 2021

Swiftb0y left a comment

QML Pt. 2: Add demo skin #3907

QML Pt. 2: Add demo skin #3907

Conversation

Holzhaus commented May 25, 2021

Swiftb0y left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Holzhaus May 29, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Holzhaus commented May 28, 2021

Holzhaus commented May 28, 2021

Holzhaus commented May 28, 2021

Swiftb0y commented May 28, 2021

uklotzde left a comment

Choose a reason for hiding this comment

Holzhaus commented May 29, 2021

Swiftb0y commented May 29, 2021

Swiftb0y left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Swiftb0y left a comment

Choose a reason for hiding this comment

Swiftb0y left a comment •

edited

Loading

Holzhaus May 29, 2021 •

edited

Loading