Differences

This shows you the differences between two versions of the page.

--- creating_skins [2012/04/25 01:20]
jus [Waveform overview] Add info on <EndOfTrackColor>
+++ creating_skins [2013/04/23 10:12] (current)
jus Add v1.11 change to docs: Removed <BeatHighlightColor>, lp:1112396
@@ Line 24: / Line 24: @@
 Images are in the .png format and Mixxx does support png transparency. Element colors are defined in hexadecimal values. \\
-Element positions are defined with **X,Y** coordinates (from upper left ). Element sizes are defined with **W,H** values (width,heigh).
+Element positions are defined with **X,Y** coordinates (from upper left ). Element sizes are defined with **W,H** values (width,heigh). All values are given in pixels.
 {{:skinning:creating_skins:mixxx1.9_gui_positioning_outline.png?|}}
@@ Line 37: / Line 37: @@
 <!DOCTYPE skin>
 <skin>
+<manifest>...</manifest>
 <elementname>
-<tooltips>helpful text</tooltips>
+<TooltipId>...</TooltipId>
-<Style>..</Style>
+<Style>...</Style>
 <position>X,Y</position>
 <size>W,H</size>
 <options>values(depends)</options>
 </elementname>
 </skin>
-</code>|<code>Optional comments (i.e. skin license or changelog)
+</code>|<code>
-Doctype declaration so Mixxx "know"
+Optional comments (i.e. skin license or changelog)
+Doctype declaration
 Skin opening tag
+Manifest describing skin properties (author, title, version, etc.)
 Elements opening tag
-Tooltips to display on mouse-over
+Tooltips to display on mouse-over, available IDs are in src/skin/tooltips.cpp
-Style (depends on the element)
+Stylesheet (depends on the element)
 Position on the screen
 Size (depending on the element)
 Options(depending on the element)
 Elements closing tag
-Skin closing tag </code>|
+Skin closing tag
+</code>|
 ====  Skin 101  ====
 Lets have a look at the Mixxx user interface (with Outline skin applied). The various elements of the skin are marked and explained below.
@@ Line 65: / Line 67: @@
 [[#sectiongeneral |1.General]]
+  * Manifest - specifies information about the skin (title, artist, description, version) and allows you to set Mixxx controls when the skin is loaded (e.g. enable 4-deck mode).
   * Skin Colour Scheme - allows the creation of different [[http://mixxx.org/wiki/doku.php/skin_colour_scheme_architecture|colour schemes]] of a skin
   * Background picture - Image file which all elements will be displayed on
@@ Line 76: / Line 79: @@
 [[#sectiontext|3.Text]]
+  * Label (not shown) - displays a text label
+  * Clock (not shown) - displays the current time
   * Track information - shows some ID3 information of the song ( Name, Artist )
   * BPM Information - shows the tempo of the song
@@ Line 115: / Line 120: @@
   * TrackProperty -  pull advanced informations from tracks and display them
   * WidgetGroup - make a group of relatively positioned widgets
+  * Splitter - allows proportional splits between WidgetGroup
+  * WidgetStack - allows to switch between multiple different widgets to occupy a certain space
 ==== Skin FAQ ====
@@ Line 220: / Line 226: @@
 ==== Skin licensing & copyright ====
-The principles on licensing found [[http://wiki.creativecommons.org/Before_Licensing| on the Creative Common Wiki]] apply for other licenses too.
+The principles on licensing found on the [[http://wiki.creativecommons.org/Before_Licensing|Creative Common Wiki]] apply for other licenses too.
 If you are going to make a skin from scratch , think about which license to choose for your work.
@@ Line 229: / Line 235: @@
 **\\
 If you are going to make a skin based on others work, make sure you comply with their license terms.
-If you are not sure, why not ask the original author?
+If you are not sure, ask the original author.
-It is a good idea to put the license terms of your skin as a comment on top of the skin.xml (see examples).
+Add the license terms at the beginning of skin.xml (see examples).
 |^Example CC by-sa 3.0 licensed skin^^Example GPL licensed skin^
 |<code><!--
-Name / Version of your skin, Skin for Mixxx 1.9.x
+"Name of your skin", Skin for Mixxx
 www.mixxx.org
-Copyright (C) 2011 you name , [email protected]
+Copyright (C) 2011-2013 your name , [email protected]
 based on the "Name of the original skin"
-Copyright (C) 2011 name of the original author, [email protected]
+Copyright (C) 2011-2013 name of the original author, [email protected]
-This file is part of the "Name of your skin" Skin for Mixxx 1.9.x
+This file is part of the "Name of your skin" skin for Mixxx.
 "Name of your skin" is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported license.
 http://creativecommons.org/licenses/by-sa/3.0/
+With every copy of the work, you are required to either provide a copy of the license it self
+or a link (URI). Failure to do this is a failure to complete the terms of the CC license.
 You are free:
 to Share - to copy, distribute and transmit the work
 to Remix - to adapt the work
 Under the following conditions:
 Attribution - You must attribute the work in the manner specified by the author or licensor
 (but not in any way that suggests that they endorse you or your use of the work).
+A attribution should include the following: The name of the author and/or licensor,
+the title of the work, the URL that is associated with the work.
 Share Alike - If you alter, transform, or build upon this work, you may distribute
 the resulting work only under the same or similar license to this one.
 --></code>|<code>
 <!--
-Name / Version of your skin, Skin for Mixxx 1.9.x
+"Name of your skin", Skin for Mixxx
 www.mixxx.org
-Copyright (C) 2011 you name , [email protected]
+Copyright (C) 2011-2013 your name , [email protected]
 based on the "Name of the original skin"
-Copyright (C) 2011 name of the original author, [email protected]
+Copyright (C) 2011-2013 name of the original author, [email protected]
-This file is part of "Name of your skin".
+This file is part of "Name of your skin" skin for Mixxx.
 "Name of your skin" is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
@@ Line 278: / Line 289: @@
 http://www.gnu.org/licenses/gpl.html
 -->
@@ Line 286: / Line 303: @@
   * [[http://creativecommons.org/choose/|Which CC license to choose]]
   * [[http://www.appropedia.org/Non-commercial_licenses_vs_open_licenses|Non-commercial licenses vs open licenses]]
   * [[http://www.gnu.org/licenses/gpl-faq.html|Frequently Asked Questions about the GNU GPL]]
+  * [[creating_skins#skin_manifest|Skin Manifest]] - Tells Mixxx details about the skin
 ====  Tools  ====
   * Free Text editors - Online ([[http://piratepad.net/|Piratepad]], [[http://docs.google.com/|Google Docs]]), Windows ([[http://www.pspad.com/|Pspad]]), Mac OSX ([[http://www.barebones.com/products/textwrangler/|Textwrangler]]), Linux (Kate, Gedit)
   * Free Images editors - Online ([[http://aviary.com/tools/phoenix|Phoenix]], [[http://www.pixlr.com/|Pixlr]]), Windows ([[http://www.getpaint.net/|Paint.net]], [[http://gimp-win.sourceforge.net/|Gimp]] ) Mac OSX ([[http://www.pixelmator.com/|Pixelmator]] -trial-), Linux (Gimp, Inkscape)
   * Free color tools - Online ([[http://bighugelabs.com/colors.php|Color Palette Generator]], [[http://www.colorblender.com/|Colorblender]] , [[http://colorschemedesigner.com/|Color Scheme Designer]])
-  * Free knob tools - Windows only, MacOSX & Linux via [[http://www.winehq.org/|Wine]] ([[http://www.g200kg.com/en/software/knobman.html|Knobman]], [[http://www.otiumfx.com/knobrender|Knob Render]])
+  * Free knob tools - Windows, MacOSX & Linux ([[http://www.g200kg.com/en/software/knobman.html|JKnobman]])
-  * Convert a Mixxx skin.xml into HTML to be viewed with a web browser - Windows, MacOSX & Linux ([[:creating_skins#convert_a_mixxx_skinxml_into_html|XSL Helper]])
 ====== Skin.xml in-depth review=======
 In this section all elements and the values of their keys are explained on the example of **Outline** skin.\\
 So open up the skin.xml in the Outline folder with your favorite [[#tools|text editor]] and get started :-)
 ===== Changes =====
 ==== Mixxx 1.11.0 ====
+   *  Removed <BeatHighlightColor>, the highlight color when beatgrid was near playback position in the [[creating_skins#waveform|<Waveform>]], see [[https://bugs.launchpad.net/mixxx/+bug/1112396|lp:1112396]]
+   * Added //key// [[creating_skins#trackproperty|TrackProperty]]. This displays the musical key but does not change if the speed/pitch change during playback, see [[https://bugs.launchpad.net/mixxx/+bug/1159141|lp:1159141]]
+   * Added <BackPath> node that allows resizable background images for [[creating_skins#widgetgroup|WidgetGroup]] which support color schemes, see [[https://bugs.launchpad.net/mixxx/+bug/1095400|lp:1095400]] & [[https://bugs.launchpad.net/mixxx/+bug/1094785|lp:1094785]]
+   * Replaced <MarkerColor> with <AxesColor>, the color of the static horizontal line, and <PlayPosColor>, the color of the static vertical line on the [[creating_skins#waveform|<Waveform>]] and the cursor in the [[creating_skins#waveform_overview|<Overview>]], see [[https://bugs.launchpad.net/mixxx/+bug/1099182|lp:1099182]]
+   * [[creating_skins#spinning_vinyl_image_spinny|<Spinny>]] image center according to their own size. Was aligned top/left before. This allows xwax like effects, see [[https://bugs.launchpad.net/mixxx/+bug/1058605|lp:1058605]]
+   * The [[skin_colour_scheme_architecture|color filtering architecture]], which allows to create a different coloured version of a skin, does support image transparency.
+   * Added the [[creating_skins#splitter|<Splitter>]]> section, which controls the size of child widgets by dragging the boundary between the children.
+   * Added the [[creating_skins#widgetstack|<WidgetStack>]]> section, provides a stack of widgets where only one widget is visible at a time. This could be used to make multiple pages of hotcue buttons so you can flip through the pages.
+   * Added the [[creating_skins#skin_manifest|<Skin Manifest>]]> section, which tells Mixxx details about the skin and currently allows to specify changes to Mixxx controls that should be executed when the skin is loaded.
+   * Replaced <Tooltips> with <TooltipId> key. This avoids the need to write individual tooltip text per node, allows tooltips translation, makes skins more coherent and maintenance easier. Make sure to select the correct ID for each key, available IDs are in //src/skin/tooltips.cpp//
+   * Added <AxesColor> to define the color for horizontal/vertical line in in the waveform, see [[creating_skins#waveform|<Visual>]]
+   * Added [[creating_skins#recording|<Recording>]] control that allows toggle of recording
    * Added <EndOfTrackColor> in waveform & waveform overview that allow to define the color of the overlay that will be displayed as notification within the last seconds of a track, see [[creating_skins#waveform|<Visual>]] and [[creating_skins#waveform_overview|<Overview>]]
    * Added <Align> to the waveforms options that allows to display only those portions of the waveform which would have been above or below the center. By default, the waveform display is centered about a line and portions will extend both above and below the center, see [[creating_skins#waveform|<Visual>]]
@@ Line 304: / Line 334: @@
    * Removed <HfcColor>, the horizontal line`s color in the waveform, see [[creating_skins#waveform|<Visual>]]
    * Removed <ProgressColor> & <ProgressAlpha > option to change the color for track analysis progress visualisation in waveform overview, see [[creating_skins#waveform_overview|<Overview>]]. Track analysis progress will be still visible in waveform overview.
-==== Mixxx 1.10.1 ====
+   * Added the <manifest> skin section that allows you to specify the skin title, author, description, etc. and set Mixxx controls on skin load.
-   * Added [[creating_skins#record|<Record>]] control that allows toggle of recording
 ==== Mixxx 1.10.0 ====
+   * Added [[creating_skins#spinning_vinyl_image_spinny|<Spinny>]] image which displays a visual guidance for relative track positioning while mixing
    * Added <Time> widget which displays the current time, see [[creating_skins?&#clock|<Clock>]]
    * Removed rate <Connection> groups from all <NumberRate> controls, now the text does immediately update if rate range or direction changes, see [[creating_skins#pitch_rate_display|<Pitch rate display>]]
@@ Line 327: / Line 357: @@
 =====Section: General=====
+==== Skin Manifest ====
+**New in Mixxx 1.11.0**
+The skin manifest section tells Mixxx details about the skin. Some of the details are currently unused but may be used in a future version. Additionally we may expand the manifest to include things like minimum-Mixxx-version required or recommended screen resolution.
+|<code=xml><manifest>
+<title>Deere 1280x1024 4-deck</title>
+<author>jus</author>
+<version>1.11.0.0.7</version>
+<description>A 4-deck split-waveform skin with a 16-sampler grid.</description>
+<language>en</language>
+<license>Creative Commons Attribution, Share-Alike 3.0 Unported</license>
+<attributes>
+  <attribute config_key="[Master],num_decks">4</attribute>
+  <attribute config_key="[Master],num_samplers">16</attribute>
+  <attribute config_key="[Master],num_preview_decks">1</attribute>
+  <attribute config_key="[Samplers],show_samplers">1</attribute>
+</attributes>
+</manifest></code>|<code>start manifest tag
+Skin title
+Skin author
+Skin version (not the Mixxx version)
+A description of the skin
+Skin language (if language-independent, omit or put *)
+Skin copyright license
+Begin skin attributes
+Set "[Master],num_decks" ConfigKey to 4 when skin is loaded. Requires additional code per Deck in the skin.xml
+Set "[Master],num_samplers" ConfigKey to 16 when skin is loaded. Requires additional code per Sampler Deck in the skin.xml
+Set "[Master],num_preview_decks" ConfigKey to 1 when skin is loaded. Requires additional code for the Preview Deck in the skin.xml
+Set "[Samplers],show_samplers" WidgetGroup to be visible by default. Works for exisiting WidgetGroups with <BindProperty>visible</BindProperty> key
+End skin attributes
+end manifest tag</code>|
+**The only part of the manifest that is used in 1.11.0 is the <attributes> section.** This section allows the skin to specify changes to Mixxx controls that should be executed when the skin is loaded. For example, Mixxx defaults to 2-decks in its mixing engine but when you load a skin that supports 4-decks, the skin can specify that the Control "[Master],num_decks" should be set to 4 (see the above example). This will enable a 3rd and 4th deck in Mixxx's engine for the skin to interact with. This attribute list can change any Mixxx control but will only take effect when the skin is loaded.
 ==== Skin Colour Scheme ====
 Allows the creation of different color schemes, see [[http://mixxx.org/wiki/doku.php/skin_colour_scheme_architecture|Color scheme architecture]] for details
 ==== Main background ====
-|<code=xml><Background>
+|<code=xml>
+<Background>
  <Path>background.png</Path>
  <BgColor>#</BgColor>
-</Background></code>|<code>The size of this image defines the skins overall size, see Guidelines
+</Background>
-Defines the background picture all the elements will displayed on
-Defines a background color ( Example: # = #000000)
+</code>|<code>
-#00000 is hex value for black</code>|
+start background tag
+Defines which image in the skins folder to use for the background. All elements are displayed over this image and its size defines the skin size (see Guidelines)
+Defines a background color. Example: <BgColor>#000000</BgColor> (000000 being the hex value for black)
+end background tag
+</code>|
 ==== Library display ====
-New in Mixxx 1.9.0 \\
-You can use [[http://doc.qt.nokia.com/latest/stylesheet.html|Qt Style Sheets]] to customize the appearance of the library widget like:
- * Custom images for splitter and checkboxes in library
- * Custom images for branch triangle in treeview
- * Visual feedback when searchbox has focus
- * General appearance of text and buttons in library & tooltips
-See also [[http://doc.qt.nokia.com/latest/stylesheet-examples.html|Qt Style Sheets Examples]] and the [[http://mixxx.org/forums/viewtopic.php?f=8&t=1812|Spartan Skin for Mixxx 1.9]] as blueprint, it makes heavy use of Qt Style Sheets.
 |<code=xml><TableView>
- <Style>...</Style>
+ <Style></Style>
  <Pos>X,Y</Pos>
  <Size>W,H</Size>
@@ Line 356: / Line 418: @@
  <BgColorRowEven>#</BgColorRowEven>
  <BgColorRowUneven>#</BgColorRowUneven>
-</TableView></code>|<code>
+</TableView>
+</code>|<code>
+start TableView tag
 Defines the appearance of the library widget
-Defines the elements position
+Defines the element position
-Defines the elements size
+Defines the element size
 Background color library widget (i.e. background color search widget)
 Foreground color library widget (i.e. text in "Analyze" widget)
 Background color even line right library pane
 Background color uneven lines right library pane
+end TableView tag
 </code>|
+New starting in Mixxx 1.9.0: \\
+[[http://doc.qt.nokia.com/latest/stylesheet.html|Qt Style Sheets]] can now be used within <Style></Style> to customize the appearance of various library widgets, and when used for the specific elements defined above, will supersede them. A few examples of what QT Style Sheets can provide are:
+ * Custom images for splitter and checkboxes in library
+ * Custom images for branch triangle in treeview
+ * Visual feedback when searchbox has focus
+ * General appearance of text and buttons in library & tooltips
+See the [[http://mixxx.org/forums/viewtopic.php?f=8&t=1812|Spartan Skin for Mixxx 1.9]] as an example, it makes heavy use of Qt Style Sheets. Also, you may wish to peruse [[http://doc.qt.nokia.com/latest/stylesheet-examples.html|Qt Style Sheets Examples]] for reference.
 =====Section: Visual=====
 ==== Waveform ====
 |<code=xml><Visual>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>waveform_display</TooltipId>
  <Channel>X</Channel>
  <Pos>X,Y</Pos>
@@ Line 381: / Line 452: @@
  <BgPixmap>custom_background.png</BgPixmap>
  <Align>X</Align>
-        <HfcColor>#</HfcColor>
  <SignalColor>#</SignalColor>
         <SignalLowColor>#</SignalLowColor>
@@ Line 387: / Line 457: @@
         <SignalLowColor>#</SignalLowColor>
  <BeatColor>#</BeatColor>
+        <EndOfTrackColor>#</EndOfTrackColor>
+        <AxesColor>#</AxesColor>
+        <PlayPosColor>#</PlayPosColor>
  <BeatHighlightColor>#</BeatHighlightColor>
+        <HfcColor>#</HfcColor>
  <MarkerColor>#</MarkerColor>
-        <EndOfTrackColor>#</EndOfTrackColor>
  <CueColor>#</CueColor>
-<Visual></code>|<code>
+<Visual>
-Tooltip to be displayed on mouse-over. Use the &quot;&amp;#10;&quot; entity (without quotes) for line break
+&lt;/code&gt;|<;code&gt;
-Defines which channel the settings are connected to (X = 1 or 2 )
+begin Visual tag
+Tooltip to be displayed on mouseover, depends on selected ID`s. Make sure to select the correct ID for each key, available IDs are in //src/skin/tooltips.cpp//
+Which channel the settings are connected to (X=1 or 2)
+Defines the element position
+Defines the element size
 Color of waveform background  (until Mixxx 1.10. a default gradient was added , not for #000000)
 New in Mixxx 1.10: Loads a background image and will tile it when smaller than the waveform widget
 New in Mixxx 1.11: Show full waveform centered (default) or only bottom/top half ( X = "bottom" or "top" )
-Deprecated in Mixxx 1.11: Color of horizontal line
 Color of waveform
 New in Mixxx 1.11: Colors of low frequencies in waveform. If no low/mid/high colors are provided, fallback to <SignalColor>
@@ Line 406: / Line 480: @@
 New in Mixxx 1.11: Colors of high frequencies in waveform
 Color of beatgrid (multiple vertical lines)
-Highlight color when beatgrid is near playback position
-Default color center marker (single vertical line)
 New in Mixxx 1.11: Color of notification overlay displayed within the last seconds of a track
-Deprecated in Mixxx 1.11 (Cue is now = <MarkerColor>): Default color of Cuepoint marker
+New in Mixxx 1.11: Color of static horizontal line
+New in Mixxx 1.11: Color of static vertical line
+Deprecated in Mixxx 1.11: Highlight color when beatgrid is near playback position
+Deprecated in Mixxx 1.11: Color of horizontal line
+Deprecated in Mixxx 1.11: Color center marker (single vertical line)
+Deprecated in Mixxx 1.11: Color of Cuepoint marker
+end Visual tag
 </code>|
-|<code=xml><Mark>
+|<code=xml>
+<Mark>
     <Control>cue_point</Control>
         <Pixmap>custom_marker.png</Pixmap>
@@ Line 420: / Line 499: @@
  <Color>#</Color>
  <TextColor>#</TextColor>
-</Mark> </code>|<code>
+</Mark>
-Defines the Cuepoint , max. one cuepoint per channel
+</code>|<code>
-Optional: Defines a custom marker for given element, if available it overrides the default triangle
+begin Mark tag
+Defines the Cuepoint, max. one cuepoint per channel
+Optional: Uses an image from the skin's folder to define a custom marker, if available it overrides the default triangle
 Text visible when Cuepoint is set (and no custom marker is defined)
-Defines where text is positioned (Y=top or center or bottom)
+Defines where text is positioned (Y="top" or "center" or "bottom")
 Defines text background color
 Defines text color
+end Mark tag
 </code>|
-|<code=xml><Mark>
+|<code=xml>
+<Mark>
     <Control>hotcue_X_position</Control>
         <Pixmap>custom_marker.png</Pixmap>
@@ Line 438: / Line 521: @@
  <Color>#</Color>
  <TextColor>#</TextColor>
-</Mark></code>|<code>
+</Mark>
+</code>|<code>
+begin Mark tag
 max. 36 Hotcues(X=1-36), define every Hotcue for its own
-Optional: Defines a custom marker for given element, if available it overrides the default triangle
+Optional: uses an image from the skin's folder to define a custom marker, if available it overrides the default triangle
 Text visible when Hotcue point is set (and no custom marker is defined)
-Defines where text is positioned (Y= top or center or bottom)
+Defines where text is positioned (Y="top" or "center" or "bottom")
 Defines text background color
 Defines text color
+end Mark tag
 </code>|
-|<code=xml><Mark>
+|<code=xml>
+<Mark>
     <Control>loop_start_position</Control>
         <Pixmap>custom_marker.png</Pixmap>
@@ Line 456: / Line 543: @@
  <Color>#</Color>
  <TextColor>#</TextColor>
-</Mark></code>|<code>
+</Mark>
+</code>|<code>
+begin Mark tag
 Defines a loops starting point
-Optional: Defines a custom marker for given element, if available it overrides the default triangle
+Optional: Uses an image from the skin's folder to define a custom marker, if available it overrides the default triangle
 Text visible when starting point is set (and no custom marker is defined)
-Defines where text is positioned (Y= top or center or bottom)
+Defines where text is positioned (Y="top" or "center" or "bottom")
 Defines text background color
 Defines text color
+end Mark tag
 </code>|
-|<code=xml><Mark>
+|<code=xml>
+<Mark>
     <Control>loop_end_position</Control>
         <Pixmap>custom_marker.png</Pixmap>
@@ Line 474: / Line 565: @@
  <Color>#</Color>
  <TextColor>#</TextColor>
-</Mark></code>|<code>
+</Mark>
+</code>|<code>
+begin Mark tag
 Defines a loops end point
-Optional: Defines a custom marker for given element, if available it overrides the default triangle
+Optional: Uses an image from the skin's folder to define a custom marker, if available it overrides the default triangle
 Text visible when end point is set (and no custom marker is defined)
-Defines where text is positioned (Y= top or center or bottom)
+Defines where text is positioned (Y="top" or "center" or "bottom")
 Defines text background color
 Defines text color
+end Mark tag
 </code>|
-|<code=xml><MarkRange>
+|<code=xml>
+<MarkRange>
     <StartControl>loop_start_position</StartControl>
     <EndControl>loop_end_position</EndControl>
@@ Line 491: / Line 586: @@
  <Color>#</Color>
  <DisabledColor>#</DisabledColor>
-  </MarkRange></code>|<code>
+</MarkRange>
-Draws a color overlay between loop-in & loop-out
-Defines overlay color when loop is active
-Defines overlay color when loop is in-active
+</code>|<code>
+begin MarkRange tag
+\
+|---for drawing the color overlay between loop-in & loop-out, these lines are not variable
+/
+Defines overlay color when loop is enabled
+Defines overlay color when loop is disabled
+end MarkRange tag
 </code>|
 ==== Waveform overview ====
 |<code=xml><Overview>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>waveform_overview</TooltipId>
  <Channel>X</Channel>
  <Pos>X,Y</Pos>
@@ Line 512: / Line 609: @@
         <SignalHighColor>#</SignalHighColor>
         <SignalLowColor>#</SignalLowColor>
+        <EndOfTrackColor>#</EndOfTrackColor>
+        <AxesColor>#</AxesColor>
+        <PlayPosColor>#</PlayPosColor>
  <MarkerColor>#</MarkerColor>
-        <EndOfTrackColor>#</EndOfTrackColor>
  <ProgressColor>#</ProgressColor>
  <ProgressAlpha>X</ProgressAlpha>
  <Connection>
- <ConfigKey>[ChannelX],playposition</ConfigKey>
+     <ConfigKey>[ChannelX],playposition</ConfigKey>
- <EmitOnDownPress>false</EmitOnDownPress>
+     <EmitOnDownPress>false</EmitOnDownPress>
  </Connection>
 </Overview></code>|<code>
+begin Overview tag
-Which channel the settings are connected to (X= 1 or 2)
+Tooltip to be displayed on mouseover
+Which channel the settings are connected to (X=1, 2, or more, depending on the number of decks in the skin)
+Defines the element position
+Defines the element size
 Background color. New in Mixxx 1.9.1: If <BgColor> is not provided, the background is treated as transparent.
 New in Mixxx 1.10: Loads a background image and will tile it when smaller than the waveform widget
@@ Line 532: / Line 632: @@
 New in Mixxx 1.11: Colors of mid frequencies in waveform overview
 New in Mixxx 1.11: Colors of high frequencies in waveform overview
-Color of vertical line (playing position indicator)
 New in Mixxx 1.11: Color of notification overlay displayed within the last seconds of a track
+New in Mixxx 1.11: Color of static horizontal line
+New in Mixxx 1.11: Color of moving vertical line (playing position indicator)
+Deprecated in Mixxx 1.11: Color of vertical line
 Deprecated in Mixxx 1.11 (was new in v1.10): Color of track analysis progress visualization, color defaults to the signal color if not set
 Deprecated in Mixxx 1.11 (was new in v1.10): Alpha of track analysis progress visualization, default alpha is 80 out of 255
+?
 Must be same value as under <Channel> above, (X = 1 or 2)
 Defines if action is performed on click on element ( true or false)
+?
+end Overview tag
+</code>|
+==== Spinning vinyl image (Spinny) ====
+New in Mixxx 1.10.0
+|<code=xml>
+<Spinny>
+ <TooltipId>spinny</TooltipId>
+ <Style></Style>
+ <Channel>X</Channel>
+ <Pos>X,Y</Pos>
+ <Size>W,H</Size>
+ <PathBackground>background.png</PathBackground>
+ <PathForeground>foreground.png</PathForeground>
+ <PathGhost>foreground_ghost.png</PathGhost>
+</Spinny>
+</code>|<code>
+Beginn Spinny tag
+Tooltip to be displayed on mouseover
+Optionally, defines the appearance of the Spinny widget
+Which channel the settings are connected to (X=1, 2, or more, depending on the # of decks in the skin)
+Defines the element position
+Defines the element size
+Background image (from the skin's folder, shows as bottom layer). Sets the spinny's overall size.
+Foreground image (from the skin's folder, shows as top layer). New in Mixxx 1.11: Center the images according to their own size
+Ghost Foreground image (from the skin's folder, shows as top layer on right-click)
+End Spinny tag
 </code>|
 ==== Volume level display ====
 |<code=xml><VuMeter>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>channel_VuMeter</TooltipId>
  <PathVu>active.png</PathVu>
  <PathBack>default.png</PathBack>
@@ Line 554: / Line 684: @@
   <PeakFallStep>5</PeakFallStep>
  <Connection>
- <ConfigKey>[X],Y</ConfigKey>
+     <ConfigKey>[X],Y</ConfigKey>
  </Connection>
-</VuMeter></code>|<code>
+</VuMeter>
-Button/slider main image = top layer
-Button/slider background image = bottom layer
-Orientation (false or true, means vertical or horizontal)
-Size of peak cropped from top of <PathVu> grafik (in pixel) / Default is 5
-Time a peak is displayed (in ms) / Default is 400
-Time a peak falls down (in ms) / Default is 20
-Number of steps a peaks falls down in <PeakFallTime> / Default is 1
-Defines connected Channel & Stereo-balance (X = Channel1 or Channel2 or Master),
-(Y= VuMeter or VuMeterL or VuMeterR)
+</code>|<code>
+begin VuMeter tag
+Tooltip to be displayed on mouseover
+Button/slider main image (from the skin's folder, shows as top layer)
+Button/slider background image (from the skin's folder, shows as bottom layer)
+Defines the element position
+Orientation (false=vertical, true=horizontal)
+Size of peak (in pixels); cropped from top of image defined in <PathVu>, default is 5
+Time a peak is displayed (in ms), default is 400
+Time a peak falls down (in ms), default is 20
+Number of steps (in pixels) a peaks falls down in <PeakFallTime>, Default is 1
+?
+Defines connected Channel & Stereo-balance (X = Channel1 or Channel2 or Master), (Y= VuMeter or VuMeterL or VuMeterR)
+?
+end VuMeter tag
 </code>|
 ==== Volume peak indicator ====
 |<code=xml><StatusLight>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>PeakIndicator</TooltipId>
  <PathVu>active.png</PathVu>
  <PathBack>default.png</PathBack>
  <Pos>X,Y</Pos>
  <Connection>
- <ConfigKey>[X],PeakIndicator</ConfigKey>
+     <ConfigKey>[X],PeakIndicator</ConfigKey>
  </Connection>
 </StatusLight>
 </code>|<code>
+begin StatusLight (Volume Peak Indicator) tag
+Tooltip to be displayed on mouseover
+peak indicator main image (from the skin's folder, shows as top layer)
+peak indicator background image (from the skin's folder, shows as bottom layer)
+Defines the element position
+?
+Defines connected Channel (X = Channel1 or Channel2 or Master)
+?
+end StatusLight (Volume Peak Indicator) tag
+</code>|
+=====Section: Text=====
+==== Label ====
+|<code=xml>
+<Label>
+    <Style>...</Style>
+    <Pos>X,Y</Pos>
+    <Size>W,H</Size>
+    <Text>Hello</Text>
+ </Label>
+</code>||<code>
+Displays a text label.
+<Style> Example= "QLabel { font: 15px/17px Arial;background-color: transparent; color: #ACACAC; text-align: center; padding-left: 1px; }"
-Defines connected Channel (X = Channel1 or Channel2 or Master)
+Defines the element position
+Defines the element size
+The text to be displayed
 </code>|
+==== Clock ====
-=====Section: Text=====
-==== Clock====
 New in Mixxx 1.10\\
 |<code=xml>
 <Time>
-        <Tooltip>Helpful text</Tooltip>
+    <TooltipId>time</TooltipId>
- <Style>...</Style>
+    <Style>...</Style>
- <Pos>X,Y</Pos>
+    <Pos>X,Y</Pos>
- <Size>W,H</Size>
+    <Size>W,H</Size>
- <ShowSeconds>false</ShowSeconds>
+    <ShowSeconds>false</ShowSeconds>
- <ClockFormat>24</ClockFormat>
+    <ClockFormat>24</ClockFormat>
 </Time>
 </code>||<code>
 This widget displays the current time.
-The node <ClockFormat> determines whether the time is shown in 24 hour format or 12 hour format. "24" and "24hrs" set the format to 24 hour format.
+Tooltip to be displayed on mouseover
-"12", "12hrs" and "12ap" set the format to to 12 hour format (e.g. 1:45 am). "12AP" sets it to 12 hour format with capitalized AM/PM (e.g. 1:45 AM). Default is "12AP".
+<Style> Example= "QLabel { font: 15px/17px Arial;background-color: transparent; color: #ACACAC; text-align: center; padding-left: 1px; }"
-<ShowSeconds> determines, whether seconds are shown or not. Default is false.
+Defines the element position
+Defines the element size
+Determines, whether seconds are shown ("true") or not ("false"). Default is "false".
+Determines whether the time is shown in 24 hour format or 12 hour format.
+"24" and "24hrs" set the format to 24 hour format. "12", "12hrs" and "12ap" set the format to
+hour format (e.g. 1:45 am). "12AP" sets it to 12 hour format with capitalized AM/PM
+(e.g. 1:45 AM). Default is "12AP". <ShowSeconds> determines, whether seconds are shown or not. Default is false.
 You can set a custom format with <CustomFormat> instead of <ClockFormat>, which accepts the same expressions as QTime::toString (http://doc.trolltech.com/latest/qtime.html#toString)
-<Style> Example= QLabel { font: 15px/17px Lucida Grande, Lucida Sans Unicode, Arial, Verdana, sans-serif;
-background-color: transparent; color: #ACACAC; text-align: center; padding-left: 1px; }
 </code>|
 ==== Track information ====
 New in Mixxx 1.9\\
 You can replace the whole <Text> node with [[:creating_skins#trackproperty|TrackProperty]]`s to display more advanced track informations.
 |<code=xml><Text>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>text</TooltipId>
  <Channel>X</Channel>
  <Pos>X,Y</Pos>
@@ Line 644: / Line 795: @@
 ==== BPM number display ====
 |<code=xml><NumberBpm>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>visual_bpm</TooltipId>
  <Channel>X</Channel>
  <Pos>X,Y</Pos>
@@ Line 671: / Line 822: @@
 ==== Playing position / Time remaining ====
 |<code=xml><NumberPos>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>track_time</TooltipId>
  <Channel>X</Channel>
  <Pos>X,Y</Pos>
@@ Line 698: / Line 849: @@
 ==== Pitch rate display ====
 |<code=xml><NumberRate>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>rate_display</TooltipId>
  <Channel>X</Channel>
  <Pos>X,Y</Pos>
@@ Line 728: / Line 879: @@
 ==== Channel Volume ====
 |<code=?xml><SliderComposed>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>channel_volume</TooltipId>
  <Handle>handle.png</Handle>
  <Slider>slider.png</Slider>
@@ Line 753: / Line 904: @@
 ==== Crossfader ====
 |<code=?xml><SliderComposed>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>crossfader</TooltipId>
  <Handle>handle.png</Handle>
  <Slider>slider.png</Slider>
@@ Line 778: / Line 929: @@
 ==== Pitch control ====
 |<code=?xml><SliderComposed>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>rate</TooltipId>
  <Handle>handle.png</Handle>
  <Slider>slider.png</Slider>
@@ Line 814: / Line 965: @@
 The //<ButtonState>// key tells Mixxx that the given connection should be triggered when that particular mouse button (left or right) is down.
-==== Record ====
+==== Recording ====
 |<code=xml><PushButton>
- <Tooltip>...</Tooltip>
+ <TooltipId>???</TooltipId>
  <Style>...</Style>
  <NumberStates>3</NumberStates>
@@ Line 824: / Line 975: @@
  <!-- RECORD OFF -->
  <Number>0</Number>
- <Pressed>pressed.png</Pressed>
+ <Pressed>btn_record_over.png</Pressed>
- <Unpressed>unpressed.png</Unpressed>
+ <Unpressed>btn_record.png</Unpressed>
  </State>
  <State>
  <!-- RECORD READY-->
  <Number>1</Number>
- <Pressed>unpressed.png</Pressed>
+ <Pressed>btn_record_over.png</Pressed>
- <Unpressed>pressed.png</Unpressed>
+ <Unpressed>btn_record_over.png</Unpressed>
  </State>
  <State>
  <!-- RECORD ON-->
  <Number>2</Number>
- <Pressed>unpressed.png</Pressed>
+ <Pressed>btn_record_over.png</Pressed>
- <Unpressed>pressed.png</Unpressed>
+ <Unpressed>btn_record_over.png</Unpressed>
  </State>
- <Pos>X,Y</Pos>
+ <Pos>199,114</Pos>
  <Connection>
- <ConfigKey>[Master],toggle_recording</ConfigKey>
+ <ConfigKey>[Recording],toggle_recording</ConfigKey>
  <EmitOnPressAndRelease>true</EmitOnPressAndRelease>
  <ButtonState>LeftButton</ButtonState>
@@ Line 847: / Line 998: @@
  </Connection>
  <Connection>
- <ConfigKey>[Master],Record</ConfigKey>
+ <ConfigKey>[Recording],status</ConfigKey>
  <ConnectValueFromWidget>false</ConnectValueFromWidget>
  </Connection>
- </PushButton>
+</PushButton>
 </code>|<code>
-New in Mixxx 1.10.1
+New in Mixxx 1.11
-Button that allows toggle of recording
+Button that allows toggle of recording and notifies "[Recording],status" of status changes.
 </code>|
 ==== Play ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text for both states</Tooltip>
+ <TooltipId>play_cue_set</TooltipId>
  <NumberStates>2</NumberStates>
  <State>
@@ Line 912: / Line 1062: @@
 ==== Cue ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text for all states</Tooltip>
+ <TooltipId>cue_default_cue_gotoandstop</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 960: / Line 1110: @@
 Hotcues can utilize more functions in the //<ConfigKey>// then shown in this example. See [[midi_controller_mapping_file_format#ui_midi_controls_and_names|MIDI Controller Mapping File Format]] for details
 |<code=xml><PushButton>
- <Tooltip>Helpful text for all states</Tooltip>
+ <TooltipId>hotcue</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1014: / Line 1164: @@
 ==== Looping ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>loop_in</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1057: / Line 1207: @@
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>loop_out</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1100: / Line 1250: @@
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>reloop_exit</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1143: / Line 1293: @@
 ==== Reverse playback ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text for all states</Tooltip>
+ <TooltipId>reverse</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1187: / Line 1337: @@
 ==== Fast forward (or rewind) ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text for all states</Tooltip>
+ <TooltipId>fwd_end</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1239: / Line 1389: @@
 ==== Beat sync ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text for all states</Tooltip>
+ <TooltipId>???</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1271: / Line 1421: @@
 ==== Pitch control (up and down) ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text for all states</Tooltip>
+ <TooltipId>???</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1313: / Line 1463: @@
 ==== Pitch bend (Nudge) ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text for all states</Tooltip>
+ <TooltipId>???</TooltipId>
  <NumberStates>1</NumberStates>
  <State>
@@ Line 1376: / Line 1526: @@
 ==== Prelisten / Monitoring ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>pfl</TooltipId>
  <NumberStates>2</NumberStates>
  <State>
@@ Line 1415: / Line 1565: @@
 ==== BPM tap ====
 |<code=xml><PushButton>
- <Tooltip>...</Tooltip>
+ <TooltipId>???</TooltipId>
  <Style>...</Style>
  <NumberStates>1</NumberStates>
@@ Line 1458: / Line 1608: @@
 ==== Key lock ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>keylock</TooltipId>
         <Style>...</Style>
  <NumberStates>2</NumberStates>
@@ Line 1501: / Line 1651: @@
 ==== Repeat ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>repeat</TooltipId>
  <Style>...</Style>
  <NumberStates>2</NumberStates>
@@ Line 1543: / Line 1693: @@
 </code>|
 ==== End of track mode ====
-**Abandoned in Mixxx 1.9.0, use the [[creating_skins#repeat|Repeat]] button instead**
+**Deprecated in Mixxx 1.9.0, use the [[creating_skins#repeat|Repeat]] button instead**
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <Tooltips></Tooltips>
  <NumberStates>3</NumberStates>
  <State>
@@ Line 1594: / Line 1744: @@
 ==== FX (Flanger) ====
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>flanger</TooltipId>
  <NumberStates>2</NumberStates>
  <State>
@@ Line 1633: / Line 1783: @@
 |<code=xml><PushButton>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>???</TooltipId>
  <NumberStates>2</NumberStates>
  <State>
@@ Line 1653: / Line 1803: @@
 </PushButton>
 </code>|<code>
+???= filterHighKill or filterMidKill or filterLowKill
 Cuts the high, mid and low frequencies on Channel X
@@ Line 1680: / Line 1830: @@
 ==== Master volume & balance ====
 |<code=xml><Knob>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>???</TooltipId>
  <NumberStates>X</NumberStates>
  <Path>knob_rotary_s%1.png</Path>
@@ Line 1689: / Line 1839: @@
 </Knob></code>|<code>
+???= master_volume or balance
 You need X single knobs where #(X/2)+1 is the 0-state.
 Example: X=41 states (270 degree rotation / 40 knobs + the 0-state) .
 You need 20 knobs rotate from -135 degree to 0 degree, one knob 0 degree (default knob visible) ,
 knobs rotate from -135 degree to 0 degree
 Defines connected Channel (Master) , performed action (Y=volume or balance)
@@ Line 1701: / Line 1851: @@
 ==== Flanger (FX) setting ====
 |<code=xml><Knob>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>???</TooltipId>
  <NumberStates>X</NumberStates>
  <Path>knob_rotary_s%1.png</Path>
@@ Line 1709: / Line 1859: @@
  </Connection>
 </Knob></code>|<code>
+???= lfoDelay or lfoDepth or lfoPeriod
@@ Line 1722: / Line 1872: @@
 ==== Headphone volume and mix ====
 |<code=xml><Knob>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>???</TooltipId>
  <NumberStates>X</NumberStates>
  <Path>knob_rotary_s%1.png</Path>
  <Pos>X,Y</Pos>
  <Connection>
- <ConfigKey>[Flanger],Y</ConfigKey>
+ <ConfigKey>[Master],Y</ConfigKey>
  </Connection>
 </Knob></code>|<code>
+???= headVolume or headMix
@@ Line 1743: / Line 1893: @@
 ==== Channel filter and gain ====
 |<code=xml><Knob>
- <Tooltip>Helpful text</Tooltip>
+ <TooltipId>???</TooltipId>
  <NumberStates>X</NumberStates>
  <Path>knob_rotary_s%1.png</Path>
@@ Line 1753: / Line 1903: @@
 </code>|<code>
+???= pregain or filterHigh or filterMid or filterLow
@@ Line 1763: / Line 1913: @@
 </code>|
 =====Special nodes=====
-Check out the [[http://mixxx.org/forums/viewtopic.php?f=8&t=1812|Spartan Skin for Mixxx 1.9]] as blueprint, it makes use of these special nodes.
+Check out the skins in Mixxx 1.11 as blueprint, they make heavy use of these special nodes.
 ====TrackProperty====
 New in Mixxx 1.9\\
@@ Line 1769: / Line 1919: @@
 You can display more than one TrackProperty node in a skin.
 |<code=xml>   <TrackProperty>
-      <Tooltip>...</Tooltip>
+      <TooltipId>???</TooltipId>
       <Style>...</Style>
       <Property>...</Property>
@@ Line 1779: / Line 1929: @@
+???= check //src/skin/tooltips.cpp// for the corrct tooltip ID for each key
 The "Property" field can be any of:
-artist, title, album, genre, year, track_number, times_played, comment, bpm, bpmFormatted, duration, durationFormatted
+artist, title, album, genre, year, track_number, times_played, comment, bpm, bpmFormatted, duration, durationFormatted, key (new in Mixxx 1.11)
 bpm will be the full precision number (i.e. 1.333333333) while bpmFormatted is to 3 decimal places (1.333),
@@ Line 1793: / Line 1943: @@
   <Pos>100,200</Pos>
   <Size>w,h</Size>
+  <BackPath>background.png</BackPath>
   <Children>
     <PushButton>
@@ Line 1806: / Line 1957: @@
+New in Mixxx 1.11: Loads a background image from the skin folder. Support resizing and color schemes.
+Note: The style sheet is painted on top of the new background set by the <BackPath> node.
+</code>|
 <size> is optional, this will limit the size so that any part of a
@@ Line 1815: / Line 1981: @@
 The SliderComposed widget will be at 20,0 relative to its parent or 120,200.
+==== Splitter ====
+New in Mixxx 1.11.0
+This allows you to create a QSplitter dynamically.
+|<code=xml><Splitter>
+  <Pos>100,200</Pos>
+  <Size>w,h</Size>
+  <SplitSizes>1,1,8</SplitSizes>
+  <Children>
+    <WidgetGroup>
+    </WidgetGroup>
+    <WidgetGroup>
+    </WidgetGroup>
+    <WidgetGroup>
+    </WidgetGroup>
+    <!-- as many regular widgets as you like in here -->
+  </Children>
+</Splitter>
+</code>|<code>
 </code>|
+''SplitSizes'' gives the proportional splits between the children of the 'Splitter'. From the example, the first 2 ''WidgetGroup''s will each have 10% of the splitter size initially and the 3rd ''WidgetGroup'' will have 80%. There must be as many split sizes as there are children or else it will be ignored.
+**NOTE:** ''Splitter'' derives from ''QSplitter''. As of Qt 4.8.3 the default ''SizePolicy'' for ''QSplitter'' is ''QSizePolicy::Expanding'' horizontally and ''QSizePolicy::Preferred'' vertically. If you do not provide a size for the splitter this is the default policy.
+==== WidgetStack ====
+New in Mixxx 1.11.0
+|<code=xml><WidgetStack>
+  <NextControl>[Channel1],hotcuepage_next</NextControl>
+  <PrevControl>[Channel1],hotcuepage_prev</PrevControl>
+  <Children>
+    <WidgetGroup trigger="[Channel1],hotcuepage_show1"></WidgetGroup>
+    <WidgetGroup trigger="[Channel1],hotcuepage_show2"></WidgetGroup>
+    <WidgetGroup trigger="[Channel1],hotcuepage_show3"></WidgetGroup>
+    <!-- as many regular widgets as you like in here -->
+  </Children>
+</WidgetStack>
+</code>|<code>
+Optional: Control that switches to the next widget in the stack. (will be created if doesn't exist)
+Optional: Control that switches to the previous widget in the stack. (will be created if doesn't exist)
+A WidgetGroup that is shown when the 'trigger' control is set to 1. (will be created if doesn't exist)
+A WidgetGroup that is shown when the 'trigger' control is set to 2. (will be created if doesn't exist)
+A WidgetGroup that is shown when the 'trigger' control is set to 3. (will be created if doesn't exist)
+</code>|
+A ''WidgetStack'' is a widget that only shows one widget at a time. By default, the shown widget is the first child in the ''<Children>'' block. If the ''NextControl'' or ''PrevControl'' is set to 1, then the next or previous widget in the stack is shown and the current widget is hidden. If an optional ''trigger'' attribute is given to any child, then the control named by the attribute will automatically switch to the widget when the control is set to 1 and when the widget is hidden the control will be set to 0 by the ''WidgetStack''. This allows you to create radio buttons that let the user switch between multiple different widgets to occupy a certain space.
+Some examples:
+  * Multiple pages of hotcue buttons.
+  * A collapsed/expanded view of a deck: two children in a ''WidgetStack'', one with the full deck widgets and one with the collapsed deck widgets. A single ''<NextControl>'' and a ''<PushButton>'' attached to that control allows the user to toggle between the collapsed and expanded view of the deck.
+  * Tabbed UIs / Screen Sets. The entire skin could be one large ''WidgetStack'' that lets you switch the UI between different layouts.
 ======  Convert a Mixxx skin.xml into HTML  ======
-The skin.xsl file (contributed by Dave Jarvis) in the "skins" directory allows you to do XSL transform which converts a Mixxx skin.xml into HTML, to be viewed with a web browser. In plain English: it lets you preview a skin in your web browser so you don't have to restart Mixxx every time you make a change. Very useful if you're creating a skin.
+Deprecated in Mixxx 1.11
-The XSL file can be used by running xsltproc like so:
+<del>The skin.xsl file (contributed by Dave Jarvis) in the "skins" directory allows you to do XSL transform which converts a Mixxx skin.xml into HTML, to be viewed with a web browser. In plain English: it lets you preview a skin in your web browser so you don't have to restart Mixxx every time you make a change. Very useful if you're creating a skin.
+The XSL file can be used by running xsltproc like so:</del>
     xsltproc skin.xsl skin.xml > skin.html
-This is what the output looks like (plain Outline skin with no color scheme applied)
+<del>This is what the output looks like (plain Outline skin with no color scheme applied)</del>
 {{:skinning:creating_skins:mixxx1.9_xsl_skin.html.png?|}}
@@ Line 1836: / Line 2066: @@
   * [[Skin Guidelines|Mixxx Skinning Guidelines]]
   * [[Skin Color Schemes Tips and Tool]] - A "walkthrough" on creating schemes, includes a link to an online Javascript tool that will help determine correct HSVTweak values.

Mixxx Wiki

User Tools

Site Tools

Differences

Page Tools