Winamp Developer Wiki - User contributions [en]

XML GUI Objects

2012-11-12T13:58:14Z

Pjn123: /* */

==GuiObject (Global params)==
All the objects to be discussed in this chapter are GuiObjects. This means, among other things, all such objects have the same basic set of parameters which are valid for all of them. All GuiObjects are objects that live with a set of spatial coordinates within a groupdef (or layout). A button, a piece of text, a flat bitmap image, a tree of items, and an edit box would all be different kinds of GuiObjects, and all of the parameters listed here work on all of them.
* '''alpha''' - (int) An integer [0,255] specifying the alpha blend mode of the object (0 is transparent, 255 is opaque). Default is 255.
* '''activealpha''' - (int) A different alpha value [0,255] for the object in its active state.
* '''inactivealpha''' - (int) A different alpha value [0,255] for the object in its inactive state (if you set both activealpha and inactivealpha, it is meaningless to set alpha).
* '''cursor''' - (id) The id of the cursor element to be displayed when the mouse is over this object. You can also use the system cursors. A list can be found here: '''[[Wasabi Appendix: Cursors | Appendix: Cursors]]'''
* '''tooltip''' - (str) A human readable string to display as a tooltip for when the mouse is hovered over this object.
* '''move''' - (bool) Setting this flag causes any dragging of this object to actually drag the entire layout within which the object resides.
* '''renderbasetexture''' - (bool) A flag to tell the system to always use the system's base texture as the background of this object.
* '''cfgattrib''' - (str) A configattrib string assigned to this GuiObject. Here is a list of a few: '''[[Wasabi Appendix: ConfigAttrib | Appendix: ConfigAttrib]]'''
* '''visible''' - (bool) Whether or not the object should be displayed in its group or layout.
* '''x''' - (int) The X position of the object in its group or layout.
* '''y''' - (int) The Y position of the object in its group or layout.
* '''w''' - (int) The width of the object in its group or layout.
* '''h''' - (int) The height of the object in its group or layout.
* '''relatx''' - (int) This [0,2] integer determines if the X position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relaty''' - (int) This [0,2] integer determines if the Y position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relatw''' - (int) This [0,2] integer determines if the width should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relath''' - (int) This [0,2] integer determines if the height should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''fitparent''' - (bool) This parameter is used instead of x;y;w;h parameters and means that the object covers all the area of the parent object.
* '''x1''' - (int) The X position of the left edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y1''' - (int) The Y position of the top edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''x2''' - (int) The X position of the right edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y2''' - (int) The Y position of the bottom edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''anchor''' - (str) A list of one or more of the following keywords, delimited by the pipe (|) character: "top|bottom|left|right" these anchors work with x1/y1/x2/y2 positioning to fix the edge of the object its distance from the edges of the group or layout which contains it.
* '''sysmetricsx''' - (bool) This flag will cause this object to be resized by having its X position multiplied by the OS scalar coefficient.
* '''sysmetricsy''' - (bool) This flag will cause this object to be resized by having its Y position multiplied by the OS scalar coefficient.
* '''sysmetricsw''' - (bool) This flag will cause this object to be resized by having its width multiplied by the OS scalar coefficient.
* '''sysmetricsh''' - (bool) This flag will cause this object to be resized by having its height multiplied by the OS scalar coefficient.
* '''rectrgn''' - (bool) Setting this flag causes the engine to ignore the object's region for handling "mouse over object" detection and only use the bounding rectangle.
* '''regionop''' - (int) An integer enumeration [-2,1] for what kind of region-operation to perform with this object's calculated region against its parent's region. See below for more information.
* '''sysregion''' - (int) Param alias for regionop.
* '''wantfocus''' - (bool) This flag determines whether or not an object ever gets the focus at all.
* '''focusonclick''' - (bool) This flag determines whether or not an object gets the focus when clicked.
* '''taborder''' - (int) This value indicates the "tab order" of the object within the group or layout in which it resides. When the user hits the tab key, the interface focus moves to the next greater object in tab order. Objects with equal tab order will be ordered in the reverse of their insertion order in XML (last object in is first in default tab order).
* '''nodblclick''' - (bool) This flag blocks doubleclick events from being received by this object.
* '''noleftclick''' - (bool) This flag blocks left click events from being received by this object.
* '''norightclick''' - (bool) This flag blocks right click events from being received by this object.
* '''nomousemove''' - (bool) This flag blocks mouse move events from being received by this object.
* '''nocontextmenu''' - (bool) This flag blocks the main context menu from being displayed for rightclick.
* '''ghost''' - (bool) This flag causes the object to be transparent to all user interface events such that all the mouse messages pass to the object(s) visibly underneath it.
* '''notify'''(0-9) - (str) A string to be used as a parameter to the onNotify event for the object upon instantiation. The notify strings 0-9 will be sent in order.
* '''droptarget''' - (id) The id of an object to which all of this object's drag and drop events will be redirected.

==='''Appendixes'''===
*'''[[Wasabi Appendix: ConfigAttrib | Appendix: ConfigAttrib]]'''
*'''[[Wasabi Appendix: Cursors | Appendix: Cursors]]'''

==<button/> & <togglebutton/>==
The button is a simple concept in Wasabi - you push it, it activates something. It can either be used as a substrate for a script (ie: put a script and a button in the same groupdef, and you can handle complex button functionality with the script) or it can be used by itself to launch an action into the system when pressed. You can implement your own action handlers in code, but some global actions predefined to be handled by the system are also available.

* '''image''' - (id) The id of the bitmap element to display in its "normal" state.
* '''downimage''' - (id) The id of the bitmap element to display when the user is pressing down on the button.
* '''hoverimage''' - (id) The id of the bitmap element to display when the user is hovering the mouse over the button.
* '''activeimage''' - (id) The id of the bitmap element to display when the object is in its "active" state (usually only used by togglebutton, but available on the basic button object to allow the user to create extended functionality in script).
* '''text''' - (str) A string of text to be rendered on top of the button's currrent state image. In this way, you can create a single button graphic and reuse it to create internationally localizable buttons.
* '''action''' - (str) The action to fire if the button is clicked (when it enters into its downstate).
* '''param''' - (str) The param to go with the action fired if the button is clicked.
* '''borders''' - (bool) Set this flag if you want to be a styled button.
* '''style''' - (str) Set the style value if you set the borders flag, to tell wasabi what type of button style you want.
** "button_normal" "osbutton_normal" "osbutton_close" "osbutton_minimize" and "osbutton_maximize"
* '''retcode''' - (int) Specifies the "modal return code" for the button. Only valid with the "endmodal" system action.
* '''cbtarget''' - (id) The optional "component bucket target" for this button. Only valid with "cb_next" or "cb_prev" system actions. A componentbucket is another name for the thinger -- this allows you to have targetted button controls for more than one componentbucket in a user interface.
* '''action_target''' - (id) This will send the specified action only to the object whose id is listed here. The param parameter is ignored in this case and this string is sent as the param data for the action. Most objects don't understand being sent actions (this is an extended functionality), so this won't do anything in most cases.
* '''center_image''' - (bool) Setting this flag causes the image to be centered against the object rectangle. This parameter is only important when both borders and an image are specified on a single object.

Example:
<button x="50" y="10" action="VID_FS" image="vis.fs.1" hoverImage="vis.fs.2" downImage="vis.fs.3"/>
<button x="10" y="40" w="100" h="20" borders="1" style="osbutton_normal" text="Click Here"/>

==='''Appendix'''===
* '''[[Wasabi Appendix: Action List | Appendix: Action List]]'''

==<nstatesbutton/>==
The nstatesbutton is a specialized kind of togglebutton whose purpose is to cycle through a number of different visual states. The parameters beyond togglebutton that it implements are:
* '''nstates''' - (int) The number of discrete states in which the object may exist.
* '''cfgvals''' - (str) A semicolon delimited list of values to represent custom config values for the multiple states. Default is the current state number. See below.
The nstatesbutton uses special handling of the image, downimage, hoverimage, and activeimage parameters expressed by the button object (from which this object is derived). The nstatesbutton will actually append the state number to the four image parameter strings to calculate the bitmap ids to be loaded for the current object state. Remember, like most everything else in a computer, this "current state value" counts from 0 and is therefore in the range [0, nstates-1].

If the object is bound to a configuration attribute, that attribute will be set with a cfgval every time the nstatesbutton transitions to a new state. If the cfgvals parameter is not set, the attribute will simply be set with the current state value. If the cfgvals parameter is set, it will parse the string and set the config attrib with the n'th substring corresponding to the current state value.

The following snippet fully describes two nstatesbutton objects with three states each, one using full images for its visual display, one using themed Wasabi borders with three different state logos:
<elements>
<bitmap id="nimg0"/>
<bitmap id="dimg0"/>
<bitmap id="himg0"/>
<bitmap id="nimg1"/>
<bitmap id="dimg1"/>
<bitmap id="himg1"/>
<bitmap id="nimg2"/>
<bitmap id="dimg2"/>
<bitmap id="himg2"/>
<bitmap id="logo0"/>
<bitmap id="logo1"/>
<bitmap id="logo2"/>
</elements>
<groupdef id="some.random.groupdef">
<nstatesbutton id="three.freeform.states"
nstates="3" cfgvals="one;two;three"
image="nimg" downimage="dimg" hoverimage="himg"
/>
<nstatesbutton id="three.themed.states"
nstates="3" image="logo" borders="1" center_image="1"
/>
</groupdef>
If the "three.freeform.states" nstatesbutton were assigned to a configattrib, that attribute would be filled with the values "one" "two" and "three" in order. If the "three.themed.states" were instead assigned to a configattrib, it would be filled with the default values "0" "1" and "2" in order.

==<images/>==
The images object is object that displays a certain image based on the position of a slider. This object is very similar to [[Animationlayer]] except that this animation's current frame will be determined by the position of a slider. An example of implementation is the old Classic Winamp skins where the volume slider background changes colour from green to red depending on its position (0%-100%). This object is currently under development and not all sliders are supported. Currently only Volume and Panning(Balance) sliders can be used as sources.

* '''images''' - (id) A bitmap element for the array of images that will be used.
* '''source''' - (id) Id of the slider that will determine the current animation frame.
* '''imagesspacing''' - (int) The hight of each animation frame in the bitmap element. This will determine the total number of frames, (300/15=20)

Example:
<images source="volume" x="0" y="0" w="68" h="13"
images="main.volpan.volume" imagesspacing="15"/>

<images source="balance" x="73" y="0" w="38" h="13"
images="main.volpan.balance" imagesspacing="15"/>

<slider id="Volume" action="VOLUME" x="1" y="0" w="68" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

<slider id="Pan" action="PAN" x="74" y="0" w="38" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

==<PlaylistDirectory/>==
The PlaylistDirectory object is simply a list with all the saved playlist from the media library. Please remember that this object is always on top of other objects, so you'll have to hide it via maki if you dont want it to be visible. This object was introduced in Winamp 5.5(skinversion 1.3)

==<AlbumArt/>==
The AlbumArt object is a simple GuiObject that displays a picture of the album cover of the song thats playing in Winamp. Please note that if you want do something to this object in a maki script you'll have to define it as a guiobject and not as a layer.
* '''notfoundImage''' - (id) A bitmap element that used if Winamp cant find any cover for the song.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left".
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top".
* '''source''' - (str) Path+Filename of file that you want to display in this object.
* '''stretched''' - (bool) Stretch the albumart to the size of the object.

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<Winamp:Browser/>==
This is basically the browser you'll see in the Bento Winamp skin. You'll also need Winamp 5.54 (skinversion 1.34) for it to work.

- '''home''' - (str) Url for the default homepage for the browser xui.

==<browser/>==
The browser object embeds an external browser technology window (such as IE or Mozilla) into the user interface with which you can load and render HTML directly.
* '''url''' - (str) The url to be displayed.
* '''mainmb''' - (bool) Setting this flag makes this browser object the "main mini-browser" for the system.
* '''targetname''' - (str) This allows this browser object to be set as a specific HTML target.
* '''scrollbars''' - (str) An enumerated string to determine how the system should handle the embedded browser's scrollbars. See below.
Numerous interfaces in Wasabi refer to or control the "main" mini-browser. Setting the mainmb flag will cause the last browser object which processed its mainmb param to be the main. In other words, please don't set this flag on more than one object if you actually care which one is the main.
Scrollbars are important for big browser windows, but can interfere with the simple rendering of HTML content as part of a Wasabi UI. To this end, the skinner can control how the scrollbars of the embedded browser are displayed by setting the scrollbars parameter to one of the following four string values: "auto" "never" "always" or "default" - default is to allow the HTML page to specify, all others override.

==<Wasabi:Frame/>==
The Wasabi:Frame object is a themed control whose purpose is to provide a movable interface between two rectangular areas, much like the concept of an HTML frame. Here are its parameters:

* '''orientation''' - (str) One of the following four string values: "v" "vertical" "h" "horizontal" (Default is vertical).
* '''left''' - (id) The group to be instantiated in the left or top frame.
* '''right''' - (id) The group to be instantiated in the right or bottom frame.
* '''top''' - (id) The group to be instantiated in the left or top frame.
* '''bottom''' - (id) The group to be instantiated in the right or bottom frame.
* '''from''' - (str) One of the following string values: "l" "left" "t" "top" or "r" "right" "b" "bottom" (Default is left).
* '''width''' - (int) How many pixels from the chosen edge to start.
* '''height''' - (int) How many pixels from the chosen edge to start.
* '''resizable''' - (bool) Set this flag to allow the user to change the position of the framedivider. Default is to allow it to be resizable.
* '''maxwidth''' - (int) The maximum amount of pixels you are able to move the poppler if resizable.
* '''minwidth''' - (int) The minimum amount of pixels you are able to move the poppler if resizable (If you go below this value the poppler will snap to 0).
* '''vgrabber''' - (string) The centered bitmap of the Grabber.
* '''vbitmap''' - (string) The stretched bitmap of the Grabber.

In the following simple example, the "top" and "bottom" groups are displayed in a resizable frame object:
<groupdef id="top">
<text text="Top" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="bottom">
<text text="Bottom" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="both">
<Wasabi:Frame
orientation="horizontal"
top="top" bottom="bottom"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
/>
</groupdef>

==<Wasabi:CheckBox/>==
The Wasabi:Checkbox object exists only as a namespaced object because it is expected to have only a single themed appearance. The Wasabi:Checkbox object is used for both checkbox functionality and radiobutton functionality, depending up on the specification of its parameters. It consists of a combination of a togglebutton and a text object to create a single functional user interface object.
* '''text''' - (str) The text to display as part of the checkbox.
* '''radioid''' - (id) If the button is to be used as part of a radio group, specify id of the parent Wasabi:RadioGroup object here.
* '''radioval''' - (int) If the button is to be used as part of a radio group, specify its unique integer value here.
* '''action''' - (str) see button.
* '''param''' - (str) see button.
* '''action_target''' - (id) see button.
As with togglebutton, this is a very useful object for binding to a configuration attribute. It is very popular in preferences interfaces. If the object has a value for radioval, that will be the value set into the attribute if the object is activated.

==<Wasabi:DropDownList/>==
The Wasabi:DropDownList is a themed dialog object. It may be statically filled via a parameter or dynamically through script or by binding it to a text feed from code. A Wasabi:DropDownList object may be bound to an integer configuration attribute.
* '''items''' - (str) A semicolon delimited list of items to be displayed in the dropdown area.
* '''feed''' - (id) The id of a text feed to provide a semicolon delimited list of items to be displayed in the dropdown area.
* '''select''' - (int) Specifies an item to be selected.
* '''listheight''' - (int) Allows the skinner to specify the height of the dropdown area in pixels.
* '''maxitems''' - (int) Allows the skinner to specify the max height of the dropdown area in lines of text. If the dropdown area has fewer lines of text than this value when this value is set, the dropdown area is sized to show no more than is needed.

==<Wasabi:ComboBox/>==
The Wasabi:ComboBox is a special type of object which combines dropdownlist functionality with an edit field as well. It has the same parameters as Wasabi:DropDownList.

==<Wasabi:HistoryEditBox/>==
The Wasabi:HistoryEditBox is an even more specialized version of this object family, its only purpose is to remember the last 64 items of text typed into it. It has one extra parameter over Wasabi:DropDownList:
* '''navbuttons''' - (bool) Setting this flag will include the navigation buttons on the object. Default is to have the buttons.

==<componentbucket/>==
The componentbucket is a fancy name for the Thinger. More precisely, in Winamp3, the "Thinger Window" is a window which implements a very simple horizontal componentbucket. The object itself may be instantiated horizontally or vertically and the scrolling of the display within it should be controlled by button objects using "cb_next" and "cb_prev" action parameters and setting the cbtarget parameter to this object. The object has the following parameters:
* '''leftmargin''' - (int) The number of extra pixels to pad the left (or top) edge of the total component bucket scrolling display.
* '''rightmargin''' - (int) The number of extra pixels to pad the right (or bottom) edge of the total component bucket scrolling display.
* '''spacing''' - (int) The number of extra pixels to place between each bucket icon.
* '''vertical''' - (bool) Whether or not the display should scroll vertically or horizontally. Default is horizontal.
A simple "thinger group" follows:
<groupdef id="some.thinger.group.thing">
<button id="mythinger.up" x="0" y="0"
h="20" w="0" relatw="1"
image="mythinger.up.normal"
hoverimage="mythinger.up.hover"
downimage="mythinger.up.down"
action="CB_PREV" cbtarget="mythinger"
/>
<button id="mythinger.down" x="0" y="-20"
h="20" w="0" relatw="1" relaty="1"
image="mythinger.down.normal"
hoverimage="mythinger.down.hover"
downimage="mythinger.down.down"
action="CB_NEXT" cbtarget="mythinger"
/>
<componentbucket id="mythinger" vertical="1" x="0" y="20" w="0" h="-40" relath="1"/>
</groupdef>

==<customobject/>==
The customobject is a useful tool for temporarily instantiating a group into a user interface. It has only one parameter:
groupid - (id) Instantiate the specified group into my defined area.
By finding your customobject in script and simply calling setXmlParam on it to give it new values for groupid, you can switch between the instantiation of multiple groups in a single user interface space.

==<edit/> & <Wasabi:EditBox/>==
The edit control is, as you might guess, a text entry field. Some versions of Wasabi currently embed an OS edit control into the rectangular area defined by this object. This embedded control will not blend properly with the rest of the skin's painting, it will always paint on top of everything else. Keep this in mind when developing skins for widest compatibility.
* '''text''' - (str) Set the text in the edit field to this value.
* '''action''' - (str) Will accept the string "mb_url" to cause this edit box to automatically send its value as an url to the main minibrowser.
* '''multiline''' - (bool) Determines if the box is a single or multiple line input style.
* '''vscroll''' - (bool) Causes the edit window to have a vertical scroller. Default is off.
* '''autohscroll''' - (bool) Causes the horizontal area to scroll if necessary. Default is on.
* '''autoenter''' - (bool) Causes the system to automatically send a "done" event when the user stops typing past a certain timeout. Default is off.
* '''password''' - (bool) Causes the echoed characters to be single marks for password purposes. Default is off.
An edit object may be bound to a string configuration attribute.

Here's the definition of Wasabi:EditBox:
<groupdef
id="wasabi.edit" h="20"
inherit_group="wasabi.objectframe.group"
xuitag="Wasabi:EditBox" embed_xui="wasabi.edit.box"
>
<edit id="wasabi.edit.box" x="1" y="1" w="-2" h="-2" relatw="1" relath="1"/>
</groupdef>

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<group/>==
Groups are instantiated by using the group tag. Groups, when instantiated within a layout or some other groupdef, take the standard GuiObject params in order to define the group's instantiated size and properties, and then all of the contents of the group will be instantiated within the space it defines. At instantiation, a group will express a specified boundary rectangle and, thus, the positions of objects within it depending upon relative, proportional, or design coordinate systems may then be calculated.

To specify which groupdef to instantiate, set the id parameter of the group tag to the id of the desired groupdef. The instantiation of each group can be so customized, however, group instantiates also may be assigned their own custom id to allow each instantiate to be found by code or script:
* '''id''' (id) - The groupdef to be instantiated.
* '''instance_id''' (str) - A new id value with which to be able find this particular instantiate.

The following snippet will create two instantiates of the source group, with one specially customized (in the assumption that the "specialchild.maki" script will be handling the fact one is going to be special) :
<groupdef id="child">
<layer image="childimg" x="0" y="0" w="0" h="0" relatw="0" relath="0"/>
</groupdef>
<groupdef id="parent">
<group id="child" x="0" y="0" w="0" relatw="0" h="90"/>
<group id="child" instance_id="special"
notify="This is a special notification for this obj."
x="0" y="90" w="0" relatw="0" h="-90" relath="1"/>
<script file="specialchild.maki"/>
</groupdef>

==<grouplist/>==
A grouplist is, oddly enough, an object whose purpose is to accept and display a list of multiple groups. For instance, Wasabi's popup menu is a grouplist. A grouplist is expected to be filled in script, and it has no interesting parameters.

==<layer/>==
In Wasabi, the layer is analogous to the same-named object in photoshop. It is simply a nice bitmap graphic to be displayed in the user interface (with the standard alpha and region effects available to all guiobject derived objects, based by default on the properties of the bitmap element it houses). Here are its parameters:
* '''image''' - (id) The id of the bitmap element to be used for display.
* '''inactiveimage''' - (id) A secondary id to be displayed if this guiobject is set to "inactive" status.
* '''region''' - (id) The id of a different bitmap element to use as the source of this object's region.
* '''tile''' - (bool) Setting this flag will tile the image if the rectangular size of the layer is different than the rectangular size of the bitmap. The default is to stretch.
* '''resize''' - (str) A specific string enumerating which direction one should allow the resizing of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''scale''' - (str) A specific string enumerating which direction one should allow the scaling of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''dblclickaction''' - (str) The string of an action to be sent into the system if this object is doubleclicked within its region.
The resize and scale parameters transform the simple layer graphic into interactive gui objects in the system by enabling them to be dragged by the user to resize or change the scale of the parent layout. The eight possible values for these parameters are "top" "left" "right" "bottom" "topleft" "topright" "bottomleft" and "bottomright." If both resize and scale are set on a single layer, the object will act as a resizer by default but as a scaler if the ALT key is held down.

==<animatedlayer/>==
An animatedlayer is a series of frames of sprite animation displayed in the GUI. The frames of animation are specified in the bitmap element which is given in the image parameter to this object. The animation is expected to be a specific progression of frames of a fixed size, also to be specified via parameters on the object. Each frame of animation will have its own region. The animatedlayer object inherits directly from the layer object, so all of the above parameters are valid, along with these specific to animation:
* '''frameheight''' - (int) The height in pixels of each cell of animation. If frameheight is set, the animation will be assumed to be a vertical strip of cells in the given bitmap.
* '''framewidth''' - (int) The width in pixels of each cell of animation. If framewidth is set, the animation will be assumed to be a horizontal strip of cells in the given bitmap.
* '''elementframes''' - (int) The number of total frames of animation. If this value is set, the animation will be assumed to be comprised of multiple bitmap elements whose ids are resolved by using the value of the image parameter as a printf-compatible formatting string with a single integer parameter. See below.
* '''start''' - (int) The frame index which should be used as the beginning frame of the animation. Default is the first frame of the defined animation list.
* '''end''' - (int) The frame index which should be used as the terminating frame of the animation. Default is the last frame of the defined animation list.
* '''speed''' - (int) The delay in ms between each frame, on average. Default is 200 ms.
* '''realtime''' - (bool) Setting this flag will force-redraw the animation area the moment the new frame is meant to be seen. Default behaviour is to wait for and go along with the other invalidations from the rest of the UI on the main thread's draw loop. Expect use of this flag to have a high impact on system performance on slower machines. In other words, don't use it unless you know what you're doing.
* '''autoreplay''' - (bool) Setting this flag will cause the animation to repeat to the beginning frame once it has displayed the terminating frame of animation. Default is ON.
* '''autoplay''' - (bool) Setting this flag will cause the animation to begin playing the moment it is loaded into the user interface. Default is OFF. See below.
* '''debug''' - (bool) Setting this flag will cause the system to draw the current frame number of the animation on top of the animation graphics, for, as you might guess, debug purposes.

You must note that animations are usually meant to be "triggered" through script, as too many live animations happily blitting their way through a deep and complex user interface using lots of alpha blending, et al, can cause significant performance bottlenecks on slow computers (especially if your users aren't expecting your application to be eating all of the machine resources). With this in mind, if you just create an animated layer and drop it into a skin, it will not begin animating unless you set the autoplay parameter.

There are three different ways to present animation frames to this object. The frames may either all be concatenated into a vertical or horizontal "filmstrip" style bitmap element -- in which case the height or width of each animation cell (respectively) should be set with the frameheight or framewidth parameter.
The third way to give this object its animation frames is more complex and consists of loading multiple bitmap elements with each bitmap representing one frame of animation. This is done by first setting the elementframes parameter with the number of frames to be loaded, then by using a special formatting string as the image parameter. For those familiar with the printf function, when the elementframes parameter is set, that integer will be run in a for loop and the image name will be used as the formatting string to a printf function that takes only the current integer in the for loop as a parameter.
For those unfamiliar with printf, this will seem a bit confusing. Somewhere in the string you pass to the image parameter, you should have the two characters %d, and these characters will be replaced by the character representation of the number as it loads bitmap elements. If you want to have 0-loaded prefix characters (for instance "01-09" instead of "1-9"), you can place %02d into your image parameter, and if there aren't enough characters in the number to make up 2 full digits, the number will be left-padded with the zero character. You can just as easily use any number of padding characters as well.
I highly suspect this all still makes little sense, so let me give you a simplified example (missing important parameters) to show three different animated layers each loading three sets of differently named bitmaps:
<elements>
<bitmap id="bmp1"/>
<bitmap id="bmp2"/>
<bitmap id="bmp3"/>
<bitmap id="bmp01img"/>
<bitmap id="bmp02img"/>
<bitmap id="bmp03img"/>
<bitmap id="b00001mp"/>
<bitmap id="b00002mp"/>
<bitmap id="b00003mp"/>
</elements>
<groupdef id="whatever">
<animatedlayer image="bmp%d" elementframes="3"/>
<animatedlayer image="bmp%02dimg" elementframes="3"/>
<animatedlayer image="b%05dmp" elementframes="3"/>
</groupdef>

==<layoutstatus/>==
The layoutstatus implements the small statusbar that can be found at the bottom of many of the default normal layouts which can contain status text, appcmds buttons, and a proportionally completed progress bar. The two parameters to this object control what appcmds will be allowed in the status bar:
* '''exclude''' - (str) A semicolon delimited list of names of appcmds which should not be shown by this control.
* '''include_only''' - (str) A semicolon delimited list of names of appcmds which will be the only appcmds allowed to be shown by this control.
For the most part, these layoutstatus objects are only controllable from code.

==<list/>==
The list object is similar but not identical to the Win32 list common control. It is an optionally multicolumnar list whose purpose is to display multiple pieces of information per horizontal row. It may be filled directly by encoding the contents in the XML, by attaching the object to a proper text feed, or by calling methods on the object from script. The parameters for this object are:
* '''items''' - (str) A properly delimited string of data used to fill the list. See below.
* '''multiselect''' - (bool) This flag, when set, allows the user to select multiple items in the list. Default is to allow multiselect.
* '''autodeselect''' - (bool) This flag, when set, causes selection of any single item in the list to automatically deselect all other items in the list. Default is to not autodeselect.
* '''select''' - (str) The text of a list item to be selected.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''feed''' - (id) The id of a text feed to be used to fill this list.
* '''hoverselect''' - (bool) This flag causes list items to be selected if the user hovers over them. Default is to not hoverselect.
* '''sort''' - (bool) This flag causes the list to sort itself. Default is to not sort.
* '''selectonupdown''' - (bool) This flag causes the list to interpret the keyboard commands to mean "change my selection to the item." Default is to select on keyboard events.
* '''numcolumns''' - (int) How many columns to show. Default is one.
* '''columwidths''' - (int) A semicolon delimited list of integers specifying how to size the column widths in this list. See below.
* '''columnlabels''' - (str) A semicolon delimited list of strings to be used as the multiple column labels.
The list object depends upon being fed numerous strings with proper syntax in order to properly generate and populate a complex list display. The syntax for the items parameter (which is the same syntax as the feed must provide) is to delimit each full row in the list with the ';' semicolon character and to delimit each column entry per row with the ',' character. The columnwidths and columnlabels also require a semicolon (';') delimited list of data, one entry per column. Note that if -1 is given as a width, those columns will be of dynamic width and split up the leftover pixels among themselves. The default is one column with no labels and a width of -1.

Here is a sample list object with 3 rows and 3 columns:
<list id="three.by.three"
items="row1,text,1;row2,moretext,2;row3,stilltext,3"
numcolumns="3" columnwidths="50,-1,50"
multiselect="0" autodeselect="1"
/>

==<mouseredir/>==
This object simply redirects all mouse events from its region to the target object specified in the parameter:
* '''target''' - (id) The target object to get mouse events.
This is useful for when some objects get overlapped by nonfunctional graphics when laying out complex interfaces.

==<Wasabi:RadioGroup/>==
The Wasabi:RadioGroup object is an invisible object whose purpose is to centralize the functionality of multiple Wasabi:CheckBox objects instantiated in radiobutton mode. The radioid params on the Wasabi:CheckBox instantiates should give the id of one of these Wasabi:RadioGroup objects. It has no unique parameters. Here is a snippet of simple radiobutton functionality:
<Wasabi:RadioGroup id="enableddisabled"/>
<Wasabi:CheckBox x="50" y="110" w="60"
text="Enabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="1"
/>
<Wasabi:CheckBox x="-125" y="110" w="62" relatx="1"
text="Disabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="0"
/>

==<rect/>==
A nice flat rectangle. It may be either filled or hollow, and if hollow you may specify only some edges drawn. Here are its parameters:
* '''color''' - (id) The id of a color element, or an comma delimited integer triplet RGB value. Default is "255,00,255" (an ugly color to remind you to set it).
* '''filled''' - (bool) This flag causes the entire rectangular area to be filled with color. Default is to not be filled.
* '''edges''' - (str) A pipe ("|") delimited set of one or all of the following: "left" "right" "top" "bottom" Default is all, ie: "left|right|top|bottom".

==<script/>==
Scripts allow for the simple creation of UI functionality without requiring C++ code. While scripts are "compiled" into "script binaries," these script binaries are special to wasabi and, more importantly, can be run by any compatible Wasabi runtime on any OS to which Wasabi has a runtime. Scripts are bound like GuiObjects into layout or groupdef sections using the script tag and have the ability to find and modify the nearby sibling and child objects once the UI has been fully instantiated. Scripts have two important parameters:
* '''file''' - (str) The filename of the .maki file to load, relative to this xml file.
* '''param''' - (str) A string that will be available to the instance of the .maki file as an instance specific parameter.
Note that a single .maki file may be instantiated as a script object numerous times over, and each instantiation can have its own specific parameter data. Judicious use of this feature can help minimize your reliance on hardcoded strings and limited flexibility in your scripting.

==<slider/> & <Wasabi:HSlider/> & <Wasabi:VSlider/>==
The slider object consists of a background set of images, and a thumb. The thumb is constrained to move in one dimension -- horizontally or vertically, depending upon its orientation. The distance in pixels travelled by the thumb across its total distance is interpollated to produce a value between the low and high boundary integers which is assigned to any configuration attribute which may happen to be attached. Here are the parameters for slider:
* '''barleft''' - (id) The bitmap element for the left or top position of the slider.
* '''barmiddle''' - (id) The bitmap element for the middle, stretched, position of the slider.
* '''barright''' - (id) The bitmap element for the right or bottom position of the slider.
* '''thumb''' - (id) The bitmap element for the slider thumb.
* '''downthumb''' - (id) The bitmap element for the slider thumb when held by the user.
* '''hoverthumb''' - (id) The bitmap element for the slider thumb when the user's mouse is above it.
* '''orientation''' - (str) Either "v" or "vertical" to make the slider vertical, otherwise it will be horizontal.
* '''low''' - (int) Set the low-value boundary. Default is 0.
* '''high''' - (int) Set the high-value boundary. Default is 255.

==<snappoint/>==
The snappoint is an invisible point that will attract other snappoint objects with the same id in any other layout and make them want to dock, like little magnets. These objects have only the following subset of guiobject XML parameters:
* '''id''' - (id) All snappoint objects with the same id will snap to each other. Different ids ignore each other.
* '''x''' - (int) The x position of the snappoint, see: guiobject.
* '''y''' - (int) The y position of the snappoint, see: guiobject.
* '''relatx''' - (int) The horizontal coordinate space of the snappoint, see: guiobject.
* '''relaty''' - (int) The vertical coordinate space of the snappoint, see: guiobject.

==<Wasabi:TabSheet/>==
The Wasabi:TabSheet object contains multiple group instances within it and allows the user to switch between the display of those groups by the ability to click on a list of tab buttons at the top of the rectangular area of the Wasabi:TabSheet. The name parameter of each groupdef is displayed as the text in the tab which corresponds to it. Here are the Wasabi:TabSheet parameters:
* '''windowtype''' - (str) A windowtype string which will instantiate one of every groupdef with the same windowtype and every window class registered with a window creation service to include this windowtype.
* '''children''' - (id) A semicolon delimited list of groupdef ids to also be instantiated as children of this tabsheet.
* '''type''' - (int) There are two different themed display styles for Wasabi:TabSheet. One is with multiple tabs (sheet style), one is with a single button on top that will popup a menu with all the possible tab choices (sidecar style). The Default is sheet style, which is a value of -2. Any other value besides -2 will give you sidecar style.
* '''content_margin_top''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_left''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_right''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_bottom''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.

==<text/> & <Wasabi:Text/>==
The text object is for using the system to render some text in the font of your choice.
Since Winamp 5.5 (skinversion 1.3) text objects can have multiple lines. For a new line use this "/n"

* '''display''' - (str) Either a specific system display string or the string identifier of a text feed. Setting this value will override the text parameter. See below.
* '''ticker''' - (bool) Setting this flag causes the object to scroll left and right if the text does not fit the rectangular area of the text object.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''text''' - (str) A static string to be displayed.
* '''default''' - (str) A parameter alias for text.
* '''font''' - (id) The id of a bitmapfont or truetypefont element. If no element with that id can be found, the OS will be asked for a font with that name instead.
* '''fontsize''' - (int) The size to render the chosen font.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left."
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top."
* '''color''' - (int) The comma delimited RGB color of the text.
* '''shadowcolor''' - (int) The comma delimited RGB color for underrendered shadow text.
* '''shadowx''' - (int) The x offset of the shadowrender.
* '''shadowy''' - (int) The y offset of the shadowrender.
* '''timeroffstyle''' - (int) How to display an empty timer: "0" = " : ", "1" = "00:00", and "2"="" (if one is displaying time)
* '''timecolonwidth''' - (int) How many extra pixels wider or smaller should the colon be when displaying time. Default is -1.
* '''nograb''' - (bool) Setting this flag will cause the text object to ignore left button down messages. Default is off.
* '''showlen''' - (bool) Setting this flag will cause the text display to be appended with the length in minutes and seconds of the current song. Default is off.
* '''forcefixed''' - (bool) Force the system to attempt to render the display string with fixed-width font spacing.
* '''forceupcase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forceuppercase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forcelocase''' - (bool) Force the system to make the display string all lowercase before display.
* '''forcelowercase''' - (bool) Force the system to make the display string all lowercase before display.
* '''bold''' - (bool) Render the display string in bold.
* '''wrap''' - (bool) Setting this flag will cause the text to wrap in its rectangular space. Default is off.
* '''dblclickaction''' - (str) A string in the form "SWITCH;layout" where layout is the id of a layout in this object's parent container. No other actions function on this object. This action is deprecated.
* '''offsetx''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
* '''offsety''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
"SONGNAME" - The name string of the currently playing song (from metadb).
"SONGINFO" - The full info string of the currently playing song (from metadb).
"SONGARTIST" - The artist string of the currently playing song (from metadb).
"SONGTITLE" - The title string of the currently playing song (from metadb).
"SONGALBUM" - The album string of the currently playing song (from metadb).
"SONGLENGTH" - The length string of the currently playing song (from metadb).
"TIME" - The length string of the currently playing song.
"TIMEELAPSED" - The elapsed time string of the currently playing song.
"TIMEREMAINING" - The time remaining string of the currently playing song.
"COMPONENTBUCKET" - The id of the componentbucket (thinger) item the mousecursor is currently hovering above.
"SONGBITRATE" - The bitrate string of the currently playing song (from metadb).
"SONGSAMPLERATE" - The sample string of the currently playing song (from metadb).

*** Broken Action (Winamp 5) ***
"NORMALIZER:STATUS" - The current status of the audio normalizer.

Example:
<text x="81" y="11" w="25" h="21" antialias="0" text="Read This" align="center" color="0,0,0" bold="1"/>

==<Wasabi:TitleBox/>==
The Wasabi:TitleBox object is a nice way to put a simple rectangular frame and title around your content groups. It has the following parameters:
* '''title''' - (str) The string to display in the title area. Default is to use the name parameter of the content group.
* '''content''' - (id) The id of the groupdef to instantiate as content.
* '''centered''' - (bool) Setting this flag will center the title text. Default is to not be centered (and be left justified).
* '''suffix''' - (str) A string which will be appended to the title before it is displayed. In this way, if you instantiate multiple groups as content, each name change can still have a string appended.

==<Wasabi:Titlebar/>==
The Wasabi:TitleBar is the graphically themed bar that is placed at the top of all of the Wasabi:StandardFrame windows. It has the same parameters as the text object, which control the text display of the titlebar.

==<tree/>==
The tree object displays a hierarchical set of information with multiple items, where each item may in turn have multiple subitems. Let's examine its parameters:
* '''items''' - (str) A specially formatted string describing the hierarchical creation of the tree info. See below.
* '''feed''' - (str) The string identifier of a text feed which should provide a string in the same format as the items parameter.
* '''sorted''' - (bool) Setting this flag will cause all of the tree items to be sorted before display. Default is to sort.
* '''childtabs''' - (bool) Setting this flag will cause all tree items with children to display a tab graphic beside them. Default is to show tab graphics.
* '''expandroot''' - (bool) Setting this flag will cause all root tree items to display with their children pre-expanded. Default is to pre-expand root tree items.
The syntax required to describe the hierarchy of tree items is a semicolon delimited list of objects in the form "name(list)" where name is the string to display for that tree item and list is another semicolon delimited list of objects which are the direct children of name.

The following snippet will create a tree with one root node that has three child nodes, with each child node having differing numbers of sub nodes:
<tree id="example.tree"
x="0" y="0" w="0" h="0" relatw="1" relath="1"
items="root(child1(sub1;sub2);child2;child3(sub3))"
/>

==<vis/>==
The vis object is the multistate audio visualization display. It has a multitude of parameters for how simple it is:
* '''colorallbands''' - (int) The comma delimited RGB triplet to color all the spectroscope bands.
* '''colorband1''' - (int) The comma delimited RGB triplet to color spectroscope band 1.
* '''colorband2''' - (int) The comma delimited RGB triplet to color spectroscope band 2.
* '''colorband3''' - (int) The comma delimited RGB triplet to color spectroscope band 3.
* '''colorband4''' - (int) The comma delimited RGB triplet to color spectroscope band 4.
* '''colorband5''' - (int) The comma delimited RGB triplet to color spectroscope band 5.
* '''colorband6''' - (int) The comma delimited RGB triplet to color spectroscope band 6.
* '''colorband7''' - (int) The comma delimited RGB triplet to color spectroscope band 7.
* '''colorband8''' - (int) The comma delimited RGB triplet to color spectroscope band 8.
* '''colorband9''' - (int) The comma delimited RGB triplet to color spectroscope band 9.
* '''colorband10''' - (int) The comma delimited RGB triplet to color spectroscope band 10.
* '''colorband11''' - (int) The comma delimited RGB triplet to color spectroscope band 11.
* '''colorband12''' - (int) The comma delimited RGB triplet to color spectroscope band 12.
* '''colorband13''' - (int) The comma delimited RGB triplet to color spectroscope band 13.
* '''colorband14''' - (int) The comma delimited RGB triplet to color spectroscope band 14.
* '''colorband15''' - (int) The comma delimited RGB triplet to color spectroscope band 15.
* '''colorband16''' - (int) The comma delimited RGB triplet to color spectroscope band 16.
* '''colorbandpeak''' - (int) The comma delimited RGB triplet to color the spectroscope peak line.
* '''colorallosc''' - (int) The comma delimited RGB triplet to color the whole oscilloscope.
* '''colorosc1''' - (int) The comma delimited RGB triplet to color oscilloscope section 1.
* '''colorosc2''' - (int) The comma delimited RGB triplet to color oscilloscope section 2.
* '''colorosc3''' - (int) The comma delimited RGB triplet to color oscilloscope section 3.
* '''colorosc4''' - (int) The comma delimited RGB triplet to color oscilloscope section 4.
* '''colorosc5''' - (int) The comma delimited RGB triplet to color oscilloscope section 5.
* '''channel''' - (int) One of three values for which channel to monitor: "1" is left channel, "2" is right channel, "3" is stereo. Default is stereo.
* '''fliph''' - (bool) If this flag is set, it blits the vis pixels flipped horizontally.
* '''flipv''' - (bool) If this flag is set, it blits the vis pixels flipped vertically.
* '''mode''' - (int) One of three values for which mode to display: "0" is no display, "1" is spectroscope, "2" is oscilloscope. Default is to read from a config item. When the user clicks on the vis, it will cycle between its three modes.
* '''peaks''' - (bool) Enable peaks for the spectroscope.
* '''peakfalloff''' - (int) Set the speed of the peaks fall (0-4).
* '''falloff''' - (int) Set the speed of the spectroscope fall (0-4).
* '''coloring''' - (string) Change coloring method for spectroscope ("Normal", "Fire" or "Line").
* '''bandwidth''' - (string) Change the style of the spectroscope ("thin" or "wide").
* '''oscstyle''' - (string) Change the style of the oscilloscope ("solid", "dots" or "lines").

==<eqvis/>==
The eqvis object is rather specific to media players, as it is the spline display for the eq settings in the Wasabi Media Player.
* '''colortop''' - (str) A color value or color element id for the top portion of the spline display.
* '''colormiddle''' - (str) A color value or color element id for the middle portion of the spline display.
* '''colorbottom''' - (str) A color value or color element id for the bottom portion of the spline display.
* '''colorpreamp''' - (str) A color value or color element id for the preamp bar in the spline display.

==<gradient/>==
The gradient object creates a rectangular color gradient. The available parameters are:
* '''gradient_x1''' - (float) A floating point value for the left side of the rectangle. Default is 0.0
* '''gradient_y1''' - (float) A floating point value for the top side of the rectangle. Default is 0.0
* '''gradient_x2''' - (float) A floating point value for the right side of the rectangle. Default is 1.0
* '''gradient_x1''' - (float) A floating point value for the bottom side of the rectangle. Default is 1.0
* '''points''' - (str) A complex string defining color values for at least two value points with which to build the gradients. See below.
The points syntax is a semicolon delimited list of key=value pairs where the key is a floatingpoint number representing a point in the "gradient space" and the value is an RGB triplet (assumed full alpha) or RGBA quad. For instance, the following object would create a smooth gradient between red in the top left and green at half alpha in the bottom right:
<gradient id="red.to.green"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
points="0.0=255,0,0,255;1.0=0,255,0,128"
/>

==<Wasabi:StandardFrame:Status/>==

==<Wasabi:StandardFrame:NoStatus/>==

==<Wasabi:StandardFrame:Modal/>==

==<Wasabi:StandardFrame:Static/>==
The Wasabi:StandardFrame objects are rectangular frames you can use to encapsulate your own layout contents within the currently themed standard frame. They all have the following parameters:
* '''content''' - (id) The id of the groupdef to instantiate within the Wasabi:StandardFrame.
* '''padtitleleft''' - (int) The distance in pixels to pad the title to the left.
* '''padtitleright''' - (int) The distance in pixels to pad the title to the right.
* '''shade''' - (id) The id of the layout within our container we should switch to if the titlebar is doubleclicked (ie: the id of the windowshade layout). Default is no functionality.
The Wasabi:StandardFrame:Status object has a status bar, while the Wasabi:StandardFrame:NoStatus does not. The Wasabi:StandardFrame:Static object inherits from Wasabi:StandardFrame:NoStatus and also instantiates the wasabi panel graphics. The Wasabi:StandardFrame:Modal object does all that and also removes the control menus to make a fully modal dialog frame.

==<wndholder/>==
A wndholder object, similar to a customobject, holds user interface windows based upon what param is given. The wndholder can also hold window types by guid or groupdef instantiations by id. Here are its parameters:
* '''hold''' - (id) A semicolon delimited list of guids or groupdef ids to hold.
* '''component''' - (id) A parameter alias for hold.
* '''param''' - (id) A parameter alias for hold.
* '''noshowcmdbar''' - (bool) Setting this flag will disable the Wasabi command bar.
* '''noanimatedrects''' - (bool) Setting this flag will disable animated rectangle motion.
* '''disableanimatedrects''' - (bool) A parameter alias for noanimatedrects.
* '''autoopen''' - (bool) Setting this flag will cause the object to auto open.
* '''autoclose''' - (bool) Setting this flag will cause the object to auto close.
Using a wndholder object indicates to the system that you want to be the "container of record" for the possible requested guids when they are launched by the system through, for instance, the C++ coder registering his window class with registerAutopopup(), which calls the underlying api->skinwnd_createByGuid(). The container within which this wndholder is instantiated should also be given a component parameter with the same values. This component parameter is simply a hint to Wasabi that a wndholder object that will accept that component parameter lives within the container.

==<objdirview/>==
The objdirview object displays a tree of hierarchical information to the user, based on a code concept called an Object Directory. An Object Directory is, in essence, just a container of arbitrary items so this object is merely the display of its contents. Here are its parameters:
* '''dir''' - (str) The string identifier of the objdir to which this object should connect.
* '''target''' - (id) The id of an object to which this object may direct the actions of its internal items being selected.
* '''displaytarget''' - (id) The id of a customobject which will be assigned to display the display group parameter of the currently selected objdir item.
* '''defaultdisplay''' - (id) The id of a groupdef to display inside displaytarget if no objdir items are selected.
When items in the objdirview are selected, the objdir is sent an event telling it that an item was selected. The target parameter from XML is included in the data sent in that event. However, the implemented functionality for that event is wholly at the discretion of the programmer implementing the specific objdir in question. For the QueryDir object used in Winamp3's media library, the target param is for a nearby queryline object to be told the selection is changing. Your mileage may vary with other objects.

==<Wasabi:PathPicker/>==
The Wasabi:PathPicker object is a simple object to display a text string of a directory path chosen by the user. When the user clicks on the object, a dir selection service is started, allowing the user to choose a directory path. Attach this object to a string configuration attribute and you have a simple way for users to choose directories as preferences. The Wasabi:PathPicker object has no unique parameters.

==<querydrag/>==
The querydrag object is used to create a visual "drag source" for a nearby queryresults object. The user may click and drag this object and by doing so representationally drag the text of the current query in the queryresults object (which can be dropped into a playlist editor to fill its contents with the results of that query). It has only two parameters:
* '''image''' - (id) The bitmap element to display.
* '''source''' - (id) The source queryresults object. Default is the nearest.
If no valid source can be found, this object silently fails to drag.

==<queryline/>==
The invisible queryline object is used to host a text query to be applied to a queryresults object. One possible use would be to write a script linking the text in a Wasabi:HistoryEditBox to the query parameter of a queryline. And, speaking of its parameters, here they are:
* '''querylist''' - (id) The id of the queryresults which will take the query. Default is to not connect (ie: this param is kinda sorta mandatoryish if you want anything interesting to happen).
* '''query''' - (str) The string of the query itself.
* '''auto''' - (bool) Whether or not to execute an autoquery based on the query parameter (ie: "search on the name column for this substring" instead of "run this query"). Default is to use the string directly as a query (not autoquery).

==<queryresults/>==
The queryresults object is the an invisible binding object that coordinates the filtration of the database by numerous multiple other objects. The queryline and filterlist objects eventually define a single output from the database, and this information is kept in the queryresults object. It has only one parameter:
title - (str) The human readable title for your queryresults. I have no idea why this would be important.
Magically, it seems, placing a queryresults object in the same group next to a PlaylistEditor object makes that PlaylistEditor get filled with the queryresults information. I have no idea how this can be, and sense the telltale signs of powerful dark necromancy at work, here.

XML GUI Objects

2012-11-12T13:56:53Z

Pjn123: /* */ added vis params that was intoduced for wa5.5

==GuiObject (Global params)==
All the objects to be discussed in this chapter are GuiObjects. This means, among other things, all such objects have the same basic set of parameters which are valid for all of them. All GuiObjects are objects that live with a set of spatial coordinates within a groupdef (or layout). A button, a piece of text, a flat bitmap image, a tree of items, and an edit box would all be different kinds of GuiObjects, and all of the parameters listed here work on all of them.
* '''alpha''' - (int) An integer [0,255] specifying the alpha blend mode of the object (0 is transparent, 255 is opaque). Default is 255.
* '''activealpha''' - (int) A different alpha value [0,255] for the object in its active state.
* '''inactivealpha''' - (int) A different alpha value [0,255] for the object in its inactive state (if you set both activealpha and inactivealpha, it is meaningless to set alpha).
* '''cursor''' - (id) The id of the cursor element to be displayed when the mouse is over this object. You can also use the system cursors. A list can be found here: '''[[Wasabi Appendix: Cursors | Appendix: Cursors]]'''
* '''tooltip''' - (str) A human readable string to display as a tooltip for when the mouse is hovered over this object.
* '''move''' - (bool) Setting this flag causes any dragging of this object to actually drag the entire layout within which the object resides.
* '''renderbasetexture''' - (bool) A flag to tell the system to always use the system's base texture as the background of this object.
* '''cfgattrib''' - (str) A configattrib string assigned to this GuiObject. Here is a list of a few: '''[[Wasabi Appendix: ConfigAttrib | Appendix: ConfigAttrib]]'''
* '''visible''' - (bool) Whether or not the object should be displayed in its group or layout.
* '''x''' - (int) The X position of the object in its group or layout.
* '''y''' - (int) The Y position of the object in its group or layout.
* '''w''' - (int) The width of the object in its group or layout.
* '''h''' - (int) The height of the object in its group or layout.
* '''relatx''' - (int) This [0,2] integer determines if the X position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relaty''' - (int) This [0,2] integer determines if the Y position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relatw''' - (int) This [0,2] integer determines if the width should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relath''' - (int) This [0,2] integer determines if the height should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''fitparent''' - (bool) This parameter is used instead of x;y;w;h parameters and means that the object covers all the area of the parent object.
* '''x1''' - (int) The X position of the left edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y1''' - (int) The Y position of the top edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''x2''' - (int) The X position of the right edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y2''' - (int) The Y position of the bottom edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''anchor''' - (str) A list of one or more of the following keywords, delimited by the pipe (|) character: "top|bottom|left|right" these anchors work with x1/y1/x2/y2 positioning to fix the edge of the object its distance from the edges of the group or layout which contains it.
* '''sysmetricsx''' - (bool) This flag will cause this object to be resized by having its X position multiplied by the OS scalar coefficient.
* '''sysmetricsy''' - (bool) This flag will cause this object to be resized by having its Y position multiplied by the OS scalar coefficient.
* '''sysmetricsw''' - (bool) This flag will cause this object to be resized by having its width multiplied by the OS scalar coefficient.
* '''sysmetricsh''' - (bool) This flag will cause this object to be resized by having its height multiplied by the OS scalar coefficient.
* '''rectrgn''' - (bool) Setting this flag causes the engine to ignore the object's region for handling "mouse over object" detection and only use the bounding rectangle.
* '''regionop''' - (int) An integer enumeration [-2,1] for what kind of region-operation to perform with this object's calculated region against its parent's region. See below for more information.
* '''sysregion''' - (int) Param alias for regionop.
* '''wantfocus''' - (bool) This flag determines whether or not an object ever gets the focus at all.
* '''focusonclick''' - (bool) This flag determines whether or not an object gets the focus when clicked.
* '''taborder''' - (int) This value indicates the "tab order" of the object within the group or layout in which it resides. When the user hits the tab key, the interface focus moves to the next greater object in tab order. Objects with equal tab order will be ordered in the reverse of their insertion order in XML (last object in is first in default tab order).
* '''nodblclick''' - (bool) This flag blocks doubleclick events from being received by this object.
* '''noleftclick''' - (bool) This flag blocks left click events from being received by this object.
* '''norightclick''' - (bool) This flag blocks right click events from being received by this object.
* '''nomousemove''' - (bool) This flag blocks mouse move events from being received by this object.
* '''nocontextmenu''' - (bool) This flag blocks the main context menu from being displayed for rightclick.
* '''ghost''' - (bool) This flag causes the object to be transparent to all user interface events such that all the mouse messages pass to the object(s) visibly underneath it.
* '''notify'''(0-9) - (str) A string to be used as a parameter to the onNotify event for the object upon instantiation. The notify strings 0-9 will be sent in order.
* '''droptarget''' - (id) The id of an object to which all of this object's drag and drop events will be redirected.

==='''Appendixes'''===
*'''[[Wasabi Appendix: ConfigAttrib | Appendix: ConfigAttrib]]'''
*'''[[Wasabi Appendix: Cursors | Appendix: Cursors]]'''

==<button/> & <togglebutton/>==
The button is a simple concept in Wasabi - you push it, it activates something. It can either be used as a substrate for a script (ie: put a script and a button in the same groupdef, and you can handle complex button functionality with the script) or it can be used by itself to launch an action into the system when pressed. You can implement your own action handlers in code, but some global actions predefined to be handled by the system are also available.

* '''image''' - (id) The id of the bitmap element to display in its "normal" state.
* '''downimage''' - (id) The id of the bitmap element to display when the user is pressing down on the button.
* '''hoverimage''' - (id) The id of the bitmap element to display when the user is hovering the mouse over the button.
* '''activeimage''' - (id) The id of the bitmap element to display when the object is in its "active" state (usually only used by togglebutton, but available on the basic button object to allow the user to create extended functionality in script).
* '''text''' - (str) A string of text to be rendered on top of the button's currrent state image. In this way, you can create a single button graphic and reuse it to create internationally localizable buttons.
* '''action''' - (str) The action to fire if the button is clicked (when it enters into its downstate).
* '''param''' - (str) The param to go with the action fired if the button is clicked.
* '''borders''' - (bool) Set this flag if you want to be a styled button.
* '''style''' - (str) Set the style value if you set the borders flag, to tell wasabi what type of button style you want.
** "button_normal" "osbutton_normal" "osbutton_close" "osbutton_minimize" and "osbutton_maximize"
* '''retcode''' - (int) Specifies the "modal return code" for the button. Only valid with the "endmodal" system action.
* '''cbtarget''' - (id) The optional "component bucket target" for this button. Only valid with "cb_next" or "cb_prev" system actions. A componentbucket is another name for the thinger -- this allows you to have targetted button controls for more than one componentbucket in a user interface.
* '''action_target''' - (id) This will send the specified action only to the object whose id is listed here. The param parameter is ignored in this case and this string is sent as the param data for the action. Most objects don't understand being sent actions (this is an extended functionality), so this won't do anything in most cases.
* '''center_image''' - (bool) Setting this flag causes the image to be centered against the object rectangle. This parameter is only important when both borders and an image are specified on a single object.

Example:
<button x="50" y="10" action="VID_FS" image="vis.fs.1" hoverImage="vis.fs.2" downImage="vis.fs.3"/>
<button x="10" y="40" w="100" h="20" borders="1" style="osbutton_normal" text="Click Here"/>

==='''Appendix'''===
* '''[[Wasabi Appendix: Action List | Appendix: Action List]]'''

==<nstatesbutton/>==
The nstatesbutton is a specialized kind of togglebutton whose purpose is to cycle through a number of different visual states. The parameters beyond togglebutton that it implements are:
* '''nstates''' - (int) The number of discrete states in which the object may exist.
* '''cfgvals''' - (str) A semicolon delimited list of values to represent custom config values for the multiple states. Default is the current state number. See below.
The nstatesbutton uses special handling of the image, downimage, hoverimage, and activeimage parameters expressed by the button object (from which this object is derived). The nstatesbutton will actually append the state number to the four image parameter strings to calculate the bitmap ids to be loaded for the current object state. Remember, like most everything else in a computer, this "current state value" counts from 0 and is therefore in the range [0, nstates-1].

If the object is bound to a configuration attribute, that attribute will be set with a cfgval every time the nstatesbutton transitions to a new state. If the cfgvals parameter is not set, the attribute will simply be set with the current state value. If the cfgvals parameter is set, it will parse the string and set the config attrib with the n'th substring corresponding to the current state value.

The following snippet fully describes two nstatesbutton objects with three states each, one using full images for its visual display, one using themed Wasabi borders with three different state logos:
<elements>
<bitmap id="nimg0"/>
<bitmap id="dimg0"/>
<bitmap id="himg0"/>
<bitmap id="nimg1"/>
<bitmap id="dimg1"/>
<bitmap id="himg1"/>
<bitmap id="nimg2"/>
<bitmap id="dimg2"/>
<bitmap id="himg2"/>
<bitmap id="logo0"/>
<bitmap id="logo1"/>
<bitmap id="logo2"/>
</elements>
<groupdef id="some.random.groupdef">
<nstatesbutton id="three.freeform.states"
nstates="3" cfgvals="one;two;three"
image="nimg" downimage="dimg" hoverimage="himg"
/>
<nstatesbutton id="three.themed.states"
nstates="3" image="logo" borders="1" center_image="1"
/>
</groupdef>
If the "three.freeform.states" nstatesbutton were assigned to a configattrib, that attribute would be filled with the values "one" "two" and "three" in order. If the "three.themed.states" were instead assigned to a configattrib, it would be filled with the default values "0" "1" and "2" in order.

==<images/>==
The images object is object that displays a certain image based on the position of a slider. This object is very similar to [[Animationlayer]] except that this animation's current frame will be determined by the position of a slider. An example of implementation is the old Classic Winamp skins where the volume slider background changes colour from green to red depending on its position (0%-100%). This object is currently under development and not all sliders are supported. Currently only Volume and Panning(Balance) sliders can be used as sources.

* '''images''' - (id) A bitmap element for the array of images that will be used.
* '''source''' - (id) Id of the slider that will determine the current animation frame.
* '''imagesspacing''' - (int) The hight of each animation frame in the bitmap element. This will determine the total number of frames, (300/15=20)

Example:
<images source="volume" x="0" y="0" w="68" h="13"
images="main.volpan.volume" imagesspacing="15"/>

<images source="balance" x="73" y="0" w="38" h="13"
images="main.volpan.balance" imagesspacing="15"/>

<slider id="Volume" action="VOLUME" x="1" y="0" w="68" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

<slider id="Pan" action="PAN" x="74" y="0" w="38" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

==<PlaylistDirectory/>==
The PlaylistDirectory object is simply a list with all the saved playlist from the media library. Please remember that this object is always on top of other objects, so you'll have to hide it via maki if you dont want it to be visible. This object was introduced in Winamp 5.5(skinversion 1.3)

==<AlbumArt/>==
The AlbumArt object is a simple GuiObject that displays a picture of the album cover of the song thats playing in Winamp. Please note that if you want do something to this object in a maki script you'll have to define it as a guiobject and not as a layer.
* '''notfoundImage''' - (id) A bitmap element that used if Winamp cant find any cover for the song.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left".
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top".
* '''source''' - (str) Path+Filename of file that you want to display in this object.
* '''stretched''' - (bool) Stretch the albumart to the size of the object.

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<Winamp:Browser/>==
This is basically the browser you'll see in the Bento Winamp skin. You'll also need Winamp 5.54 (skinversion 1.34) for it to work.

- '''home''' - (str) Url for the default homepage for the browser xui.

==<browser/>==
The browser object embeds an external browser technology window (such as IE or Mozilla) into the user interface with which you can load and render HTML directly.
* '''url''' - (str) The url to be displayed.
* '''mainmb''' - (bool) Setting this flag makes this browser object the "main mini-browser" for the system.
* '''targetname''' - (str) This allows this browser object to be set as a specific HTML target.
* '''scrollbars''' - (str) An enumerated string to determine how the system should handle the embedded browser's scrollbars. See below.
Numerous interfaces in Wasabi refer to or control the "main" mini-browser. Setting the mainmb flag will cause the last browser object which processed its mainmb param to be the main. In other words, please don't set this flag on more than one object if you actually care which one is the main.
Scrollbars are important for big browser windows, but can interfere with the simple rendering of HTML content as part of a Wasabi UI. To this end, the skinner can control how the scrollbars of the embedded browser are displayed by setting the scrollbars parameter to one of the following four string values: "auto" "never" "always" or "default" - default is to allow the HTML page to specify, all others override.

==<Wasabi:Frame/>==
The Wasabi:Frame object is a themed control whose purpose is to provide a movable interface between two rectangular areas, much like the concept of an HTML frame. Here are its parameters:

* '''orientation''' - (str) One of the following four string values: "v" "vertical" "h" "horizontal" (Default is vertical).
* '''left''' - (id) The group to be instantiated in the left or top frame.
* '''right''' - (id) The group to be instantiated in the right or bottom frame.
* '''top''' - (id) The group to be instantiated in the left or top frame.
* '''bottom''' - (id) The group to be instantiated in the right or bottom frame.
* '''from''' - (str) One of the following string values: "l" "left" "t" "top" or "r" "right" "b" "bottom" (Default is left).
* '''width''' - (int) How many pixels from the chosen edge to start.
* '''height''' - (int) How many pixels from the chosen edge to start.
* '''resizable''' - (bool) Set this flag to allow the user to change the position of the framedivider. Default is to allow it to be resizable.
* '''maxwidth''' - (int) The maximum amount of pixels you are able to move the poppler if resizable.
* '''minwidth''' - (int) The minimum amount of pixels you are able to move the poppler if resizable (If you go below this value the poppler will snap to 0).
* '''vgrabber''' - (string) The centered bitmap of the Grabber.
* '''vbitmap''' - (string) The stretched bitmap of the Grabber.

In the following simple example, the "top" and "bottom" groups are displayed in a resizable frame object:
<groupdef id="top">
<text text="Top" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="bottom">
<text text="Bottom" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="both">
<Wasabi:Frame
orientation="horizontal"
top="top" bottom="bottom"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
/>
</groupdef>

==<Wasabi:CheckBox/>==
The Wasabi:Checkbox object exists only as a namespaced object because it is expected to have only a single themed appearance. The Wasabi:Checkbox object is used for both checkbox functionality and radiobutton functionality, depending up on the specification of its parameters. It consists of a combination of a togglebutton and a text object to create a single functional user interface object.
* '''text''' - (str) The text to display as part of the checkbox.
* '''radioid''' - (id) If the button is to be used as part of a radio group, specify id of the parent Wasabi:RadioGroup object here.
* '''radioval''' - (int) If the button is to be used as part of a radio group, specify its unique integer value here.
* '''action''' - (str) see button.
* '''param''' - (str) see button.
* '''action_target''' - (id) see button.
As with togglebutton, this is a very useful object for binding to a configuration attribute. It is very popular in preferences interfaces. If the object has a value for radioval, that will be the value set into the attribute if the object is activated.

==<Wasabi:DropDownList/>==
The Wasabi:DropDownList is a themed dialog object. It may be statically filled via a parameter or dynamically through script or by binding it to a text feed from code. A Wasabi:DropDownList object may be bound to an integer configuration attribute.
* '''items''' - (str) A semicolon delimited list of items to be displayed in the dropdown area.
* '''feed''' - (id) The id of a text feed to provide a semicolon delimited list of items to be displayed in the dropdown area.
* '''select''' - (int) Specifies an item to be selected.
* '''listheight''' - (int) Allows the skinner to specify the height of the dropdown area in pixels.
* '''maxitems''' - (int) Allows the skinner to specify the max height of the dropdown area in lines of text. If the dropdown area has fewer lines of text than this value when this value is set, the dropdown area is sized to show no more than is needed.

==<Wasabi:ComboBox/>==
The Wasabi:ComboBox is a special type of object which combines dropdownlist functionality with an edit field as well. It has the same parameters as Wasabi:DropDownList.

==<Wasabi:HistoryEditBox/>==
The Wasabi:HistoryEditBox is an even more specialized version of this object family, its only purpose is to remember the last 64 items of text typed into it. It has one extra parameter over Wasabi:DropDownList:
* '''navbuttons''' - (bool) Setting this flag will include the navigation buttons on the object. Default is to have the buttons.

==<componentbucket/>==
The componentbucket is a fancy name for the Thinger. More precisely, in Winamp3, the "Thinger Window" is a window which implements a very simple horizontal componentbucket. The object itself may be instantiated horizontally or vertically and the scrolling of the display within it should be controlled by button objects using "cb_next" and "cb_prev" action parameters and setting the cbtarget parameter to this object. The object has the following parameters:
* '''leftmargin''' - (int) The number of extra pixels to pad the left (or top) edge of the total component bucket scrolling display.
* '''rightmargin''' - (int) The number of extra pixels to pad the right (or bottom) edge of the total component bucket scrolling display.
* '''spacing''' - (int) The number of extra pixels to place between each bucket icon.
* '''vertical''' - (bool) Whether or not the display should scroll vertically or horizontally. Default is horizontal.
A simple "thinger group" follows:
<groupdef id="some.thinger.group.thing">
<button id="mythinger.up" x="0" y="0"
h="20" w="0" relatw="1"
image="mythinger.up.normal"
hoverimage="mythinger.up.hover"
downimage="mythinger.up.down"
action="CB_PREV" cbtarget="mythinger"
/>
<button id="mythinger.down" x="0" y="-20"
h="20" w="0" relatw="1" relaty="1"
image="mythinger.down.normal"
hoverimage="mythinger.down.hover"
downimage="mythinger.down.down"
action="CB_NEXT" cbtarget="mythinger"
/>
<componentbucket id="mythinger" vertical="1" x="0" y="20" w="0" h="-40" relath="1"/>
</groupdef>

==<customobject/>==
The customobject is a useful tool for temporarily instantiating a group into a user interface. It has only one parameter:
groupid - (id) Instantiate the specified group into my defined area.
By finding your customobject in script and simply calling setXmlParam on it to give it new values for groupid, you can switch between the instantiation of multiple groups in a single user interface space.

==<edit/> & <Wasabi:EditBox/>==
The edit control is, as you might guess, a text entry field. Some versions of Wasabi currently embed an OS edit control into the rectangular area defined by this object. This embedded control will not blend properly with the rest of the skin's painting, it will always paint on top of everything else. Keep this in mind when developing skins for widest compatibility.
* '''text''' - (str) Set the text in the edit field to this value.
* '''action''' - (str) Will accept the string "mb_url" to cause this edit box to automatically send its value as an url to the main minibrowser.
* '''multiline''' - (bool) Determines if the box is a single or multiple line input style.
* '''vscroll''' - (bool) Causes the edit window to have a vertical scroller. Default is off.
* '''autohscroll''' - (bool) Causes the horizontal area to scroll if necessary. Default is on.
* '''autoenter''' - (bool) Causes the system to automatically send a "done" event when the user stops typing past a certain timeout. Default is off.
* '''password''' - (bool) Causes the echoed characters to be single marks for password purposes. Default is off.
An edit object may be bound to a string configuration attribute.

Here's the definition of Wasabi:EditBox:
<groupdef
id="wasabi.edit" h="20"
inherit_group="wasabi.objectframe.group"
xuitag="Wasabi:EditBox" embed_xui="wasabi.edit.box"
>
<edit id="wasabi.edit.box" x="1" y="1" w="-2" h="-2" relatw="1" relath="1"/>
</groupdef>

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<group/>==
Groups are instantiated by using the group tag. Groups, when instantiated within a layout or some other groupdef, take the standard GuiObject params in order to define the group's instantiated size and properties, and then all of the contents of the group will be instantiated within the space it defines. At instantiation, a group will express a specified boundary rectangle and, thus, the positions of objects within it depending upon relative, proportional, or design coordinate systems may then be calculated.

To specify which groupdef to instantiate, set the id parameter of the group tag to the id of the desired groupdef. The instantiation of each group can be so customized, however, group instantiates also may be assigned their own custom id to allow each instantiate to be found by code or script:
* '''id''' (id) - The groupdef to be instantiated.
* '''instance_id''' (str) - A new id value with which to be able find this particular instantiate.

The following snippet will create two instantiates of the source group, with one specially customized (in the assumption that the "specialchild.maki" script will be handling the fact one is going to be special) :
<groupdef id="child">
<layer image="childimg" x="0" y="0" w="0" h="0" relatw="0" relath="0"/>
</groupdef>
<groupdef id="parent">
<group id="child" x="0" y="0" w="0" relatw="0" h="90"/>
<group id="child" instance_id="special"
notify="This is a special notification for this obj."
x="0" y="90" w="0" relatw="0" h="-90" relath="1"/>
<script file="specialchild.maki"/>
</groupdef>

==<grouplist/>==
A grouplist is, oddly enough, an object whose purpose is to accept and display a list of multiple groups. For instance, Wasabi's popup menu is a grouplist. A grouplist is expected to be filled in script, and it has no interesting parameters.

==<layer/>==
In Wasabi, the layer is analogous to the same-named object in photoshop. It is simply a nice bitmap graphic to be displayed in the user interface (with the standard alpha and region effects available to all guiobject derived objects, based by default on the properties of the bitmap element it houses). Here are its parameters:
* '''image''' - (id) The id of the bitmap element to be used for display.
* '''inactiveimage''' - (id) A secondary id to be displayed if this guiobject is set to "inactive" status.
* '''region''' - (id) The id of a different bitmap element to use as the source of this object's region.
* '''tile''' - (bool) Setting this flag will tile the image if the rectangular size of the layer is different than the rectangular size of the bitmap. The default is to stretch.
* '''resize''' - (str) A specific string enumerating which direction one should allow the resizing of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''scale''' - (str) A specific string enumerating which direction one should allow the scaling of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''dblclickaction''' - (str) The string of an action to be sent into the system if this object is doubleclicked within its region.
The resize and scale parameters transform the simple layer graphic into interactive gui objects in the system by enabling them to be dragged by the user to resize or change the scale of the parent layout. The eight possible values for these parameters are "top" "left" "right" "bottom" "topleft" "topright" "bottomleft" and "bottomright." If both resize and scale are set on a single layer, the object will act as a resizer by default but as a scaler if the ALT key is held down.

==<animatedlayer/>==
An animatedlayer is a series of frames of sprite animation displayed in the GUI. The frames of animation are specified in the bitmap element which is given in the image parameter to this object. The animation is expected to be a specific progression of frames of a fixed size, also to be specified via parameters on the object. Each frame of animation will have its own region. The animatedlayer object inherits directly from the layer object, so all of the above parameters are valid, along with these specific to animation:
* '''frameheight''' - (int) The height in pixels of each cell of animation. If frameheight is set, the animation will be assumed to be a vertical strip of cells in the given bitmap.
* '''framewidth''' - (int) The width in pixels of each cell of animation. If framewidth is set, the animation will be assumed to be a horizontal strip of cells in the given bitmap.
* '''elementframes''' - (int) The number of total frames of animation. If this value is set, the animation will be assumed to be comprised of multiple bitmap elements whose ids are resolved by using the value of the image parameter as a printf-compatible formatting string with a single integer parameter. See below.
* '''start''' - (int) The frame index which should be used as the beginning frame of the animation. Default is the first frame of the defined animation list.
* '''end''' - (int) The frame index which should be used as the terminating frame of the animation. Default is the last frame of the defined animation list.
* '''speed''' - (int) The delay in ms between each frame, on average. Default is 200 ms.
* '''realtime''' - (bool) Setting this flag will force-redraw the animation area the moment the new frame is meant to be seen. Default behaviour is to wait for and go along with the other invalidations from the rest of the UI on the main thread's draw loop. Expect use of this flag to have a high impact on system performance on slower machines. In other words, don't use it unless you know what you're doing.
* '''autoreplay''' - (bool) Setting this flag will cause the animation to repeat to the beginning frame once it has displayed the terminating frame of animation. Default is ON.
* '''autoplay''' - (bool) Setting this flag will cause the animation to begin playing the moment it is loaded into the user interface. Default is OFF. See below.
* '''debug''' - (bool) Setting this flag will cause the system to draw the current frame number of the animation on top of the animation graphics, for, as you might guess, debug purposes.

You must note that animations are usually meant to be "triggered" through script, as too many live animations happily blitting their way through a deep and complex user interface using lots of alpha blending, et al, can cause significant performance bottlenecks on slow computers (especially if your users aren't expecting your application to be eating all of the machine resources). With this in mind, if you just create an animated layer and drop it into a skin, it will not begin animating unless you set the autoplay parameter.

There are three different ways to present animation frames to this object. The frames may either all be concatenated into a vertical or horizontal "filmstrip" style bitmap element -- in which case the height or width of each animation cell (respectively) should be set with the frameheight or framewidth parameter.
The third way to give this object its animation frames is more complex and consists of loading multiple bitmap elements with each bitmap representing one frame of animation. This is done by first setting the elementframes parameter with the number of frames to be loaded, then by using a special formatting string as the image parameter. For those familiar with the printf function, when the elementframes parameter is set, that integer will be run in a for loop and the image name will be used as the formatting string to a printf function that takes only the current integer in the for loop as a parameter.
For those unfamiliar with printf, this will seem a bit confusing. Somewhere in the string you pass to the image parameter, you should have the two characters %d, and these characters will be replaced by the character representation of the number as it loads bitmap elements. If you want to have 0-loaded prefix characters (for instance "01-09" instead of "1-9"), you can place %02d into your image parameter, and if there aren't enough characters in the number to make up 2 full digits, the number will be left-padded with the zero character. You can just as easily use any number of padding characters as well.
I highly suspect this all still makes little sense, so let me give you a simplified example (missing important parameters) to show three different animated layers each loading three sets of differently named bitmaps:
<elements>
<bitmap id="bmp1"/>
<bitmap id="bmp2"/>
<bitmap id="bmp3"/>
<bitmap id="bmp01img"/>
<bitmap id="bmp02img"/>
<bitmap id="bmp03img"/>
<bitmap id="b00001mp"/>
<bitmap id="b00002mp"/>
<bitmap id="b00003mp"/>
</elements>
<groupdef id="whatever">
<animatedlayer image="bmp%d" elementframes="3"/>
<animatedlayer image="bmp%02dimg" elementframes="3"/>
<animatedlayer image="b%05dmp" elementframes="3"/>
</groupdef>

==<layoutstatus/>==
The layoutstatus implements the small statusbar that can be found at the bottom of many of the default normal layouts which can contain status text, appcmds buttons, and a proportionally completed progress bar. The two parameters to this object control what appcmds will be allowed in the status bar:
* '''exclude''' - (str) A semicolon delimited list of names of appcmds which should not be shown by this control.
* '''include_only''' - (str) A semicolon delimited list of names of appcmds which will be the only appcmds allowed to be shown by this control.
For the most part, these layoutstatus objects are only controllable from code.

==<list/>==
The list object is similar but not identical to the Win32 list common control. It is an optionally multicolumnar list whose purpose is to display multiple pieces of information per horizontal row. It may be filled directly by encoding the contents in the XML, by attaching the object to a proper text feed, or by calling methods on the object from script. The parameters for this object are:
* '''items''' - (str) A properly delimited string of data used to fill the list. See below.
* '''multiselect''' - (bool) This flag, when set, allows the user to select multiple items in the list. Default is to allow multiselect.
* '''autodeselect''' - (bool) This flag, when set, causes selection of any single item in the list to automatically deselect all other items in the list. Default is to not autodeselect.
* '''select''' - (str) The text of a list item to be selected.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''feed''' - (id) The id of a text feed to be used to fill this list.
* '''hoverselect''' - (bool) This flag causes list items to be selected if the user hovers over them. Default is to not hoverselect.
* '''sort''' - (bool) This flag causes the list to sort itself. Default is to not sort.
* '''selectonupdown''' - (bool) This flag causes the list to interpret the keyboard commands to mean "change my selection to the item." Default is to select on keyboard events.
* '''numcolumns''' - (int) How many columns to show. Default is one.
* '''columwidths''' - (int) A semicolon delimited list of integers specifying how to size the column widths in this list. See below.
* '''columnlabels''' - (str) A semicolon delimited list of strings to be used as the multiple column labels.
The list object depends upon being fed numerous strings with proper syntax in order to properly generate and populate a complex list display. The syntax for the items parameter (which is the same syntax as the feed must provide) is to delimit each full row in the list with the ';' semicolon character and to delimit each column entry per row with the ',' character. The columnwidths and columnlabels also require a semicolon (';') delimited list of data, one entry per column. Note that if -1 is given as a width, those columns will be of dynamic width and split up the leftover pixels among themselves. The default is one column with no labels and a width of -1.

Here is a sample list object with 3 rows and 3 columns:
<list id="three.by.three"
items="row1,text,1;row2,moretext,2;row3,stilltext,3"
numcolumns="3" columnwidths="50,-1,50"
multiselect="0" autodeselect="1"
/>

==<mouseredir/>==
This object simply redirects all mouse events from its region to the target object specified in the parameter:
* '''target''' - (id) The target object to get mouse events.
This is useful for when some objects get overlapped by nonfunctional graphics when laying out complex interfaces.

==<Wasabi:RadioGroup/>==
The Wasabi:RadioGroup object is an invisible object whose purpose is to centralize the functionality of multiple Wasabi:CheckBox objects instantiated in radiobutton mode. The radioid params on the Wasabi:CheckBox instantiates should give the id of one of these Wasabi:RadioGroup objects. It has no unique parameters. Here is a snippet of simple radiobutton functionality:
<Wasabi:RadioGroup id="enableddisabled"/>
<Wasabi:CheckBox x="50" y="110" w="60"
text="Enabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="1"
/>
<Wasabi:CheckBox x="-125" y="110" w="62" relatx="1"
text="Disabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="0"
/>

==<rect/>==
A nice flat rectangle. It may be either filled or hollow, and if hollow you may specify only some edges drawn. Here are its parameters:
* '''color''' - (id) The id of a color element, or an comma delimited integer triplet RGB value. Default is "255,00,255" (an ugly color to remind you to set it).
* '''filled''' - (bool) This flag causes the entire rectangular area to be filled with color. Default is to not be filled.
* '''edges''' - (str) A pipe ("|") delimited set of one or all of the following: "left" "right" "top" "bottom" Default is all, ie: "left|right|top|bottom".

==<script/>==
Scripts allow for the simple creation of UI functionality without requiring C++ code. While scripts are "compiled" into "script binaries," these script binaries are special to wasabi and, more importantly, can be run by any compatible Wasabi runtime on any OS to which Wasabi has a runtime. Scripts are bound like GuiObjects into layout or groupdef sections using the script tag and have the ability to find and modify the nearby sibling and child objects once the UI has been fully instantiated. Scripts have two important parameters:
* '''file''' - (str) The filename of the .maki file to load, relative to this xml file.
* '''param''' - (str) A string that will be available to the instance of the .maki file as an instance specific parameter.
Note that a single .maki file may be instantiated as a script object numerous times over, and each instantiation can have its own specific parameter data. Judicious use of this feature can help minimize your reliance on hardcoded strings and limited flexibility in your scripting.

==<slider/> & <Wasabi:HSlider/> & <Wasabi:VSlider/>==
The slider object consists of a background set of images, and a thumb. The thumb is constrained to move in one dimension -- horizontally or vertically, depending upon its orientation. The distance in pixels travelled by the thumb across its total distance is interpollated to produce a value between the low and high boundary integers which is assigned to any configuration attribute which may happen to be attached. Here are the parameters for slider:
* '''barleft''' - (id) The bitmap element for the left or top position of the slider.
* '''barmiddle''' - (id) The bitmap element for the middle, stretched, position of the slider.
* '''barright''' - (id) The bitmap element for the right or bottom position of the slider.
* '''thumb''' - (id) The bitmap element for the slider thumb.
* '''downthumb''' - (id) The bitmap element for the slider thumb when held by the user.
* '''hoverthumb''' - (id) The bitmap element for the slider thumb when the user's mouse is above it.
* '''orientation''' - (str) Either "v" or "vertical" to make the slider vertical, otherwise it will be horizontal.
* '''low''' - (int) Set the low-value boundary. Default is 0.
* '''high''' - (int) Set the high-value boundary. Default is 255.

==<snappoint/>==
The snappoint is an invisible point that will attract other snappoint objects with the same id in any other layout and make them want to dock, like little magnets. These objects have only the following subset of guiobject XML parameters:
* '''id''' - (id) All snappoint objects with the same id will snap to each other. Different ids ignore each other.
* '''x''' - (int) The x position of the snappoint, see: guiobject.
* '''y''' - (int) The y position of the snappoint, see: guiobject.
* '''relatx''' - (int) The horizontal coordinate space of the snappoint, see: guiobject.
* '''relaty''' - (int) The vertical coordinate space of the snappoint, see: guiobject.

==<Wasabi:TabSheet/>==
The Wasabi:TabSheet object contains multiple group instances within it and allows the user to switch between the display of those groups by the ability to click on a list of tab buttons at the top of the rectangular area of the Wasabi:TabSheet. The name parameter of each groupdef is displayed as the text in the tab which corresponds to it. Here are the Wasabi:TabSheet parameters:
* '''windowtype''' - (str) A windowtype string which will instantiate one of every groupdef with the same windowtype and every window class registered with a window creation service to include this windowtype.
* '''children''' - (id) A semicolon delimited list of groupdef ids to also be instantiated as children of this tabsheet.
* '''type''' - (int) There are two different themed display styles for Wasabi:TabSheet. One is with multiple tabs (sheet style), one is with a single button on top that will popup a menu with all the possible tab choices (sidecar style). The Default is sheet style, which is a value of -2. Any other value besides -2 will give you sidecar style.
* '''content_margin_top''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_left''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_right''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_bottom''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.

==<text/> & <Wasabi:Text/>==
The text object is for using the system to render some text in the font of your choice.
Since Winamp 5.5 (skinversion 1.3) text objects can have multiple lines. For a new line use this "/n"

* '''display''' - (str) Either a specific system display string or the string identifier of a text feed. Setting this value will override the text parameter. See below.
* '''ticker''' - (bool) Setting this flag causes the object to scroll left and right if the text does not fit the rectangular area of the text object.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''text''' - (str) A static string to be displayed.
* '''default''' - (str) A parameter alias for text.
* '''font''' - (id) The id of a bitmapfont or truetypefont element. If no element with that id can be found, the OS will be asked for a font with that name instead.
* '''fontsize''' - (int) The size to render the chosen font.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left."
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top."
* '''color''' - (int) The comma delimited RGB color of the text.
* '''shadowcolor''' - (int) The comma delimited RGB color for underrendered shadow text.
* '''shadowx''' - (int) The x offset of the shadowrender.
* '''shadowy''' - (int) The y offset of the shadowrender.
* '''timeroffstyle''' - (int) How to display an empty timer: "0" = " : ", "1" = "00:00", and "2"="" (if one is displaying time)
* '''timecolonwidth''' - (int) How many extra pixels wider or smaller should the colon be when displaying time. Default is -1.
* '''nograb''' - (bool) Setting this flag will cause the text object to ignore left button down messages. Default is off.
* '''showlen''' - (bool) Setting this flag will cause the text display to be appended with the length in minutes and seconds of the current song. Default is off.
* '''forcefixed''' - (bool) Force the system to attempt to render the display string with fixed-width font spacing.
* '''forceupcase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forceuppercase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forcelocase''' - (bool) Force the system to make the display string all lowercase before display.
* '''forcelowercase''' - (bool) Force the system to make the display string all lowercase before display.
* '''bold''' - (bool) Render the display string in bold.
* '''wrap''' - (bool) Setting this flag will cause the text to wrap in its rectangular space. Default is off.
* '''dblclickaction''' - (str) A string in the form "SWITCH;layout" where layout is the id of a layout in this object's parent container. No other actions function on this object. This action is deprecated.
* '''offsetx''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
* '''offsety''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
"SONGNAME" - The name string of the currently playing song (from metadb).
"SONGINFO" - The full info string of the currently playing song (from metadb).
"SONGARTIST" - The artist string of the currently playing song (from metadb).
"SONGTITLE" - The title string of the currently playing song (from metadb).
"SONGALBUM" - The album string of the currently playing song (from metadb).
"SONGLENGTH" - The length string of the currently playing song (from metadb).
"TIME" - The length string of the currently playing song.
"TIMEELAPSED" - The elapsed time string of the currently playing song.
"TIMEREMAINING" - The time remaining string of the currently playing song.
"COMPONENTBUCKET" - The id of the componentbucket (thinger) item the mousecursor is currently hovering above.
"SONGBITRATE" - The bitrate string of the currently playing song (from metadb).
"SONGSAMPLERATE" - The sample string of the currently playing song (from metadb).

*** Broken Action (Winamp 5) ***
"NORMALIZER:STATUS" - The current status of the audio normalizer.

Example:
<text x="81" y="11" w="25" h="21" antialias="0" text="Read This" align="center" color="0,0,0" bold="1"/>

==<Wasabi:TitleBox/>==
The Wasabi:TitleBox object is a nice way to put a simple rectangular frame and title around your content groups. It has the following parameters:
* '''title''' - (str) The string to display in the title area. Default is to use the name parameter of the content group.
* '''content''' - (id) The id of the groupdef to instantiate as content.
* '''centered''' - (bool) Setting this flag will center the title text. Default is to not be centered (and be left justified).
* '''suffix''' - (str) A string which will be appended to the title before it is displayed. In this way, if you instantiate multiple groups as content, each name change can still have a string appended.

==<Wasabi:Titlebar/>==
The Wasabi:TitleBar is the graphically themed bar that is placed at the top of all of the Wasabi:StandardFrame windows. It has the same parameters as the text object, which control the text display of the titlebar.

==<tree/>==
The tree object displays a hierarchical set of information with multiple items, where each item may in turn have multiple subitems. Let's examine its parameters:
* '''items''' - (str) A specially formatted string describing the hierarchical creation of the tree info. See below.
* '''feed''' - (str) The string identifier of a text feed which should provide a string in the same format as the items parameter.
* '''sorted''' - (bool) Setting this flag will cause all of the tree items to be sorted before display. Default is to sort.
* '''childtabs''' - (bool) Setting this flag will cause all tree items with children to display a tab graphic beside them. Default is to show tab graphics.
* '''expandroot''' - (bool) Setting this flag will cause all root tree items to display with their children pre-expanded. Default is to pre-expand root tree items.
The syntax required to describe the hierarchy of tree items is a semicolon delimited list of objects in the form "name(list)" where name is the string to display for that tree item and list is another semicolon delimited list of objects which are the direct children of name.

The following snippet will create a tree with one root node that has three child nodes, with each child node having differing numbers of sub nodes:
<tree id="example.tree"
x="0" y="0" w="0" h="0" relatw="1" relath="1"
items="root(child1(sub1;sub2);child2;child3(sub3))"
/>

==<vis/>==
The vis object is the multistate audio visualization display. It has a multitude of parameters for how simple it is:
* '''colorallbands''' - (int) The comma delimited RGB triplet to color all the spectroscope bands.
* '''colorband1''' - (int) The comma delimited RGB triplet to color spectroscope band 1.
* '''colorband2''' - (int) The comma delimited RGB triplet to color spectroscope band 2.
* '''colorband3''' - (int) The comma delimited RGB triplet to color spectroscope band 3.
* '''colorband4''' - (int) The comma delimited RGB triplet to color spectroscope band 4.
* '''colorband5''' - (int) The comma delimited RGB triplet to color spectroscope band 5.
* '''colorband6''' - (int) The comma delimited RGB triplet to color spectroscope band 6.
* '''colorband7''' - (int) The comma delimited RGB triplet to color spectroscope band 7.
* '''colorband8''' - (int) The comma delimited RGB triplet to color spectroscope band 8.
* '''colorband9''' - (int) The comma delimited RGB triplet to color spectroscope band 9.
* '''colorband10''' - (int) The comma delimited RGB triplet to color spectroscope band 10.
* '''colorband11''' - (int) The comma delimited RGB triplet to color spectroscope band 11.
* '''colorband12''' - (int) The comma delimited RGB triplet to color spectroscope band 12.
* '''colorband13''' - (int) The comma delimited RGB triplet to color spectroscope band 13.
* '''colorband14''' - (int) The comma delimited RGB triplet to color spectroscope band 14.
* '''colorband15''' - (int) The comma delimited RGB triplet to color spectroscope band 15.
* '''colorband16''' - (int) The comma delimited RGB triplet to color spectroscope band 16.
* '''colorbandpeak''' - (int) The comma delimited RGB triplet to color the spectroscope peak line.
* '''colorallosc''' - (int) The comma delimited RGB triplet to color the whole oscilloscope.
* '''colorosc1''' - (int) The comma delimited RGB triplet to color oscilloscope section 1.
* '''colorosc2''' - (int) The comma delimited RGB triplet to color oscilloscope section 2.
* '''colorosc3''' - (int) The comma delimited RGB triplet to color oscilloscope section 3.
* '''colorosc4''' - (int) The comma delimited RGB triplet to color oscilloscope section 4.
* '''colorosc5''' - (int) The comma delimited RGB triplet to color oscilloscope section 5.
* '''channel''' - (int) One of three values for which channel to monitor: "1" is left channel, "2" is right channel, "3" is stereo. Default is stereo.
* '''fliph''' - (bool) If this flag is set, it blits the vis pixels flipped horizontally.
* '''flipv''' - (bool) If this flag is set, it blits the vis pixels flipped vertically.
* '''mode''' - (int) One of three values for which mode to display: "0" is no display, "1" is spectroscope, "2" is oscilloscope. Default is to read from a config item.
When the user clicks on the vis, it will cycle between its three modes.
* '''peaks''' - (bool) Enable peaks for the spectroscope.
* '''peakfalloff''' - (int) Set the speed of the peaks fall (0-4).
* '''falloff''' - (int) Set the speed of the spectroscope fall
* '''coloring''' - (string) Change coloring method for spectroscope ("Normal", "Fire" or "Line").
* '''bandwidth''' - (string) Change the style of the spectroscope ("thin" or "wide").
* '''oscstyle''' - (string) Change the style of the oscilloscope ("solid", "dots" or "lines").

==<eqvis/>==
The eqvis object is rather specific to media players, as it is the spline display for the eq settings in the Wasabi Media Player.
* '''colortop''' - (str) A color value or color element id for the top portion of the spline display.
* '''colormiddle''' - (str) A color value or color element id for the middle portion of the spline display.
* '''colorbottom''' - (str) A color value or color element id for the bottom portion of the spline display.
* '''colorpreamp''' - (str) A color value or color element id for the preamp bar in the spline display.

==<gradient/>==
The gradient object creates a rectangular color gradient. The available parameters are:
* '''gradient_x1''' - (float) A floating point value for the left side of the rectangle. Default is 0.0
* '''gradient_y1''' - (float) A floating point value for the top side of the rectangle. Default is 0.0
* '''gradient_x2''' - (float) A floating point value for the right side of the rectangle. Default is 1.0
* '''gradient_x1''' - (float) A floating point value for the bottom side of the rectangle. Default is 1.0
* '''points''' - (str) A complex string defining color values for at least two value points with which to build the gradients. See below.
The points syntax is a semicolon delimited list of key=value pairs where the key is a floatingpoint number representing a point in the "gradient space" and the value is an RGB triplet (assumed full alpha) or RGBA quad. For instance, the following object would create a smooth gradient between red in the top left and green at half alpha in the bottom right:
<gradient id="red.to.green"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
points="0.0=255,0,0,255;1.0=0,255,0,128"
/>

==<Wasabi:StandardFrame:Status/>==

==<Wasabi:StandardFrame:NoStatus/>==

==<Wasabi:StandardFrame:Modal/>==

==<Wasabi:StandardFrame:Static/>==
The Wasabi:StandardFrame objects are rectangular frames you can use to encapsulate your own layout contents within the currently themed standard frame. They all have the following parameters:
* '''content''' - (id) The id of the groupdef to instantiate within the Wasabi:StandardFrame.
* '''padtitleleft''' - (int) The distance in pixels to pad the title to the left.
* '''padtitleright''' - (int) The distance in pixels to pad the title to the right.
* '''shade''' - (id) The id of the layout within our container we should switch to if the titlebar is doubleclicked (ie: the id of the windowshade layout). Default is no functionality.
The Wasabi:StandardFrame:Status object has a status bar, while the Wasabi:StandardFrame:NoStatus does not. The Wasabi:StandardFrame:Static object inherits from Wasabi:StandardFrame:NoStatus and also instantiates the wasabi panel graphics. The Wasabi:StandardFrame:Modal object does all that and also removes the control menus to make a fully modal dialog frame.

==<wndholder/>==
A wndholder object, similar to a customobject, holds user interface windows based upon what param is given. The wndholder can also hold window types by guid or groupdef instantiations by id. Here are its parameters:
* '''hold''' - (id) A semicolon delimited list of guids or groupdef ids to hold.
* '''component''' - (id) A parameter alias for hold.
* '''param''' - (id) A parameter alias for hold.
* '''noshowcmdbar''' - (bool) Setting this flag will disable the Wasabi command bar.
* '''noanimatedrects''' - (bool) Setting this flag will disable animated rectangle motion.
* '''disableanimatedrects''' - (bool) A parameter alias for noanimatedrects.
* '''autoopen''' - (bool) Setting this flag will cause the object to auto open.
* '''autoclose''' - (bool) Setting this flag will cause the object to auto close.
Using a wndholder object indicates to the system that you want to be the "container of record" for the possible requested guids when they are launched by the system through, for instance, the C++ coder registering his window class with registerAutopopup(), which calls the underlying api->skinwnd_createByGuid(). The container within which this wndholder is instantiated should also be given a component parameter with the same values. This component parameter is simply a hint to Wasabi that a wndholder object that will accept that component parameter lives within the container.

==<objdirview/>==
The objdirview object displays a tree of hierarchical information to the user, based on a code concept called an Object Directory. An Object Directory is, in essence, just a container of arbitrary items so this object is merely the display of its contents. Here are its parameters:
* '''dir''' - (str) The string identifier of the objdir to which this object should connect.
* '''target''' - (id) The id of an object to which this object may direct the actions of its internal items being selected.
* '''displaytarget''' - (id) The id of a customobject which will be assigned to display the display group parameter of the currently selected objdir item.
* '''defaultdisplay''' - (id) The id of a groupdef to display inside displaytarget if no objdir items are selected.
When items in the objdirview are selected, the objdir is sent an event telling it that an item was selected. The target parameter from XML is included in the data sent in that event. However, the implemented functionality for that event is wholly at the discretion of the programmer implementing the specific objdir in question. For the QueryDir object used in Winamp3's media library, the target param is for a nearby queryline object to be told the selection is changing. Your mileage may vary with other objects.

==<Wasabi:PathPicker/>==
The Wasabi:PathPicker object is a simple object to display a text string of a directory path chosen by the user. When the user clicks on the object, a dir selection service is started, allowing the user to choose a directory path. Attach this object to a string configuration attribute and you have a simple way for users to choose directories as preferences. The Wasabi:PathPicker object has no unique parameters.

==<querydrag/>==
The querydrag object is used to create a visual "drag source" for a nearby queryresults object. The user may click and drag this object and by doing so representationally drag the text of the current query in the queryresults object (which can be dropped into a playlist editor to fill its contents with the results of that query). It has only two parameters:
* '''image''' - (id) The bitmap element to display.
* '''source''' - (id) The source queryresults object. Default is the nearest.
If no valid source can be found, this object silently fails to drag.

==<queryline/>==
The invisible queryline object is used to host a text query to be applied to a queryresults object. One possible use would be to write a script linking the text in a Wasabi:HistoryEditBox to the query parameter of a queryline. And, speaking of its parameters, here they are:
* '''querylist''' - (id) The id of the queryresults which will take the query. Default is to not connect (ie: this param is kinda sorta mandatoryish if you want anything interesting to happen).
* '''query''' - (str) The string of the query itself.
* '''auto''' - (bool) Whether or not to execute an autoquery based on the query parameter (ie: "search on the name column for this substring" instead of "run this query"). Default is to use the string directly as a query (not autoquery).

==<queryresults/>==
The queryresults object is the an invisible binding object that coordinates the filtration of the database by numerous multiple other objects. The queryline and filterlist objects eventually define a single output from the database, and this information is kept in the queryresults object. It has only one parameter:
title - (str) The human readable title for your queryresults. I have no idea why this would be important.
Magically, it seems, placing a queryresults object in the same group next to a PlaylistEditor object makes that PlaylistEditor get filled with the queryresults information. I have no idea how this can be, and sense the telltale signs of powerful dark necromancy at work, here.

XML Containing objects

2012-10-09T20:18:22Z

Pjn123: /* */ Added ontop

== Description ==
These are the objects, that contain other objects.

==<WasabiXML></WasabiXML>==
This object contains the whole skin.
* '''version''' - (int) The version of the Freeform Plugin Core the skin is made for. If the Plugin version is less than written, the warning "The skin is too new" will appear. Othervise, the Plugin will read the code according to this value, using backward compability.

==<container></container>==
* '''id''' - (id) The coder-oriented name of the container. This value is used when appealing to this object.
* '''name''' - (str) The human-oriented name of the container, or the "title" of the "window." This value is used by some other GuiObjects, notably the Wasabi:TitleBar object, to be displayed in the system. It does not display automatically. The special string ":componenttitle" will query the contents of the container to find the first windowholder and replace the name assigned to this container with the name of the object held by the windowholder (if any).
* '''default_x''' - (int) The default x position in screen coordinates.
* '''default_y''' - (int) The default y position in screen coordinates.
* '''default_w''' - (int) The default width in scalable units (1 == 1 pixel, if scale==100%)
* '''default_h''' - (int) The default height in scalable units (1 == 1 pixel, if scale==100%)
* '''default_visible''' - (bool) If true, show this container the first time the skin is ever shown (the system will track this value for the user, thereafter).
* '''component''' - (str) If this parameter is set with a guid or groupid, it indicates to the system that inside this component there lives a wndholder object with the same parameter.
* '''dynamic''' - (bool) If true, this means that when the skin is parsed, the container is not created. "Dynamic" containers are meant to be instantiated at runtime by the coder and act as a template to hold any type of content within them. Winamp3 uses dynamic containers to, for instance, provide outer frames for component windows, message boxes, etc. A dynamic container is instantiated when the coder requests it to be, and deleted when the layout is closed. If false (ie: not dynamic), this container will always be instantiated in the system at runtime, and the coder may only "hide" and "show" it.
* '''primaryComponent''' - (String) Defines the primary comonent that should be hold in this container. Useful for SUI Skins in combination with primaryComponent="guid:player" in order to recieve keyboard/mouse actions in our main window.
* '''canclose''' - (bool) Defines if the container can be closed (true) or not (false).
* '''nofocusapponclose''' - (bool) If this Container is closed the main application (Winamp) can be restored from minimized state (true) or not (false).

==<layout></layout>==
* '''id''' - (id) The coder-oriented name of the layout. This value is used when appealing to this object.
* '''owner''' - (str) This parameter has the special syntax of "componentid;layoutid" and will cause the OS window this layout represents to always match the current visible state (minimized, restored, etc) of the owning layout.
* '''lockto''' - (str) This parameter has the same syntax as owner, but causes the relative positioning of this window to be locked to the position of the owning layout. If it moves, the owned layout moves along with it.
* '''alpha''' - (int) This 0-255 integer parameter represents the flat alpha to be applied to the entirety of the layout.
* '''desktopalpha''' - (bool) If true, this flag indicates to Wasabi that this layout would like to be drawn with desktop alpha, if that feature is enabled in the system.
* '''indesktop''' - (bool) If true, causes the OS window to be a child of the desktop (under all other OS windows).
* '''linkwidth''' - (str) This string parameter should be the layoutid of a sibling to this layout inside its container. Any changes to the width of this layout will be applied to the linked layout. One use is for a "windowshade" mode that automatically matches width to the "normal" layout.
* '''linkheight''' - (str) Same as linkwidth, but for height. Will allow you to make "vertical" windowshades, should you so desire.
* '''taskbar''' - (bool) This flag causes the layout to have its own taskbar button. (NOT YET IMPLEMENTED!)
* '''move''' - (bool) Can be set to "0" to disable user moving. Useful for maximized mode.
* '''resizable''' - (bool) Can be set to "0" to disable user resizing
* '''scalable''' - (bool) Can be set to "0" to disable user scaling (experimental)
* '''ontop''' - (bool) Force layout to be always visible

==<groupdef></groupdef>==
Groups are the workhorse of user interface design in Wasabi. Groups allow one to define and place in coordinate space a logical collection of GuiObjects that will live within a given rectangle (the boundary of the Group). They are the display-cases in which one keeps one's interface items tidily available to the user. The XML params specific to all groupdefs are:

* '''background''' - (str) The id of a bitmap element to be stretched as the background of the group (all of the group contents draw on top of this bitmap)
* '''drawbackground''' - (bool) Whether or not to actually draw the background pixels (useful for using the alpha channel of a background bitmap as the drawing region for the group).
* '''default_w''' - (int) The default width for this group, if the group instantiation does not specify what the width should be.
* '''default_h''' - (int) The default height for this group, if the group instantiation does not specify what the height should be.
* '''maximum_w''' - (int) The maximum width for this group, beyond which Wasabi will not allow the group to be resized.
* '''maximum_h''' - (int) The maximum height for this group, beyond which Wasabi will not allow the group to be resized.
* '''minimum_w''' - (int) The minimum width for this group, beyond which Wasabi will not allow the group to be resized.
* '''minimum_h''' - (int) The minimum height for this group, beyond which Wasabi will not allow the group to be resized.
* '''propagatesize''' - (bool) Sends this group's default/minimum/maximum size parameters to the layout which contains the group. ie: if my minimum_h is 200 and my containing layout's minimum_h is 100 and I have my propagatesize flag set, my layout will now have a * '''minimum_h''' of 200, etc.
* '''lockminmax''' - (bool) Locks the minimum and maximum size values to the default size value. Makes the group "nonresizable."
* '''design_w''' - (int) The "design width" of this group. The "design" based sizes allow for a conditional layout of GuiObjects within them. These parameters are used in conjunction with the x1/x2/y1/y2/anchor coordinate system, which will be documented with GuiObjects.
* '''design_h''' - (int) The "design height" of this group.
* '''name''' - (str) A human readable string which will be the "Name" of this group, used by various objects in the system when referring the user to this groupdef. For instance, the TabSheet GuiObject contains one group for each displayed tab, and the name parameter of each group is the string displayed within each corresponding tab.
* '''autowidthsource''' - (str) The id of an object contained within this group from which this group should set its width. For instance, the groupdef that defines the contents of the Checkbox GuiObject sets its width based on the size of the text object within it, which itself will be sized at instantiation depending upon the text placed within that particular text object (See: $/studio/studio/Wacs/wasabi.system/ui/guiobjects/xml/checkbox/checkbox.xml).
* '''autoheightsource''' - (str) The id of an object contained within the group from which this group should set its height.
* '''register_autopopup''' - (bool) This flag causes this group to be listed in the Windows submenu of the Wasabi MainMenu context menu. Its name parameter is displayed as the menu item. If that menu item is then selected, this group will be launched as a layout (in other words, in its own window). This is quite useful for the quick debugging of groupdef objects.
* '''windowtype''' - (str) Specifying a groupdef as being a certain windowtype causes the group to automatically be instantiated and added to the collection specified by that windowtype. See below for more information and a list of what windowtypes currently exist in the system.
* '''inherit_content''' - (bool) This parameter is used to be able to override the contents of a group already defined in the system. To go back to the "blueprints" analogy, this is like finding someone's original blueprints and editing them. The id of this groupdef should match the id of the other groupdef that you wish to modify. See below for examples and more information.
* '''inherit_group''' - (str) This parameter is used to be able to copy the contents of a group already defined in the system as the starting point for one's own group definition. To go back to the "blueprints" analogy, this is like photocopying someone else's blueprints as a starting point for one's own. The param is the id of the other groupdef you wish to inherit.
* '''inherit_params''' - (bool) Specifies whether or not to inherit the params of the inherited group as well as its content. Only meaningful with a valid inherit_group param or if overriding a previous groupdef.
* '''xuitag''' - (str) Specifies that this group definition will create a new Xui object into the system with the given tag string. See Extending Wasabi: Creating XuiObjects for more information.
* '''embed_xui''' - (str) Specifies the id of a contained object to which any XML parameters not valid for a group sent to the instantiation of the group (or the xuitag string) should be forwarded. See Extending Wasabi: Creating XuiObjects for more information.
In addition to these parameters, all parameters that apply to a GuiObject may also be placed on a groupdef. This sets them up as default parameters for when the group is used in a group tag, which the skinner may of course override.

Please note, as referenced earlier, the layout object is simply a special type of groupdef object, so all of these parameters also apply to it as well.

Groups are inherently reusable objects, as well. In a process that object oriented programmers should be well familiar with, Groups are first Defined to contain their particular contents and then can be later Instantiated (multiple times, if so desired) within a user interface.

For the non-programmers among our readers, consider the following analogy: Definition consists of making a set of instructions for how to create something, like the blueprints for a house. Instantiation is the process of creating that something based upon its definition: in this case, giving the blueprints to a General Contractor and waiting the requisite indeterminate number of weeks to have them build that house to your specification. Definition makes a concept. Instantiation converts it into a thing.

Now imagine the vast expanse of cookie-cutter housing tracts that have proliferated across American suburbia in the past decades. In a single tract, only a small handful of different blueprints were Defined for building the hundreds of homes to be found, and each Instance of those designs has been personalized by its denizens (subject to the CC&R's for that neighborhood, of course).

In the same way, you may define a Group to contain a specific set of objects with a specific set of parameters (your "instructions"), and then use ("instantiate") that Group over and over again in your user interface with minor tweaks to each usage ("instance").

The XML tag Wasabi uses for Group Definition is the groupdef tag, while the tag used for Group Instantiation is the group tag. This section will deal specifically with the particularities of Group Definition and the parameters of the groupdef tag, while the group tag will be documented in its own section in the next chapter (along with everything else that is meant to live inside of a groupdef tag). Because the simplest form of a groupdef is rather boring, we'll first cover the parameters for groupdefs and then return to creating sample XML snippets somewhat more complicated and useful than the following (which defines "my group" as merely an instantiation of the contents of "othergroup")
<groupdef id="mygroup">
<group id="othergroup"/>
</groupdef>

Creating Modern Skins

2008-11-24T00:03:25Z

Pjn123: Undo revision 1200 by Zoubaeir (Talk)

==Description/Overview of Modern Skinning==

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

== XML ==
Here is your reference guide for XML coding.
* '''[[XML Reference]]'''

==Tools Needed to Build a Modern Skin==
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

==Individual Components==

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

===Downloadable PDF===
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

XML GUI Objects

2008-09-26T10:48:40Z

Pjn123:

==GuiObject (Global params)==
All the objects to be discussed in this chapter are GuiObjects. This means, among other things, all such objects have the same basic set of parameters which are valid for all of them. All GuiObjects are objects that live with a set of spatial coordinates within a groupdef (or layout). A button, a piece of text, a flat bitmap image, a tree of items, and an edit box would all be different kinds of GuiObjects, and all of the parameters listed here work on all of them.
* '''alpha''' - (int) An integer [0,255] specifying the alpha blend mode of the object (0 is transparent, 255 is opaque). Default is 255.
* '''activealpha''' - (int) A different alpha value [0,255] for the object in its active state.
* '''inactivealpha''' - (int) A different alpha value [0,255] for the object in its inactive state (if you set both activealpha and inactivealpha, it is meaningless to set alpha).
* '''cursor''' - (id) The id of the cursor element to be displayed when the mouse is over this object. You can also use the system cursors. A list can be found here: '''[[Wasabi Appendix: Cursors | Appendix: Cursors]]'''
* '''tooltip''' - (str) A human readable string to display as a tooltip for when the mouse is hovered over this object.
* '''move''' - (bool) Setting this flag causes any dragging of this object to actually drag the entire layout within which the object resides.
* '''renderbasetexture''' - (bool) A flag to tell the system to always use the system's base texture as the background of this object.
* '''cfgattrib''' - (str) A configattrib string assigned to this GuiObject. Here is a list of a few: '''[[Wasabi Appendix: ConfigAttrib | Appendix: ConfigAttrib]]'''
* '''visible''' - (bool) Whether or not the object should be displayed in its group or layout.
* '''x''' - (int) The X position of the object in its group or layout.
* '''y''' - (int) The Y position of the object in its group or layout.
* '''w''' - (int) The width of the object in its group or layout.
* '''h''' - (int) The height of the object in its group or layout.
* '''relatx''' - (int) This [0,2] integer determines if the X position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relaty''' - (int) This [0,2] integer determines if the Y position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relatw''' - (int) This [0,2] integer determines if the width should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relath''' - (int) This [0,2] integer determines if the height should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''fitparent''' - (bool) This parameter is used instead of x;y;w;h parameters and means that the object covers all the area of the parent object.
* '''x1''' - (int) The X position of the left edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y1''' - (int) The Y position of the top edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''x2''' - (int) The X position of the right edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y2''' - (int) The Y position of the bottom edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''anchor''' - (str) A list of one or more of the following keywords, delimited by the pipe (|) character: "top|bottom|left|right" these anchors work with x1/y1/x2/y2 positioning to fix the edge of the object its distance from the edges of the group or layout which contains it.
* '''sysmetricsx''' - (bool) This flag will cause this object to be resized by having its X position multiplied by the OS scalar coefficient.
* '''sysmetricsy''' - (bool) This flag will cause this object to be resized by having its Y position multiplied by the OS scalar coefficient.
* '''sysmetricsw''' - (bool) This flag will cause this object to be resized by having its width multiplied by the OS scalar coefficient.
* '''sysmetricsh''' - (bool) This flag will cause this object to be resized by having its height multiplied by the OS scalar coefficient.
* '''rectrgn''' - (bool) Setting this flag causes the engine to ignore the object's region for handling "mouse over object" detection and only use the bounding rectangle.
* '''regionop''' - (int) An integer enumeration [-2,1] for what kind of region-operation to perform with this object's calculated region against its parent's region. See below for more information.
* '''sysregion''' - (int) Param alias for regionop.
* '''wantfocus''' - (bool) This flag determines whether or not an object ever gets the focus at all.
* '''focusonclick''' - (bool) This flag determines whether or not an object gets the focus when clicked.
* '''taborder''' - (int) This value indicates the "tab order" of the object within the group or layout in which it resides. When the user hits the tab key, the interface focus moves to the next greater object in tab order. Objects with equal tab order will be ordered in the reverse of their insertion order in XML (last object in is first in default tab order).
* '''nodblclick''' - (bool) This flag blocks doubleclick events from being received by this object.
* '''noleftclick''' - (bool) This flag blocks left click events from being received by this object.
* '''norightclick''' - (bool) This flag blocks right click events from being received by this object.
* '''nomousemove''' - (bool) This flag blocks mouse move events from being received by this object.
* '''nocontextmenu''' - (bool) This flag blocks the main context menu from being displayed for rightclick.
* '''ghost''' - (bool) This flag causes the object to be transparent to all user interface events such that all the mouse messages pass to the object(s) visibly underneath it.
* '''notify'''(0-9) - (str) A string to be used as a parameter to the onNotify event for the object upon instantiation. The notify strings 0-9 will be sent in order.
* '''droptarget''' - (id) The id of an object to which all of this object's drag and drop events will be redirected.

==='''Appendixes'''===
*'''[[Wasabi Appendix: ConfigAttrib | Appendix: ConfigAttrib]]'''
*'''[[Wasabi Appendix: Cursors | Appendix: Cursors]]'''

==<button/> & <togglebutton/>==
The button is a simple concept in Wasabi - you push it, it activates something. It can either be used as a substrate for a script (ie: put a script and a button in the same groupdef, and you can handle complex button functionality with the script) or it can be used by itself to launch an action into the system when pressed. You can implement your own action handlers in code, but some global actions predefined to be handled by the system are also available.

* '''image''' - (id) The id of the bitmap element to display in its "normal" state.
* '''downimage''' - (id) The id of the bitmap element to display when the user is pressing down on the button.
* '''hoverimage''' - (id) The id of the bitmap element to display when the user is hovering the mouse over the button.
* '''activeimage''' - (id) The id of the bitmap element to display when the object is in its "active" state (usually only used by togglebutton, but available on the basic button object to allow the user to create extended functionality in script).
* '''text''' - (str) A string of text to be rendered on top of the button's currrent state image. In this way, you can create a single button graphic and reuse it to create internationally localizable buttons.
* '''action''' - (str) The action to fire if the button is clicked (when it enters into its downstate).
* '''param''' - (str) The param to go with the action fired if the button is clicked.
* '''borders''' - (bool) Set this flag if you want to be a styled button.
* '''style''' - (str) Set the style value if you set the borders flag, to tell wasabi what type of button style you want.
** "button_normal" "osbutton_normal" "osbutton_close" "osbutton_minimize" and "osbutton_maximize"
* '''retcode''' - (int) Specifies the "modal return code" for the button. Only valid with the "endmodal" system action.
* '''cbtarget''' - (id) The optional "component bucket target" for this button. Only valid with "cb_next" or "cb_prev" system actions. A componentbucket is another name for the thinger -- this allows you to have targetted button controls for more than one componentbucket in a user interface.
* '''action_target''' - (id) This will send the specified action only to the object whose id is listed here. The param parameter is ignored in this case and this string is sent as the param data for the action. Most objects don't understand being sent actions (this is an extended functionality), so this won't do anything in most cases.
* '''center_image''' - (bool) Setting this flag causes the image to be centered against the object rectangle. This parameter is only important when both borders and an image are specified on a single object.

Example:
<button x="50" y="10" action="VID_FS" image="vis.fs.1" hoverImage="vis.fs.2" downImage="vis.fs.3"/>
<button x="10" y="40" w="100" h="20" borders="1" style="osbutton_normal" text="Click Here"/>

==='''Appendix'''===
* '''[[Wasabi Appendix: Action List | Appendix: Action List]]'''

==<nstatesbutton/>==
The nstatesbutton is a specialized kind of togglebutton whose purpose is to cycle through a number of different visual states. The parameters beyond togglebutton that it implements are:
* '''nstates''' - (int) The number of discrete states in which the object may exist.
* '''cfgvals''' - (str) A semicolon delimited list of values to represent custom config values for the multiple states. Default is the current state number. See below.
The nstatesbutton uses special handling of the image, downimage, hoverimage, and activeimage parameters expressed by the button object (from which this object is derived). The nstatesbutton will actually append the state number to the four image parameter strings to calculate the bitmap ids to be loaded for the current object state. Remember, like most everything else in a computer, this "current state value" counts from 0 and is therefore in the range [0, nstates-1].

If the object is bound to a configuration attribute, that attribute will be set with a cfgval every time the nstatesbutton transitions to a new state. If the cfgvals parameter is not set, the attribute will simply be set with the current state value. If the cfgvals parameter is set, it will parse the string and set the config attrib with the n'th substring corresponding to the current state value.

The following snippet fully describes two nstatesbutton objects with three states each, one using full images for its visual display, one using themed Wasabi borders with three different state logos:
<elements>
<bitmap id="nimg0"/>
<bitmap id="dimg0"/>
<bitmap id="himg0"/>
<bitmap id="nimg1"/>
<bitmap id="dimg1"/>
<bitmap id="himg1"/>
<bitmap id="nimg2"/>
<bitmap id="dimg2"/>
<bitmap id="himg2"/>
<bitmap id="logo0"/>
<bitmap id="logo1"/>
<bitmap id="logo2"/>
</elements>
<groupdef id="some.random.groupdef">
<nstatesbutton id="three.freeform.states"
nstates="3" cfgvals="one;two;three"
image="nimg" downimage="dimg" hoverimage="himg"
/>
<nstatesbutton id="three.themed.states"
nstates="3" image="logo" borders="1" center_image="1"
/>
</groupdef>
If the "three.freeform.states" nstatesbutton were assigned to a configattrib, that attribute would be filled with the values "one" "two" and "three" in order. If the "three.themed.states" were instead assigned to a configattrib, it would be filled with the default values "0" "1" and "2" in order.

==<images/>==
The images object is object that displays a certain image based on the position of a slider. This object is very similar to [[Animationlayer]] except that this animation's current frame will be determined by the position of a slider. An example of implementation is the old Classic Winamp skins where the volume slider background changes colour from green to red depending on its position (0%-100%). This object is currently under development and not all sliders are supported. Currently only Volume and Panning(Balance) sliders can be used as sources.

* '''images''' - (id) A bitmap element for the array of images that will be used.
* '''source''' - (id) Id of the slider that will determine the current animation frame.
* '''imagesspacing''' - (int) The hight of each animation frame in the bitmap element. This will determine the total number of frames, (300/15=20)

Example:
<images source="volume" x="0" y="0" w="68" h="13"
images="main.volpan.volume" imagesspacing="15"/>

<images source="balance" x="73" y="0" w="38" h="13"
images="main.volpan.balance" imagesspacing="15"/>

<slider id="Volume" action="VOLUME" x="1" y="0" w="68" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

<slider id="Pan" action="PAN" x="74" y="0" w="38" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

==<PlaylistDirectory/>==
The PlaylistDirectory object is simply a list with all the saved playlist from the media library. Please remember that this object is always on top of other objects, so you'll have to hide it via maki if you dont want it to be visible. This object was introduced in Winamp 5.5(skinversion 1.3)

==<AlbumArt/>==
The AlbumArt object is a simple GuiObject that displays a picture of the album cover of the song thats playing in Winamp. Please note that if you want do something to this object in a maki script you'll have to define it as a guiobject and not as a layer.
* '''notfoundImage''' - (id) A bitmap element that used if Winamp cant find any cover for the song.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left".
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top".
* '''source''' - (str) Path+Filename of file that you want to display in this object.
* '''stretched''' - (bool) Stretch the albumart to the size of the object.

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<Winamp:Browser/>==
This is basically the browser you'll see in the Bento Winamp skin. You'll also need Winamp 5.54 (skinversion 1.34) for it to work.

- '''home''' - (str) Url for the default homepage for the browser xui.

==<browser/>==
The browser object embeds an external browser technology window (such as IE or Mozilla) into the user interface with which you can load and render HTML directly.
* '''url''' - (str) The url to be displayed.
* '''mainmb''' - (bool) Setting this flag makes this browser object the "main mini-browser" for the system.
* '''targetname''' - (str) This allows this browser object to be set as a specific HTML target.
* '''scrollbars''' - (str) An enumerated string to determine how the system should handle the embedded browser's scrollbars. See below.
Numerous interfaces in Wasabi refer to or control the "main" mini-browser. Setting the mainmb flag will cause the last browser object which processed its mainmb param to be the main. In other words, please don't set this flag on more than one object if you actually care which one is the main.
Scrollbars are important for big browser windows, but can interfere with the simple rendering of HTML content as part of a Wasabi UI. To this end, the skinner can control how the scrollbars of the embedded browser are displayed by setting the scrollbars parameter to one of the following four string values: "auto" "never" "always" or "default" - default is to allow the HTML page to specify, all others override.

==<Wasabi:Frame/>==
The Wasabi:Frame object is a themed control whose purpose is to provide a movable interface between two rectangular areas, much like the concept of an HTML frame. Here are its parameters:

* '''orientation''' - (str) One of the following four string values: "v" "vertical" "h" "horizontal" (Default is vertical).
* '''left''' - (id) The group to be instantiated in the left or top frame.
* '''right''' - (id) The group to be instantiated in the right or bottom frame.
* '''top''' - (id) The group to be instantiated in the left or top frame.
* '''bottom''' - (id) The group to be instantiated in the right or bottom frame.
* '''from''' - (str) One of the following string values: "l" "left" "t" "top" or "r" "right" "b" "bottom" (Default is left).
* '''width''' - (int) How many pixels from the chosen edge to start.
* '''height''' - (int) How many pixels from the chosen edge to start.
* '''resizable''' - (bool) Set this flag to allow the user to change the position of the framedivider. Default is to allow it to be resizable.
* '''maxwidth''' - (int) The maximum amount of pixels you are able to move the poppler if resizable.
* '''minwidth''' - (int) The minimum amount of pixels you are able to move the poppler if resizable (If you go below this value the poppler will snap to 0).
* '''vgrabber''' - (string) The centered bitmap of the Grabber.
* '''vbitmap''' - (string) The stretched bitmap of the Grabber.

In the following simple example, the "top" and "bottom" groups are displayed in a resizable frame object:
<groupdef id="top">
<text text="Top" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="bottom">
<text text="Bottom" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="both">
<Wasabi:Frame
orientation="horizontal"
top="top" bottom="bottom"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
/>
</groupdef>

==<Wasabi:CheckBox/>==
The Wasabi:Checkbox object exists only as a namespaced object because it is expected to have only a single themed appearance. The Wasabi:Checkbox object is used for both checkbox functionality and radiobutton functionality, depending up on the specification of its parameters. It consists of a combination of a togglebutton and a text object to create a single functional user interface object.
* '''text''' - (str) The text to display as part of the checkbox.
* '''radioid''' - (id) If the button is to be used as part of a radio group, specify id of the parent Wasabi:RadioGroup object here.
* '''radioval''' - (int) If the button is to be used as part of a radio group, specify its unique integer value here.
* '''action''' - (str) see button.
* '''param''' - (str) see button.
* '''action_target''' - (id) see button.
As with togglebutton, this is a very useful object for binding to a configuration attribute. It is very popular in preferences interfaces. If the object has a value for radioval, that will be the value set into the attribute if the object is activated.

==<Wasabi:DropDownList/>==
The Wasabi:DropDownList is a themed dialog object. It may be statically filled via a parameter or dynamically through script or by binding it to a text feed from code. A Wasabi:DropDownList object may be bound to an integer configuration attribute.
* '''items''' - (str) A semicolon delimited list of items to be displayed in the dropdown area.
* '''feed''' - (id) The id of a text feed to provide a semicolon delimited list of items to be displayed in the dropdown area.
* '''select''' - (int) Specifies an item to be selected.
* '''listheight''' - (int) Allows the skinner to specify the height of the dropdown area in pixels.
* '''maxitems''' - (int) Allows the skinner to specify the max height of the dropdown area in lines of text. If the dropdown area has fewer lines of text than this value when this value is set, the dropdown area is sized to show no more than is needed.

==<Wasabi:ComboBox/>==
The Wasabi:ComboBox is a special type of object which combines dropdownlist functionality with an edit field as well. It has the same parameters as Wasabi:DropDownList.

==<Wasabi:HistoryEditBox/>==
The Wasabi:HistoryEditBox is an even more specialized version of this object family, its only purpose is to remember the last 64 items of text typed into it. It has one extra parameter over Wasabi:DropDownList:
* '''navbuttons''' - (bool) Setting this flag will include the navigation buttons on the object. Default is to have the buttons.

==<componentbucket/>==
The componentbucket is a fancy name for the Thinger. More precisely, in Winamp3, the "Thinger Window" is a window which implements a very simple horizontal componentbucket. The object itself may be instantiated horizontally or vertically and the scrolling of the display within it should be controlled by button objects using "cb_next" and "cb_prev" action parameters and setting the cbtarget parameter to this object. The object has the following parameters:
* '''leftmargin''' - (int) The number of extra pixels to pad the left (or top) edge of the total component bucket scrolling display.
* '''rightmargin''' - (int) The number of extra pixels to pad the right (or bottom) edge of the total component bucket scrolling display.
* '''spacing''' - (int) The number of extra pixels to place between each bucket icon.
* '''vertical''' - (bool) Whether or not the display should scroll vertically or horizontally. Default is horizontal.
A simple "thinger group" follows:
<groupdef id="some.thinger.group.thing">
<button id="mythinger.up" x="0" y="0"
h="20" w="0" relatw="1"
image="mythinger.up.normal"
hoverimage="mythinger.up.hover"
downimage="mythinger.up.down"
action="CB_PREV" cbtarget="mythinger"
/>
<button id="mythinger.down" x="0" y="-20"
h="20" w="0" relatw="1" relaty="1"
image="mythinger.down.normal"
hoverimage="mythinger.down.hover"
downimage="mythinger.down.down"
action="CB_NEXT" cbtarget="mythinger"
/>
<componentbucket id="mythinger" vertical="1" x="0" y="20" w="0" h="-40" relath="1"/>
</groupdef>

==<customobject/>==
The customobject is a useful tool for temporarily instantiating a group into a user interface. It has only one parameter:
groupid - (id) Instantiate the specified group into my defined area.
By finding your customobject in script and simply calling setXmlParam on it to give it new values for groupid, you can switch between the instantiation of multiple groups in a single user interface space.

==<edit/> & <Wasabi:EditBox/>==
The edit control is, as you might guess, a text entry field. Some versions of Wasabi currently embed an OS edit control into the rectangular area defined by this object. This embedded control will not blend properly with the rest of the skin's painting, it will always paint on top of everything else. Keep this in mind when developing skins for widest compatibility.
* '''text''' - (str) Set the text in the edit field to this value.
* '''action''' - (str) Will accept the string "mb_url" to cause this edit box to automatically send its value as an url to the main minibrowser.
* '''multiline''' - (bool) Determines if the box is a single or multiple line input style.
* '''vscroll''' - (bool) Causes the edit window to have a vertical scroller. Default is off.
* '''autohscroll''' - (bool) Causes the horizontal area to scroll if necessary. Default is on.
* '''autoenter''' - (bool) Causes the system to automatically send a "done" event when the user stops typing past a certain timeout. Default is off.
* '''password''' - (bool) Causes the echoed characters to be single marks for password purposes. Default is off.
An edit object may be bound to a string configuration attribute.

Here's the definition of Wasabi:EditBox:
<groupdef
id="wasabi.edit" h="20"
inherit_group="wasabi.objectframe.group"
xuitag="Wasabi:EditBox" embed_xui="wasabi.edit.box"
>
<edit id="wasabi.edit.box" x="1" y="1" w="-2" h="-2" relatw="1" relath="1"/>
</groupdef>

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<group/>==
Groups are instantiated by using the group tag. Groups, when instantiated within a layout or some other groupdef, take the standard GuiObject params in order to define the group's instantiated size and properties, and then all of the contents of the group will be instantiated within the space it defines. At instantiation, a group will express a specified boundary rectangle and, thus, the positions of objects within it depending upon relative, proportional, or design coordinate systems may then be calculated.

To specify which groupdef to instantiate, set the id parameter of the group tag to the id of the desired groupdef. The instantiation of each group can be so customized, however, group instantiates also may be assigned their own custom id to allow each instantiate to be found by code or script:
* '''id''' (id) - The groupdef to be instantiated.
* '''instance_id''' (str) - A new id value with which to be able find this particular instantiate.

The following snippet will create two instantiates of the source group, with one specially customized (in the assumption that the "specialchild.maki" script will be handling the fact one is going to be special) :
<groupdef id="child">
<layer image="childimg" x="0" y="0" w="0" h="0" relatw="0" relath="0"/>
</groupdef>
<groupdef id="parent">
<group id="child" x="0" y="0" w="0" relatw="0" h="90"/>
<group id="child" instance_id="special"
notify="This is a special notification for this obj."
x="0" y="90" w="0" relatw="0" h="-90" relath="1"/>
<script file="specialchild.maki"/>
</groupdef>

==<grouplist/>==
A grouplist is, oddly enough, an object whose purpose is to accept and display a list of multiple groups. For instance, Wasabi's popup menu is a grouplist. A grouplist is expected to be filled in script, and it has no interesting parameters.

==<layer/>==
In Wasabi, the layer is analogous to the same-named object in photoshop. It is simply a nice bitmap graphic to be displayed in the user interface (with the standard alpha and region effects available to all guiobject derived objects, based by default on the properties of the bitmap element it houses). Here are its parameters:
* '''image''' - (id) The id of the bitmap element to be used for display.
* '''inactiveimage''' - (id) A secondary id to be displayed if this guiobject is set to "inactive" status.
* '''region''' - (id) The id of a different bitmap element to use as the source of this object's region.
* '''tile''' - (bool) Setting this flag will tile the image if the rectangular size of the layer is different than the rectangular size of the bitmap. The default is to stretch.
* '''resize''' - (str) A specific string enumerating which direction one should allow the resizing of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''scale''' - (str) A specific string enumerating which direction one should allow the scaling of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''dblclickaction''' - (str) The string of an action to be sent into the system if this object is doubleclicked within its region.
The resize and scale parameters transform the simple layer graphic into interactive gui objects in the system by enabling them to be dragged by the user to resize or change the scale of the parent layout. The eight possible values for these parameters are "top" "left" "right" "bottom" "topleft" "topright" "bottomleft" and "bottomright." If both resize and scale are set on a single layer, the object will act as a resizer by default but as a scaler if the ALT key is held down.

==<animatedlayer/>==
An animatedlayer is a series of frames of sprite animation displayed in the GUI. The frames of animation are specified in the bitmap element which is given in the image parameter to this object. The animation is expected to be a specific progression of frames of a fixed size, also to be specified via parameters on the object. Each frame of animation will have its own region. The animatedlayer object inherits directly from the layer object, so all of the above parameters are valid, along with these specific to animation:
* '''frameheight''' - (int) The height in pixels of each cell of animation. If frameheight is set, the animation will be assumed to be a vertical strip of cells in the given bitmap.
* '''framewidth''' - (int) The width in pixels of each cell of animation. If framewidth is set, the animation will be assumed to be a horizontal strip of cells in the given bitmap.
* '''elementframes''' - (int) The number of total frames of animation. If this value is set, the animation will be assumed to be comprised of multiple bitmap elements whose ids are resolved by using the value of the image parameter as a printf-compatible formatting string with a single integer parameter. See below.
* '''start''' - (int) The frame index which should be used as the beginning frame of the animation. Default is the first frame of the defined animation list.
* '''end''' - (int) The frame index which should be used as the terminating frame of the animation. Default is the last frame of the defined animation list.
* '''speed''' - (int) The delay in ms between each frame, on average. Default is 200 ms.
* '''realtime''' - (bool) Setting this flag will force-redraw the animation area the moment the new frame is meant to be seen. Default behaviour is to wait for and go along with the other invalidations from the rest of the UI on the main thread's draw loop. Expect use of this flag to have a high impact on system performance on slower machines. In other words, don't use it unless you know what you're doing.
* '''autoreplay''' - (bool) Setting this flag will cause the animation to repeat to the beginning frame once it has displayed the terminating frame of animation. Default is ON.
* '''autoplay''' - (bool) Setting this flag will cause the animation to begin playing the moment it is loaded into the user interface. Default is OFF. See below.
* '''debug''' - (bool) Setting this flag will cause the system to draw the current frame number of the animation on top of the animation graphics, for, as you might guess, debug purposes.

You must note that animations are usually meant to be "triggered" through script, as too many live animations happily blitting their way through a deep and complex user interface using lots of alpha blending, et al, can cause significant performance bottlenecks on slow computers (especially if your users aren't expecting your application to be eating all of the machine resources). With this in mind, if you just create an animated layer and drop it into a skin, it will not begin animating unless you set the autoplay parameter.

There are three different ways to present animation frames to this object. The frames may either all be concatenated into a vertical or horizontal "filmstrip" style bitmap element -- in which case the height or width of each animation cell (respectively) should be set with the frameheight or framewidth parameter.
The third way to give this object its animation frames is more complex and consists of loading multiple bitmap elements with each bitmap representing one frame of animation. This is done by first setting the elementframes parameter with the number of frames to be loaded, then by using a special formatting string as the image parameter. For those familiar with the printf function, when the elementframes parameter is set, that integer will be run in a for loop and the image name will be used as the formatting string to a printf function that takes only the current integer in the for loop as a parameter.
For those unfamiliar with printf, this will seem a bit confusing. Somewhere in the string you pass to the image parameter, you should have the two characters %d, and these characters will be replaced by the character representation of the number as it loads bitmap elements. If you want to have 0-loaded prefix characters (for instance "01-09" instead of "1-9"), you can place %02d into your image parameter, and if there aren't enough characters in the number to make up 2 full digits, the number will be left-padded with the zero character. You can just as easily use any number of padding characters as well.
I highly suspect this all still makes little sense, so let me give you a simplified example (missing important parameters) to show three different animated layers each loading three sets of differently named bitmaps:
<elements>
<bitmap id="bmp1"/>
<bitmap id="bmp2"/>
<bitmap id="bmp3"/>
<bitmap id="bmp01img"/>
<bitmap id="bmp02img"/>
<bitmap id="bmp03img"/>
<bitmap id="b00001mp"/>
<bitmap id="b00002mp"/>
<bitmap id="b00003mp"/>
</elements>
<groupdef id="whatever">
<animatedlayer image="bmp%d" elementframes="3"/>
<animatedlayer image="bmp%02dimg" elementframes="3"/>
<animatedlayer image="b%05dmp" elementframes="3"/>
</groupdef>

==<layoutstatus/>==
The layoutstatus implements the small statusbar that can be found at the bottom of many of the default normal layouts which can contain status text, appcmds buttons, and a proportionally completed progress bar. The two parameters to this object control what appcmds will be allowed in the status bar:
* '''exclude''' - (str) A semicolon delimited list of names of appcmds which should not be shown by this control.
* '''include_only''' - (str) A semicolon delimited list of names of appcmds which will be the only appcmds allowed to be shown by this control.
For the most part, these layoutstatus objects are only controllable from code.

==<list/>==
The list object is similar but not identical to the Win32 list common control. It is an optionally multicolumnar list whose purpose is to display multiple pieces of information per horizontal row. It may be filled directly by encoding the contents in the XML, by attaching the object to a proper text feed, or by calling methods on the object from script. The parameters for this object are:
* '''items''' - (str) A properly delimited string of data used to fill the list. See below.
* '''multiselect''' - (bool) This flag, when set, allows the user to select multiple items in the list. Default is to allow multiselect.
* '''autodeselect''' - (bool) This flag, when set, causes selection of any single item in the list to automatically deselect all other items in the list. Default is to not autodeselect.
* '''select''' - (str) The text of a list item to be selected.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''feed''' - (id) The id of a text feed to be used to fill this list.
* '''hoverselect''' - (bool) This flag causes list items to be selected if the user hovers over them. Default is to not hoverselect.
* '''sort''' - (bool) This flag causes the list to sort itself. Default is to not sort.
* '''selectonupdown''' - (bool) This flag causes the list to interpret the keyboard commands to mean "change my selection to the item." Default is to select on keyboard events.
* '''numcolumns''' - (int) How many columns to show. Default is one.
* '''columwidths''' - (int) A semicolon delimited list of integers specifying how to size the column widths in this list. See below.
* '''columnlabels''' - (str) A semicolon delimited list of strings to be used as the multiple column labels.
The list object depends upon being fed numerous strings with proper syntax in order to properly generate and populate a complex list display. The syntax for the items parameter (which is the same syntax as the feed must provide) is to delimit each full row in the list with the ';' semicolon character and to delimit each column entry per row with the ',' character. The columnwidths and columnlabels also require a semicolon (';') delimited list of data, one entry per column. Note that if -1 is given as a width, those columns will be of dynamic width and split up the leftover pixels among themselves. The default is one column with no labels and a width of -1.

Here is a sample list object with 3 rows and 3 columns:
<list id="three.by.three"
items="row1,text,1;row2,moretext,2;row3,stilltext,3"
numcolumns="3" columnwidths="50,-1,50"
multiselect="0" autodeselect="1"
/>

==<mouseredir/>==
This object simply redirects all mouse events from its region to the target object specified in the parameter:
* '''target''' - (id) The target object to get mouse events.
This is useful for when some objects get overlapped by nonfunctional graphics when laying out complex interfaces.

==<Wasabi:RadioGroup/>==
The Wasabi:RadioGroup object is an invisible object whose purpose is to centralize the functionality of multiple Wasabi:CheckBox objects instantiated in radiobutton mode. The radioid params on the Wasabi:CheckBox instantiates should give the id of one of these Wasabi:RadioGroup objects. It has no unique parameters. Here is a snippet of simple radiobutton functionality:
<Wasabi:RadioGroup id="enableddisabled"/>
<Wasabi:CheckBox x="50" y="110" w="60"
text="Enabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="1"
/>
<Wasabi:CheckBox x="-125" y="110" w="62" relatx="1"
text="Disabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="0"
/>

==<rect/>==
A nice flat rectangle. It may be either filled or hollow, and if hollow you may specify only some edges drawn. Here are its parameters:
* '''color''' - (id) The id of a color element, or an comma delimited integer triplet RGB value. Default is "255,00,255" (an ugly color to remind you to set it).
* '''filled''' - (bool) This flag causes the entire rectangular area to be filled with color. Default is to not be filled.
* '''edges''' - (str) A pipe ("|") delimited set of one or all of the following: "left" "right" "top" "bottom" Default is all, ie: "left|right|top|bottom".

==<script/>==
Scripts allow for the simple creation of UI functionality without requiring C++ code. While scripts are "compiled" into "script binaries," these script binaries are special to wasabi and, more importantly, can be run by any compatible Wasabi runtime on any OS to which Wasabi has a runtime. Scripts are bound like GuiObjects into layout or groupdef sections using the script tag and have the ability to find and modify the nearby sibling and child objects once the UI has been fully instantiated. Scripts have two important parameters:
* '''file''' - (str) The filename of the .maki file to load, relative to this xml file.
* '''param''' - (str) A string that will be available to the instance of the .maki file as an instance specific parameter.
Note that a single .maki file may be instantiated as a script object numerous times over, and each instantiation can have its own specific parameter data. Judicious use of this feature can help minimize your reliance on hardcoded strings and limited flexibility in your scripting.

==<slider/> & <Wasabi:HSlider/> & <Wasabi:VSlider/>==
The slider object consists of a background set of images, and a thumb. The thumb is constrained to move in one dimension -- horizontally or vertically, depending upon its orientation. The distance in pixels travelled by the thumb across its total distance is interpollated to produce a value between the low and high boundary integers which is assigned to any configuration attribute which may happen to be attached. Here are the parameters for slider:
* '''barleft''' - (id) The bitmap element for the left or top position of the slider.
* '''barmiddle''' - (id) The bitmap element for the middle, stretched, position of the slider.
* '''barright''' - (id) The bitmap element for the right or bottom position of the slider.
* '''thumb''' - (id) The bitmap element for the slider thumb.
* '''downthumb''' - (id) The bitmap element for the slider thumb when held by the user.
* '''hoverthumb''' - (id) The bitmap element for the slider thumb when the user's mouse is above it.
* '''orientation''' - (str) Either "v" or "vertical" to make the slider vertical, otherwise it will be horizontal.
* '''low''' - (int) Set the low-value boundary. Default is 0.
* '''high''' - (int) Set the high-value boundary. Default is 255.

==<snappoint/>==
The snappoint is an invisible point that will attract other snappoint objects with the same id in any other layout and make them want to dock, like little magnets. These objects have only the following subset of guiobject XML parameters:
* '''id''' - (id) All snappoint objects with the same id will snap to each other. Different ids ignore each other.
* '''x''' - (int) The x position of the snappoint, see: guiobject.
* '''y''' - (int) The y position of the snappoint, see: guiobject.
* '''relatx''' - (int) The horizontal coordinate space of the snappoint, see: guiobject.
* '''relaty''' - (int) The vertical coordinate space of the snappoint, see: guiobject.

==<Wasabi:TabSheet/>==
The Wasabi:TabSheet object contains multiple group instances within it and allows the user to switch between the display of those groups by the ability to click on a list of tab buttons at the top of the rectangular area of the Wasabi:TabSheet. The name parameter of each groupdef is displayed as the text in the tab which corresponds to it. Here are the Wasabi:TabSheet parameters:
* '''windowtype''' - (str) A windowtype string which will instantiate one of every groupdef with the same windowtype and every window class registered with a window creation service to include this windowtype.
* '''children''' - (id) A semicolon delimited list of groupdef ids to also be instantiated as children of this tabsheet.
* '''type''' - (int) There are two different themed display styles for Wasabi:TabSheet. One is with multiple tabs (sheet style), one is with a single button on top that will popup a menu with all the possible tab choices (sidecar style). The Default is sheet style, which is a value of -2. Any other value besides -2 will give you sidecar style.
* '''content_margin_top''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_left''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_right''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_bottom''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.

==<text/> & <Wasabi:Text/>==
The text object is for using the system to render some text in the font of your choice.
Since Winamp 5.5 (skinversion 1.3) text objects can have multiple lines. For a new line use this "/n"

* '''display''' - (str) Either a specific system display string or the string identifier of a text feed. Setting this value will override the text parameter. See below.
* '''ticker''' - (bool) Setting this flag causes the object to scroll left and right if the text does not fit the rectangular area of the text object.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''text''' - (str) A static string to be displayed.
* '''default''' - (str) A parameter alias for text.
* '''font''' - (id) The id of a bitmapfont or truetypefont element. If no element with that id can be found, the OS will be asked for a font with that name instead.
* '''fontsize''' - (int) The size to render the chosen font.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left."
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top."
* '''color''' - (int) The comma delimited RGB color of the text.
* '''shadowcolor''' - (int) The comma delimited RGB color for underrendered shadow text.
* '''shadowx''' - (int) The x offset of the shadowrender.
* '''shadowy''' - (int) The y offset of the shadowrender.
* '''timeroffstyle''' - (int) How to display an empty timer: "0" = " : ", "1" = "00:00", and "2"="" (if one is displaying time)
* '''timecolonwidth''' - (int) How many extra pixels wider or smaller should the colon be when displaying time. Default is -1.
* '''nograb''' - (bool) Setting this flag will cause the text object to ignore left button down messages. Default is off.
* '''showlen''' - (bool) Setting this flag will cause the text display to be appended with the length in minutes and seconds of the current song. Default is off.
* '''forcefixed''' - (bool) Force the system to attempt to render the display string with fixed-width font spacing.
* '''forceupcase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forceuppercase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forcelocase''' - (bool) Force the system to make the display string all lowercase before display.
* '''forcelowercase''' - (bool) Force the system to make the display string all lowercase before display.
* '''bold''' - (bool) Render the display string in bold.
* '''wrap''' - (bool) Setting this flag will cause the text to wrap in its rectangular space. Default is off.
* '''dblclickaction''' - (str) A string in the form "SWITCH;layout" where layout is the id of a layout in this object's parent container. No other actions function on this object. This action is deprecated.
* '''offsetx''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
* '''offsety''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
"SONGNAME" - The name string of the currently playing song (from metadb).
"SONGINFO" - The full info string of the currently playing song (from metadb).
"SONGARTIST" - The artist string of the currently playing song (from metadb).
"SONGTITLE" - The title string of the currently playing song (from metadb).
"SONGALBUM" - The album string of the currently playing song (from metadb).
"SONGLENGTH" - The length string of the currently playing song (from metadb).
"TIME" - The length string of the currently playing song.
"TIMEELAPSED" - The elapsed time string of the currently playing song.
"TIMEREMAINING" - The time remaining string of the currently playing song.
"COMPONENTBUCKET" - The id of the componentbucket (thinger) item the mousecursor is currently hovering above.
"SONGBITRATE" - The bitrate string of the currently playing song (from metadb).
"SONGSAMPLERATE" - The sample string of the currently playing song (from metadb).

*** Broken Action (Winamp 5) ***
"NORMALIZER:STATUS" - The current status of the audio normalizer.

Example:
<text x="81" y="11" w="25" h="21" antialias="0" text="Read This" align="center" color="0,0,0" bold="1"/>

==<Wasabi:TitleBox/>==
The Wasabi:TitleBox object is a nice way to put a simple rectangular frame and title around your content groups. It has the following parameters:
* '''title''' - (str) The string to display in the title area. Default is to use the name parameter of the content group.
* '''content''' - (id) The id of the groupdef to instantiate as content.
* '''centered''' - (bool) Setting this flag will center the title text. Default is to not be centered (and be left justified).
* '''suffix''' - (str) A string which will be appended to the title before it is displayed. In this way, if you instantiate multiple groups as content, each name change can still have a string appended.

==<Wasabi:Titlebar/>==
The Wasabi:TitleBar is the graphically themed bar that is placed at the top of all of the Wasabi:StandardFrame windows. It has the same parameters as the text object, which control the text display of the titlebar.

==<tree/>==
The tree object displays a hierarchical set of information with multiple items, where each item may in turn have multiple subitems. Let's examine its parameters:
* '''items''' - (str) A specially formatted string describing the hierarchical creation of the tree info. See below.
* '''feed''' - (str) The string identifier of a text feed which should provide a string in the same format as the items parameter.
* '''sorted''' - (bool) Setting this flag will cause all of the tree items to be sorted before display. Default is to sort.
* '''childtabs''' - (bool) Setting this flag will cause all tree items with children to display a tab graphic beside them. Default is to show tab graphics.
* '''expandroot''' - (bool) Setting this flag will cause all root tree items to display with their children pre-expanded. Default is to pre-expand root tree items.
The syntax required to describe the hierarchy of tree items is a semicolon delimited list of objects in the form "name(list)" where name is the string to display for that tree item and list is another semicolon delimited list of objects which are the direct children of name.

The following snippet will create a tree with one root node that has three child nodes, with each child node having differing numbers of sub nodes:
<tree id="example.tree"
x="0" y="0" w="0" h="0" relatw="1" relath="1"
items="root(child1(sub1;sub2);child2;child3(sub3))"
/>

==<vis/>==
The vis object is the multistate audio visualization display. It has a multitude of parameters for how simple it is:
* '''colorallbands''' - (int) The comma delimited RGB triplet to color all the spectroscope bands.
* '''colorband1''' - (int) The comma delimited RGB triplet to color spectroscope band 1.
* '''colorband2''' - (int) The comma delimited RGB triplet to color spectroscope band 2.
* '''colorband3''' - (int) The comma delimited RGB triplet to color spectroscope band 3.
* '''colorband4''' - (int) The comma delimited RGB triplet to color spectroscope band 4.
* '''colorband5''' - (int) The comma delimited RGB triplet to color spectroscope band 5.
* '''colorband6''' - (int) The comma delimited RGB triplet to color spectroscope band 6.
* '''colorband7''' - (int) The comma delimited RGB triplet to color spectroscope band 7.
* '''colorband8''' - (int) The comma delimited RGB triplet to color spectroscope band 8.
* '''colorband9''' - (int) The comma delimited RGB triplet to color spectroscope band 9.
* '''colorband10''' - (int) The comma delimited RGB triplet to color spectroscope band 10.
* '''colorband11''' - (int) The comma delimited RGB triplet to color spectroscope band 11.
* '''colorband12''' - (int) The comma delimited RGB triplet to color spectroscope band 12.
* '''colorband13''' - (int) The comma delimited RGB triplet to color spectroscope band 13.
* '''colorband14''' - (int) The comma delimited RGB triplet to color spectroscope band 14.
* '''colorband15''' - (int) The comma delimited RGB triplet to color spectroscope band 15.
* '''colorband16''' - (int) The comma delimited RGB triplet to color spectroscope band 16.
* '''colorbandpeak''' - (int) The comma delimited RGB triplet to color the spectroscope peak line.
* '''colorallosc''' - (int) The comma delimited RGB triplet to color the whole oscilloscope.
* '''colorosc1''' - (int) The comma delimited RGB triplet to color oscilloscope section 1.
* '''colorosc2''' - (int) The comma delimited RGB triplet to color oscilloscope section 2.
* '''colorosc3''' - (int) The comma delimited RGB triplet to color oscilloscope section 3.
* '''colorosc4''' - (int) The comma delimited RGB triplet to color oscilloscope section 4.
* '''colorosc5''' - (int) The comma delimited RGB triplet to color oscilloscope section 5.
* '''channel''' - (int) One of three values for which channel to monitor: "1" is left channel, "2" is right channel, "3" is stereo. Default is stereo.
* '''fliph''' - (bool) If this flag is set, it blits the vis pixels flipped horizontally.
* '''flipv''' - (bool) If this flag is set, it blits the vis pixels flipped vertically.
* '''mode''' - (int) One of three values for which mode to display: "0" is no display, "1" is spectroscope, "2" is oscilloscope. Default is to read from a config item.
When the user clicks on the vis, it will cycle between its three modes.

==<eqvis/>==
The eqvis object is rather specific to media players, as it is the spline display for the eq settings in the Wasabi Media Player.
* '''colortop''' - (str) A color value or color element id for the top portion of the spline display.
* '''colormiddle''' - (str) A color value or color element id for the middle portion of the spline display.
* '''colorbottom''' - (str) A color value or color element id for the bottom portion of the spline display.
* '''colorpreamp''' - (str) A color value or color element id for the preamp bar in the spline display.

==<gradient/>==
The gradient object creates a rectangular color gradient. The available parameters are:
* '''gradient_x1''' - (float) A floating point value for the left side of the rectangle. Default is 0.0
* '''gradient_y1''' - (float) A floating point value for the top side of the rectangle. Default is 0.0
* '''gradient_x2''' - (float) A floating point value for the right side of the rectangle. Default is 1.0
* '''gradient_x1''' - (float) A floating point value for the bottom side of the rectangle. Default is 1.0
* '''points''' - (str) A complex string defining color values for at least two value points with which to build the gradients. See below.
The points syntax is a semicolon delimited list of key=value pairs where the key is a floatingpoint number representing a point in the "gradient space" and the value is an RGB triplet (assumed full alpha) or RGBA quad. For instance, the following object would create a smooth gradient between red in the top left and green at half alpha in the bottom right:
<gradient id="red.to.green"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
points="0.0=255,0,0,255;1.0=0,255,0,128"
/>

==<Wasabi:StandardFrame:Status/>==

==<Wasabi:StandardFrame:NoStatus/>==

==<Wasabi:StandardFrame:Modal/>==

==<Wasabi:StandardFrame:Static/>==
The Wasabi:StandardFrame objects are rectangular frames you can use to encapsulate your own layout contents within the currently themed standard frame. They all have the following parameters:
* '''content''' - (id) The id of the groupdef to instantiate within the Wasabi:StandardFrame.
* '''padtitleleft''' - (int) The distance in pixels to pad the title to the left.
* '''padtitleright''' - (int) The distance in pixels to pad the title to the right.
* '''shade''' - (id) The id of the layout within our container we should switch to if the titlebar is doubleclicked (ie: the id of the windowshade layout). Default is no functionality.
The Wasabi:StandardFrame:Status object has a status bar, while the Wasabi:StandardFrame:NoStatus does not. The Wasabi:StandardFrame:Static object inherits from Wasabi:StandardFrame:NoStatus and also instantiates the wasabi panel graphics. The Wasabi:StandardFrame:Modal object does all that and also removes the control menus to make a fully modal dialog frame.

==<wndholder/>==
A wndholder object, similar to a customobject, holds user interface windows based upon what param is given. The wndholder can also hold window types by guid or groupdef instantiations by id. Here are its parameters:
* '''hold''' - (id) A semicolon delimited list of guids or groupdef ids to hold.
* '''component''' - (id) A parameter alias for hold.
* '''param''' - (id) A parameter alias for hold.
* '''noshowcmdbar''' - (bool) Setting this flag will disable the Wasabi command bar.
* '''noanimatedrects''' - (bool) Setting this flag will disable animated rectangle motion.
* '''disableanimatedrects''' - (bool) A parameter alias for noanimatedrects.
* '''autoopen''' - (bool) Setting this flag will cause the object to auto open.
* '''autoclose''' - (bool) Setting this flag will cause the object to auto close.
Using a wndholder object indicates to the system that you want to be the "container of record" for the possible requested guids when they are launched by the system through, for instance, the C++ coder registering his window class with registerAutopopup(), which calls the underlying api->skinwnd_createByGuid(). The container within which this wndholder is instantiated should also be given a component parameter with the same values. This component parameter is simply a hint to Wasabi that a wndholder object that will accept that component parameter lives within the container.

==<objdirview/>==
The objdirview object displays a tree of hierarchical information to the user, based on a code concept called an Object Directory. An Object Directory is, in essence, just a container of arbitrary items so this object is merely the display of its contents. Here are its parameters:
* '''dir''' - (str) The string identifier of the objdir to which this object should connect.
* '''target''' - (id) The id of an object to which this object may direct the actions of its internal items being selected.
* '''displaytarget''' - (id) The id of a customobject which will be assigned to display the display group parameter of the currently selected objdir item.
* '''defaultdisplay''' - (id) The id of a groupdef to display inside displaytarget if no objdir items are selected.
When items in the objdirview are selected, the objdir is sent an event telling it that an item was selected. The target parameter from XML is included in the data sent in that event. However, the implemented functionality for that event is wholly at the discretion of the programmer implementing the specific objdir in question. For the QueryDir object used in Winamp3's media library, the target param is for a nearby queryline object to be told the selection is changing. Your mileage may vary with other objects.

==<Wasabi:PathPicker/>==
The Wasabi:PathPicker object is a simple object to display a text string of a directory path chosen by the user. When the user clicks on the object, a dir selection service is started, allowing the user to choose a directory path. Attach this object to a string configuration attribute and you have a simple way for users to choose directories as preferences. The Wasabi:PathPicker object has no unique parameters.

==<querydrag/>==
The querydrag object is used to create a visual "drag source" for a nearby queryresults object. The user may click and drag this object and by doing so representationally drag the text of the current query in the queryresults object (which can be dropped into a playlist editor to fill its contents with the results of that query). It has only two parameters:
* '''image''' - (id) The bitmap element to display.
* '''source''' - (id) The source queryresults object. Default is the nearest.
If no valid source can be found, this object silently fails to drag.

==<queryline/>==
The invisible queryline object is used to host a text query to be applied to a queryresults object. One possible use would be to write a script linking the text in a Wasabi:HistoryEditBox to the query parameter of a queryline. And, speaking of its parameters, here they are:
* '''querylist''' - (id) The id of the queryresults which will take the query. Default is to not connect (ie: this param is kinda sorta mandatoryish if you want anything interesting to happen).
* '''query''' - (str) The string of the query itself.
* '''auto''' - (bool) Whether or not to execute an autoquery based on the query parameter (ie: "search on the name column for this substring" instead of "run this query"). Default is to use the string directly as a query (not autoquery).

==<queryresults/>==
The queryresults object is the an invisible binding object that coordinates the filtration of the database by numerous multiple other objects. The queryline and filterlist objects eventually define a single output from the database, and this information is kept in the queryresults object. It has only one parameter:
title - (str) The human readable title for your queryresults. I have no idea why this would be important.
Magically, it seems, placing a queryresults object in the same group next to a PlaylistEditor object makes that PlaylistEditor get filled with the queryresults information. I have no idea how this can be, and sense the telltale signs of powerful dark necromancy at work, here.

Wasabi Appendix: Action List

2008-09-26T10:43:26Z

Pjn123: New page: "PREV" - Previous Track "PLAY" - Play "PAUSE" - Pause "STOP" - Stop "NEXT" - Next Track "EJECT" - Open File "EJECT_URL" - Open URL "EJECT_DIR" - Ope...

"PREV" - Previous Track
"PLAY" - Play
"PAUSE" - Pause
"STOP" - Stop
"NEXT" - Next Track
"EJECT" - Open File
"EJECT_URL" - Open URL
"EJECT_DIR" - Open Directory
"VOLUME_UP" - Increase Volume
"VOLUME_DOWN" - Decrease Volume
"REWIND_5S" - Rewind 5 Seconds
"FFWD_5S" - FastForward 5 Seconds
"TEXT_LARGER" - Increase Text Size
"TEXT_SMALLER" - Decrease Text Size
"DOUBLESIZE" - Double Skin Size
"CONTROLMENU" - Control Menu (Opacity, Scaling, Docked Toolbar)
"SYSMENU" - System Menu (Also the right-click menu in Winamp)
"CLOSE" - Close Winamp
"MINIMIZE" - Minimize Winamp
"CLOSE_WINDOW" - Close Current Window
"TOGGLE_ALWAYS_ON_TOP" - Always On Top Mode
"TOGGLE_REPEAT" - Repeat
"TOGGLE_SHUFFLE" - Shuffle
"TOGGLE_CROSSFADER" - Crossfader
"EQ_TOGGLE" - Toggle Equalizer On/Off
"EQ_AUTO" - Toggle Automatic Per-Song EQ Settings
"MB_BACK" - Minibrowser History Back
"MB_FORWARD" - Minibrowser History Forward
"MB_STOP" - Minibrowser Stop Loading Page
"MB_REFRESH" - Minibrowser Refresh Page
"MB_HOME" - Minibrowser Home
"VIDEO:FULLSCREEN" - Show Video In Fullscreen
"VIDEO:SCALE 1X" - Show Video In Normalsize
"VIDEO:SCALE 2X" - Show Video In Doublesize
"VIDEO:TV" - Open Media Library (will hopefully later show an Internet TV listing in the Media Library)
"VIDEO:MISC" - Video Options Menu
"CB_PREV" - Componentbucket Previous
"CB_NEXT" - Componentbucket Next
"SWITCH" - Switch To Different Layout as specified by param
param="someLayout" - where someLayout is the id of the Layout to switch to
"TOGGLE" - Toggle Component as specified by param
param="someGUID" - where someGUID is the GUID of the Component as found below
"MENU" - Show Menu as specified by param
param="someMenu" - where someMenu is the id of the Menu to show. Menu Id's:
- presets = EQ presets menu
"ML_SendTo" - Show the Send To menu
"PE_Add" - Add Files to Playlist menu
"PE_Rem" - Remove Files from Playlist menu
"PE_Sel" - Select Files from Playlist menu
"PE_Misc" - Misc Actions Playlist menu
"PE_List" - Manage Playlist menu
"VIS_Menu" - Configure Visualizer Menu
"VIS_Prev" - Previous Visualization Preset
"VIS_Next" - Next Visualization Preset
"PAN" - Balance slider
"EQ_BAND" - Show the Send To menu
param="slidertype" - where slidertype is one of these: preamp;1;2;3;4;5;6;7;8;9;10
"trackmenu" - Shows Track Menu
"WA5:Prefs" - Configure Visualizer Menu
param="int" - Where int is the page number of the preferences page
- 42 = Playback
- 33 = Select Vis Plugin
"VOLUME" - Volume Slider
"SEEK" - Seek Slider

*** Broken Action (Winamp 5) ***
"RELOAD_SKIN" - Reload/Refresh Skin
"ADD_BOOKMARK" - Add Bookmarks
"PREFERENCES" - Toggle Preferences
"VIEW_BOOKMARK" - View Bookmarks
"VIEW_FILE_INFO" - Media Info Editor

Wasabi Appendix: ConfigAttrib

2008-09-26T10:42:20Z

Pjn123: New page: * '''Vis Random''' (togglebutton) ** cfgattrib="{0000000A-000C-0010-FF7B-01014263450C};Random" * '''Crossfade Time''' (slider) ** cfgattrib="{F1239F09-8CC6-4081-8519-C2AE99FCB14C};Crossfa...

* '''Vis Random''' (togglebutton)
** cfgattrib="{0000000A-000C-0010-FF7B-01014263450C};Random"

* '''Crossfade Time''' (slider)
** cfgattrib="{F1239F09-8CC6-4081-8519-C2AE99FCB14C};Crossfade time"
** high="20"

* '''Crossfade Enabled''' (togglebutton)
** cfgattrib="{FC3EAF78-C66E-4ED2-A0AA-1494DFCC13FF};Enable crossfading"

* '''Always on Top''' (togglebutton)
** cfgattrib="{280876CF-48C0-40BC-8E86-73CE6BB462E5};Always on top"

Wasabi Appendix: Cursors

2008-09-26T10:40:13Z

Pjn123: New page: You can use the following as cursors for your skin. These cursors will change if the Windows cursor is changed, so it will always match the Windows Theme. * IDC_ARROW * IDC_SIZENS * IDC_SI...

You can use the following as cursors for your skin. These cursors will change if the Windows cursor is changed, so it will always match the Windows Theme.
* IDC_ARROW
* IDC_SIZENS
* IDC_SIZEWE
* IDC_SIZENWSE
* IDC_SIZENESW
* IDC_SIZEALL
* IDC_IBEAM
* IDC_WAIT
* IDC_CROSS
* IDC_UPARROW
* IDC_NO
* IDC_HAND
* IDC_APPSTARTING
* IDC_HELP

Example:
<layer x="20" y="20" image="myimage" cursor="IDC_HAND"/>

XML GUI Objects

2008-09-26T10:38:30Z

Pjn123:

==GuiObject (Global params)==
All the objects to be discussed in this chapter are GuiObjects. This means, among other things, all such objects have the same basic set of parameters which are valid for all of them. All GuiObjects are objects that live with a set of spatial coordinates within a groupdef (or layout). A button, a piece of text, a flat bitmap image, a tree of items, and an edit box would all be different kinds of GuiObjects, and all of the parameters listed here work on all of them.
* '''alpha''' - (int) An integer [0,255] specifying the alpha blend mode of the object (0 is transparent, 255 is opaque). Default is 255.
* '''activealpha''' - (int) A different alpha value [0,255] for the object in its active state.
* '''inactivealpha''' - (int) A different alpha value [0,255] for the object in its inactive state (if you set both activealpha and inactivealpha, it is meaningless to set alpha).
* '''cursor''' - (id) The id of the cursor element to be displayed when the mouse is over this object. You can also use the system cursors. A list can be found here: '''[[Wasabi Appendix: Cursors | Appendix: Cursors]]'''
* '''tooltip''' - (str) A human readable string to display as a tooltip for when the mouse is hovered over this object.
* '''move''' - (bool) Setting this flag causes any dragging of this object to actually drag the entire layout within which the object resides.
* '''renderbasetexture''' - (bool) A flag to tell the system to always use the system's base texture as the background of this object.
* '''cfgattrib''' - (str) A configattrib string assigned to this GuiObject. Here is a list of a few: '''[[Wasabi Appendix: ConfigAttrib | Appendix: ConfigAttrib]]'''
* '''visible''' - (bool) Whether or not the object should be displayed in its group or layout.
* '''x''' - (int) The X position of the object in its group or layout.
* '''y''' - (int) The Y position of the object in its group or layout.
* '''w''' - (int) The width of the object in its group or layout.
* '''h''' - (int) The height of the object in its group or layout.
* '''relatx''' - (int) This [0,2] integer determines if the X position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relaty''' - (int) This [0,2] integer determines if the Y position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relatw''' - (int) This [0,2] integer determines if the width should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relath''' - (int) This [0,2] integer determines if the height should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''fitparent''' - (bool) This parameter is used instead of x;y;w;h parameters and means that the object covers all the area of the parent object.
* '''x1''' - (int) The X position of the left edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y1''' - (int) The Y position of the top edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''x2''' - (int) The X position of the right edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y2''' - (int) The Y position of the bottom edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''anchor''' - (str) A list of one or more of the following keywords, delimited by the pipe (|) character: "top|bottom|left|right" these anchors work with x1/y1/x2/y2 positioning to fix the edge of the object its distance from the edges of the group or layout which contains it.
* '''sysmetricsx''' - (bool) This flag will cause this object to be resized by having its X position multiplied by the OS scalar coefficient.
* '''sysmetricsy''' - (bool) This flag will cause this object to be resized by having its Y position multiplied by the OS scalar coefficient.
* '''sysmetricsw''' - (bool) This flag will cause this object to be resized by having its width multiplied by the OS scalar coefficient.
* '''sysmetricsh''' - (bool) This flag will cause this object to be resized by having its height multiplied by the OS scalar coefficient.
* '''rectrgn''' - (bool) Setting this flag causes the engine to ignore the object's region for handling "mouse over object" detection and only use the bounding rectangle.
* '''regionop''' - (int) An integer enumeration [-2,1] for what kind of region-operation to perform with this object's calculated region against its parent's region. See below for more information.
* '''sysregion''' - (int) Param alias for regionop.
* '''wantfocus''' - (bool) This flag determines whether or not an object ever gets the focus at all.
* '''focusonclick''' - (bool) This flag determines whether or not an object gets the focus when clicked.
* '''taborder''' - (int) This value indicates the "tab order" of the object within the group or layout in which it resides. When the user hits the tab key, the interface focus moves to the next greater object in tab order. Objects with equal tab order will be ordered in the reverse of their insertion order in XML (last object in is first in default tab order).
* '''nodblclick''' - (bool) This flag blocks doubleclick events from being received by this object.
* '''noleftclick''' - (bool) This flag blocks left click events from being received by this object.
* '''norightclick''' - (bool) This flag blocks right click events from being received by this object.
* '''nomousemove''' - (bool) This flag blocks mouse move events from being received by this object.
* '''nocontextmenu''' - (bool) This flag blocks the main context menu from being displayed for rightclick.
* '''ghost''' - (bool) This flag causes the object to be transparent to all user interface events such that all the mouse messages pass to the object(s) visibly underneath it.
* '''notify'''(0-9) - (str) A string to be used as a parameter to the onNotify event for the object upon instantiation. The notify strings 0-9 will be sent in order.
* '''droptarget''' - (id) The id of an object to which all of this object's drag and drop events will be redirected.

'''Appendixes:'''
*'''[[Wasabi Appendix: ConfigAttrib | Appendix: ConfigAttrib]]'''
*[[Wasabi Appendix: Cursors | Appendix: Cursors]]

==<button/> & <togglebutton/>==
The button is a simple concept in Wasabi - you push it, it activates something. It can either be used as a substrate for a script (ie: put a script and a button in the same groupdef, and you can handle complex button functionality with the script) or it can be used by itself to launch an action into the system when pressed. You can implement your own action handlers in code, but some global actions predefined to be handled by the system are also available.

* '''image''' - (id) The id of the bitmap element to display in its "normal" state.
* '''downimage''' - (id) The id of the bitmap element to display when the user is pressing down on the button.
* '''hoverimage''' - (id) The id of the bitmap element to display when the user is hovering the mouse over the button.
* '''activeimage''' - (id) The id of the bitmap element to display when the object is in its "active" state (usually only used by togglebutton, but available on the basic button object to allow the user to create extended functionality in script).
* '''text''' - (str) A string of text to be rendered on top of the button's currrent state image. In this way, you can create a single button graphic and reuse it to create internationally localizable buttons.
* '''action''' - (str) The action to fire if the button is clicked (when it enters into its downstate).
* '''param''' - (str) The param to go with the action fired if the button is clicked.
* '''borders''' - (bool) Set this flag if you want to be a styled button.
* '''style''' - (str) Set the style value if you set the borders flag, to tell wasabi what type of button style you want.
** "button_normal" "osbutton_normal" "osbutton_close" "osbutton_minimize" and "osbutton_maximize"
* '''retcode''' - (int) Specifies the "modal return code" for the button. Only valid with the "endmodal" system action.
* '''cbtarget''' - (id) The optional "component bucket target" for this button. Only valid with "cb_next" or "cb_prev" system actions. A componentbucket is another name for the thinger -- this allows you to have targetted button controls for more than one componentbucket in a user interface.
* '''action_target''' - (id) This will send the specified action only to the object whose id is listed here. The param parameter is ignored in this case and this string is sent as the param data for the action. Most objects don't understand being sent actions (this is an extended functionality), so this won't do anything in most cases.
* '''center_image''' - (bool) Setting this flag causes the image to be centered against the object rectangle. This parameter is only important when both borders and an image are specified on a single object.
'''[[Wasabi Appendix: Action List | Appendix: Action List]]'''

Example:
<button x="50" y="10" action="VID_FS" image="vis.fs.1" hoverImage="vis.fs.2" downImage="vis.fs.3"/>
<button x="10" y="40" w="100" h="20" borders="1" style="osbutton_normal" text="Click Here"/>

==<nstatesbutton/>==
The nstatesbutton is a specialized kind of togglebutton whose purpose is to cycle through a number of different visual states. The parameters beyond togglebutton that it implements are:
* '''nstates''' - (int) The number of discrete states in which the object may exist.
* '''cfgvals''' - (str) A semicolon delimited list of values to represent custom config values for the multiple states. Default is the current state number. See below.
The nstatesbutton uses special handling of the image, downimage, hoverimage, and activeimage parameters expressed by the button object (from which this object is derived). The nstatesbutton will actually append the state number to the four image parameter strings to calculate the bitmap ids to be loaded for the current object state. Remember, like most everything else in a computer, this "current state value" counts from 0 and is therefore in the range [0, nstates-1].

If the object is bound to a configuration attribute, that attribute will be set with a cfgval every time the nstatesbutton transitions to a new state. If the cfgvals parameter is not set, the attribute will simply be set with the current state value. If the cfgvals parameter is set, it will parse the string and set the config attrib with the n'th substring corresponding to the current state value.

The following snippet fully describes two nstatesbutton objects with three states each, one using full images for its visual display, one using themed Wasabi borders with three different state logos:
<elements>
<bitmap id="nimg0"/>
<bitmap id="dimg0"/>
<bitmap id="himg0"/>
<bitmap id="nimg1"/>
<bitmap id="dimg1"/>
<bitmap id="himg1"/>
<bitmap id="nimg2"/>
<bitmap id="dimg2"/>
<bitmap id="himg2"/>
<bitmap id="logo0"/>
<bitmap id="logo1"/>
<bitmap id="logo2"/>
</elements>
<groupdef id="some.random.groupdef">
<nstatesbutton id="three.freeform.states"
nstates="3" cfgvals="one;two;three"
image="nimg" downimage="dimg" hoverimage="himg"
/>
<nstatesbutton id="three.themed.states"
nstates="3" image="logo" borders="1" center_image="1"
/>
</groupdef>
If the "three.freeform.states" nstatesbutton were assigned to a configattrib, that attribute would be filled with the values "one" "two" and "three" in order. If the "three.themed.states" were instead assigned to a configattrib, it would be filled with the default values "0" "1" and "2" in order.

==<images/>==
The images object is object that displays a certain image based on the position of a slider. This object is very similar to [[Animationlayer]] except that this animation's current frame will be determined by the position of a slider. An example of implementation is the old Classic Winamp skins where the volume slider background changes colour from green to red depending on its position (0%-100%). This object is currently under development and not all sliders are supported. Currently only Volume and Panning(Balance) sliders can be used as sources.

* '''images''' - (id) A bitmap element for the array of images that will be used.
* '''source''' - (id) Id of the slider that will determine the current animation frame.
* '''imagesspacing''' - (int) The hight of each animation frame in the bitmap element. This will determine the total number of frames, (300/15=20)

Example:
<images source="volume" x="0" y="0" w="68" h="13"
images="main.volpan.volume" imagesspacing="15"/>

<images source="balance" x="73" y="0" w="38" h="13"
images="main.volpan.balance" imagesspacing="15"/>

<slider id="Volume" action="VOLUME" x="1" y="0" w="68" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

<slider id="Pan" action="PAN" x="74" y="0" w="38" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

==<PlaylistDirectory/>==
The PlaylistDirectory object is simply a list with all the saved playlist from the media library. Please remember that this object is always on top of other objects, so you'll have to hide it via maki if you dont want it to be visible. This object was introduced in Winamp 5.5(skinversion 1.3)

==<AlbumArt/>==
The AlbumArt object is a simple GuiObject that displays a picture of the album cover of the song thats playing in Winamp. Please note that if you want do something to this object in a maki script you'll have to define it as a guiobject and not as a layer.
* '''notfoundImage''' - (id) A bitmap element that used if Winamp cant find any cover for the song.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left".
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top".
* '''source''' - (str) Path+Filename of file that you want to display in this object.
* '''stretched''' - (bool) Stretch the albumart to the size of the object.

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<Winamp:Browser/>==
This is basically the browser you'll see in the Bento Winamp skin. You'll also need Winamp 5.54 (skinversion 1.34) for it to work.

- '''home''' - (str) Url for the default homepage for the browser xui.

==<browser/>==
The browser object embeds an external browser technology window (such as IE or Mozilla) into the user interface with which you can load and render HTML directly.
* '''url''' - (str) The url to be displayed.
* '''mainmb''' - (bool) Setting this flag makes this browser object the "main mini-browser" for the system.
* '''targetname''' - (str) This allows this browser object to be set as a specific HTML target.
* '''scrollbars''' - (str) An enumerated string to determine how the system should handle the embedded browser's scrollbars. See below.
Numerous interfaces in Wasabi refer to or control the "main" mini-browser. Setting the mainmb flag will cause the last browser object which processed its mainmb param to be the main. In other words, please don't set this flag on more than one object if you actually care which one is the main.
Scrollbars are important for big browser windows, but can interfere with the simple rendering of HTML content as part of a Wasabi UI. To this end, the skinner can control how the scrollbars of the embedded browser are displayed by setting the scrollbars parameter to one of the following four string values: "auto" "never" "always" or "default" - default is to allow the HTML page to specify, all others override.

==<Wasabi:Frame/>==
The Wasabi:Frame object is a themed control whose purpose is to provide a movable interface between two rectangular areas, much like the concept of an HTML frame. Here are its parameters:

* '''orientation''' - (str) One of the following four string values: "v" "vertical" "h" "horizontal" (Default is vertical).
* '''left''' - (id) The group to be instantiated in the left or top frame.
* '''right''' - (id) The group to be instantiated in the right or bottom frame.
* '''top''' - (id) The group to be instantiated in the left or top frame.
* '''bottom''' - (id) The group to be instantiated in the right or bottom frame.
* '''from''' - (str) One of the following string values: "l" "left" "t" "top" or "r" "right" "b" "bottom" (Default is left).
* '''width''' - (int) How many pixels from the chosen edge to start.
* '''height''' - (int) How many pixels from the chosen edge to start.
* '''resizable''' - (bool) Set this flag to allow the user to change the position of the framedivider. Default is to allow it to be resizable.
* '''maxwidth''' - (int) The maximum amount of pixels you are able to move the poppler if resizable.
* '''minwidth''' - (int) The minimum amount of pixels you are able to move the poppler if resizable (If you go below this value the poppler will snap to 0).
* '''vgrabber''' - (string) The centered bitmap of the Grabber.
* '''vbitmap''' - (string) The stretched bitmap of the Grabber.

In the following simple example, the "top" and "bottom" groups are displayed in a resizable frame object:
<groupdef id="top">
<text text="Top" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="bottom">
<text text="Bottom" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="both">
<Wasabi:Frame
orientation="horizontal"
top="top" bottom="bottom"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
/>
</groupdef>

==<Wasabi:CheckBox/>==
The Wasabi:Checkbox object exists only as a namespaced object because it is expected to have only a single themed appearance. The Wasabi:Checkbox object is used for both checkbox functionality and radiobutton functionality, depending up on the specification of its parameters. It consists of a combination of a togglebutton and a text object to create a single functional user interface object.
* '''text''' - (str) The text to display as part of the checkbox.
* '''radioid''' - (id) If the button is to be used as part of a radio group, specify id of the parent Wasabi:RadioGroup object here.
* '''radioval''' - (int) If the button is to be used as part of a radio group, specify its unique integer value here.
* '''action''' - (str) see button.
* '''param''' - (str) see button.
* '''action_target''' - (id) see button.
As with togglebutton, this is a very useful object for binding to a configuration attribute. It is very popular in preferences interfaces. If the object has a value for radioval, that will be the value set into the attribute if the object is activated.

==<Wasabi:DropDownList/>==
The Wasabi:DropDownList is a themed dialog object. It may be statically filled via a parameter or dynamically through script or by binding it to a text feed from code. A Wasabi:DropDownList object may be bound to an integer configuration attribute.
* '''items''' - (str) A semicolon delimited list of items to be displayed in the dropdown area.
* '''feed''' - (id) The id of a text feed to provide a semicolon delimited list of items to be displayed in the dropdown area.
* '''select''' - (int) Specifies an item to be selected.
* '''listheight''' - (int) Allows the skinner to specify the height of the dropdown area in pixels.
* '''maxitems''' - (int) Allows the skinner to specify the max height of the dropdown area in lines of text. If the dropdown area has fewer lines of text than this value when this value is set, the dropdown area is sized to show no more than is needed.

==<Wasabi:ComboBox/>==
The Wasabi:ComboBox is a special type of object which combines dropdownlist functionality with an edit field as well. It has the same parameters as Wasabi:DropDownList.

==<Wasabi:HistoryEditBox/>==
The Wasabi:HistoryEditBox is an even more specialized version of this object family, its only purpose is to remember the last 64 items of text typed into it. It has one extra parameter over Wasabi:DropDownList:
* '''navbuttons''' - (bool) Setting this flag will include the navigation buttons on the object. Default is to have the buttons.

==<componentbucket/>==
The componentbucket is a fancy name for the Thinger. More precisely, in Winamp3, the "Thinger Window" is a window which implements a very simple horizontal componentbucket. The object itself may be instantiated horizontally or vertically and the scrolling of the display within it should be controlled by button objects using "cb_next" and "cb_prev" action parameters and setting the cbtarget parameter to this object. The object has the following parameters:
* '''leftmargin''' - (int) The number of extra pixels to pad the left (or top) edge of the total component bucket scrolling display.
* '''rightmargin''' - (int) The number of extra pixels to pad the right (or bottom) edge of the total component bucket scrolling display.
* '''spacing''' - (int) The number of extra pixels to place between each bucket icon.
* '''vertical''' - (bool) Whether or not the display should scroll vertically or horizontally. Default is horizontal.
A simple "thinger group" follows:
<groupdef id="some.thinger.group.thing">
<button id="mythinger.up" x="0" y="0"
h="20" w="0" relatw="1"
image="mythinger.up.normal"
hoverimage="mythinger.up.hover"
downimage="mythinger.up.down"
action="CB_PREV" cbtarget="mythinger"
/>
<button id="mythinger.down" x="0" y="-20"
h="20" w="0" relatw="1" relaty="1"
image="mythinger.down.normal"
hoverimage="mythinger.down.hover"
downimage="mythinger.down.down"
action="CB_NEXT" cbtarget="mythinger"
/>
<componentbucket id="mythinger" vertical="1" x="0" y="20" w="0" h="-40" relath="1"/>
</groupdef>

==<customobject/>==
The customobject is a useful tool for temporarily instantiating a group into a user interface. It has only one parameter:
groupid - (id) Instantiate the specified group into my defined area.
By finding your customobject in script and simply calling setXmlParam on it to give it new values for groupid, you can switch between the instantiation of multiple groups in a single user interface space.

==<edit/> & <Wasabi:EditBox/>==
The edit control is, as you might guess, a text entry field. Some versions of Wasabi currently embed an OS edit control into the rectangular area defined by this object. This embedded control will not blend properly with the rest of the skin's painting, it will always paint on top of everything else. Keep this in mind when developing skins for widest compatibility.
* '''text''' - (str) Set the text in the edit field to this value.
* '''action''' - (str) Will accept the string "mb_url" to cause this edit box to automatically send its value as an url to the main minibrowser.
* '''multiline''' - (bool) Determines if the box is a single or multiple line input style.
* '''vscroll''' - (bool) Causes the edit window to have a vertical scroller. Default is off.
* '''autohscroll''' - (bool) Causes the horizontal area to scroll if necessary. Default is on.
* '''autoenter''' - (bool) Causes the system to automatically send a "done" event when the user stops typing past a certain timeout. Default is off.
* '''password''' - (bool) Causes the echoed characters to be single marks for password purposes. Default is off.
An edit object may be bound to a string configuration attribute.

Here's the definition of Wasabi:EditBox:
<groupdef
id="wasabi.edit" h="20"
inherit_group="wasabi.objectframe.group"
xuitag="Wasabi:EditBox" embed_xui="wasabi.edit.box"
>
<edit id="wasabi.edit.box" x="1" y="1" w="-2" h="-2" relatw="1" relath="1"/>
</groupdef>

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<group/>==
Groups are instantiated by using the group tag. Groups, when instantiated within a layout or some other groupdef, take the standard GuiObject params in order to define the group's instantiated size and properties, and then all of the contents of the group will be instantiated within the space it defines. At instantiation, a group will express a specified boundary rectangle and, thus, the positions of objects within it depending upon relative, proportional, or design coordinate systems may then be calculated.

To specify which groupdef to instantiate, set the id parameter of the group tag to the id of the desired groupdef. The instantiation of each group can be so customized, however, group instantiates also may be assigned their own custom id to allow each instantiate to be found by code or script:
* '''id''' (id) - The groupdef to be instantiated.
* '''instance_id''' (str) - A new id value with which to be able find this particular instantiate.

The following snippet will create two instantiates of the source group, with one specially customized (in the assumption that the "specialchild.maki" script will be handling the fact one is going to be special) :
<groupdef id="child">
<layer image="childimg" x="0" y="0" w="0" h="0" relatw="0" relath="0"/>
</groupdef>
<groupdef id="parent">
<group id="child" x="0" y="0" w="0" relatw="0" h="90"/>
<group id="child" instance_id="special"
notify="This is a special notification for this obj."
x="0" y="90" w="0" relatw="0" h="-90" relath="1"/>
<script file="specialchild.maki"/>
</groupdef>

==<grouplist/>==
A grouplist is, oddly enough, an object whose purpose is to accept and display a list of multiple groups. For instance, Wasabi's popup menu is a grouplist. A grouplist is expected to be filled in script, and it has no interesting parameters.

==<layer/>==
In Wasabi, the layer is analogous to the same-named object in photoshop. It is simply a nice bitmap graphic to be displayed in the user interface (with the standard alpha and region effects available to all guiobject derived objects, based by default on the properties of the bitmap element it houses). Here are its parameters:
* '''image''' - (id) The id of the bitmap element to be used for display.
* '''inactiveimage''' - (id) A secondary id to be displayed if this guiobject is set to "inactive" status.
* '''region''' - (id) The id of a different bitmap element to use as the source of this object's region.
* '''tile''' - (bool) Setting this flag will tile the image if the rectangular size of the layer is different than the rectangular size of the bitmap. The default is to stretch.
* '''resize''' - (str) A specific string enumerating which direction one should allow the resizing of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''scale''' - (str) A specific string enumerating which direction one should allow the scaling of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''dblclickaction''' - (str) The string of an action to be sent into the system if this object is doubleclicked within its region.
The resize and scale parameters transform the simple layer graphic into interactive gui objects in the system by enabling them to be dragged by the user to resize or change the scale of the parent layout. The eight possible values for these parameters are "top" "left" "right" "bottom" "topleft" "topright" "bottomleft" and "bottomright." If both resize and scale are set on a single layer, the object will act as a resizer by default but as a scaler if the ALT key is held down.

==<animatedlayer/>==
An animatedlayer is a series of frames of sprite animation displayed in the GUI. The frames of animation are specified in the bitmap element which is given in the image parameter to this object. The animation is expected to be a specific progression of frames of a fixed size, also to be specified via parameters on the object. Each frame of animation will have its own region. The animatedlayer object inherits directly from the layer object, so all of the above parameters are valid, along with these specific to animation:
* '''frameheight''' - (int) The height in pixels of each cell of animation. If frameheight is set, the animation will be assumed to be a vertical strip of cells in the given bitmap.
* '''framewidth''' - (int) The width in pixels of each cell of animation. If framewidth is set, the animation will be assumed to be a horizontal strip of cells in the given bitmap.
* '''elementframes''' - (int) The number of total frames of animation. If this value is set, the animation will be assumed to be comprised of multiple bitmap elements whose ids are resolved by using the value of the image parameter as a printf-compatible formatting string with a single integer parameter. See below.
* '''start''' - (int) The frame index which should be used as the beginning frame of the animation. Default is the first frame of the defined animation list.
* '''end''' - (int) The frame index which should be used as the terminating frame of the animation. Default is the last frame of the defined animation list.
* '''speed''' - (int) The delay in ms between each frame, on average. Default is 200 ms.
* '''realtime''' - (bool) Setting this flag will force-redraw the animation area the moment the new frame is meant to be seen. Default behaviour is to wait for and go along with the other invalidations from the rest of the UI on the main thread's draw loop. Expect use of this flag to have a high impact on system performance on slower machines. In other words, don't use it unless you know what you're doing.
* '''autoreplay''' - (bool) Setting this flag will cause the animation to repeat to the beginning frame once it has displayed the terminating frame of animation. Default is ON.
* '''autoplay''' - (bool) Setting this flag will cause the animation to begin playing the moment it is loaded into the user interface. Default is OFF. See below.
* '''debug''' - (bool) Setting this flag will cause the system to draw the current frame number of the animation on top of the animation graphics, for, as you might guess, debug purposes.

You must note that animations are usually meant to be "triggered" through script, as too many live animations happily blitting their way through a deep and complex user interface using lots of alpha blending, et al, can cause significant performance bottlenecks on slow computers (especially if your users aren't expecting your application to be eating all of the machine resources). With this in mind, if you just create an animated layer and drop it into a skin, it will not begin animating unless you set the autoplay parameter.

There are three different ways to present animation frames to this object. The frames may either all be concatenated into a vertical or horizontal "filmstrip" style bitmap element -- in which case the height or width of each animation cell (respectively) should be set with the frameheight or framewidth parameter.
The third way to give this object its animation frames is more complex and consists of loading multiple bitmap elements with each bitmap representing one frame of animation. This is done by first setting the elementframes parameter with the number of frames to be loaded, then by using a special formatting string as the image parameter. For those familiar with the printf function, when the elementframes parameter is set, that integer will be run in a for loop and the image name will be used as the formatting string to a printf function that takes only the current integer in the for loop as a parameter.
For those unfamiliar with printf, this will seem a bit confusing. Somewhere in the string you pass to the image parameter, you should have the two characters %d, and these characters will be replaced by the character representation of the number as it loads bitmap elements. If you want to have 0-loaded prefix characters (for instance "01-09" instead of "1-9"), you can place %02d into your image parameter, and if there aren't enough characters in the number to make up 2 full digits, the number will be left-padded with the zero character. You can just as easily use any number of padding characters as well.
I highly suspect this all still makes little sense, so let me give you a simplified example (missing important parameters) to show three different animated layers each loading three sets of differently named bitmaps:
<elements>
<bitmap id="bmp1"/>
<bitmap id="bmp2"/>
<bitmap id="bmp3"/>
<bitmap id="bmp01img"/>
<bitmap id="bmp02img"/>
<bitmap id="bmp03img"/>
<bitmap id="b00001mp"/>
<bitmap id="b00002mp"/>
<bitmap id="b00003mp"/>
</elements>
<groupdef id="whatever">
<animatedlayer image="bmp%d" elementframes="3"/>
<animatedlayer image="bmp%02dimg" elementframes="3"/>
<animatedlayer image="b%05dmp" elementframes="3"/>
</groupdef>

==<layoutstatus/>==
The layoutstatus implements the small statusbar that can be found at the bottom of many of the default normal layouts which can contain status text, appcmds buttons, and a proportionally completed progress bar. The two parameters to this object control what appcmds will be allowed in the status bar:
* '''exclude''' - (str) A semicolon delimited list of names of appcmds which should not be shown by this control.
* '''include_only''' - (str) A semicolon delimited list of names of appcmds which will be the only appcmds allowed to be shown by this control.
For the most part, these layoutstatus objects are only controllable from code.

==<list/>==
The list object is similar but not identical to the Win32 list common control. It is an optionally multicolumnar list whose purpose is to display multiple pieces of information per horizontal row. It may be filled directly by encoding the contents in the XML, by attaching the object to a proper text feed, or by calling methods on the object from script. The parameters for this object are:
* '''items''' - (str) A properly delimited string of data used to fill the list. See below.
* '''multiselect''' - (bool) This flag, when set, allows the user to select multiple items in the list. Default is to allow multiselect.
* '''autodeselect''' - (bool) This flag, when set, causes selection of any single item in the list to automatically deselect all other items in the list. Default is to not autodeselect.
* '''select''' - (str) The text of a list item to be selected.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''feed''' - (id) The id of a text feed to be used to fill this list.
* '''hoverselect''' - (bool) This flag causes list items to be selected if the user hovers over them. Default is to not hoverselect.
* '''sort''' - (bool) This flag causes the list to sort itself. Default is to not sort.
* '''selectonupdown''' - (bool) This flag causes the list to interpret the keyboard commands to mean "change my selection to the item." Default is to select on keyboard events.
* '''numcolumns''' - (int) How many columns to show. Default is one.
* '''columwidths''' - (int) A semicolon delimited list of integers specifying how to size the column widths in this list. See below.
* '''columnlabels''' - (str) A semicolon delimited list of strings to be used as the multiple column labels.
The list object depends upon being fed numerous strings with proper syntax in order to properly generate and populate a complex list display. The syntax for the items parameter (which is the same syntax as the feed must provide) is to delimit each full row in the list with the ';' semicolon character and to delimit each column entry per row with the ',' character. The columnwidths and columnlabels also require a semicolon (';') delimited list of data, one entry per column. Note that if -1 is given as a width, those columns will be of dynamic width and split up the leftover pixels among themselves. The default is one column with no labels and a width of -1.

Here is a sample list object with 3 rows and 3 columns:
<list id="three.by.three"
items="row1,text,1;row2,moretext,2;row3,stilltext,3"
numcolumns="3" columnwidths="50,-1,50"
multiselect="0" autodeselect="1"
/>

==<mouseredir/>==
This object simply redirects all mouse events from its region to the target object specified in the parameter:
* '''target''' - (id) The target object to get mouse events.
This is useful for when some objects get overlapped by nonfunctional graphics when laying out complex interfaces.

==<Wasabi:RadioGroup/>==
The Wasabi:RadioGroup object is an invisible object whose purpose is to centralize the functionality of multiple Wasabi:CheckBox objects instantiated in radiobutton mode. The radioid params on the Wasabi:CheckBox instantiates should give the id of one of these Wasabi:RadioGroup objects. It has no unique parameters. Here is a snippet of simple radiobutton functionality:
<Wasabi:RadioGroup id="enableddisabled"/>
<Wasabi:CheckBox x="50" y="110" w="60"
text="Enabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="1"
/>
<Wasabi:CheckBox x="-125" y="110" w="62" relatx="1"
text="Disabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="0"
/>

==<rect/>==
A nice flat rectangle. It may be either filled or hollow, and if hollow you may specify only some edges drawn. Here are its parameters:
* '''color''' - (id) The id of a color element, or an comma delimited integer triplet RGB value. Default is "255,00,255" (an ugly color to remind you to set it).
* '''filled''' - (bool) This flag causes the entire rectangular area to be filled with color. Default is to not be filled.
* '''edges''' - (str) A pipe ("|") delimited set of one or all of the following: "left" "right" "top" "bottom" Default is all, ie: "left|right|top|bottom".

==<script/>==
Scripts allow for the simple creation of UI functionality without requiring C++ code. While scripts are "compiled" into "script binaries," these script binaries are special to wasabi and, more importantly, can be run by any compatible Wasabi runtime on any OS to which Wasabi has a runtime. Scripts are bound like GuiObjects into layout or groupdef sections using the script tag and have the ability to find and modify the nearby sibling and child objects once the UI has been fully instantiated. Scripts have two important parameters:
* '''file''' - (str) The filename of the .maki file to load, relative to this xml file.
* '''param''' - (str) A string that will be available to the instance of the .maki file as an instance specific parameter.
Note that a single .maki file may be instantiated as a script object numerous times over, and each instantiation can have its own specific parameter data. Judicious use of this feature can help minimize your reliance on hardcoded strings and limited flexibility in your scripting.

==<slider/> & <Wasabi:HSlider/> & <Wasabi:VSlider/>==
The slider object consists of a background set of images, and a thumb. The thumb is constrained to move in one dimension -- horizontally or vertically, depending upon its orientation. The distance in pixels travelled by the thumb across its total distance is interpollated to produce a value between the low and high boundary integers which is assigned to any configuration attribute which may happen to be attached. Here are the parameters for slider:
* '''barleft''' - (id) The bitmap element for the left or top position of the slider.
* '''barmiddle''' - (id) The bitmap element for the middle, stretched, position of the slider.
* '''barright''' - (id) The bitmap element for the right or bottom position of the slider.
* '''thumb''' - (id) The bitmap element for the slider thumb.
* '''downthumb''' - (id) The bitmap element for the slider thumb when held by the user.
* '''hoverthumb''' - (id) The bitmap element for the slider thumb when the user's mouse is above it.
* '''orientation''' - (str) Either "v" or "vertical" to make the slider vertical, otherwise it will be horizontal.
* '''low''' - (int) Set the low-value boundary. Default is 0.
* '''high''' - (int) Set the high-value boundary. Default is 255.

==<snappoint/>==
The snappoint is an invisible point that will attract other snappoint objects with the same id in any other layout and make them want to dock, like little magnets. These objects have only the following subset of guiobject XML parameters:
* '''id''' - (id) All snappoint objects with the same id will snap to each other. Different ids ignore each other.
* '''x''' - (int) The x position of the snappoint, see: guiobject.
* '''y''' - (int) The y position of the snappoint, see: guiobject.
* '''relatx''' - (int) The horizontal coordinate space of the snappoint, see: guiobject.
* '''relaty''' - (int) The vertical coordinate space of the snappoint, see: guiobject.

==<Wasabi:TabSheet/>==
The Wasabi:TabSheet object contains multiple group instances within it and allows the user to switch between the display of those groups by the ability to click on a list of tab buttons at the top of the rectangular area of the Wasabi:TabSheet. The name parameter of each groupdef is displayed as the text in the tab which corresponds to it. Here are the Wasabi:TabSheet parameters:
* '''windowtype''' - (str) A windowtype string which will instantiate one of every groupdef with the same windowtype and every window class registered with a window creation service to include this windowtype.
* '''children''' - (id) A semicolon delimited list of groupdef ids to also be instantiated as children of this tabsheet.
* '''type''' - (int) There are two different themed display styles for Wasabi:TabSheet. One is with multiple tabs (sheet style), one is with a single button on top that will popup a menu with all the possible tab choices (sidecar style). The Default is sheet style, which is a value of -2. Any other value besides -2 will give you sidecar style.
* '''content_margin_top''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_left''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_right''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_bottom''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.

==<text/> & <Wasabi:Text/>==
The text object is for using the system to render some text in the font of your choice.
Since Winamp 5.5 (skinversion 1.3) text objects can have multiple lines. For a new line use this "/n"

* '''display''' - (str) Either a specific system display string or the string identifier of a text feed. Setting this value will override the text parameter. See below.
* '''ticker''' - (bool) Setting this flag causes the object to scroll left and right if the text does not fit the rectangular area of the text object.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''text''' - (str) A static string to be displayed.
* '''default''' - (str) A parameter alias for text.
* '''font''' - (id) The id of a bitmapfont or truetypefont element. If no element with that id can be found, the OS will be asked for a font with that name instead.
* '''fontsize''' - (int) The size to render the chosen font.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left."
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top."
* '''color''' - (int) The comma delimited RGB color of the text.
* '''shadowcolor''' - (int) The comma delimited RGB color for underrendered shadow text.
* '''shadowx''' - (int) The x offset of the shadowrender.
* '''shadowy''' - (int) The y offset of the shadowrender.
* '''timeroffstyle''' - (int) How to display an empty timer: "0" = " : ", "1" = "00:00", and "2"="" (if one is displaying time)
* '''timecolonwidth''' - (int) How many extra pixels wider or smaller should the colon be when displaying time. Default is -1.
* '''nograb''' - (bool) Setting this flag will cause the text object to ignore left button down messages. Default is off.
* '''showlen''' - (bool) Setting this flag will cause the text display to be appended with the length in minutes and seconds of the current song. Default is off.
* '''forcefixed''' - (bool) Force the system to attempt to render the display string with fixed-width font spacing.
* '''forceupcase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forceuppercase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forcelocase''' - (bool) Force the system to make the display string all lowercase before display.
* '''forcelowercase''' - (bool) Force the system to make the display string all lowercase before display.
* '''bold''' - (bool) Render the display string in bold.
* '''wrap''' - (bool) Setting this flag will cause the text to wrap in its rectangular space. Default is off.
* '''dblclickaction''' - (str) A string in the form "SWITCH;layout" where layout is the id of a layout in this object's parent container. No other actions function on this object. This action is deprecated.
* '''offsetx''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
* '''offsety''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
"SONGNAME" - The name string of the currently playing song (from metadb).
"SONGINFO" - The full info string of the currently playing song (from metadb).
"SONGARTIST" - The artist string of the currently playing song (from metadb).
"SONGTITLE" - The title string of the currently playing song (from metadb).
"SONGALBUM" - The album string of the currently playing song (from metadb).
"SONGLENGTH" - The length string of the currently playing song (from metadb).
"TIME" - The length string of the currently playing song.
"TIMEELAPSED" - The elapsed time string of the currently playing song.
"TIMEREMAINING" - The time remaining string of the currently playing song.
"COMPONENTBUCKET" - The id of the componentbucket (thinger) item the mousecursor is currently hovering above.
"SONGBITRATE" - The bitrate string of the currently playing song (from metadb).
"SONGSAMPLERATE" - The sample string of the currently playing song (from metadb).

*** Broken Action (Winamp 5) ***
"NORMALIZER:STATUS" - The current status of the audio normalizer.

Example:
<text x="81" y="11" w="25" h="21" antialias="0" text="Read This" align="center" color="0,0,0" bold="1"/>

==<Wasabi:TitleBox/>==
The Wasabi:TitleBox object is a nice way to put a simple rectangular frame and title around your content groups. It has the following parameters:
* '''title''' - (str) The string to display in the title area. Default is to use the name parameter of the content group.
* '''content''' - (id) The id of the groupdef to instantiate as content.
* '''centered''' - (bool) Setting this flag will center the title text. Default is to not be centered (and be left justified).
* '''suffix''' - (str) A string which will be appended to the title before it is displayed. In this way, if you instantiate multiple groups as content, each name change can still have a string appended.

==<Wasabi:Titlebar/>==
The Wasabi:TitleBar is the graphically themed bar that is placed at the top of all of the Wasabi:StandardFrame windows. It has the same parameters as the text object, which control the text display of the titlebar.

==<tree/>==
The tree object displays a hierarchical set of information with multiple items, where each item may in turn have multiple subitems. Let's examine its parameters:
* '''items''' - (str) A specially formatted string describing the hierarchical creation of the tree info. See below.
* '''feed''' - (str) The string identifier of a text feed which should provide a string in the same format as the items parameter.
* '''sorted''' - (bool) Setting this flag will cause all of the tree items to be sorted before display. Default is to sort.
* '''childtabs''' - (bool) Setting this flag will cause all tree items with children to display a tab graphic beside them. Default is to show tab graphics.
* '''expandroot''' - (bool) Setting this flag will cause all root tree items to display with their children pre-expanded. Default is to pre-expand root tree items.
The syntax required to describe the hierarchy of tree items is a semicolon delimited list of objects in the form "name(list)" where name is the string to display for that tree item and list is another semicolon delimited list of objects which are the direct children of name.

The following snippet will create a tree with one root node that has three child nodes, with each child node having differing numbers of sub nodes:
<tree id="example.tree"
x="0" y="0" w="0" h="0" relatw="1" relath="1"
items="root(child1(sub1;sub2);child2;child3(sub3))"
/>

==<vis/>==
The vis object is the multistate audio visualization display. It has a multitude of parameters for how simple it is:
* '''colorallbands''' - (int) The comma delimited RGB triplet to color all the spectroscope bands.
* '''colorband1''' - (int) The comma delimited RGB triplet to color spectroscope band 1.
* '''colorband2''' - (int) The comma delimited RGB triplet to color spectroscope band 2.
* '''colorband3''' - (int) The comma delimited RGB triplet to color spectroscope band 3.
* '''colorband4''' - (int) The comma delimited RGB triplet to color spectroscope band 4.
* '''colorband5''' - (int) The comma delimited RGB triplet to color spectroscope band 5.
* '''colorband6''' - (int) The comma delimited RGB triplet to color spectroscope band 6.
* '''colorband7''' - (int) The comma delimited RGB triplet to color spectroscope band 7.
* '''colorband8''' - (int) The comma delimited RGB triplet to color spectroscope band 8.
* '''colorband9''' - (int) The comma delimited RGB triplet to color spectroscope band 9.
* '''colorband10''' - (int) The comma delimited RGB triplet to color spectroscope band 10.
* '''colorband11''' - (int) The comma delimited RGB triplet to color spectroscope band 11.
* '''colorband12''' - (int) The comma delimited RGB triplet to color spectroscope band 12.
* '''colorband13''' - (int) The comma delimited RGB triplet to color spectroscope band 13.
* '''colorband14''' - (int) The comma delimited RGB triplet to color spectroscope band 14.
* '''colorband15''' - (int) The comma delimited RGB triplet to color spectroscope band 15.
* '''colorband16''' - (int) The comma delimited RGB triplet to color spectroscope band 16.
* '''colorbandpeak''' - (int) The comma delimited RGB triplet to color the spectroscope peak line.
* '''colorallosc''' - (int) The comma delimited RGB triplet to color the whole oscilloscope.
* '''colorosc1''' - (int) The comma delimited RGB triplet to color oscilloscope section 1.
* '''colorosc2''' - (int) The comma delimited RGB triplet to color oscilloscope section 2.
* '''colorosc3''' - (int) The comma delimited RGB triplet to color oscilloscope section 3.
* '''colorosc4''' - (int) The comma delimited RGB triplet to color oscilloscope section 4.
* '''colorosc5''' - (int) The comma delimited RGB triplet to color oscilloscope section 5.
* '''channel''' - (int) One of three values for which channel to monitor: "1" is left channel, "2" is right channel, "3" is stereo. Default is stereo.
* '''fliph''' - (bool) If this flag is set, it blits the vis pixels flipped horizontally.
* '''flipv''' - (bool) If this flag is set, it blits the vis pixels flipped vertically.
* '''mode''' - (int) One of three values for which mode to display: "0" is no display, "1" is spectroscope, "2" is oscilloscope. Default is to read from a config item.
When the user clicks on the vis, it will cycle between its three modes.

==<eqvis/>==
The eqvis object is rather specific to media players, as it is the spline display for the eq settings in the Wasabi Media Player.
* '''colortop''' - (str) A color value or color element id for the top portion of the spline display.
* '''colormiddle''' - (str) A color value or color element id for the middle portion of the spline display.
* '''colorbottom''' - (str) A color value or color element id for the bottom portion of the spline display.
* '''colorpreamp''' - (str) A color value or color element id for the preamp bar in the spline display.

==<gradient/>==
The gradient object creates a rectangular color gradient. The available parameters are:
* '''gradient_x1''' - (float) A floating point value for the left side of the rectangle. Default is 0.0
* '''gradient_y1''' - (float) A floating point value for the top side of the rectangle. Default is 0.0
* '''gradient_x2''' - (float) A floating point value for the right side of the rectangle. Default is 1.0
* '''gradient_x1''' - (float) A floating point value for the bottom side of the rectangle. Default is 1.0
* '''points''' - (str) A complex string defining color values for at least two value points with which to build the gradients. See below.
The points syntax is a semicolon delimited list of key=value pairs where the key is a floatingpoint number representing a point in the "gradient space" and the value is an RGB triplet (assumed full alpha) or RGBA quad. For instance, the following object would create a smooth gradient between red in the top left and green at half alpha in the bottom right:
<gradient id="red.to.green"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
points="0.0=255,0,0,255;1.0=0,255,0,128"
/>

==<Wasabi:StandardFrame:Status/>==

==<Wasabi:StandardFrame:NoStatus/>==

==<Wasabi:StandardFrame:Modal/>==

==<Wasabi:StandardFrame:Static/>==
The Wasabi:StandardFrame objects are rectangular frames you can use to encapsulate your own layout contents within the currently themed standard frame. They all have the following parameters:
* '''content''' - (id) The id of the groupdef to instantiate within the Wasabi:StandardFrame.
* '''padtitleleft''' - (int) The distance in pixels to pad the title to the left.
* '''padtitleright''' - (int) The distance in pixels to pad the title to the right.
* '''shade''' - (id) The id of the layout within our container we should switch to if the titlebar is doubleclicked (ie: the id of the windowshade layout). Default is no functionality.
The Wasabi:StandardFrame:Status object has a status bar, while the Wasabi:StandardFrame:NoStatus does not. The Wasabi:StandardFrame:Static object inherits from Wasabi:StandardFrame:NoStatus and also instantiates the wasabi panel graphics. The Wasabi:StandardFrame:Modal object does all that and also removes the control menus to make a fully modal dialog frame.

==<wndholder/>==
A wndholder object, similar to a customobject, holds user interface windows based upon what param is given. The wndholder can also hold window types by guid or groupdef instantiations by id. Here are its parameters:
* '''hold''' - (id) A semicolon delimited list of guids or groupdef ids to hold.
* '''component''' - (id) A parameter alias for hold.
* '''param''' - (id) A parameter alias for hold.
* '''noshowcmdbar''' - (bool) Setting this flag will disable the Wasabi command bar.
* '''noanimatedrects''' - (bool) Setting this flag will disable animated rectangle motion.
* '''disableanimatedrects''' - (bool) A parameter alias for noanimatedrects.
* '''autoopen''' - (bool) Setting this flag will cause the object to auto open.
* '''autoclose''' - (bool) Setting this flag will cause the object to auto close.
Using a wndholder object indicates to the system that you want to be the "container of record" for the possible requested guids when they are launched by the system through, for instance, the C++ coder registering his window class with registerAutopopup(), which calls the underlying api->skinwnd_createByGuid(). The container within which this wndholder is instantiated should also be given a component parameter with the same values. This component parameter is simply a hint to Wasabi that a wndholder object that will accept that component parameter lives within the container.

==<objdirview/>==
The objdirview object displays a tree of hierarchical information to the user, based on a code concept called an Object Directory. An Object Directory is, in essence, just a container of arbitrary items so this object is merely the display of its contents. Here are its parameters:
* '''dir''' - (str) The string identifier of the objdir to which this object should connect.
* '''target''' - (id) The id of an object to which this object may direct the actions of its internal items being selected.
* '''displaytarget''' - (id) The id of a customobject which will be assigned to display the display group parameter of the currently selected objdir item.
* '''defaultdisplay''' - (id) The id of a groupdef to display inside displaytarget if no objdir items are selected.
When items in the objdirview are selected, the objdir is sent an event telling it that an item was selected. The target parameter from XML is included in the data sent in that event. However, the implemented functionality for that event is wholly at the discretion of the programmer implementing the specific objdir in question. For the QueryDir object used in Winamp3's media library, the target param is for a nearby queryline object to be told the selection is changing. Your mileage may vary with other objects.

==<Wasabi:PathPicker/>==
The Wasabi:PathPicker object is a simple object to display a text string of a directory path chosen by the user. When the user clicks on the object, a dir selection service is started, allowing the user to choose a directory path. Attach this object to a string configuration attribute and you have a simple way for users to choose directories as preferences. The Wasabi:PathPicker object has no unique parameters.

==<querydrag/>==
The querydrag object is used to create a visual "drag source" for a nearby queryresults object. The user may click and drag this object and by doing so representationally drag the text of the current query in the queryresults object (which can be dropped into a playlist editor to fill its contents with the results of that query). It has only two parameters:
* '''image''' - (id) The bitmap element to display.
* '''source''' - (id) The source queryresults object. Default is the nearest.
If no valid source can be found, this object silently fails to drag.

==<queryline/>==
The invisible queryline object is used to host a text query to be applied to a queryresults object. One possible use would be to write a script linking the text in a Wasabi:HistoryEditBox to the query parameter of a queryline. And, speaking of its parameters, here they are:
* '''querylist''' - (id) The id of the queryresults which will take the query. Default is to not connect (ie: this param is kinda sorta mandatoryish if you want anything interesting to happen).
* '''query''' - (str) The string of the query itself.
* '''auto''' - (bool) Whether or not to execute an autoquery based on the query parameter (ie: "search on the name column for this substring" instead of "run this query"). Default is to use the string directly as a query (not autoquery).

==<queryresults/>==
The queryresults object is the an invisible binding object that coordinates the filtration of the database by numerous multiple other objects. The queryline and filterlist objects eventually define a single output from the database, and this information is kept in the queryresults object. It has only one parameter:
title - (str) The human readable title for your queryresults. I have no idea why this would be important.
Magically, it seems, placing a queryresults object in the same group next to a PlaylistEditor object makes that PlaylistEditor get filled with the queryresults information. I have no idea how this can be, and sense the telltale signs of powerful dark necromancy at work, here.

XML Containing objects

2008-09-26T10:26:34Z

Pjn123: New page: == Description == These are the objects, that contain other objects. ==<WasabiXML></WasabiXML>== This object contains the whole skin. * '''version''' - (int) The version of the Freeform ...

== Description ==
These are the objects, that contain other objects.

==<WasabiXML></WasabiXML>==
This object contains the whole skin.
* '''version''' - (int) The version of the Freeform Plugin Core the skin is made for. If the Plugin version is less than written, the warning "The skin is too new" will appear. Othervise, the Plugin will read the code according to this value, using backward compability.

==<container></container>==
* '''id''' - (id) The coder-oriented name of the container. This value is used when appealing to this object.
* '''name''' - (str) The human-oriented name of the container, or the "title" of the "window." This value is used by some other GuiObjects, notably the Wasabi:TitleBar object, to be displayed in the system. It does not display automatically. The special string ":componenttitle" will query the contents of the container to find the first windowholder and replace the name assigned to this container with the name of the object held by the windowholder (if any).
* '''default_x''' - (int) The default x position in screen coordinates.
* '''default_y''' - (int) The default y position in screen coordinates.
* '''default_w''' - (int) The default width in scalable units (1 == 1 pixel, if scale==100%)
* '''default_h''' - (int) The default height in scalable units (1 == 1 pixel, if scale==100%)
* '''default_visible''' - (bool) If true, show this container the first time the skin is ever shown (the system will track this value for the user, thereafter).
* '''component''' - (str) If this parameter is set with a guid or groupid, it indicates to the system that inside this component there lives a wndholder object with the same parameter.
* '''dynamic''' - (bool) If true, this means that when the skin is parsed, the container is not created. "Dynamic" containers are meant to be instantiated at runtime by the coder and act as a template to hold any type of content within them. Winamp3 uses dynamic containers to, for instance, provide outer frames for component windows, message boxes, etc. A dynamic container is instantiated when the coder requests it to be, and deleted when the layout is closed. If false (ie: not dynamic), this container will always be instantiated in the system at runtime, and the coder may only "hide" and "show" it.
* '''primaryComponent''' - (String) Defines the primary comonent that should be hold in this container. Useful for SUI Skins in combination with primaryComponent="guid:player" in order to recieve keyboard/mouse actions in our main window.
* '''canclose''' - (bool) Defines if the container can be closed (true) or not (false).
* '''nofocusapponclose''' - (bool) If this Container is closed the main application (Winamp) can be restored from minimized state (true) or not (false).

==<layout></layout>==
* '''id''' - (id) The coder-oriented name of the layout. This value is used when appealing to this object.
* '''owner''' - (str) This parameter has the special syntax of "componentid;layoutid" and will cause the OS window this layout represents to always match the current visible state (minimized, restored, etc) of the owning layout.
* '''lockto''' - (str) This parameter has the same syntax as owner, but causes the relative positioning of this window to be locked to the position of the owning layout. If it moves, the owned layout moves along with it.
* '''alpha''' - (int) This 0-255 integer parameter represents the flat alpha to be applied to the entirety of the layout.
* '''desktopalpha''' - (bool) If true, this flag indicates to Wasabi that this layout would like to be drawn with desktop alpha, if that feature is enabled in the system.
* '''indesktop''' - (bool) If true, causes the OS window to be a child of the desktop (under all other OS windows).
* '''linkwidth''' - (str) This string parameter should be the layoutid of a sibling to this layout inside its container. Any changes to the width of this layout will be applied to the linked layout. One use is for a "windowshade" mode that automatically matches width to the "normal" layout.
* '''linkheight''' - (str) Same as linkwidth, but for height. Will allow you to make "vertical" windowshades, should you so desire.
* '''taskbar''' - (bool) This flag causes the layout to have its own taskbar button. (NOT YET IMPLEMENTED!)
* '''move''' - (bool) Can be set to "0" to disable user moving. Useful for maximized mode.
* '''resizable''' - (bool) Can be set to "0" to disable user resizing
* '''scalable''' - (bool) Can be set to "0" to disable user scaling (experimental)

==<groupdef></groupdef>==
Groups are the workhorse of user interface design in Wasabi. Groups allow one to define and place in coordinate space a logical collection of GuiObjects that will live within a given rectangle (the boundary of the Group). They are the display-cases in which one keeps one's interface items tidily available to the user. The XML params specific to all groupdefs are:

* '''background''' - (str) The id of a bitmap element to be stretched as the background of the group (all of the group contents draw on top of this bitmap)
* '''drawbackground''' - (bool) Whether or not to actually draw the background pixels (useful for using the alpha channel of a background bitmap as the drawing region for the group).
* '''default_w''' - (int) The default width for this group, if the group instantiation does not specify what the width should be.
* '''default_h''' - (int) The default height for this group, if the group instantiation does not specify what the height should be.
* '''maximum_w''' - (int) The maximum width for this group, beyond which Wasabi will not allow the group to be resized.
* '''maximum_h''' - (int) The maximum height for this group, beyond which Wasabi will not allow the group to be resized.
* '''minimum_w''' - (int) The minimum width for this group, beyond which Wasabi will not allow the group to be resized.
* '''minimum_h''' - (int) The minimum height for this group, beyond which Wasabi will not allow the group to be resized.
* '''propagatesize''' - (bool) Sends this group's default/minimum/maximum size parameters to the layout which contains the group. ie: if my minimum_h is 200 and my containing layout's minimum_h is 100 and I have my propagatesize flag set, my layout will now have a * '''minimum_h''' of 200, etc.
* '''lockminmax''' - (bool) Locks the minimum and maximum size values to the default size value. Makes the group "nonresizable."
* '''design_w''' - (int) The "design width" of this group. The "design" based sizes allow for a conditional layout of GuiObjects within them. These parameters are used in conjunction with the x1/x2/y1/y2/anchor coordinate system, which will be documented with GuiObjects.
* '''design_h''' - (int) The "design height" of this group.
* '''name''' - (str) A human readable string which will be the "Name" of this group, used by various objects in the system when referring the user to this groupdef. For instance, the TabSheet GuiObject contains one group for each displayed tab, and the name parameter of each group is the string displayed within each corresponding tab.
* '''autowidthsource''' - (str) The id of an object contained within this group from which this group should set its width. For instance, the groupdef that defines the contents of the Checkbox GuiObject sets its width based on the size of the text object within it, which itself will be sized at instantiation depending upon the text placed within that particular text object (See: $/studio/studio/Wacs/wasabi.system/ui/guiobjects/xml/checkbox/checkbox.xml).
* '''autoheightsource''' - (str) The id of an object contained within the group from which this group should set its height.
* '''register_autopopup''' - (bool) This flag causes this group to be listed in the Windows submenu of the Wasabi MainMenu context menu. Its name parameter is displayed as the menu item. If that menu item is then selected, this group will be launched as a layout (in other words, in its own window). This is quite useful for the quick debugging of groupdef objects.
* '''windowtype''' - (str) Specifying a groupdef as being a certain windowtype causes the group to automatically be instantiated and added to the collection specified by that windowtype. See below for more information and a list of what windowtypes currently exist in the system.
* '''inherit_content''' - (bool) This parameter is used to be able to override the contents of a group already defined in the system. To go back to the "blueprints" analogy, this is like finding someone's original blueprints and editing them. The id of this groupdef should match the id of the other groupdef that you wish to modify. See below for examples and more information.
* '''inherit_group''' - (str) This parameter is used to be able to copy the contents of a group already defined in the system as the starting point for one's own group definition. To go back to the "blueprints" analogy, this is like photocopying someone else's blueprints as a starting point for one's own. The param is the id of the other groupdef you wish to inherit.
* '''inherit_params''' - (bool) Specifies whether or not to inherit the params of the inherited group as well as its content. Only meaningful with a valid inherit_group param or if overriding a previous groupdef.
* '''xuitag''' - (str) Specifies that this group definition will create a new Xui object into the system with the given tag string. See Extending Wasabi: Creating XuiObjects for more information.
* '''embed_xui''' - (str) Specifies the id of a contained object to which any XML parameters not valid for a group sent to the instantiation of the group (or the xuitag string) should be forwarded. See Extending Wasabi: Creating XuiObjects for more information.
In addition to these parameters, all parameters that apply to a GuiObject may also be placed on a groupdef. This sets them up as default parameters for when the group is used in a group tag, which the skinner may of course override.

Please note, as referenced earlier, the layout object is simply a special type of groupdef object, so all of these parameters also apply to it as well.

Groups are inherently reusable objects, as well. In a process that object oriented programmers should be well familiar with, Groups are first Defined to contain their particular contents and then can be later Instantiated (multiple times, if so desired) within a user interface.

For the non-programmers among our readers, consider the following analogy: Definition consists of making a set of instructions for how to create something, like the blueprints for a house. Instantiation is the process of creating that something based upon its definition: in this case, giving the blueprints to a General Contractor and waiting the requisite indeterminate number of weeks to have them build that house to your specification. Definition makes a concept. Instantiation converts it into a thing.

Now imagine the vast expanse of cookie-cutter housing tracts that have proliferated across American suburbia in the past decades. In a single tract, only a small handful of different blueprints were Defined for building the hundreds of homes to be found, and each Instance of those designs has been personalized by its denizens (subject to the CC&R's for that neighborhood, of course).

In the same way, you may define a Group to contain a specific set of objects with a specific set of parameters (your "instructions"), and then use ("instantiate") that Group over and over again in your user interface with minor tweaks to each usage ("instance").

The XML tag Wasabi uses for Group Definition is the groupdef tag, while the tag used for Group Instantiation is the group tag. This section will deal specifically with the particularities of Group Definition and the parameters of the groupdef tag, while the group tag will be documented in its own section in the next chapter (along with everything else that is meant to live inside of a groupdef tag). Because the simplest form of a groupdef is rather boring, we'll first cover the parameters for groupdefs and then return to creating sample XML snippets somewhat more complicated and useful than the following (which defines "my group" as merely an instantiation of the contents of "othergroup")
<groupdef id="mygroup">
<group id="othergroup"/>
</groupdef>

XML GUI Objects

2008-09-26T10:19:56Z

Pjn123: New page: ==GuiObject (Global params)== All the objects to be discussed in this chapter are GuiObjects. This means, among other things, all such objects have the same basic set of parameters which ...

==GuiObject (Global params)==
All the objects to be discussed in this chapter are GuiObjects. This means, among other things, all such objects have the same basic set of parameters which are valid for all of them. All GuiObjects are objects that live with a set of spatial coordinates within a groupdef (or layout). A button, a piece of text, a flat bitmap image, a tree of items, and an edit box would all be different kinds of GuiObjects, and all of the parameters listed here work on all of them.
* '''alpha''' - (int) An integer [0,255] specifying the alpha blend mode of the object (0 is transparent, 255 is opaque). Default is 255.
* '''activealpha''' - (int) A different alpha value [0,255] for the object in its active state.
* '''inactivealpha''' - (int) A different alpha value [0,255] for the object in its inactive state (if you set both activealpha and inactivealpha, it is meaningless to set alpha).
* '''cursor''' - (id) The id of the cursor element to be displayed when the mouse is over this object. You can also use the system cursors. A list can be found here: '''[[Appendix: Cursors]]'''
* '''tooltip''' - (str) A human readable string to display as a tooltip for when the mouse is hovered over this object.
* '''move''' - (bool) Setting this flag causes any dragging of this object to actually drag the entire layout within which the object resides.
* '''renderbasetexture''' - (bool) A flag to tell the system to always use the system's base texture as the background of this object.
* '''cfgattrib''' - (str) A configattrib string assigned to this GuiObject. Here is a list of a few: '''[[Appendix: ConfigAttrib]]'''
* '''visible''' - (bool) Whether or not the object should be displayed in its group or layout.
* '''x''' - (int) The X position of the object in its group or layout.
* '''y''' - (int) The Y position of the object in its group or layout.
* '''w''' - (int) The width of the object in its group or layout.
* '''h''' - (int) The height of the object in its group or layout.
* '''relatx''' - (int) This [0,2] integer determines if the X position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relaty''' - (int) This [0,2] integer determines if the Y position should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relatw''' - (int) This [0,2] integer determines if the width should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''relath''' - (int) This [0,2] integer determines if the height should be calculated by normal ("0"), relative ("1") or proportional ("2") units. See below.
* '''fitparent''' - (bool) This parameter is used instead of x;y;w;h parameters and means that the object covers all the area of the parent object.
* '''x1''' - (int) The X position of the left edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y1''' - (int) The Y position of the top edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''x2''' - (int) The X position of the right edge of the object in its group or layout. Only works inside definitions with design_w parameters set.
* '''y2''' - (int) The Y position of the bottom edge of the object in its group or layout. Only works inside definitions with design_h parameters set.
* '''anchor''' - (str) A list of one or more of the following keywords, delimited by the pipe (|) character: "top|bottom|left|right" these anchors work with x1/y1/x2/y2 positioning to fix the edge of the object its distance from the edges of the group or layout which contains it.
* '''sysmetricsx''' - (bool) This flag will cause this object to be resized by having its X position multiplied by the OS scalar coefficient.
* '''sysmetricsy''' - (bool) This flag will cause this object to be resized by having its Y position multiplied by the OS scalar coefficient.
* '''sysmetricsw''' - (bool) This flag will cause this object to be resized by having its width multiplied by the OS scalar coefficient.
* '''sysmetricsh''' - (bool) This flag will cause this object to be resized by having its height multiplied by the OS scalar coefficient.
* '''rectrgn''' - (bool) Setting this flag causes the engine to ignore the object's region for handling "mouse over object" detection and only use the bounding rectangle.
* '''regionop''' - (int) An integer enumeration [-2,1] for what kind of region-operation to perform with this object's calculated region against its parent's region. See below for more information.
* '''sysregion''' - (int) Param alias for regionop.
* '''wantfocus''' - (bool) This flag determines whether or not an object ever gets the focus at all.
* '''focusonclick''' - (bool) This flag determines whether or not an object gets the focus when clicked.
* '''taborder''' - (int) This value indicates the "tab order" of the object within the group or layout in which it resides. When the user hits the tab key, the interface focus moves to the next greater object in tab order. Objects with equal tab order will be ordered in the reverse of their insertion order in XML (last object in is first in default tab order).
* '''nodblclick''' - (bool) This flag blocks doubleclick events from being received by this object.
* '''noleftclick''' - (bool) This flag blocks left click events from being received by this object.
* '''norightclick''' - (bool) This flag blocks right click events from being received by this object.
* '''nomousemove''' - (bool) This flag blocks mouse move events from being received by this object.
* '''nocontextmenu''' - (bool) This flag blocks the main context menu from being displayed for rightclick.
* '''ghost''' - (bool) This flag causes the object to be transparent to all user interface events such that all the mouse messages pass to the object(s) visibly underneath it.
* '''notify'''(0-9) - (str) A string to be used as a parameter to the onNotify event for the object upon instantiation. The notify strings 0-9 will be sent in order.
* '''droptarget''' - (id) The id of an object to which all of this object's drag and drop events will be redirected.

'''Appendixes:'''

*[[Appendix: ConfigAttrib|ConfigAttrib]]
*[[Appendix: Cursors|Cursors]]

==<button/> & <togglebutton/>==
The button is a simple concept in Wasabi - you push it, it activates something. It can either be used as a substrate for a script (ie: put a script and a button in the same groupdef, and you can handle complex button functionality with the script) or it can be used by itself to launch an action into the system when pressed. You can implement your own action handlers in code, but some global actions predefined to be handled by the system are also available.

* '''image''' - (id) The id of the bitmap element to display in its "normal" state.
* '''downimage''' - (id) The id of the bitmap element to display when the user is pressing down on the button.
* '''hoverimage''' - (id) The id of the bitmap element to display when the user is hovering the mouse over the button.
* '''activeimage''' - (id) The id of the bitmap element to display when the object is in its "active" state (usually only used by togglebutton, but available on the basic button object to allow the user to create extended functionality in script).
* '''text''' - (str) A string of text to be rendered on top of the button's currrent state image. In this way, you can create a single button graphic and reuse it to create internationally localizable buttons.
* '''action''' - (str) The action to fire if the button is clicked (when it enters into its downstate).
* '''param''' - (str) The param to go with the action fired if the button is clicked.
* '''borders''' - (bool) Set this flag if you want to be a styled button.
* '''style''' - (str) Set the style value if you set the borders flag, to tell wasabi what type of button style you want.
** "button_normal" "osbutton_normal" "osbutton_close" "osbutton_minimize" and "osbutton_maximize"
* '''retcode''' - (int) Specifies the "modal return code" for the button. Only valid with the "endmodal" system action.
* '''cbtarget''' - (id) The optional "component bucket target" for this button. Only valid with "cb_next" or "cb_prev" system actions. A componentbucket is another name for the thinger -- this allows you to have targetted button controls for more than one componentbucket in a user interface.
* '''action_target''' - (id) This will send the specified action only to the object whose id is listed here. The param parameter is ignored in this case and this string is sent as the param data for the action. Most objects don't understand being sent actions (this is an extended functionality), so this won't do anything in most cases.
* '''center_image''' - (bool) Setting this flag causes the image to be centered against the object rectangle. This parameter is only important when both borders and an image are specified on a single object.
'''[[Appendix: Action List]]'''

Example:
<button x="50" y="10" action="VID_FS" image="vis.fs.1" hoverImage="vis.fs.2" downImage="vis.fs.3"/>
<button x="10" y="40" w="100" h="20" borders="1" style="osbutton_normal" text="Click Here"/>

==<nstatesbutton/>==
The nstatesbutton is a specialized kind of togglebutton whose purpose is to cycle through a number of different visual states. The parameters beyond togglebutton that it implements are:
* '''nstates''' - (int) The number of discrete states in which the object may exist.
* '''cfgvals''' - (str) A semicolon delimited list of values to represent custom config values for the multiple states. Default is the current state number. See below.
The nstatesbutton uses special handling of the image, downimage, hoverimage, and activeimage parameters expressed by the button object (from which this object is derived). The nstatesbutton will actually append the state number to the four image parameter strings to calculate the bitmap ids to be loaded for the current object state. Remember, like most everything else in a computer, this "current state value" counts from 0 and is therefore in the range [0, nstates-1].

If the object is bound to a configuration attribute, that attribute will be set with a cfgval every time the nstatesbutton transitions to a new state. If the cfgvals parameter is not set, the attribute will simply be set with the current state value. If the cfgvals parameter is set, it will parse the string and set the config attrib with the n'th substring corresponding to the current state value.

The following snippet fully describes two nstatesbutton objects with three states each, one using full images for its visual display, one using themed Wasabi borders with three different state logos:
<elements>
<bitmap id="nimg0"/>
<bitmap id="dimg0"/>
<bitmap id="himg0"/>
<bitmap id="nimg1"/>
<bitmap id="dimg1"/>
<bitmap id="himg1"/>
<bitmap id="nimg2"/>
<bitmap id="dimg2"/>
<bitmap id="himg2"/>
<bitmap id="logo0"/>
<bitmap id="logo1"/>
<bitmap id="logo2"/>
</elements>
<groupdef id="some.random.groupdef">
<nstatesbutton id="three.freeform.states"
nstates="3" cfgvals="one;two;three"
image="nimg" downimage="dimg" hoverimage="himg"
/>
<nstatesbutton id="three.themed.states"
nstates="3" image="logo" borders="1" center_image="1"
/>
</groupdef>
If the "three.freeform.states" nstatesbutton were assigned to a configattrib, that attribute would be filled with the values "one" "two" and "three" in order. If the "three.themed.states" were instead assigned to a configattrib, it would be filled with the default values "0" "1" and "2" in order.

==<images/>==
The images object is object that displays a certain image based on the position of a slider. This object is very similar to [[Animationlayer]] except that this animation's current frame will be determined by the position of a slider. An example of implementation is the old Classic Winamp skins where the volume slider background changes colour from green to red depending on its position (0%-100%). This object is currently under development and not all sliders are supported. Currently only Volume and Panning(Balance) sliders can be used as sources.

* '''images''' - (id) A bitmap element for the array of images that will be used.
* '''source''' - (id) Id of the slider that will determine the current animation frame.
* '''imagesspacing''' - (int) The hight of each animation frame in the bitmap element. This will determine the total number of frames, (300/15=20)

Example:
<images source="volume" x="0" y="0" w="68" h="13"
images="main.volpan.volume" imagesspacing="15"/>

<images source="balance" x="73" y="0" w="38" h="13"
images="main.volpan.balance" imagesspacing="15"/>

<slider id="Volume" action="VOLUME" x="1" y="0" w="68" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

<slider id="Pan" action="PAN" x="74" y="0" w="38" h="13"
thumb="main.volpan.thumb" downThumb="main.volpan.thumb.pressed"/>

==<PlaylistDirectory/>==
The PlaylistDirectory object is simply a list with all the saved playlist from the media library. Please remember that this object is always on top of other objects, so you'll have to hide it via maki if you dont want it to be visible. This object was introduced in Winamp 5.5(skinversion 1.3)

==<AlbumArt/>==
The AlbumArt object is a simple GuiObject that displays a picture of the album cover of the song thats playing in Winamp. Please note that if you want do something to this object in a maki script you'll have to define it as a guiobject and not as a layer.
* '''notfoundImage''' - (id) A bitmap element that used if Winamp cant find any cover for the song.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left".
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top".
* '''source''' - (str) Path+Filename of file that you want to display in this object.
* '''stretched''' - (bool) Stretch the albumart to the size of the object.

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<Winamp:Browser/>==
This is basically the browser you'll see in the Bento Winamp skin. You'll also need Winamp 5.54 (skinversion 1.34) for it to work.

- '''home''' - (str) Url for the default homepage for the browser xui.

==<browser/>==
The browser object embeds an external browser technology window (such as IE or Mozilla) into the user interface with which you can load and render HTML directly.
* '''url''' - (str) The url to be displayed.
* '''mainmb''' - (bool) Setting this flag makes this browser object the "main mini-browser" for the system.
* '''targetname''' - (str) This allows this browser object to be set as a specific HTML target.
* '''scrollbars''' - (str) An enumerated string to determine how the system should handle the embedded browser's scrollbars. See below.
Numerous interfaces in Wasabi refer to or control the "main" mini-browser. Setting the mainmb flag will cause the last browser object which processed its mainmb param to be the main. In other words, please don't set this flag on more than one object if you actually care which one is the main.
Scrollbars are important for big browser windows, but can interfere with the simple rendering of HTML content as part of a Wasabi UI. To this end, the skinner can control how the scrollbars of the embedded browser are displayed by setting the scrollbars parameter to one of the following four string values: "auto" "never" "always" or "default" - default is to allow the HTML page to specify, all others override.

==<Wasabi:Frame/>==
The Wasabi:Frame object is a themed control whose purpose is to provide a movable interface between two rectangular areas, much like the concept of an HTML frame. Here are its parameters:

* '''orientation''' - (str) One of the following four string values: "v" "vertical" "h" "horizontal" (Default is vertical).
* '''left''' - (id) The group to be instantiated in the left or top frame.
* '''right''' - (id) The group to be instantiated in the right or bottom frame.
* '''top''' - (id) The group to be instantiated in the left or top frame.
* '''bottom''' - (id) The group to be instantiated in the right or bottom frame.
* '''from''' - (str) One of the following string values: "l" "left" "t" "top" or "r" "right" "b" "bottom" (Default is left).
* '''width''' - (int) How many pixels from the chosen edge to start.
* '''height''' - (int) How many pixels from the chosen edge to start.
* '''resizable''' - (bool) Set this flag to allow the user to change the position of the framedivider. Default is to allow it to be resizable.
* '''maxwidth''' - (int) The maximum amount of pixels you are able to move the poppler if resizable.
* '''minwidth''' - (int) The minimum amount of pixels you are able to move the poppler if resizable (If you go below this value the poppler will snap to 0).
* '''vgrabber''' - (string) The centered bitmap of the Grabber.
* '''vbitmap''' - (string) The stretched bitmap of the Grabber.

In the following simple example, the "top" and "bottom" groups are displayed in a resizable frame object:
<groupdef id="top">
<text text="Top" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="bottom">
<text text="Bottom" align="center" x="0" y="0" w="0" h="0" relatw="1" relath="1"/>
</groupdef>
<groupdef id="both">
<Wasabi:Frame
orientation="horizontal"
top="top" bottom="bottom"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
/>
</groupdef>

==<Wasabi:CheckBox/>==
The Wasabi:Checkbox object exists only as a namespaced object because it is expected to have only a single themed appearance. The Wasabi:Checkbox object is used for both checkbox functionality and radiobutton functionality, depending up on the specification of its parameters. It consists of a combination of a togglebutton and a text object to create a single functional user interface object.
* '''text''' - (str) The text to display as part of the checkbox.
* '''radioid''' - (id) If the button is to be used as part of a radio group, specify id of the parent Wasabi:RadioGroup object here.
* '''radioval''' - (int) If the button is to be used as part of a radio group, specify its unique integer value here.
* '''action''' - (str) see button.
* '''param''' - (str) see button.
* '''action_target''' - (id) see button.
As with togglebutton, this is a very useful object for binding to a configuration attribute. It is very popular in preferences interfaces. If the object has a value for radioval, that will be the value set into the attribute if the object is activated.

==<Wasabi:DropDownList/>==
The Wasabi:DropDownList is a themed dialog object. It may be statically filled via a parameter or dynamically through script or by binding it to a text feed from code. A Wasabi:DropDownList object may be bound to an integer configuration attribute.
* '''items''' - (str) A semicolon delimited list of items to be displayed in the dropdown area.
* '''feed''' - (id) The id of a text feed to provide a semicolon delimited list of items to be displayed in the dropdown area.
* '''select''' - (int) Specifies an item to be selected.
* '''listheight''' - (int) Allows the skinner to specify the height of the dropdown area in pixels.
* '''maxitems''' - (int) Allows the skinner to specify the max height of the dropdown area in lines of text. If the dropdown area has fewer lines of text than this value when this value is set, the dropdown area is sized to show no more than is needed.

==<Wasabi:ComboBox/>==
The Wasabi:ComboBox is a special type of object which combines dropdownlist functionality with an edit field as well. It has the same parameters as Wasabi:DropDownList.

==<Wasabi:HistoryEditBox/>==
The Wasabi:HistoryEditBox is an even more specialized version of this object family, its only purpose is to remember the last 64 items of text typed into it. It has one extra parameter over Wasabi:DropDownList:
* '''navbuttons''' - (bool) Setting this flag will include the navigation buttons on the object. Default is to have the buttons.

==<componentbucket/>==
The componentbucket is a fancy name for the Thinger. More precisely, in Winamp3, the "Thinger Window" is a window which implements a very simple horizontal componentbucket. The object itself may be instantiated horizontally or vertically and the scrolling of the display within it should be controlled by button objects using "cb_next" and "cb_prev" action parameters and setting the cbtarget parameter to this object. The object has the following parameters:
* '''leftmargin''' - (int) The number of extra pixels to pad the left (or top) edge of the total component bucket scrolling display.
* '''rightmargin''' - (int) The number of extra pixels to pad the right (or bottom) edge of the total component bucket scrolling display.
* '''spacing''' - (int) The number of extra pixels to place between each bucket icon.
* '''vertical''' - (bool) Whether or not the display should scroll vertically or horizontally. Default is horizontal.
A simple "thinger group" follows:
<groupdef id="some.thinger.group.thing">
<button id="mythinger.up" x="0" y="0"
h="20" w="0" relatw="1"
image="mythinger.up.normal"
hoverimage="mythinger.up.hover"
downimage="mythinger.up.down"
action="CB_PREV" cbtarget="mythinger"
/>
<button id="mythinger.down" x="0" y="-20"
h="20" w="0" relatw="1" relaty="1"
image="mythinger.down.normal"
hoverimage="mythinger.down.hover"
downimage="mythinger.down.down"
action="CB_NEXT" cbtarget="mythinger"
/>
<componentbucket id="mythinger" vertical="1" x="0" y="20" w="0" h="-40" relath="1"/>
</groupdef>

==<customobject/>==
The customobject is a useful tool for temporarily instantiating a group into a user interface. It has only one parameter:
groupid - (id) Instantiate the specified group into my defined area.
By finding your customobject in script and simply calling setXmlParam on it to give it new values for groupid, you can switch between the instantiation of multiple groups in a single user interface space.

==<edit/> & <Wasabi:EditBox/>==
The edit control is, as you might guess, a text entry field. Some versions of Wasabi currently embed an OS edit control into the rectangular area defined by this object. This embedded control will not blend properly with the rest of the skin's painting, it will always paint on top of everything else. Keep this in mind when developing skins for widest compatibility.
* '''text''' - (str) Set the text in the edit field to this value.
* '''action''' - (str) Will accept the string "mb_url" to cause this edit box to automatically send its value as an url to the main minibrowser.
* '''multiline''' - (bool) Determines if the box is a single or multiple line input style.
* '''vscroll''' - (bool) Causes the edit window to have a vertical scroller. Default is off.
* '''autohscroll''' - (bool) Causes the horizontal area to scroll if necessary. Default is on.
* '''autoenter''' - (bool) Causes the system to automatically send a "done" event when the user stops typing past a certain timeout. Default is off.
* '''password''' - (bool) Causes the echoed characters to be single marks for password purposes. Default is off.
An edit object may be bound to a string configuration attribute.

Here's the definition of Wasabi:EditBox:
<groupdef
id="wasabi.edit" h="20"
inherit_group="wasabi.objectframe.group"
xuitag="Wasabi:EditBox" embed_xui="wasabi.edit.box"
>
<edit id="wasabi.edit.box" x="1" y="1" w="-2" h="-2" relatw="1" relath="1"/>
</groupdef>

==<grid/>==
The grid object is a very nice object for creating stretchable images that still look good on the edges. It is a graphic, like a layer, but unlike layer it is created by applying nine different bitmaps, stretching five of them. There are, as you might guess, nine parameters

* '''topleft''' - (id) A bitmap element for the top left section of the grid.
* '''top''' - (id) A bitmap element for the top middle section of the grid.
* '''topright''' - (id) A bitmap element for the top right section of the grid.
* '''left''' - (id) A bitmap element for the middle left section of the grid.
* '''middle''' - (id) A bitmap element for the center section of the grid.
* '''right''' - (id) A bitmap element for the middle right section of the grid.
* '''bottomleft''' - (id) A bitmap element for the bottom left section of the grid.
* '''bottom''' - (id) A bitmap element for the bottom middle section of the grid.
* '''bottomright''' - (id) A bitmap element for the bottom right section of the grid.

Essentially, the given rectangle of the grid is intersected with 2 horizontal and 2 vertical lines. The topleft, topright, bottomleft, and bottomright bitmap elements will not be resized. The top, left, middle, right, and bottom bitmap elements, however, will be stretched to make all fit the grid rectangle. Using intelligently sized bitmap elements is fairly critical for this object. If you're having trouble, try starting with all of your bitmap elements as equal-sized squares.

Example:
<grid x="70" y="25" w="-74" relatw="1" h="20" topleft="main.text.left" top="main.text.center" topright="main.text.right"/>

==<group/>==
Groups are instantiated by using the group tag. Groups, when instantiated within a layout or some other groupdef, take the standard GuiObject params in order to define the group's instantiated size and properties, and then all of the contents of the group will be instantiated within the space it defines. At instantiation, a group will express a specified boundary rectangle and, thus, the positions of objects within it depending upon relative, proportional, or design coordinate systems may then be calculated.

To specify which groupdef to instantiate, set the id parameter of the group tag to the id of the desired groupdef. The instantiation of each group can be so customized, however, group instantiates also may be assigned their own custom id to allow each instantiate to be found by code or script:
* '''id''' (id) - The groupdef to be instantiated.
* '''instance_id''' (str) - A new id value with which to be able find this particular instantiate.

The following snippet will create two instantiates of the source group, with one specially customized (in the assumption that the "specialchild.maki" script will be handling the fact one is going to be special) :
<groupdef id="child">
<layer image="childimg" x="0" y="0" w="0" h="0" relatw="0" relath="0"/>
</groupdef>
<groupdef id="parent">
<group id="child" x="0" y="0" w="0" relatw="0" h="90"/>
<group id="child" instance_id="special"
notify="This is a special notification for this obj."
x="0" y="90" w="0" relatw="0" h="-90" relath="1"/>
<script file="specialchild.maki"/>
</groupdef>

==<grouplist/>==
A grouplist is, oddly enough, an object whose purpose is to accept and display a list of multiple groups. For instance, Wasabi's popup menu is a grouplist. A grouplist is expected to be filled in script, and it has no interesting parameters.

==<layer/>==
In Wasabi, the layer is analogous to the same-named object in photoshop. It is simply a nice bitmap graphic to be displayed in the user interface (with the standard alpha and region effects available to all guiobject derived objects, based by default on the properties of the bitmap element it houses). Here are its parameters:
* '''image''' - (id) The id of the bitmap element to be used for display.
* '''inactiveimage''' - (id) A secondary id to be displayed if this guiobject is set to "inactive" status.
* '''region''' - (id) The id of a different bitmap element to use as the source of this object's region.
* '''tile''' - (bool) Setting this flag will tile the image if the rectangular size of the layer is different than the rectangular size of the bitmap. The default is to stretch.
* '''resize''' - (str) A specific string enumerating which direction one should allow the resizing of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''scale''' - (str) A specific string enumerating which direction one should allow the scaling of the parent layout if this object's region is gripped and dragged by the user. Incompatible with the move parameter on guiobject. See below.
* '''dblclickaction''' - (str) The string of an action to be sent into the system if this object is doubleclicked within its region.
The resize and scale parameters transform the simple layer graphic into interactive gui objects in the system by enabling them to be dragged by the user to resize or change the scale of the parent layout. The eight possible values for these parameters are "top" "left" "right" "bottom" "topleft" "topright" "bottomleft" and "bottomright." If both resize and scale are set on a single layer, the object will act as a resizer by default but as a scaler if the ALT key is held down.

==<animatedlayer/>==
An animatedlayer is a series of frames of sprite animation displayed in the GUI. The frames of animation are specified in the bitmap element which is given in the image parameter to this object. The animation is expected to be a specific progression of frames of a fixed size, also to be specified via parameters on the object. Each frame of animation will have its own region. The animatedlayer object inherits directly from the layer object, so all of the above parameters are valid, along with these specific to animation:
* '''frameheight''' - (int) The height in pixels of each cell of animation. If frameheight is set, the animation will be assumed to be a vertical strip of cells in the given bitmap.
* '''framewidth''' - (int) The width in pixels of each cell of animation. If framewidth is set, the animation will be assumed to be a horizontal strip of cells in the given bitmap.
* '''elementframes''' - (int) The number of total frames of animation. If this value is set, the animation will be assumed to be comprised of multiple bitmap elements whose ids are resolved by using the value of the image parameter as a printf-compatible formatting string with a single integer parameter. See below.
* '''start''' - (int) The frame index which should be used as the beginning frame of the animation. Default is the first frame of the defined animation list.
* '''end''' - (int) The frame index which should be used as the terminating frame of the animation. Default is the last frame of the defined animation list.
* '''speed''' - (int) The delay in ms between each frame, on average. Default is 200 ms.
* '''realtime''' - (bool) Setting this flag will force-redraw the animation area the moment the new frame is meant to be seen. Default behaviour is to wait for and go along with the other invalidations from the rest of the UI on the main thread's draw loop. Expect use of this flag to have a high impact on system performance on slower machines. In other words, don't use it unless you know what you're doing.
* '''autoreplay''' - (bool) Setting this flag will cause the animation to repeat to the beginning frame once it has displayed the terminating frame of animation. Default is ON.
* '''autoplay''' - (bool) Setting this flag will cause the animation to begin playing the moment it is loaded into the user interface. Default is OFF. See below.
* '''debug''' - (bool) Setting this flag will cause the system to draw the current frame number of the animation on top of the animation graphics, for, as you might guess, debug purposes.

You must note that animations are usually meant to be "triggered" through script, as too many live animations happily blitting their way through a deep and complex user interface using lots of alpha blending, et al, can cause significant performance bottlenecks on slow computers (especially if your users aren't expecting your application to be eating all of the machine resources). With this in mind, if you just create an animated layer and drop it into a skin, it will not begin animating unless you set the autoplay parameter.

There are three different ways to present animation frames to this object. The frames may either all be concatenated into a vertical or horizontal "filmstrip" style bitmap element -- in which case the height or width of each animation cell (respectively) should be set with the frameheight or framewidth parameter.
The third way to give this object its animation frames is more complex and consists of loading multiple bitmap elements with each bitmap representing one frame of animation. This is done by first setting the elementframes parameter with the number of frames to be loaded, then by using a special formatting string as the image parameter. For those familiar with the printf function, when the elementframes parameter is set, that integer will be run in a for loop and the image name will be used as the formatting string to a printf function that takes only the current integer in the for loop as a parameter.
For those unfamiliar with printf, this will seem a bit confusing. Somewhere in the string you pass to the image parameter, you should have the two characters %d, and these characters will be replaced by the character representation of the number as it loads bitmap elements. If you want to have 0-loaded prefix characters (for instance "01-09" instead of "1-9"), you can place %02d into your image parameter, and if there aren't enough characters in the number to make up 2 full digits, the number will be left-padded with the zero character. You can just as easily use any number of padding characters as well.
I highly suspect this all still makes little sense, so let me give you a simplified example (missing important parameters) to show three different animated layers each loading three sets of differently named bitmaps:
<elements>
<bitmap id="bmp1"/>
<bitmap id="bmp2"/>
<bitmap id="bmp3"/>
<bitmap id="bmp01img"/>
<bitmap id="bmp02img"/>
<bitmap id="bmp03img"/>
<bitmap id="b00001mp"/>
<bitmap id="b00002mp"/>
<bitmap id="b00003mp"/>
</elements>
<groupdef id="whatever">
<animatedlayer image="bmp%d" elementframes="3"/>
<animatedlayer image="bmp%02dimg" elementframes="3"/>
<animatedlayer image="b%05dmp" elementframes="3"/>
</groupdef>

==<layoutstatus/>==
The layoutstatus implements the small statusbar that can be found at the bottom of many of the default normal layouts which can contain status text, appcmds buttons, and a proportionally completed progress bar. The two parameters to this object control what appcmds will be allowed in the status bar:
* '''exclude''' - (str) A semicolon delimited list of names of appcmds which should not be shown by this control.
* '''include_only''' - (str) A semicolon delimited list of names of appcmds which will be the only appcmds allowed to be shown by this control.
For the most part, these layoutstatus objects are only controllable from code.

==<list/>==
The list object is similar but not identical to the Win32 list common control. It is an optionally multicolumnar list whose purpose is to display multiple pieces of information per horizontal row. It may be filled directly by encoding the contents in the XML, by attaching the object to a proper text feed, or by calling methods on the object from script. The parameters for this object are:
* '''items''' - (str) A properly delimited string of data used to fill the list. See below.
* '''multiselect''' - (bool) This flag, when set, allows the user to select multiple items in the list. Default is to allow multiselect.
* '''autodeselect''' - (bool) This flag, when set, causes selection of any single item in the list to automatically deselect all other items in the list. Default is to not autodeselect.
* '''select''' - (str) The text of a list item to be selected.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''feed''' - (id) The id of a text feed to be used to fill this list.
* '''hoverselect''' - (bool) This flag causes list items to be selected if the user hovers over them. Default is to not hoverselect.
* '''sort''' - (bool) This flag causes the list to sort itself. Default is to not sort.
* '''selectonupdown''' - (bool) This flag causes the list to interpret the keyboard commands to mean "change my selection to the item." Default is to select on keyboard events.
* '''numcolumns''' - (int) How many columns to show. Default is one.
* '''columwidths''' - (int) A semicolon delimited list of integers specifying how to size the column widths in this list. See below.
* '''columnlabels''' - (str) A semicolon delimited list of strings to be used as the multiple column labels.
The list object depends upon being fed numerous strings with proper syntax in order to properly generate and populate a complex list display. The syntax for the items parameter (which is the same syntax as the feed must provide) is to delimit each full row in the list with the ';' semicolon character and to delimit each column entry per row with the ',' character. The columnwidths and columnlabels also require a semicolon (';') delimited list of data, one entry per column. Note that if -1 is given as a width, those columns will be of dynamic width and split up the leftover pixels among themselves. The default is one column with no labels and a width of -1.

Here is a sample list object with 3 rows and 3 columns:
<list id="three.by.three"
items="row1,text,1;row2,moretext,2;row3,stilltext,3"
numcolumns="3" columnwidths="50,-1,50"
multiselect="0" autodeselect="1"
/>

==<mouseredir/>==
This object simply redirects all mouse events from its region to the target object specified in the parameter:
* '''target''' - (id) The target object to get mouse events.
This is useful for when some objects get overlapped by nonfunctional graphics when laying out complex interfaces.

==<Wasabi:RadioGroup/>==
The Wasabi:RadioGroup object is an invisible object whose purpose is to centralize the functionality of multiple Wasabi:CheckBox objects instantiated in radiobutton mode. The radioid params on the Wasabi:CheckBox instantiates should give the id of one of these Wasabi:RadioGroup objects. It has no unique parameters. Here is a snippet of simple radiobutton functionality:
<Wasabi:RadioGroup id="enableddisabled"/>
<Wasabi:CheckBox x="50" y="110" w="60"
text="Enabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="1"
/>
<Wasabi:CheckBox x="-125" y="110" w="62" relatx="1"
text="Disabled" radioid="enableddisabled"
cfgattrib="{9149C445-3C30-4E04-8433-5A518ED0FDDE};Enable desktop alpha"
radioval="0"
/>

==<rect/>==
A nice flat rectangle. It may be either filled or hollow, and if hollow you may specify only some edges drawn. Here are its parameters:
* '''color''' - (id) The id of a color element, or an comma delimited integer triplet RGB value. Default is "255,00,255" (an ugly color to remind you to set it).
* '''filled''' - (bool) This flag causes the entire rectangular area to be filled with color. Default is to not be filled.
* '''edges''' - (str) A pipe ("|") delimited set of one or all of the following: "left" "right" "top" "bottom" Default is all, ie: "left|right|top|bottom".

==<script/>==
Scripts allow for the simple creation of UI functionality without requiring C++ code. While scripts are "compiled" into "script binaries," these script binaries are special to wasabi and, more importantly, can be run by any compatible Wasabi runtime on any OS to which Wasabi has a runtime. Scripts are bound like GuiObjects into layout or groupdef sections using the script tag and have the ability to find and modify the nearby sibling and child objects once the UI has been fully instantiated. Scripts have two important parameters:
* '''file''' - (str) The filename of the .maki file to load, relative to this xml file.
* '''param''' - (str) A string that will be available to the instance of the .maki file as an instance specific parameter.
Note that a single .maki file may be instantiated as a script object numerous times over, and each instantiation can have its own specific parameter data. Judicious use of this feature can help minimize your reliance on hardcoded strings and limited flexibility in your scripting.

==<slider/> & <Wasabi:HSlider/> & <Wasabi:VSlider/>==
The slider object consists of a background set of images, and a thumb. The thumb is constrained to move in one dimension -- horizontally or vertically, depending upon its orientation. The distance in pixels travelled by the thumb across its total distance is interpollated to produce a value between the low and high boundary integers which is assigned to any configuration attribute which may happen to be attached. Here are the parameters for slider:
* '''barleft''' - (id) The bitmap element for the left or top position of the slider.
* '''barmiddle''' - (id) The bitmap element for the middle, stretched, position of the slider.
* '''barright''' - (id) The bitmap element for the right or bottom position of the slider.
* '''thumb''' - (id) The bitmap element for the slider thumb.
* '''downthumb''' - (id) The bitmap element for the slider thumb when held by the user.
* '''hoverthumb''' - (id) The bitmap element for the slider thumb when the user's mouse is above it.
* '''orientation''' - (str) Either "v" or "vertical" to make the slider vertical, otherwise it will be horizontal.
* '''low''' - (int) Set the low-value boundary. Default is 0.
* '''high''' - (int) Set the high-value boundary. Default is 255.

==<snappoint/>==
The snappoint is an invisible point that will attract other snappoint objects with the same id in any other layout and make them want to dock, like little magnets. These objects have only the following subset of guiobject XML parameters:
* '''id''' - (id) All snappoint objects with the same id will snap to each other. Different ids ignore each other.
* '''x''' - (int) The x position of the snappoint, see: guiobject.
* '''y''' - (int) The y position of the snappoint, see: guiobject.
* '''relatx''' - (int) The horizontal coordinate space of the snappoint, see: guiobject.
* '''relaty''' - (int) The vertical coordinate space of the snappoint, see: guiobject.

==<Wasabi:TabSheet/>==
The Wasabi:TabSheet object contains multiple group instances within it and allows the user to switch between the display of those groups by the ability to click on a list of tab buttons at the top of the rectangular area of the Wasabi:TabSheet. The name parameter of each groupdef is displayed as the text in the tab which corresponds to it. Here are the Wasabi:TabSheet parameters:
* '''windowtype''' - (str) A windowtype string which will instantiate one of every groupdef with the same windowtype and every window class registered with a window creation service to include this windowtype.
* '''children''' - (id) A semicolon delimited list of groupdef ids to also be instantiated as children of this tabsheet.
* '''type''' - (int) There are two different themed display styles for Wasabi:TabSheet. One is with multiple tabs (sheet style), one is with a single button on top that will popup a menu with all the possible tab choices (sidecar style). The Default is sheet style, which is a value of -2. Any other value besides -2 will give you sidecar style.
* '''content_margin_top''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_left''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_right''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.
* '''content_margin_bottom''' - (int) A margin in pixels to offset the content from the client rectangle of the Wasabi:Tabsheet.

==<text/> & <Wasabi:Text/>==
The text object is for using the system to render some text in the font of your choice.
Since Winamp 5.5 (skinversion 1.3) text objects can have multiple lines. For a new line use this "/n"

* '''display''' - (str) Either a specific system display string or the string identifier of a text feed. Setting this value will override the text parameter. See below.
* '''ticker''' - (bool) Setting this flag causes the object to scroll left and right if the text does not fit the rectangular area of the text object.
* '''antialias''' - (bool) Setting this flag causes the text to be rendered antialiased if possible.
* '''text''' - (str) A static string to be displayed.
* '''default''' - (str) A parameter alias for text.
* '''font''' - (id) The id of a bitmapfont or truetypefont element. If no element with that id can be found, the OS will be asked for a font with that name instead.
* '''fontsize''' - (int) The size to render the chosen font.
* '''align''' - (str) One of the following three possible strings: "left" "center" "right" -- Default is "left."
* '''valign''' - (str) One of the following three possible strings: "top" "center" "bottom" -- Default is "top."
* '''color''' - (int) The comma delimited RGB color of the text.
* '''shadowcolor''' - (int) The comma delimited RGB color for underrendered shadow text.
* '''shadowx''' - (int) The x offset of the shadowrender.
* '''shadowy''' - (int) The y offset of the shadowrender.
* '''timeroffstyle''' - (int) How to display an empty timer: "0" = " : ", "1" = "00:00", and "2"="" (if one is displaying time)
* '''timecolonwidth''' - (int) How many extra pixels wider or smaller should the colon be when displaying time. Default is -1.
* '''nograb''' - (bool) Setting this flag will cause the text object to ignore left button down messages. Default is off.
* '''showlen''' - (bool) Setting this flag will cause the text display to be appended with the length in minutes and seconds of the current song. Default is off.
* '''forcefixed''' - (bool) Force the system to attempt to render the display string with fixed-width font spacing.
* '''forceupcase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forceuppercase''' - (bool) Force the system to make the display string all uppercase before display.
* '''forcelocase''' - (bool) Force the system to make the display string all lowercase before display.
* '''forcelowercase''' - (bool) Force the system to make the display string all lowercase before display.
* '''bold''' - (bool) Render the display string in bold.
* '''wrap''' - (bool) Setting this flag will cause the text to wrap in its rectangular space. Default is off.
* '''dblclickaction''' - (str) A string in the form "SWITCH;layout" where layout is the id of a layout in this object's parent container. No other actions function on this object. This action is deprecated.
* '''offsetx''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
* '''offsety''' - (int) Extra pixels to be added to or subtracted from the calculated x value for the display string to render.
"SONGNAME" - The name string of the currently playing song (from metadb).
"SONGINFO" - The full info string of the currently playing song (from metadb).
"SONGARTIST" - The artist string of the currently playing song (from metadb).
"SONGTITLE" - The title string of the currently playing song (from metadb).
"SONGALBUM" - The album string of the currently playing song (from metadb).
"SONGLENGTH" - The length string of the currently playing song (from metadb).
"TIME" - The length string of the currently playing song.
"TIMEELAPSED" - The elapsed time string of the currently playing song.
"TIMEREMAINING" - The time remaining string of the currently playing song.
"COMPONENTBUCKET" - The id of the componentbucket (thinger) item the mousecursor is currently hovering above.
"SONGBITRATE" - The bitrate string of the currently playing song (from metadb).
"SONGSAMPLERATE" - The sample string of the currently playing song (from metadb).

*** Broken Action (Winamp 5) ***
"NORMALIZER:STATUS" - The current status of the audio normalizer.

Example:
<text x="81" y="11" w="25" h="21" antialias="0" text="Read This" align="center" color="0,0,0" bold="1"/>

==<Wasabi:TitleBox/>==
The Wasabi:TitleBox object is a nice way to put a simple rectangular frame and title around your content groups. It has the following parameters:
* '''title''' - (str) The string to display in the title area. Default is to use the name parameter of the content group.
* '''content''' - (id) The id of the groupdef to instantiate as content.
* '''centered''' - (bool) Setting this flag will center the title text. Default is to not be centered (and be left justified).
* '''suffix''' - (str) A string which will be appended to the title before it is displayed. In this way, if you instantiate multiple groups as content, each name change can still have a string appended.

==<Wasabi:Titlebar/>==
The Wasabi:TitleBar is the graphically themed bar that is placed at the top of all of the Wasabi:StandardFrame windows. It has the same parameters as the text object, which control the text display of the titlebar.

==<tree/>==
The tree object displays a hierarchical set of information with multiple items, where each item may in turn have multiple subitems. Let's examine its parameters:
* '''items''' - (str) A specially formatted string describing the hierarchical creation of the tree info. See below.
* '''feed''' - (str) The string identifier of a text feed which should provide a string in the same format as the items parameter.
* '''sorted''' - (bool) Setting this flag will cause all of the tree items to be sorted before display. Default is to sort.
* '''childtabs''' - (bool) Setting this flag will cause all tree items with children to display a tab graphic beside them. Default is to show tab graphics.
* '''expandroot''' - (bool) Setting this flag will cause all root tree items to display with their children pre-expanded. Default is to pre-expand root tree items.
The syntax required to describe the hierarchy of tree items is a semicolon delimited list of objects in the form "name(list)" where name is the string to display for that tree item and list is another semicolon delimited list of objects which are the direct children of name.

The following snippet will create a tree with one root node that has three child nodes, with each child node having differing numbers of sub nodes:
<tree id="example.tree"
x="0" y="0" w="0" h="0" relatw="1" relath="1"
items="root(child1(sub1;sub2);child2;child3(sub3))"
/>

==<vis/>==
The vis object is the multistate audio visualization display. It has a multitude of parameters for how simple it is:
* '''colorallbands''' - (int) The comma delimited RGB triplet to color all the spectroscope bands.
* '''colorband1''' - (int) The comma delimited RGB triplet to color spectroscope band 1.
* '''colorband2''' - (int) The comma delimited RGB triplet to color spectroscope band 2.
* '''colorband3''' - (int) The comma delimited RGB triplet to color spectroscope band 3.
* '''colorband4''' - (int) The comma delimited RGB triplet to color spectroscope band 4.
* '''colorband5''' - (int) The comma delimited RGB triplet to color spectroscope band 5.
* '''colorband6''' - (int) The comma delimited RGB triplet to color spectroscope band 6.
* '''colorband7''' - (int) The comma delimited RGB triplet to color spectroscope band 7.
* '''colorband8''' - (int) The comma delimited RGB triplet to color spectroscope band 8.
* '''colorband9''' - (int) The comma delimited RGB triplet to color spectroscope band 9.
* '''colorband10''' - (int) The comma delimited RGB triplet to color spectroscope band 10.
* '''colorband11''' - (int) The comma delimited RGB triplet to color spectroscope band 11.
* '''colorband12''' - (int) The comma delimited RGB triplet to color spectroscope band 12.
* '''colorband13''' - (int) The comma delimited RGB triplet to color spectroscope band 13.
* '''colorband14''' - (int) The comma delimited RGB triplet to color spectroscope band 14.
* '''colorband15''' - (int) The comma delimited RGB triplet to color spectroscope band 15.
* '''colorband16''' - (int) The comma delimited RGB triplet to color spectroscope band 16.
* '''colorbandpeak''' - (int) The comma delimited RGB triplet to color the spectroscope peak line.
* '''colorallosc''' - (int) The comma delimited RGB triplet to color the whole oscilloscope.
* '''colorosc1''' - (int) The comma delimited RGB triplet to color oscilloscope section 1.
* '''colorosc2''' - (int) The comma delimited RGB triplet to color oscilloscope section 2.
* '''colorosc3''' - (int) The comma delimited RGB triplet to color oscilloscope section 3.
* '''colorosc4''' - (int) The comma delimited RGB triplet to color oscilloscope section 4.
* '''colorosc5''' - (int) The comma delimited RGB triplet to color oscilloscope section 5.
* '''channel''' - (int) One of three values for which channel to monitor: "1" is left channel, "2" is right channel, "3" is stereo. Default is stereo.
* '''fliph''' - (bool) If this flag is set, it blits the vis pixels flipped horizontally.
* '''flipv''' - (bool) If this flag is set, it blits the vis pixels flipped vertically.
* '''mode''' - (int) One of three values for which mode to display: "0" is no display, "1" is spectroscope, "2" is oscilloscope. Default is to read from a config item.
When the user clicks on the vis, it will cycle between its three modes.

==<eqvis/>==
The eqvis object is rather specific to media players, as it is the spline display for the eq settings in the Wasabi Media Player.
* '''colortop''' - (str) A color value or color element id for the top portion of the spline display.
* '''colormiddle''' - (str) A color value or color element id for the middle portion of the spline display.
* '''colorbottom''' - (str) A color value or color element id for the bottom portion of the spline display.
* '''colorpreamp''' - (str) A color value or color element id for the preamp bar in the spline display.

==<gradient/>==
The gradient object creates a rectangular color gradient. The available parameters are:
* '''gradient_x1''' - (float) A floating point value for the left side of the rectangle. Default is 0.0
* '''gradient_y1''' - (float) A floating point value for the top side of the rectangle. Default is 0.0
* '''gradient_x2''' - (float) A floating point value for the right side of the rectangle. Default is 1.0
* '''gradient_x1''' - (float) A floating point value for the bottom side of the rectangle. Default is 1.0
* '''points''' - (str) A complex string defining color values for at least two value points with which to build the gradients. See below.
The points syntax is a semicolon delimited list of key=value pairs where the key is a floatingpoint number representing a point in the "gradient space" and the value is an RGB triplet (assumed full alpha) or RGBA quad. For instance, the following object would create a smooth gradient between red in the top left and green at half alpha in the bottom right:
<gradient id="red.to.green"
x="0" y="0" w="0" h="0"
relatw="1" relath="1"
points="0.0=255,0,0,255;1.0=0,255,0,128"
/>

==<Wasabi:StandardFrame:Status/>==

==<Wasabi:StandardFrame:NoStatus/>==

==<Wasabi:StandardFrame:Modal/>==

==<Wasabi:StandardFrame:Static/>==
The Wasabi:StandardFrame objects are rectangular frames you can use to encapsulate your own layout contents within the currently themed standard frame. They all have the following parameters:
* '''content''' - (id) The id of the groupdef to instantiate within the Wasabi:StandardFrame.
* '''padtitleleft''' - (int) The distance in pixels to pad the title to the left.
* '''padtitleright''' - (int) The distance in pixels to pad the title to the right.
* '''shade''' - (id) The id of the layout within our container we should switch to if the titlebar is doubleclicked (ie: the id of the windowshade layout). Default is no functionality.
The Wasabi:StandardFrame:Status object has a status bar, while the Wasabi:StandardFrame:NoStatus does not. The Wasabi:StandardFrame:Static object inherits from Wasabi:StandardFrame:NoStatus and also instantiates the wasabi panel graphics. The Wasabi:StandardFrame:Modal object does all that and also removes the control menus to make a fully modal dialog frame.

==<wndholder/>==
A wndholder object, similar to a customobject, holds user interface windows based upon what param is given. The wndholder can also hold window types by guid or groupdef instantiations by id. Here are its parameters:
* '''hold''' - (id) A semicolon delimited list of guids or groupdef ids to hold.
* '''component''' - (id) A parameter alias for hold.
* '''param''' - (id) A parameter alias for hold.
* '''noshowcmdbar''' - (bool) Setting this flag will disable the Wasabi command bar.
* '''noanimatedrects''' - (bool) Setting this flag will disable animated rectangle motion.
* '''disableanimatedrects''' - (bool) A parameter alias for noanimatedrects.
* '''autoopen''' - (bool) Setting this flag will cause the object to auto open.
* '''autoclose''' - (bool) Setting this flag will cause the object to auto close.
Using a wndholder object indicates to the system that you want to be the "container of record" for the possible requested guids when they are launched by the system through, for instance, the C++ coder registering his window class with registerAutopopup(), which calls the underlying api->skinwnd_createByGuid(). The container within which this wndholder is instantiated should also be given a component parameter with the same values. This component parameter is simply a hint to Wasabi that a wndholder object that will accept that component parameter lives within the container.

==<objdirview/>==
The objdirview object displays a tree of hierarchical information to the user, based on a code concept called an Object Directory. An Object Directory is, in essence, just a container of arbitrary items so this object is merely the display of its contents. Here are its parameters:
* '''dir''' - (str) The string identifier of the objdir to which this object should connect.
* '''target''' - (id) The id of an object to which this object may direct the actions of its internal items being selected.
* '''displaytarget''' - (id) The id of a customobject which will be assigned to display the display group parameter of the currently selected objdir item.
* '''defaultdisplay''' - (id) The id of a groupdef to display inside displaytarget if no objdir items are selected.
When items in the objdirview are selected, the objdir is sent an event telling it that an item was selected. The target parameter from XML is included in the data sent in that event. However, the implemented functionality for that event is wholly at the discretion of the programmer implementing the specific objdir in question. For the QueryDir object used in Winamp3's media library, the target param is for a nearby queryline object to be told the selection is changing. Your mileage may vary with other objects.

==<Wasabi:PathPicker/>==
The Wasabi:PathPicker object is a simple object to display a text string of a directory path chosen by the user. When the user clicks on the object, a dir selection service is started, allowing the user to choose a directory path. Attach this object to a string configuration attribute and you have a simple way for users to choose directories as preferences. The Wasabi:PathPicker object has no unique parameters.

==<querydrag/>==
The querydrag object is used to create a visual "drag source" for a nearby queryresults object. The user may click and drag this object and by doing so representationally drag the text of the current query in the queryresults object (which can be dropped into a playlist editor to fill its contents with the results of that query). It has only two parameters:
* '''image''' - (id) The bitmap element to display.
* '''source''' - (id) The source queryresults object. Default is the nearest.
If no valid source can be found, this object silently fails to drag.

==<queryline/>==
The invisible queryline object is used to host a text query to be applied to a queryresults object. One possible use would be to write a script linking the text in a Wasabi:HistoryEditBox to the query parameter of a queryline. And, speaking of its parameters, here they are:
* '''querylist''' - (id) The id of the queryresults which will take the query. Default is to not connect (ie: this param is kinda sorta mandatoryish if you want anything interesting to happen).
* '''query''' - (str) The string of the query itself.
* '''auto''' - (bool) Whether or not to execute an autoquery based on the query parameter (ie: "search on the name column for this substring" instead of "run this query"). Default is to use the string directly as a query (not autoquery).

==<queryresults/>==
The queryresults object is the an invisible binding object that coordinates the filtration of the database by numerous multiple other objects. The queryline and filterlist objects eventually define a single output from the database, and this information is kept in the queryresults object. It has only one parameter:
title - (str) The human readable title for your queryresults. I have no idea why this would be important.
Magically, it seems, placing a queryresults object in the same group next to a PlaylistEditor object makes that PlaylistEditor get filled with the queryresults information. I have no idea how this can be, and sense the telltale signs of powerful dark necromancy at work, here.

XML Elements

2008-09-26T10:03:22Z

Pjn123: New page: == What is Elements? == Elements are the sub-atomic particles of the chemistry of Wasabi UI development. They represent the binding of fonts, colors, and raster graphics to id's which ar...

== What is Elements? ==
Elements are the sub-atomic particles of the chemistry of Wasabi UI development. They represent the binding of fonts, colors, and raster graphics to id's which are then referenced by the actual objects of the system. The definition of elements should occur hierarchically within an <elements> tag. Because elements are intended to be referenced by GuiObjects, specifying elements without ids is a meaningless endeavour. A simple sample of each possible type of element would look like this:
<elements>
<color id="myindigo" value="64,32,128"/>
<bitmap id="mybitmap" file="mybitmap.png" x="104" y="0" h="90" w="244" gammagroup="Backgrounds"/>
<bitmapfont id="mybitfont" file="myfont.png" charwidth="9" charheight="13" hspacing="3" vspacing="1"/>
<truetypefont id="myttfont" file="impact.ttf"/>
<elementalias id="newelemid" target="mybitmap"/>
</elements>

==<bitmap/>==
The bitmap element defines a raster buffer of the given pixel size, sliced out of the given raster graphics file. In general, we use the .png graphics format for our bitmap graphics, however Wasabi's "supported formats" are determined entirely at startup by the registration of image loader services (see Extending Wasabi: Image Loaders). If the sizing values (x/y/h/w) are not specified, the bitmap defines a buffer equivalent to the entire graphics file. Its specific parameters are:
* '''id''' - (string) A unique string, that is used to identify the element when used by the object.
* '''file''' - (string) A path to the bitmap file the image is in. If it begings with disk name (C:/.../filename) then the path is absolute, otherwise (folder1/.../filename) the path is relative to skin folder (don't confuse with [[XML Reference#<include/> |inclusion]] of xml files where path is relative to parent xml file)
* '''x''' - (int) A coordinate x of the image defined inside the bitmap file (x coordinate of the cropped area).
* '''y''' - (int) A coordinate y of the image defined inside the bitmap file (y coordinate of the cropped area).
* '''w''' - (int) Width of the image defined inside the bitmap file (width of the cropped area).
* '''h''' - (int) Height of the image defined inside the bitmap file (height of the cropped area).
* '''gammagroup''' - (id) The id of the gammagroup the bitmap will be changed by when using color themes.

You can also use these internal bitmaps without declaring them:
* '''$wallpaper''' - This is the current background of Windows.

<layer x="" y="" image="$wallpaper"/>

==<bitmapfont/>==
The bitmapfont element specifies the information required to pull a fixed-width font set out of a raster graphic file. Bitmap fonts always begin their series with ascii character '0' and can go for as many characters as you desire. Any ascii characters not represented by a cell in the graphics file will display as blanks. The required specific parameters are:
* '''id''' - (string) A unique string, that is used to identify the element when used by the object.
* '''file''' - (str) The name of the raster graphics file from which to load.
* '''charwidth''' - (int) The width of each glyph cell in pixels.
* '''charheight''' - (int) The height of each glyph cell in pixels.
* '''hspacing''' - (int) The extra overlap distance for each glyph cell, in pixels, on the horizontal axis.
* '''vspacing''' - (int) The extra overlap distance for each glyph cell, in pixels, on the vertical axis.

==<truetypefont/>==
The truetypefont element specifies a TTF file to be registered with the system. Note that most of the font-using GuiObjects in the system request Arial, which is not usually defined. Any request for an undefined font name will default to the list of OS-installed fonts. This allows a skin to define a truetypefont element with the id of "arial" which will automatically become the default for most objects displaying text. The specific parameter for this element is:
* '''id''' - (string) A unique string, that is used to identify the element when used by the object.
* '''file''' - (str) The name of the true type font file to load.

==<color/>==
* '''id''' - (string) A unique string, that is used to identify the element when used by the object.
* '''value''' - (string-"int,int,int") A comma delimited list of 3 integers in the range 0-255 corresponding to the individual red, green, and blue elements that define a "truecolor" value.
* '''gammagroup''' - (str) The id of a gammagroup to which this element is assigned.

==<elementalias/>==
The bitmapfont element specifies the information required to pull a fixed-width font set out of a raster graphic file. Bitmap fonts always begin their series with ascii character '0' and can go for as many characters as you desire. Any ascii characters not represented by a cell in the graphics file will display as blanks. The required specific parameters are:
* '''id''' - (string) A unique string, that is used to identify the element when used by the object.
* '''target''' - (str) The id of the element to alias.

==<cursor/>==
The cursor element specifies the information required to create your own cursor that you can use in your skin.
* '''bitmap''' - (str) Same as the file param for <bitmap/>
* '''hotspot_x''' - (int) The X position of the hotspot.
* '''hotspot_y''' - (int) The Y position of the hotspot.
<cursor id="cursor.h" bitmap="pictures/cursor_h.png" hotspot_x="10" hotspot_y="4"/>

XML Reference

2008-09-26T10:00:18Z

Pjn123: XML Reference start page

The XML Reference is divided into the following sections:

== '''[[XML Elements]]''' ==
Use this to define the pictures, colors & fonts you want to use in your skin.

== '''[[XML GUI Objects]]''' ==
Here you'll find all of the GUI Objects that you can use in your skin.

== '''[[XML Containing objects]]''' ==
The containing objects help organize your skin. You'll need a container and a layout to display a skin.
Basically you'll place all your GUI Objects in one of these.

Creating Modern Skins

2008-09-26T09:53:08Z

Pjn123:

Skin Developer

2008-09-26T09:41:22Z

Pjn123:

Creating Classic Skins

2008-09-26T09:36:04Z

Pjn123: New page: ==Description of a Classic Skin== Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to chang...

==Description of a Classic Skin==
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

==Individual Components==

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

Skin Developer

2008-09-26T09:36:01Z

Pjn123: /* Creating Classic Skins */

Skin Developer

2008-09-26T09:32:33Z

Pjn123: /* Creating Modern Skins */

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

[[Image:Skins-logo.png]]

==Skins Overview==

To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.

==Tools==
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.

====Bitmap Editor:====
How else will you "paint" your skins? Must be able to recognize the .BMP format.

''eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP''

====Text Editor:====
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.

''eg. MS Notepad, TextPad''

====Icon Editor:====
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.

''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''

====Zip Compression Tool:====
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.

''eg. 7-Zip''

==Creating Classic Skins==

===Description of a Classic Skin===
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

===Individual Components===

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

== Modern Skins ==
Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

Read more:
* '''[[Creating Modern Skins]]'''

== Creating a ClassicPro Skin ==
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface ([[SUI]]) to display components.

Read more about '''[[Creating a ClassicPro Skin]]'''.

[http://cpro.skinconsortium.com/ ClassicPro Official Website]

==Developer Resources==
*[[Articles#Classic_Skins|Classic Skin Articles]]
*[[Articles#Modern_Skins|Modern Skin Articles]]
*[[Developers_FAQ#Skin_Developer_FAQ|Skin FAQ]]

==Community Links==
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=5 Classic Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=123 Modern Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=18 Skinning Tips and Tricks]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
*Browse: [http://www.winamp.com/skins Download Skins]

Creating Modern Skins

2008-09-26T09:29:50Z

Pjn123: Clean Winamp Skins.. move the creating stuff into sub articles for the different skins availible

===Description/Overview of Modern Skinning===

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

===Tools Needed to Build a Modern Skin===
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

===Individual Components===

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

====Downloadable PDF====
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

Skin Developer

2008-09-26T09:25:55Z

Pjn123: /* Creating a ClassicPro Skin */

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

[[Image:Skins-logo.png]]

==Skins Overview==

To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.

==Tools==
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.

====Bitmap Editor:====
How else will you "paint" your skins? Must be able to recognize the .BMP format.

''eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP''

====Text Editor:====
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.

''eg. MS Notepad, TextPad''

====Icon Editor:====
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.

''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''

====Zip Compression Tool:====
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.

''eg. 7-Zip''

==Creating Classic Skins==

===Description of a Classic Skin===
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

===Individual Components===

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

==Creating Modern Skins==

===Description/Overview of Modern Skinning===

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

===Tools Needed to Build a Modern Skin===
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

===Individual Components===

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

====Downloadable PDF====
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

== Creating a ClassicPro Skin ==
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface ([[SUI]]) to display components.

Read more about '''[[Creating a ClassicPro Skin]]'''.

[http://cpro.skinconsortium.com/ ClassicPro Official Website]

==Developer Resources==
*[[Articles#Classic_Skins|Classic Skin Articles]]
*[[Articles#Modern_Skins|Modern Skin Articles]]
*[[Developers_FAQ#Skin_Developer_FAQ|Skin FAQ]]

==Community Links==
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=5 Classic Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=123 Modern Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=18 Skinning Tips and Tricks]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
*Browse: [http://www.winamp.com/skins Download Skins]

Skin Developer

2008-09-25T20:43:15Z

Pjn123: /* Creating a ClassicPro Skin */

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

[[Image:Skins-logo.png]]

==Skins Overview==

To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.

==Tools==
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.

====Bitmap Editor:====
How else will you "paint" your skins? Must be able to recognize the .BMP format.

''eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP''

====Text Editor:====
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.

''eg. MS Notepad, TextPad''

====Icon Editor:====
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.

''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''

====Zip Compression Tool:====
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.

''eg. 7-Zip''

==Creating Classic Skins==

===Description of a Classic Skin===
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

===Individual Components===

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

==Creating Modern Skins==

===Description/Overview of Modern Skinning===

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

===Tools Needed to Build a Modern Skin===
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

===Individual Components===

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

====Downloadable PDF====
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

== Creating a ClassicPro Skin ==
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface ([[SUI]]) to display components.

Read more about [[Creating a ClassicPro Skin]].

[http://cpro.skinconsortium.com/ ClassicPro Official Website]

==Developer Resources==
*[[Articles#Classic_Skins|Classic Skin Articles]]
*[[Articles#Modern_Skins|Modern Skin Articles]]
*[[Developers_FAQ#Skin_Developer_FAQ|Skin FAQ]]

==Community Links==
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=5 Classic Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=123 Modern Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=18 Skinning Tips and Tricks]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
*Browse: [http://www.winamp.com/skins Download Skins]

Skin Developer

2008-09-25T20:41:46Z

Pjn123: /* Creating a ClassicPro Skin */

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

[[Image:Skins-logo.png]]

==Skins Overview==

To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.

==Tools==
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.

====Bitmap Editor:====
How else will you "paint" your skins? Must be able to recognize the .BMP format.

''eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP''

====Text Editor:====
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.

''eg. MS Notepad, TextPad''

====Icon Editor:====
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.

''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''

====Zip Compression Tool:====
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.

''eg. 7-Zip''

==Creating Classic Skins==

===Description of a Classic Skin===
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

===Individual Components===

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

==Creating Modern Skins==

===Description/Overview of Modern Skinning===

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

===Tools Needed to Build a Modern Skin===
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

===Individual Components===

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

====Downloadable PDF====
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

== Creating a ClassicPro Skin ==
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface ([[SUI]]) to display components.

[http://cpro.skinconsortium.com/ ClassicPro Official Website]

[[Creating a ClassicPro Skin]]

==Developer Resources==
*[[Articles#Classic_Skins|Classic Skin Articles]]
*[[Articles#Modern_Skins|Modern Skin Articles]]
*[[Developers_FAQ#Skin_Developer_FAQ|Skin FAQ]]

==Community Links==
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=5 Classic Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=123 Modern Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=18 Skinning Tips and Tricks]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
*Browse: [http://www.winamp.com/skins Download Skins]

Skin Developer

2008-09-25T20:41:01Z

Pjn123:

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

[[Image:Skins-logo.png]]

==Skins Overview==

To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.

==Tools==
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.

====Bitmap Editor:====
How else will you "paint" your skins? Must be able to recognize the .BMP format.

''eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP''

====Text Editor:====
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.

''eg. MS Notepad, TextPad''

====Icon Editor:====
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.

''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''

====Zip Compression Tool:====
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.

''eg. 7-Zip''

==Creating Classic Skins==

===Description of a Classic Skin===
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

===Individual Components===

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

==Creating Modern Skins==

===Description/Overview of Modern Skinning===

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

===Tools Needed to Build a Modern Skin===
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

===Individual Components===

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

====Downloadable PDF====
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

== Creating a ClassicPro Skin ==
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface ([[SUI]]) to display components.
[http://cpro.skinconsortium.com/ ClassicPro Official Website]
[[Creating a ClassicPro Skin]]

==Developer Resources==
*[[Articles#Classic_Skins|Classic Skin Articles]]
*[[Articles#Modern_Skins|Modern Skin Articles]]
*[[Developers_FAQ#Skin_Developer_FAQ|Skin FAQ]]

==Community Links==
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=5 Classic Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=123 Modern Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=18 Skinning Tips and Tricks]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
*Browse: [http://www.winamp.com/skins Download Skins]

Skin Developer

2008-09-25T20:40:23Z

Pjn123: /* Creating a ClassicPro Skin */

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

[[Image:Skins-logo.png]]

==Skins Overview==

To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.

==Tools==
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.

====Bitmap Editor:====
How else will you "paint" your skins? Must be able to recognize the .BMP format.

''eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP''

====Text Editor:====
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.

''eg. MS Notepad, TextPad''

====Icon Editor:====
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.

''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''

====Zip Compression Tool:====
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.

''eg. 7-Zip''

==Creating Classic Skins==

===Description of a Classic Skin===
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

===Individual Components===

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

==Creating Modern Skins==

===Description/Overview of Modern Skinning===

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

===Tools Needed to Build a Modern Skin===
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

===Individual Components===

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

====Downloadable PDF====
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

== Creating a ClassicPro Skin ==
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface ([[SUI]]) to display components.
[http://cpro.skinconsortium.com/ ClassicPro Official Website]

[[Creating a ClassicPro Skin]]

==Tutorials==
* [http://cpro.skinconsortium.com/index.php?content=manual Skinners Guide to ClassicPro] by pjn123
** This is the manual released by the developers
* [http://wilian.deviantart.com/art/ClassicPro-Template-pack-95549517 ClassicPro Template pack and Manual] by Wilian & Veroka
** This is a more in depth look at creating cPro skins. Really great for beginners.
** Comes with great base skin for you to start off with

==Developer Resources==
*[[Articles#Classic_Skins|Classic Skin Articles]]
*[[Articles#Modern_Skins|Modern Skin Articles]]
*[[Developers_FAQ#Skin_Developer_FAQ|Skin FAQ]]

==Community Links==
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=5 Classic Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=123 Modern Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=18 Skinning Tips and Tricks]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
*Browse: [http://www.winamp.com/skins Download Skins]

Skin Developer

2008-09-25T20:37:37Z

Pjn123: /* Creating a Classic Skin Pro */

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

[[Image:Skins-logo.png]]

==Skins Overview==

To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.

==Tools==
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.

====Bitmap Editor:====
How else will you "paint" your skins? Must be able to recognize the .BMP format.

''eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP''

====Text Editor:====
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.

''eg. MS Notepad, TextPad''

====Icon Editor:====
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.

''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''

====Zip Compression Tool:====
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.

''eg. 7-Zip''

==Creating Classic Skins==

===Description of a Classic Skin===
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

===Individual Components===

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

==Creating Modern Skins==

===Description/Overview of Modern Skinning===

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

===Tools Needed to Build a Modern Skin===
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

===Individual Components===

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

====Downloadable PDF====
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

==[[Creating a ClassicPro Skin]]==
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface ([[SUI]]) to display components.
[http://cpro.skinconsortium.com/ ClassicPro Official Website]

==Tutorials==
* [http://cpro.skinconsortium.com/index.php?content=manual Skinners Guide to ClassicPro] by pjn123
** This is the manual released by the developers
* [http://wilian.deviantart.com/art/ClassicPro-Template-pack-95549517 ClassicPro Template pack and Manual] by Wilian & Veroka
** This is a more in depth look at creating cPro skins. Really great for beginners.
** Comes with great base skin for you to start off with

==Developer Resources==
*[[Articles#Classic_Skins|Classic Skin Articles]]
*[[Articles#Modern_Skins|Modern Skin Articles]]
*[[Developers_FAQ#Skin_Developer_FAQ|Skin FAQ]]

==Community Links==
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=5 Classic Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=123 Modern Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=18 Skinning Tips and Tricks]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
*Browse: [http://www.winamp.com/skins Download Skins]

Skin Developer

2008-09-25T20:28:32Z

Pjn123: /* Bitmap Editor: */

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

[[Image:Skins-logo.png]]

==Skins Overview==

To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.

==Tools==
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.

====Bitmap Editor:====
How else will you "paint" your skins? Must be able to recognize the .BMP format.

''eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP''

====Text Editor:====
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.

''eg. MS Notepad, TextPad''

====Icon Editor:====
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.

''eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo''

====Zip Compression Tool:====
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.

''eg. 7-Zip''

==Creating Classic Skins==

===Description of a Classic Skin===
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.

A lot of people get really excited when they find out that they can change the look of Winamp through skinning. The problem is they get turned off once they hit a roadblock, be it what to do next, hit a problem submitting to Winamp.com, or indeed, just figuring out how to get started. So here we have a set of simple steps that holds your hand from initial idea to finished masterpiece. Note: Cool kids still use (and create) classic skins. Good luck!

===Individual Components===

#[[The Base Skin]]
#[[Main|Paint the Main Window]]
#[[Equalizer|Paint the Equalizer Window]]
#[[Playlist|Paint the Playlist Window]]
#[[Mini-browser|Paint the Minibrowser Window]]
#[[AVS|Paint the AVS Window]]
#[[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]]
#[[Creating Custom Cursors|Create Custom Cursors]]
#[[Editing the Configuration Files|Edit the Configuration Files]]
#[[WSZ Files|Compress to .WSZ format]]
#[[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]

==Creating Modern Skins==

===Description/Overview of Modern Skinning===

Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.

===Tools Needed to Build a Modern Skin===
*'''[http://download.nullsoft.com/winamp/plugin-dev/WaSDP_1.1.exe Winamp Skin Development Pack]'''
*[[Color Editor]]

===Individual Components===

*[[Modern Skin: Intro|Intro]]
*[[Modern Skin: Winamp 2 to W3+|Winamp 2 to Winamp 3+]]
*[[Modern Skin: Simple Skin Tutorial|Simple Skin Tutorial]]
*[[Modern Skin: XML Intro|XML Intro]]
*[[Modern Skin: Simple Skin Tutorial (Continued)|Simple Skin Tutorial (Continued)]]
*[[Modern Skin: Container| Container]]
*[[Modern Skin: Group|Group]]
*[[Modern Skin: Relative Positioning| Relative Positioning]]
*[[Modern Skin: Complex Skin|Complex Skin]]
*[[Modern Skin: Non-Rect Player| Non-Rect Player]]
*[[Modern Skin: Layer Composition| Layer Composition]]
*[[Modern Skin: Alpha Channels| Alpha Channels]]
*[[Modern Skin: Animatedlayer|Animatedlayer]]
*[[Modern Skin: Snap Points|Snap Points]]
*[[Modern Skin: Drawers|Drawers]]
*[[Modern Skin: Skin Scripting| Skin Scripting]]
*[[Modern Skin: Drawer Scripting| Drawer Scripting]]
*[[Modern Skin: Animating a Skin|Animating a Skin]]
*[[Modern Skin: Maki Overview| Maki Overview]]
*[[Main_Page#Glossary_of_Terms|Glossary]]

====Downloadable PDF====
You can [http://media.winamp.com/5541/main/downloads/development/skinsmodern/Winamp-Modern-Skins-Tutorial.pdf download the tutorial] in PDF format for quick reference anytime

==Creating a Classic Skin Pro==

===Description of a cPro Skin===
TBD

===Tools Needed to Build a cPro Skin===
TBD

===Tutorial===
TBD

==Developer Resources==
*[[Articles#Classic_Skins|Classic Skin Articles]]
*[[Articles#Modern_Skins|Modern Skin Articles]]
*[[Developers_FAQ#Skin_Developer_FAQ|Skin FAQ]]

==Community Links==
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=5 Classic Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=123 Modern Skins]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=18 Skinning Tips and Tricks]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=12 Arts and Design]
*Forums: [http://forums.winamp.com/forumdisplay.php?s=&forumid=119 Skin Removal Reporting]
*Upload: [http://www.winamp.com/user/submit Submit Your Skin]
**[http://www.winamp.com/user/submit-skin-classic Submit Classic Skin]
**[http://www.winamp.com/user/submit-skin-modern Submit Modern Skin]
*Browse: [http://www.winamp.com/skins Download Skins]

Color Editor

2008-09-24T22:04:00Z

Pjn123:

== Where is the themes saved? ==
When you save your themes it will save in one of the following places, depending on what type of installation of Winamp you have:
* Multi-User Settings Install (default)
** '''%appdata%/winamp/Plugins/Freeform/wacs/coloreditor/data'''
* Winamp folder Settings
** '''x:/.../winamp/Plugins/Freeform/wacs/coloreditor/data'''

== Hiden features ==
=== Multi Slider move ===
When you move one of the sliders you can press Ctrl or Shift to move the other 2 sliders too.
This is sometimes usefull of you just want to finetune a certain color.
* '''Ctrl'''+Slide
** All sliders have the same value.
* '''Shift'''+Slide
** The other 2 sliders will now move relative to the one your moving.

== Winamp 5 Color Editor F.A.Q. ==

'''1. Why can't I edit my skin's color themes ? Why is there a “locked” icon in front of them ?
'''
A skin may be zipped, and so the color editor cannot 1) unzip your skin, 2) change the themes definitions, and 3) rezip the skin. Even if it could, or if the skin was unzipped in the first place, the color editor would have to find the file that defines the color themes, and this may be any xml file in the skin.

The color editor's philosophy is therefore not to touch the skins directly : the only editable color themes are those you create. To edit a color theme, you should clone it first !

'''2. How can I send my colorthemes to someone without making him edit his skin ?'''

You should first export your colorthemes using the export button on the color editor, and then install the exported file into the Winamp5 colorthemes directory located at :

path_to_winamp\plugins\ColorThemes\name_of_the_skin\

The file you install should have the xml extention and a somewhat unique name so that it does not conflicts with other custom themes packs (ie: not “themes.xml”).

Upon reloading Winamp5, the themes should now appear in the colorthemes selection box. Note that they will not be editable (see faq 1 above).

'''3. Why does going from RGB to HSL sometimes slightly changes my color group setting ?'''

Although all RGB colors have an HSL equivalent and vice-versa, these are not one-to-one equivalents (two RGB colors may have the same HSL equivalent). This is a consequence of the RGB/HSL conversion algorithms.

'''4. How do I create a new color group ?'''

Color groups are an integral part of the skin, they change for each skin, and they are defined by the skinner. The color editor's purpose is to let you assign new color values for these color groups, not to let you create more groups in the skin you are using or for the skin you are making.

'''5. How do I find what color group is used by a given widget ?'''

The only way to do this for now is to try each color group. A later version may let you flash a specific color group in the skin, but this will be very cpu-intensive (changing a color group reloads all the skins images), but since a given widget may implicitly use more than one colortheme, we would need to have the skinner list these colorthemes explicitly for each widget to be able to let you find this out more easily. This would be a daunting task for the skinner, and so this is not a viable option.

'''6. Why are there widgets for which there is no color group ?'''

Either the skinner forgot to define a color group for the graphical elements used by the widget, or you have missed it.

'''7. What is the difference between “Max Grayscale” and “Avg Grayscale” ?'''

Max grayscale is computed by getting the maximum value of each red, green and blue color channels, and assigning this value to each three (each pixel is done independently).
Avg (average) grayscale is computed by getting the average value of the red, green and blue color channels, and assigning this value to each three (each pixel is done independently).

'''8. What is “Saturate channels” ?'''

“Saturate channels” adds 127 to each pixels's color channel.

'''9. Why is the resulting color for the graphical element not the color that I see above each slider ?'''

The color you see above each slider is the color you get for a pixel that has the “Preview source color” values for its color channels. To get an accurate result, you should select a previous source color that is approximately the average color of the graphical element you are tweaking. For instance, if you are changing a graphical element that has only red (ie: it has 0 in its green and blue channels), no matter the poxition of the green and blue sliders, it will not change anything in the element. If that happens, you can use one of the two grayscale checkboxes, so that the element will be grayscaled before the color tweak is applied, or you can use the saturate channels checkbox to boost its color channels so that all three sliders will have an effect.

'''10. Why does the red (or green or blue) slider has no effect on some widget ?'''

See faq 9.

Why does the red green and blue values for each color group goes from -4096 to +4096 rather than from 0 to 255 ?

The red green and blue values in the xml for a color theme are not a direct representation of the color you get (otherwise, it would make all pixels this value!), they are (arbitrarilly ranged) values that are used to multiply (or divide) each pixels's channel.

'''11. Why does the hue slider cycles twice over the hue circle ?'''

The hue slider works just as the RGB sliders do, it changes each pixel color starting from its original channel values. The hue value you select makes the pixel's hue be shifted left or right over the hue circle just as the red (or green or blue) sliders shifts the red (or green or blue) value left or right in the original pixel, and so you can go one complete circle in one direction, or one complete circle in the other. In effect, where photoshop lets you go from 0° to 360° on the hue circle, the color editor lets you go from -360° to +360°

'''12. Why do the saturation and luminance sliders show a gradient between 2 colors rather than the standard color-to-white and color-to-black gradients ?'''

Here too, the sliders let you change the original pixels one direction or another, so the saturation slider lets you desaturate a pixel beyond the zero limit (and the luminance slider lets you subtract luminosity bellow the zero limit) of a standard HSL algorithm. In effect, where photoshop lets you go from 0 to 100% for these two components, the color editor lets you go from -100% to +100%.

Creating a ClassicPro Skin

2008-09-24T21:21:57Z

Pjn123: New page: ==What is ClassicPro?== ClassicPro is a plugin for Winamp that will allow you to use a new type of skin in Winamp Media Player. What makes this type of skin different from normal modern sk...

==What is ClassicPro?==
ClassicPro is a plugin for Winamp that will allow you to use a new type of skin in Winamp Media Player. What makes this type of skin different from normal modern skins is that all the coding stuff is already done in one central place so you don't need to be a programmer to create a great Winamp skin anymore!
The advantages are not just for the skinners though, artistic people can now create great skins easily, and this means we'll see more beautiful skins by great artists!

ClassicPro skins use an advanced single-user-interface which is really easy to use. The great thing is cPro appeals both to the advanced Winamp user and the minimalistic user who would for example just want to use the playlist. This means ClassicPro will probably fit you like a glove no matter who you are!
If you are used to a Classic Winamp skin and didn't want to switch to the modern skins of the past then we urge you to give this a test drive since this skin type was designed especially for the old school user who might need a minimalistic approach to their favourite media player.

The 2 main key focus points in the development was as follows:
* Performance - Winamp must load quick and use as little resources running as possible
* Easy Interface - The interface must be easy to understand and give enough play for the experienced users too

[http://cpro.skinconsortium.com/ Download ClassicPro plugin]

==Introduction to ClassicPro skins==
[[Image:http://cpro.skinconsortium.com/images/cpro-promo1_04.jpg]]

ClassicPro skins are basically pre-coded Winamp Modern Skins. The advantage of this is that the skinner dont have to spend months coding the skin anymore and can just edit a few picture files and have a fully working skin. All the coding of the skin is installed in one central place by the cPro plugin and then this plugin is maintained by the developer. So when the plugin installs new features or fixes your skin will automatically have them too.

For more information make a post at their forums:
[http://forums.skinconsortium.com SkinConsortium Forums]

==Tools needed to create a skin==
* Graphics Editor
** Paint, Corel PSP, Adobe PS, GIMP, Paint.NET
* Text Editor
** Notepad, Notepad2, Notepad++
* Archiver
** 7zip, WinZip, WinRar
* ClassicPro plug-in
** [http://cpro.skinconsortium.com/ Download ClassicPro plugin]

==Tutorials==
* [http://cpro.skinconsortium.com/index.php?content=manual Skinners Guide to ClassicPro] by pjn123
** This is the manual released by the developers
* [http://wilian.deviantart.com/art/ClassicPro-Template-pack-95549517 ClassicPro Template pack and Manual] by Wilian & Veroka
** This is a more in depth look at creating cPro skins. Really great for beginners.
** Comes with great base skin for you to start off with

Articles

2008-09-24T19:29:22Z

Pjn123: /* Modern Skins */

'''Breadcrumb''' -- [[Main_Page|Wiki Main]] : [[Skin Developer]] : [[Visual Developer]] : [[Plug-in Developer]] : [[Articles|Articles Page]] : [[Developers FAQ|FAQ]] : [[Main_Page#Glossary_of_Terms|Glossary]]

==Skin Articles==

===Classic Skins===
*[[Test]]
*Link to Classic Skin Article 2

===Modern Skins===
*[http://dev.aol.com/article/2007/winamp_skins Winamp Skins Development Tutorial]
*Link to Modern Skin Article 2
*[[Creating a ClassicPro Skin]]

==Visualization Articles==
*[[MilkDrop_Preset_Authoring|MilkDrop Preset Authoring]]
*Link to vis Article 2

==Plug-in Articles==

*[[Wasabi|Overview of the Wasabi API]]
*[[Decode File API]]
*[[Media Library Plugin|How to create a Media Library plugin]]
*[[Input Plugin|How to create an Input plugin]]
*[[General Purpose Plugin|General Purpose plugins]]
*[[Output Plugin|How to create an Output plugin]]
*[[DSP Plugin|Audio Effects (DSP) plugins]]
*[[Random API]]
*[[Language API]]
*[[Agave Config API]]
*[[Album Art API]]
*[[Tagz API]]
*[[XML Parser Object]]
*[[System Callbacks API]]
*[[Skin API]]
*[[Service Manager API]]
*[[Memory Manager API]]
*[[Image Writer Service]]
*[[Image Loader Service]]
*[[Text Feed Service]]
*[[File Reader Service]]
*[[Application API]]
*[[Replay Gain API]]
*[[Podcasts API]]
*[[Agave Metadata API]]
*[[System Component Interface]]
*[[Burner API]]
*[[Audio Encoder Plugin|Audio encoders (transcoding, CD ripper)]]
*[[Skinning Plugins|WAC Skinning plugins]]
*[[Nullsoft Database Engine|Nullsoft Database Engine (NDE)]]
*[[JNetLib|JNetLib networking library]]
*[[APE Plugins|AVS Plugins]]
*[[NSV Plugins|NSV Audio and Video decoders]]
*[[Playlist API]]
*[[Media Core API|Media Core API (Freeform skins only!)]]
*[[SendMessage API|Winamp 2 API]]
*[[Media Library API|Media Library SendMessage API]]
*[[Plugin Terminology]]

==Web Development Articles==
* [[HTTP Example Plugin]]
* [[Javascript External Interface]]