Skin Color Schemes Tips And Tool
Mixxx uses an image processor to perform manipulation on images used in skins. By taking advantage of this, you can create different color schemes with some degree of specificity. But, it is not intuitive and documentation is minimal. Getting a hang of the system takes a while. It took many days, but I figured out a lot and even made a tool to help me make schemes faster.
The processor does
not support transparency (in Mixxx 1.9). Regular skins can be created
using transparent PNGs. This allows for some pretty interesting layered
effects, like this VU meter in one of my skins (at right).
Unfortunately, any partially transparent areas in PNGs that have schemes
applied to them become fully opaque with the applied color. Fully
transparent areas become opaque black. In the example below left,
imagine that the yellow circle with a dot is one of a series of PNG
images with transparency used for rotary knobs on a skin. It looks fine
until it goes through the scheme processor.
To avoid ugly results like
this, you must:
- plan your skin layout carefully
- do not have controls overlap other controls
- place labels and background images where they will not be covered by control edges and corners
- avoid transparent backgrounds in your PNGs
Another thing to remember when designing a skin for scheming is that colors explicitly set in QT* elements will not be affected by the color scheme processor. For example, you can style tool tips and library widget elements using CSS-like declarations such as
<Style>
QToolTip { font: 11px Lucida Grande, Lucida Sans Unicode, Arial, Verdana, sans-serif;
background-color: #191919; color: #CCCCCC; border: 1px solid #CCCCCC; padding: 4px; }
</Style>
The colors declared here will not change with the scheme (as of Mixxx 1.9). For them to change, colors must be declared using <BgColor>, <FgColor>, <BgColorRowEven>, or <BgColorRowUneven>, for applicable elements.
Once you have your non-transparent image files showing up correctly in your skin with your color declarations in appropriate tags, then you can start scheming!
Color manipulation is tricky. But it doesn't need to be. The biggest problem is the math. I use Gimp for all my image design. Gimp sets color values using a scale of 0-100 for Saturation and Value. Mixxx uses 0-255 to represent the same range. This scale difference made it time consuming and took too much brain work to figure out the numbers to use to change the colors to the ones I wanted! I'm a teacher on summer vacation! My brain doesn't do math during summer! Even if I had used Inkscape, I would have to contend with the math since the Hue values in Inkscape are given 0-255 but in Mixxx they are 0-359.
To build a color scheme, you need to tell Mixxx how to change the colors in your images. As of Mixxx 1.9, this is all you can do, but there may be other image manipulation options in the future. For now, you can invert colors (complete HSV value) or just hues, you can add values to colors, or you can add values to each color component (Hue, Saturation, and Value). I was able to design a skin that could have schemes (following the recommendations listed above) and I knew which colors I wanted to use, but I was having difficulty figuring out how to get the colors I wanted (because of the math!), so I made a tool to help me.
My scheme builder tool allows me to input the original color used in my image and the color I want to change it to. Then it spits out the XML code I need to use. You input colors using hex numbers (like in web coding), which is handy since the color codes in the skin.xml file uses those anyway and they are easily accessible in both Gimp and Inkscape (Inkscape uses RGBA, so you would just use the first 6 digits of the color). See below for some examples.
Simple color manipulation and good planning allowed me to get five
interesting variants on my first schemed skin. I started by picking a
set of colors that worked well together using Color Scheme
Designer, knowing that
any hue changes applied equally to all colors would result in color sets
that still worked well. I designed the layout and got it working in
Mixxx. Then I applied the schemes.
After much experimentation, I figured out what I needed to do. It was so simple! All I had to do was add a number to the Hue value that moved it higher or lower on the hue spectrum. But what number to add? I grabbed a screen capture while in Mixxx using ALT-PRTSCRN on my keyboard, pasted it as a new image in Gimp. Then I used the Colors/Hue-Saturation tool to change the hue until I got another version I liked. Then I used the Color Picker tool to select from an area that I knew was "pure" (not blended with another color); the middle of a waveform is pretty safe. Going into the Change Foreground Color dialog showed me what the new value should be. For example, I wanted to change it from a cyan-based scheme to a red-orange theme. The cyan I used in the main theme was Hue=189; I wanted to change it to Hue=4. The difference was -185, so in the skin.xml file, I used:
<Scheme>
<Name>Blood Orange</Name>
<Filters>
<HSVTweak>
<HConst>-185</HConst>
</HSVTweak>
</Filters>
</Scheme>
The <HConst>-185</HConst> tells Mixxx to subtract 189 from the Hue values all the colors used in my images. This worked for me since all the colors used were at lease Hue=189. Be careful when doing this kind of blanket manipulation. There is a bug in version 1.9 that does not allow Hue values higher than 255! Any Hue changes that result in a number higher than 255 or lower than 0 will "wrap around". If you add 102 to cyan (H=189), you should get a nice purple color (H=291), but Mixxx will say, "Hey! That number's too high!" and subtract 255, leaving you with orange (H=36). So when using <HConst> in your schemes, be sure not to have your colors wrap around. My scheme builder tool can help.
By using just <HConst>, I was able to come up with a schemed skin with 5 different color combinations. (Download skin ZIP)
By using various filters in combination, you can accomplish more complex color scheme modifications. The most useful elements for me are turning out to be <?Min> and <?Max>, where ? is H, S, or V. These elements limit application of image manipulations to certain colors based on given Hues, Saturations, or Values or any combination thereof. Some examples should make this more clear.
In
this skin, I want to change the colors of the waveforms. I also want
to change the FX, Repeat, and Headphones buttons to match the waveforms
but not anything else. Fortunately, I made the waveforms and
buttons, both dark and "lit" versions, using the same Hue (2,
almost pure red). I want to change change it to a nice blue. Using Gimp,
I changed a screen capture and color picked the new blue color to find
that it had a Hue of 210. So all I need to do is use <HConst>
function. However, if I use it without any other tags, it changes ALL
the colors and the result is yucky. To only change the red waveform and
buttons, I use the <HMin> and <HMax>. I tell Mixxx to only apply
the <HConst> to Hues between 0 and 4 (in case some pixels changed
from a pure 2 Hue during image editing). I run a second filter in the
same scheme, this time limiting the change to Hues between 53 and 57 for
the second waveform. The code I end up with is: <code> <Scheme>
<Name>The Blues</Name>
<Filters>
<HSVTweak>
<HMin>0</HMin>
<HMax>4</HMax>
<HConst>206</HConst>
</HSVTweak>
<HSVTweak>
<HMin>53</HMin>
<HMax>57</HMax>
<HConst>137</HConst>
</HSVTweak>
</Filters>
</Scheme>
</code> 
It
results in a skin with blue waveforms! Notice that the red Cue button
has not changed. This is because I limited the change to only the reds
used in the waveform and coordinated buttons. The Cue button has a Hue
of 356 so it was ignored. (Remember that the color spectrum wraps
around; 356 is only 4 steps away from pure red because 360 is the same
as 0.) You may notice that the knobs and fader look weird now. That's
because I hadn't finished converting the image files to non-transparent
when I was developing this tutorial. Mixxx is messing them up as
explained above.
Starting with the same original skin, I wanted to change one waveform to blue and the other to a complementary orange. After applying the same kind of transformation, I ended up with a kind of orange that was not deep enough. I needed to increase the Saturation of the color. In Gimp, I had increased the Saturation by 39 but in Mixxx, 39 was not producing the same results! That darn math again. So I made the scheme builder tool. By putting in the original hex color, 9b9336, and the color I wanted to end up with, 9b4100, I found out that I needed to increase the Saturation by 89, according to Mixxx's scale. However, I only wanted to increase it for the waveform color so I used <SMin> and <SMax> to limit it to the Saturation of that particular color, which I knew (from the HSV Equivalent field in my tool) was 166. The code:
<Scheme>
<Name>Web 2.0</Name>
<Filters>
<HSVTweak>
<HMin>0</HMin>
<HMax>4</HMax>
<HConst>227</HConst>
</HSVTweak>
<HSVTweak>
<HMin>53</HMin>
<HMax>57</HMax>
<HConst>-30</HConst> <!-- change the yellow to orange -->
</HSVTweak>
<HSVTweak>
<SMin>165</SMin>
<SMax>166</SMax>
<SConst>100</SConst> <!--increase it to deeper orange -->
</HSVTweak>
</Filters>
</Scheme>
By doing
this, I got the results I wanted. You may have noticed that if you put
the color numbers mentioned into my scheme builder
tool,
it actually gives a value of 89 for SConst. I used 100 to make sure it
maxed out the saturation. Saturation and Values are clipped above 255,
so I knew it wouldn't hurt to use a higher number than needed.
Using a
similar method, I desaturated (using negative numbers in SConst) all the
colors except the ones used for the Play and Cue buttons. This gave me a
black & white skin with color Play and Cue.
In the examples above, I only modified one value at a time using HSVTweak, but you don't have to. You can tweak multiple values at the same time. This is where my scheme builder tool really comes in handy. To turn the waveforms and buttons into two new versions of red, I adjusted the colors in Gimp, picked the hex color values, and copied them into the tool. Then I cut-and-pasted the code into a new <Scheme> tag and added a couple <?Min> and <?Max> tags.
<Scheme>
<Name>Ready</Name>
<Filters>
<HSVTweak>
<HMin>0</HMin>
<HMax>4</HMax>
<SMin>197</SMin>
<SMax>199</SMax>
<HConst>0</HConst>
<SConst>36</SConst>
<VConst>88</VConst>
</HSVTweak>
<HSVTweak>
<HMin>53</HMin>
<HMax>57</HMax>
<HConst>-52</HConst>
<SConst>53</SConst>
<VConst>-24</VConst>
</HSVTweak>
</Filters>
</Scheme>
Using careful planning, advanced scheme transformations are
possible. In this quick and dirty test, I "change" the shapes of the
elements. I used dark versions of blue agains a black background to
hide them from casual observation. Then, in the scheme, I applied color
changes targeting very specifically those colors. The results are shown
at right. The top elements are the originals, the bottom elements are
with the scheme applied. Check out the code below to see how it was
done.
<Scheme>
<Name>Tricky</Name>
<Filters>
<HSVTweak>
<HMin>29</HMin> <!-- change only orange pinstripes -->
<HMax>31</HMax>
<SConst>-255</SConst> <!-- take out color -->
<VConst>-255</VConst> <!-- take out brightness -->
</HSVTweak>
<HSVTweak>
<HMin>240</HMin> <!-- select only darkest blue -->
<HMax>240</HMax> <!-- in "hidden" pinstripe -->
<SMin>102</SMin>
<SMax>102</SMax>
<VMin>20</VMin>
<VMax>20</VMax>
<HConst>-210</HConst> <!-- change to dark orange -->
<SConst>153</SConst>
<VConst>46</VConst>
</HSVTweak>
<HSVTweak>
<HMin>240</HMin> <!-- select only med blue -->
<HMax>240</HMax> <!-- in "hidden" pinstripe -->
<SMin>97</SMin>
<SMax>97</SMax>
<VMin>21</VMin>
<VMax>21</VMax>
<HConst>-210</HConst> <!-- change to med orange -->
<SConst>158</SConst>
<VConst>162</VConst>
</HSVTweak>
<HSVTweak>
<HMin>240</HMin> <!-- select only lightest blue -->
<HMax>240</HMax> <!-- in "hidden" pinstripe -->
<SMin>93</SMin>
<SMax>93</SMax>
<VMin>22</VMin>
<VMax>22</VMax>
<HConst>-210</HConst> <!-- change to light orange -->
<SConst>162</SConst>
<VConst>211</VConst>
</HSVTweak>
<HSVTweak>
<HMin>111</HMin> <!-- change only the green circle -->
<HMax>113</HMax>
<SConst>-255</SConst> <!-- take out color -->
<VConst>-255</VConst> <!-- take out brightness -->
</HSVTweak>
<HSVTweak>
<HMin>240</HMin> <!-- select blue in hidden square-->
<HMax>240</HMax>
<SMin>85</SMin>
<SMax>85</SMax>
<VMin>3</VMin>
<VMax>3</VMax>
<HConst>-128</HConst> <!-- change to lime green -->
<SConst>170</SConst>
<VConst>210</VConst>
</HSVTweak>
</Filters>
</Scheme>
I hope I have helped you understand a little better how schemes work in Mixxx 1.9. I will play with my schemes a little more to get them just right. I look forward to seeing how other people scheme their skins!
One final note: The orange icons in the directory tree are hard-coded into Mixxx. As 'jus' informed me:
you can only change them if you build Mixxx from source.
Download the Mixxx source code ( see wiki link above) and replace the treeview icons in /mixxx/res/images/library/ with your custom ones while preserving the icons names and compile Mixxx.
Using this method, you can really tweak the way Mixxx looks on your system. However, this will not affect the way your skin looks on someone else's system.
SIGNATURE
* - QT is a UI framework used to build Mixxx. Most elements of the interface can be styled using CSS within special XML tags such as <BgColor>. Some elements must be styled by referencing the QT element within <Style> tags. For example, to modify the borders of the library widget, the colors of the header, or the style of the scrollbars, you need to use the <Style> tags. Some CSS statements must use QT-specific versions, such as "qlineargradient". The most useful page I found was the stylesheet reference list.
This is the Mixxx Wiki - 
Mixxx is a free and open-source DJ software.
Manual
Hardware Compatibility
Reporting Bugs
Getting Involved
Contribution Guidelines
Coding Guidelines
Using Git
Developer Guide
Creating Skins
Contributing Mappings
Mixxx Controls
MIDI Scripting
Components JS
HID Scripting