Mixxx GUI Revamp

GSoC 2017 Proposal

Sergey Ukolov mail@zezic.ruGitHub

#00 Why

I'm developing Mixxx skins since 2010. At first it was just like a small game for me, but then I started to take extra time and care for it.

I made a few skins, one of them (called Ghutalyn) has gained high popularity among users, and then I realized that we need stretchable skins and begged the developers to implement capabilities necessary for that feature.

At some point Mixxx got everything necessary for the complete resizeable skin and even more. But I've got a job, so Gudron skin project remained unreleased...

...and now I don't like it much because i made better design. OK.

#01 What


I developed new Nykto skin that combines flat design trends but doesn't lose itself in them by keeping slight skeuomorphism in controls look.


It can be simple too


#02 How

I should improve several skin engine parts to allow those features:

Loop pager

Give it ability to react to external loop operations (size change, on/off) for correct pages switching based on currently active loop size. At the moment this can be done only for from skin controls (e.g. pressing buttons with mouse) and this requires too much hacky XML code.

Provide correct way to shrink/enlarge after window resize to keep active loop button visible.

Reorderable widgets

Allow to reorder widgets inside horizontal and vertical WidgetGroups for easy user-customizable layouts.

Probably by readding widgets with new index in QVboxLayout and QHBoxLayout. I don't know if it possible to change widget index on-the-fly. Also we have big limitations at animating this.

Bind middle mouse button, hotkey or add special "drag" mode.

Reorderable WidgetGroup mode should be enabled only for WindgetGroups with special attribute in XML to keep compatibility with existing skins.

Extra feature is to make widgets drag&drop available.

Vertical labels

Allow to render labels with vertically oriented text.

It's for small horizontal spaces. Sometimes it's better to take horizontal space instead of increasing widget's height.

Binding mouse wheel

Allow to use mouse wheel as source for widget actions.

May be useful to increment or decrement values different from sliders & knobs like in this example with beatjumper.

(Is it possible to use hack based on limiting knob range?)

#03 Markup

Finally I should write much XML code. I'm going to use Jade for processing templates.
I should prepare amount of vector graphics, cleanup and optimize SVG's.

#04 Timeline

Loop pager

April 23 - April 30

Finding out events produced by switching loop size and loop enabled/disabled state. Finding a way to connect to them.

May 1 - May 7

Finding a way to control WidgetStack page switching. Finding a way to detect visible WidgetStack attributes.

May 8 - May 14

Connecting loop lenght/state change events to showing needed WidgetStack (with special attribute) item.

Reorderable widgets

May 15 - May 21

Trying to add widgets in QVBox(HBox)Layout with index. Finding a way to change widget index on-the-fly and if that feature is not available writing example that change order of widgets by removing widget and reinserting it with new index.

May 22 - May 28

Finding a way to bind 3rd mouse button (wheel) or another mouse button with key modifier. Finding a way to detect mouse move direction to determine how widgets should be rearranged.

May 29 - June 4

Making a example which shows reorder functionality. Searching a method to animate reorder process and implement animation if this will not take too much time.

Vertical labels

June 5 - June 14

Reading Qt docs to find out how to render QLabel with text rotated at 90 deg. Testing for possible placement and sizing problems.

June 15 - June 19

Passing attributes from XML to engine for definition of how label text should be oriented. Making examples.

Binding mouse wheel

June 20 - June 26

Finding a way to detect mouse scroll events on widgets.

June 28 - Jule 2

Creating widget that should allow using of mouse scroll for controlling internal parameters or modifying another widget to support this functionality.


Jule 2 - Jule 9

Making necessary skin design changes to support described above functionality. Designing extra features like UI control panel, vinyl mode switchers and thinking about different widget variants.

Jule 10 - Jule 16

Writing elementary widgets (buttons, faders, knobs, labels, switchers)

Jule 17 - Jule 30

Writing structure and styling big widgets (deck, mixer, sampler, effect, top panel, library)

Jule 31 - August 13

Combining big widgets in various layouts.

August 14 - August 20

Final skin testing, writing documentation.

August 21 - August 23 (or 28)

Time for community wishes, final communication with mentors.

#05 Extra comminity wishes

I don't know much about system and C++ programming, but for example I closed memory leak in Emerald window decorator recently (it's C, not C++) and almost successfully tried to adapt Mixxx skin Vu meters stretching behaviour.
Anyway, by setting that low target I hope that I'll have enough time to learn necessary Qt&C++ things and in combination with complex markup and numerous graphic details this will be acceptable for GSoC.