The main purpose of the filtering architecture is to allow for creation of different colour schemes for skins. Since creating a new theme 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.
The 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.
The only skin with schemes currently is Outline & derivates (outlineNetbook, outlineClose, outlineMini, outlineSmall). You can test it out by going to the Interface tab of the preferences dialog and changing the scheme to something other than the default.
Default Color Scheme (Dark Mixxx) for Outline skin
You should see the colours of the user interface change, for example as in the scheme shown below.
Alternative Color Scheme (Summer Mixxx) for Outline skin
This is what the Outline skin looks like with no (a blank) scheme applied.
No (a blank) Color Scheme applied (Classic Mixxx) for Outline skin
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 |
|---|---|
<Schemes> <Scheme> <Name>Name Scheme #1</Name> <Filters> <Add> <Amount>Value</Amount> </Add> ... Some more filters ... </Filters> </Scheme> ... Some more schemes ... </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 Closing tag for scheme #1 optional: add even more schemes General color scheme closing tag |
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
<Schemes> <Scheme> <Name>11pm (Dark Mixxx)</Name> <Filters> <Invert/> <HueInv/> <Add> <Amount>50</Amount> </Add> <ScaleWhite> <Amount>1.5</Amount> </ScaleWhite> <Add> <Amount>-50</Amount> </Add> </Filters> </Scheme> <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> </Schemes> | 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 below 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 below 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 below 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 |
|
The filters have only been implemented as a quick test so far. At the moment we have (with their arguments):
You can experiment in your Image editor to get the “right” values for the filters or try the Color Scheme Designer online.