Skip to content

Skinning Engine

Daniel Lindenfelser edited this page Jan 21, 2011 · 45 revisions

Skinning Engine

Summary and Rationale

Status: This specification is in drafting. Please feel free to add comments.

Mixxx has used the same old skinning engine for a long time now. Although the current skinning engine is usable, it is not very flexible.

Current System

See description of XML format here: Creating Skins

Supported Widgets

  • Push-buttons
  • Multi-state push buttons
  • Sliders
  • horizontal or vertical
  • Text labels
  • hardcoded to duration, track title, bpm, rate, etc
  • Knobs
  • Waveform overview
  • Waveform display
  • VU meter
  • Embed library widget
  • Status light

Requirements

Metadata/Manifest

  • Include the following metadata:
  • author
  • title
  • description
  • language
  • skin version
  • license
  • update-URL
  • mixxx version required (min/max)
  • suggested screen resolution
  • min screen resolution

Base Widget

  • Nameable
  • Position, Size
  • Potentially offer absolute positioning mode for legacy support, but in general deprecate absolute positioning.
  • Use size-hints (max-min size) instead of single size.
  • Tooltip
  • Connections
  • EmitOnDownPress and EmitOnRelease properties (to obviate need for double-connections)
  • Choose mouse button.
  • Tab ordering?
  • Support hovering MIDI-assign. Can we do this with some QSS :hover attribute?

Widget Layout

  • Widget Grouping
  • Nameable
  • Have a size hint and optionally an absolute position.
  • Provide a hide/show-control. Uses the group's name.
  • Layouts
  • Allow a widget group to have a layout assigned to it.
  • Windows
  • Windows are the root of each hierarchy of widgets
  • Widget Templates
  • Ability to specify some template for a widget for saving time, sanity.
  • Seems a lot like CSS. Can we use QSS to get the same effect?

Widgets

  • Buttons
  • Allow multi-state button or push-button.
  • Support pixmaps for each button position
  • Allow non-pixmap buttons. Use QSS to styling.
  • Slider
  • Allow vertical or horizontal orientation
  • Separate image for slider and knob
  • Allow non-pixmap sliders. Use QSS for styling.
  • Drop-down Chooser
  • Allow styling via QSS.
  • No pixmap option, as it's text-only.
  • Requires Control 2.0, since if you connect it to a text control it must know what values it may take on.
  • Knobs
  • Single knob image that is rotated plus background image.
  • Allow specification of 'translation' function (i.e. log-potmeter or potmeter)
  • Allow non-pixmap knobs. Use QSS for styling.
  • Library Widget
  • Still a monolithic widget. Don't think it adds value to allow much customization here.
  • Use QSS for all appearance styling.
  • Waveform Widget
  • Still monolithic, but configurable as in current system.
  • Waveform Overview
  • Needs overhaul to be as configurable as the waveform widget.
  • Text labels
  • Make use of Controls to display text instead of hard-coding text. (Depends on Control 2.0)
  • Potentially allow scripts to dynamically affect what is shown.
  • Allow Marquee effect so you can read text that goes out of the control.
  • VU Meter
  • Allow QSS styling (how???) or pixmaps.
  • Status light
  • Connects to a control and dynamically switches its pixmap or QSS property based on the control's value
  • Sampler Widget
  • Requirements unknown.
  • Effects Widget
  • Requirements unknown.
  • Potentially with a much better control system we can support neat things, e.g. A Traktor like dynamic effect control.

Skinning Engine Proposals

Given the above requirements, list various proposals for skin formats here:

How QT Quick and QML might be used in QT 4.7.x

It might be possible to describe a Mixxx skin by using pure QML. According to http://doc.qt.nokia.com/4.7-snapshot/qml-extending-tutorial-index.html QML can be extended to match our own language concepts. In other words, we may extend our existing widget classes in a way they can be accessed by QML,see http://doc.qt.nokia.com/4.7-snapshot/declarative-tutorials-extending-chapter1-basics.html for a simple example.

Tobias Rafreider has created a branch for that purpose.

More information about Qt Quick and QML may be found on http://doc.qt.nokia.com/4.7-snapshot/declarativeui.html

I found a nice example of QML usage for a DJ Software: http://www.avid.com/US/products/Torq-2 --- Daniel Lindenfelser 2011/01/21 10:51

Forum discussion

There was a productive discussion that happened in the forums: http://mixxx.org/forums/viewtopic.php?f=1&t=729 Please check the forums for additional information.

Ideas for Skinning Engines

Feel free to add your cons and pros for any of the ideas to this page

The current ideas are:

Qt 4 based Skinning Engine

Qt 4 is the cross-platform framework that is used for many things by Mixxx itself.

For the creation of a skinning system, Qt supports many things: layouts, style sheets, vector graphics, raster/OpenVG/OpenGL rendering, useful low-level painting system, XML, animation framework (since 4.6 or as official add-on), declarative UI technology (since 4.6)...

By combining some of these technologies it should be possible to create an advanced skinning engine for Mixxx.

To investigate

    * But when the visualization is rendered in OpenGL, we'll probably have to render the whole QGV in OpenGL
* QGV will give us a really cool and flexible UI in combination with the Animation/DUI framework
* QGV will give us fast software-based UI rendering, as well as support for rendering the UI through OpenGL and since Qt 4.6 also OpenVG
* Explore if and how style sheets can help
* Style sheets are very useful to skin stuff like scrollbars and other default widgets
* The more important stuff like buttons should probably be skinned by reimplementing paintEvent, because this gives more possibilities
    * Style sheets may be slower than reimplementing paintEvent - although it has to be investigated to be sure
    * More advanced animations (besides simple hover/overroll effects) cannot be created with style sheets only

Pro

  • Support pixmap skins (porting of current skins will be easier this way, and performance will probably be higher than using SVG)
  • Support SVG skins (for those who want, SVG skins should be an option as well
  • Performance may be lower, but we could optionally render SVG as pixmaps to improve performance
  • Possibility to implement a layout system (because interface elements should not stretch)
  • The window itself should be themable/deformable too. Could be achieved by either composite or with a mask (or both)

Ideas that are no longer under consideration

Vector-based Skinning Engine

**Supporting SVG as an image format does not mean we cannot do the Qt4 based skinning engine approach above. We can support a number of formats, including SVG. Making an exclusively vector-based skinning engine is too limiting for skin designers. **

A vector graphics based GUI (like with SVG files) which would allow dynamic resizing and storage efficiency.

Pro

  • Qt supports SVG functionality.

Con

  • Interface elements will stretch - a layout system instead would look much cleaner and would be more usable on most systems.
  • Current skins will have to be abandoned or recreated using SVG
  • Slow. Must implement pre-rendering and caching layer for any hope of this being usable.

Nui3 based Skinning Engine

Libnui is a cross-platform 3D accelerated GUI library. More information is available at http://www.libnui.net/

Pro

Con

  • Will take a lot of work to implement, because at the moment Mixxx is tightly integrated with Qt
  • User will need OpenGL or DirectX support and a suitable GPU if they want a responsive GUI
  • There is a software renderer included, but it is very slow at the moment. Developers are improving it, but it's not a big priority.
Clone this wiki locally