Adding a Timer

Like the SongTicker in the previous section, the Timer is a Text Object. It can display the elapsed time or the time remaining for the current song. Let's look at a Timer then discuss the new Parameters and values introduced.

<Text
   id="Timer"
   display="time"
   x="40" y="0"
   w="50" h="26"
   align="right"
   fontsize="20" color="255,255,255"
   antialias="1" bold="1"
   shadowcolor="64,64,64" shadowx="-1" shadowy="-2"
   timeroffstyle="1"
   timecolonwidth="5"
/>

First, the display Parameter has a value of "time". This means it will show the current song's elapsed time, or, when clicked, it will show the time remaining. Also, notice that the shadow offsets are both negative? As of the writing of this tutorial, there is a bug in Winamp3. Shadows for the Timer are inversed, so the values shown will place the shadow down and to the right, instead of up and to the left as it should with those values. At the moment, enabling both bold and antialias make the font (currently the default one) look better.

The new Parameters used, while not mandatory, help make our Timer look and behave properly. The first shown, align, determines where in the area defined by w and h the Timer will be. The value "right" means that the Timer will be alongside the right side of the area we defined. The other two accepted values are "center" and "left". timeroffsytle determines what will be shown when nothing is playing. Possible values for this Parameter are "0", "1", and "2". They'll show " : ", "00:00", and " ", respectively.

Bitmap Fonts

To maintain consistency, let's use the same font for Timer as we used for our SongTicker. If you try adding the font Tag as we did before, you'll notice some strange behavior. The numbers are not all the same width, so as the numbers change, especially to or from "1", the digits all shift around. This looks bad and is distracting. Using forcefixed would help here, but then the colon gets messed up, so we'd have to change the timecolonwidth Parameter, and even then the Timer wouldn't look as good as it could. A better solution would be to use a bitmap font.

Bitmap fonts have a few advantages over truetype fonts, but are also more limited in some ways. While creating your own bitmap font is beyond the scope of this tutorial, after understanding how they work and looking at the font used here, hopefully you'll know enough to make you own if needed.

This image was used to create the bitmap font. Notice that all the characters fall within the blue grid. The size of the grid was determined by figuring out the height of the tallest character and the width of the widest character, which in this case both happened to be 10. Bitmap fonts are not limited to numbers, but since this will only be used for a Timer, it needs nothing more than numbers, a colon, and a dash. Paired with the height and width of each character as passed through the Element definition, Winamp finds the characters it needs by their positions. The characters are defined as 11 pixels wide (so there is one pixel of space between them) and 10 pixels high. This means the image has to be 330 wide by 30 tall for Winamp to properly use the font. To use the actual image, in which the Text is white and doesn't have the blue grid, we'll need to add it to our Elements like so:

<bitmapfont id="player.timerfont" file="player/numfont.png" charwidth="11" charheight="10" hspacing="0" vspacing="0"/>

Since there is no unused space between the characters, hspacing and vspacing are both set to "0".

Now we can set this as our font in the Timer. If you recall, bitmap fonts have some drawbacks. Both the color and size are limited to what was used for the image. Also, in the current version of Winamp3, the shadows are limited to being the same color as the original text. Hopefully this will be cleared up in a later release. Since the Timer doesn't have a shadow, it would probably be best if we remove the shadow from our SongTicker as well. This makes the SongTicker look rather weak, though, so after playing around with the Parameters a bit, the final code for the SongTicker and Timer looks like this:

<Text
   id="Songticker" ticker="1"
   display="songname" showlen="1"
   x="8" y="11"
   w="126" h="26"
   font="player.tickerfont" fontsize="12" color="255,255,255"
   bold="1"
/>
   <Text
   id="Timer"
   display="time"
   x="38" y="6"
   w="60" h="12"
   align="right"
   font="player.timerfont"
   timeroffstyle="1"
   timecolonwidth="4"
/>

Does this mean all that time working with the shadows and such were wasted? Not at all. We covered many Parameters and even got to see some in action that we wouldn't otherwise have seen if we had just gone straight to this final code. Besides, as a skinner, you should always be prepared to change aspects of your skin to add to your skin, to adapt to some new feature, or just to maintain a uniform feel throughout your skin.

Now that we have our Timer working and have changed the SongTicker, we can now move onto adding the Volume and Seek Sliders.