Window-Switching Buttons

The Window-Switching Buttons allow you to open and close other windows within Winamp3. Remember earlier when we included the Playlist Editor, the Equalizer, and the Thinger in our skin.xml? Those were all links to the Default skin's code for those Containers. Here we're going to make buttons that allow us to toggle those windows.

First let's implement our Playlist Editor ToggleButton. The Playlist Editor is probably the best, most often used Component of Winamp3, so the sooner we can use it the better. A ToggleButton is, as its name suggests, a lot like a regular Button. In fact, the ToggleButton inherits all the same Parameters as a Button, plus it has some of its own. Since we'll be putting all three of our ToggleButtons together, let's go ahead and a make a new Group for them at (141,107). Then in our groupdef, we'll create our Playlist Editor ToggleButton with this:

<togglebutton
   id="PL"
   action="TOGGLE" param="guid:pl"
   x="41" y="1"
   image="player.normal.togglebutton.pl.off"
   downImage="player.normal.togglebutton.pl.on"
   activeImage="player.normal.togglebutton.pl.on"
   rectrgn="1"
   tooltip="Toggle Playlist Editor"
/>

Here we see a new action, "TOGGLE", and it's counterpart param. "TOGGLE" instructs Winamp to open or close the Container specified in param, which is this case is "guid:pl". With the exception of the Thinger and the Equalizer, which will be demonstated below, Containers are specified by their GUID. We won't go into what a GUID is, but know that each Component has a unique one so that Winamp can identify them. For simplicity's sake, we'll just use the shorthand GUIDs. As shown, the Playlist Editor is specified by guid: followed by pl. Other possible values include: "guid:ml" (Media Library), "guid:avs" (Advanced Visualization Studio), "guid:{F0816D7B-FFFC-4343-80F2-E8199AA15CC3}" (Video), "guid:{6A17D510-7833-4CEC-A420-F08F4B280782}" (Media Info Editor), and "{B397A4CE-455A-4D62-8BF6-D0F91ACB70E6}" (Preferences). Note that the Preferences Window does not have "guid:" before it. Also, there are other GUIDs, these are just some of the more commonly used ones.

Also new to ToggleButtons is the activeImage Parameter. This Parameter specifies which image to use for the on state of our ToggleButton. When the Playlist Editor is showing, we see the on state. When it is closed we see the off state as specified by the image Parameter. The downImage is shown while the ToggleButton being pressed and therefore switching between states.

Aside from the param being a little different, the Thinger and the Equalizer ToggleButtons are pretty much the same as the Playlist Editor's, so we'll just see the code but not discuss it:

<togglebutton
   id="EQ"
   action="TOGGLE" param="eq"
   x="78" y="4"
   image="player.normal.togglebutton.eq.off"
   downImage="player.normal.togglebutton.eq.on"
   activeImage="player.normal.togglebutton.eq.on"
   rectrgn="1"
   tooltip="Toggle Equalizer"
/>

<togglebutton
   id="th"
   action="TOGGLE" param="thinger"
   x="1" y="4"
   image="player.normal.togglebutton.th.off"
   downImage="player.normal.togglebutton.th.on"
   activeImage="player.normal.togglebutton.th.on"
   rectrgn="1"
   tooltip="Toggle Thinger"
/>

Option Buttons

Like the Window-Switching Buttons above, the Option Buttons are also ToggleButtons. Rather than controlling which windows are visible, though, the Option Buttons activate and deactivate settings. In the tutorial skin, like most skins, we'll be adding ToggleButtons to control the Repeat, Shuffle, and Crossfade options. Let's add them to our Display Group then go over the new Parameters.

<layer id="RSCBackground" image="player.normal.rscbg" x="6" y="1"/>
<togglebutton
   id="Repeat"
   x="6" y="4"
   image="player.normal.togglebutton.repeat.off"
   downImage="player.normal.togglebutton.repeat.down"
   activeImage="player.normal.togglebutton.repeat.on"
   cfgattrib="{45F3F7C1-A6F3-4EE6-A15E-125E92FC3F8D};Repeat"
   cfgval="2"
   rectrgn="1"
   tooltip="Repeat"
/>

<togglebutton
   id="Shuffle"
   x="17" y="5"
   image="player.normal.togglebutton.shuffle.off"
   downImage="player.normal.togglebutton.shuffle.down"
   activeImage="player.normal.togglebutton.shuffle.on"
   cfgattrib="{45F3F7C1-A6F3-4EE6-A15E-125E92FC3F8D};Shuffle"
   rectrgn="1"
   tooltip="Shuffle"
/>

<togglebutton
   id="Crossfade"
   x="28" y="6"
   image="player.normal.togglebutton.crossfade.off"
   downImage="player.normal.togglebutton.crossfade.down"
   activeImage="player.normal.togglebutton.crossfade.on"
   cfgattrib="{FC3EAF78-C66E-4ED2-A0AA-1494DFCC13FF};Enable crossfading"
   rectrgn="1"
   tooltip="Crossfade"
/>

The first thing you might notice is that these ToggleButtons don't have any action or param Parameters. All of the work done by this kind of Button is done by the cfgattrb Parameters. The values are specific to the function of the ToggleButton, so make sure not to alter them. Repeat also has a special Parameter, namely cfgval. We're using the value "2" to make Winamp repeat the entire playlist when enabled. A value of "1" would only repeat the current track when the activated.

With the last of our ToggleButtons in place, we're ready to test them out. Try pressing the different ToggleButtons we've added. Make sure they all change the option or open the window that they are supposed to. Hopefully your skin is looking something like this (with Repeat and the Playlist Editor both enabled):

When your satisfied that all your ToggleButtons are in the right place and that they behave correctly, we can continue on to add some Windowing Buttons.