QML: controllers settings

[acolombier]

Point n click to come in a separate PR

Depends on #14606

Partially fixes #14538

TODO:

• View reset is too slow
• Don't use grid and make design responsive
• Scroll the whole view to improve small device experience

[Swiftb0y]

also couple thoughts, not a fully review though

[acolombier]

No doubt that this will need more polishing to consider it production ready, but I'd like to get this first batch polished and out now!

[JoergAtGithub]

The copyrighted image res/qml/images/controllers/ni_traktor_s4_mk3.png needs to be removed!
And the CI must be Pass of course.

[acolombier]

The copyrighted image res/qml/images/controllers/ni_traktor_s4_mk3.png needs to be removed!

This is licensed under CC. It comes from here. I have only reduced the resolution and truncated the shadow. From what I can see, only issues could be with the attribution clause. Are you okay if I put a LICENSE file under res/qml/images/controllers which provides details for this? THis can then be used to referenced different license used by multiple visual (obviously we would only accept CC-compatible licenses)

Just to compare, adding a visual really lift up the UX IMHO, thus why I really would like to find a solution to bundle visuals.

[JoergAtGithub]

The copyrighted image res/qml/images/controllers/ni_traktor_s4_mk3.png needs to be removed!

This is licensed under CC. It comes from here. I have only reduced the resolution and truncated the shadow. From what I can see, only issues could be with the attribution clause. Are you okay if I put a LICENSE file under res/qml/images/controllers which provides details for this? THis can then be used to referenced different license used by multiple visual (obviously we would only accept CC-compatible licenses)

The picture on wikimedia is obviously a copy of the official product picture from https://www.native-instruments.com/fileadmin/ni_media/dj/Traktor_Kontrol_S5/images/TRAKTOR_KONTROL_S2_MK3_website_comparison_chart_S4.png but it's marked as "own work". Every light and reflection is the same.
Unless we have a written permission from Native Instruments, we must not use it! Maybe Native Instruments has general terms for the use of product picture by dealers etc., that also allows this use?
In any way, our Contributor Aggreement mandates that any contribution "includes complete details of any third-party license or other restriction".

[JoergAtGithub]

It would be legally completely ok, if you take a photo of your own controller in a slightly different setting and upload it instead!

[acolombier]

It would be legally completely ok, if you take a photo of your own controller in a slightly different setting and upload it instead!

Okay, I've done just that. It's not pretty but we could always improve later, with a better picture.

Thank you! I'm sorry, that I had to intervene here, and to block what was the visually much more appealing solution.

[acolombier]

This PR should now be ready and the next one to focus on as part of the QML effort.

[JoergAtGithub]

QML does not start up at all with this PR:

warning [Main] file:///D:/mixxx/res/qml/main.qml:641:5: Type Skin.Settings unavailable
warning [Main] file:///D:/mixxx/res/qml/Settings.qml:281:21: Type Settings.Controller unavailable
warning [Main] file:///D:/mixxx/res/qml/Settings/Controller.qml:4:1: Cannot load library D:\mixxx\build\x64__portable\Qt6\qml\QtQuick\Dialogs\qtquickdialogsplugin.dll: Das angegebene Modul wurde nicht gefunden.
critical [Main] Failed to load QML file "D:/mixxx/res/qml/main.qml"

[acolombier]

Not entirely sure what is wrong. The DLL is there and correctly installed. I assume referenced DLL are missing, but not sure how to find this out

[acolombier]

I believe I might have fixed it, but not entirely sure, could you give it another go please?

[acolombier]

@JoergAtGithub I had to make one more change to get the platform plug-in to copy correctly. Now, the controller screen preview works well. It still need some polish, but this could come in a later stage

[Copilot]

Pull request overview

This PR implements a new QML-based “Controllers” settings page (cards + per-controller settings + optional screen preview) and updates build/packaging to include the Qt Quick Dialogs module required by the new UI.

Changes:

• Add new QML components for controller cards, controller mapping link/info bubble, controller settings delegates, and controller screen previews.
• Update the Controllers settings category to use a responsive, scrollable layout with per-device cards and actions.
• Extend build/packaging (CMake + Debian build deps) to ship Qt Quick Dialogs (and related runtime artifacts).

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
tools/debian_buildenv.sh	Add Debian buildenv dependency for Qt Quick Dialogs module.
packaging/debian/control.in	Add Debian Build-Depends entry for Qt Quick Dialogs module.
CMakeLists.txt	Add Qt Quick Dialogs component + runtime/install handling (incl. vcpkg paths).
res/qml/Settings/InfoBubble.qml	New clickable “info” bubble component.
res/qml/Settings/ControllerSettings.qml	New settings-tree renderer with delegates per setting type (enum/color/bool/number/file).
res/qml/Settings/ControllerScreens.qml	New controller screen preview strip (VideoOutput-based).
res/qml/Settings/ControllerMappingLink.qml	New clickable mapping metadata link presentation.
res/qml/Settings/ControllerCard.qml	New controller card UI, mapping selector, and embedded settings/screens area.
res/qml/Settings/Controller.qml	Replace placeholder Controllers page with full card-based UI + save/reset/cancel actions.
res/qml/Settings.qml	Adjust Settings popup padding.
res/qml/EmbeddedBackground.qml	Tweak embedded background radius/border ordering.
res/qml/ComboBox.qml	Redesign ComboBox visuals + add footer items support in popup.
res/qml/Button.qml	Loosen QML import versions for QtQuick/Controls.
res/qml/ActionPopup.qml	Add Facing enum support (left/right) and adjust arrow/margins accordingly.
res/controllers/DummyDeviceDefaultScreen.qml	Formatting/structure changes + Theme import; update demo screen UI content.
res/controllers/Dummy Device Screen.hid.xml	Add a new integer setting option for the dummy device mapping.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[JoergAtGithub]

This installs now and I can run it again, but it always crashs when I select the "Dummy Device Screen" mapping:

Mixxx is not operational at all after this - not like a normal Javascript error.

[acolombier]

This problem doesn't look specific to QML. I suspect you can reproduce the same problem with your Z2 and the Dummy mapping on main, could you confirm? If not, could you share the logs please?

[JoergAtGithub]

This crashs also with main. I opened #16644 for this.
As this crash is unrelated to this PR, please squash the fixups!

[acolombier]

Done!
Next stop: #15362

[acolombier]

@JoergAtGithub did you merge this PR? Somehow it doesn't seem to show...

[JoergAtGithub]

Yes I did!