Skin Colour Scheme Architecture

Overview

Creating a new skin from scratch is a lot of work and involves editing a lot of images, it's not really very practical to do it just to create a different coloured version of a skin. You can easily create different coloured version of a skin by making use of the color filtering architecture in Mixxx.

Tips and Tool

For a "walkthrough" on creating schemes, see Skin Color Schemes Tips and Tool. It also contains a link to an online Javascript tool that will help determine correct HSVTweak values.

Color Scheme Demo

Mixxx comes pre-loaded with several skins, some of which support color schemes.

How to change a skin and the skins color scheme in Mixxx:

Go to Preferences -> Interface
Select one of the skins like in the picture below
Select a scheme from the drop down menu and click OK

If you select a skin that does not support color schemes, the Scheme drop-down menu is grayed out.

Default Color Scheme (Classic) for Shade skin (Depicted here for Mixxx 2.3)

Alternative Color Scheme (Dark) for Shade skin (Depicted here for Mixxx 2.3)

===== Technical Stuff =====

There are two techniques of colour changing implemented. A color filtering, for changing pixmaps and a color schema style sheet.

The color filtering architecture is implemented as a chain of plugins which are queried by the user interface code as the skin is initialised. The filter chain is configured by a series of elements in the skin's skin.xml file.

So the core of the structure is laid out in imgsource.h. Most filters will be implemented as an ImgColorProcessor. Some examples are in imgcolor.cpp. To implement a new ImgColorProcessor you need to create a new class which implements the function doColorCorrection and performs some color mapping. The hooks for using the filters in a skin.xml file are in mixxxview.cpp.

The capability is also there to implement non-colour based filters by extending ImgProcessor directly, although it's important to note that the filter is applied to individual pixmaps as they're loaded, not to the skin as a whole. So for example a blur filter wouldn't blur the edges of a control outside the rectangle of the pixmap.

Filters

The filters have only been implemented as a quick test so far. At the moment we have (with their arguments):

Invert - Inverts image
HueInv - Sets hue to that of inverse. For example inverse followed by hueinv is equivalent to a hue invariant inverse.
Add - Adds a constant value to all colour components (clipped to 0-255)
Amount - Value to add (int)
ScaleWhite - Scales low saturation (<50) colours by a factor
Amount - Factor to multiply by (float)
HSVTweak - Manipulate the Hue Saturation Value (HSV values), probably the most useful one
HMin - Minimum hue to modify
HMax - Maximum hue to modify
SMin, SMax, VMin, VMax - As above but for saturation and brightness
HFact, SFact, VFact - Factor to scale values by
HConst, SConst, VConst - Constant to add to values

You can experiment in your Image editor to get the "right" values for the filters or try the Color Scheme Designer online.

Scheme Format

To implement schemes in a skin there needs to be a color scheme section added to the skin.xml. See Creating Skins for reference.

General structure of the color scheme section in skin.xml.

syntax	Info
`

Name Scheme #1 Value ... Some more filters ... <Style src="skin:dark.qss"/> ... Some more schemes ... ` | `General color scheme opening tag so Mixxx "know" Opening tag for scheme #1 Naming tag for scheme #1, name will be displayed in Mixxx preferences Opening tag for filters

Filter Value

optional: add even more filters Closing tag for filters Set a stylesheed for the color schema Closing tag for scheme #1 optional: add even more schemes General color scheme closing tag` |

Scheme in-depth

In this section all elements and the values of their keys are explained on the example of Outline`s skin.xml. So open up the skin.xml with your favorite text editor and get started

| | | | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ` 11pm (Dark Mixxx) 50 1.5 -50

<Scheme>
<Name>5pm (Classic Mixxx)</Name>
<Filters/>
</Scheme>

<Scheme>
<Name>8pm (Summer Sunset Mixxx)</Name>
<Filters>
    <HSVTweak>
        <SMin>100</SMin>
        <VFact>0.7</VFact>
        <HFact>0.3</HFact>
    </HSVTweak>
    <HSVTweak>
        <SMax>50</SMax>
        <HFact>0</HFact>
        <HConst>50</HConst>
        <SConst>120</SConst>
        <VConst>-10</VConst>
    </HSVTweak>
</Filters>
</Scheme>

<Scheme>
<Name>3am (Still Awake Mixxx)</Name>
<Filters>
    <Invert/>
    <Add>
        <Amount>50</Amount>
    </Add>
    <ScaleWhite>
        <Amount>1.5</Amount>
    </ScaleWhite>
    <Add>
        <Amount>-50</Amount>
    </Add>
</Filters>
</Scheme>

` | | `General color scheme opening tag so Mixxx "know" the skin supports color schemes Opening tag for default scheme (scheme #1) Scheme Name "11pm (Dark Mixxx)" to be displayed in Mixxx preferences Opening tag for the schemes filters Invert filter, inverts the skins original images (i.e. white to black) Hue Invert Filter, sets hue to that of the inverted images

Look at the "Filters" section for the specific filters and their arguments

Closing tag for the schemes filters Closing tag for default scheme (scheme #1)

Opening tag for scheme #2 Scheme Name "5pm (Classic Mixxx)" to be displayed in Mixxx preferences blank filter,the skins original images too be shown Closing tag for scheme #2

Opening tag for scheme #3) Scheme Name "8pm (Summer Sunset Mixxx" to be displayed in Mixxx preferences Opening tag for the schemes filters

Look at the "Filters" section for the specific filters and their arguments

Closing tag for the schemes filters Closing tag for scheme #3

Opening tag for scheme #4 Scheme Name "3am (Still Awake Mixxx)" to be displayed in Mixxx preferences Opening tag for the schemes filters Invert filter, inverts the skins original images

Look at the "Filters" section for the specific filters and their arguments

Closing tag for the schemes filters Closing tag for scheme #4 General color scheme closing tag ` |

Mixxx This is the Mixxx Wiki - Wiki Home | Website | Manual | News