Text

Text Objects can be used to display a variety of information ranging from the name of the current song to the time elapsed to messages controlled by scripts. Most skins have at least two or three Text Objects, namely the SongTicker, the Timer, and sometimes the InfoLine. This section not only explains how to include a SongTicker, but also explains how to customize the SongTicker once it is in place.

The SongTicker is a specific Text Object that usually displays the current song information. Scripts often use the SongTicker to notify the user of events as well. For example, when you push the Play Button on the Default skin, the SongTicker displays "Play." For now, we will just focus on implementing a SongTicker and on showing the current song name.

Adding a SongTicker

As with the Control Buttons in the previous section, the SongTicker is easier to understand if you see it first. The following is a basic SongTicker:

<Text
   id="Songticker"
   display="songname"
   x="8" y="11"
   w="126" h="26"
   fontsize="12" color="255,255,255"
/>

While not mandatory, I recommend that your id be "Songticker" so that any scripts you may wish to include can modify the Text if needed. The Parameter display, as logic would suggest, controls what is displayed. In this case, we use "songname" which will show the number in the playlist, the artist, the track number, and of course the name of the song. Other possible values for this Parameter are: songinfo, songartist, songtitle, songalbum, time, and componentbucket. The last two will be dealt with further along in the tutorial. The rest are fairly self-explanatory, you may experiment with them if you wish.

The only other Parameters that may need explaining are fontsize and color. fontsize tells Winamp how many pixels tall to make the text if using a truetype font. Similarly, color indicates what color to make the text if using a truetype font. The value is a set of three numbers in RGB(red, green, blue) notation. In this case, our text will be pure white. "0,0,0" would yield pure black, "127,127,127" is a mid-tone gray, "255,0,0" is red, and so forth.

For the tutorial skin, you should add the code into the Display Group. We want it to show up on top of the Display background, yet underneath of the glass Layer. This means it should go between the two Layers, after the background and before the glass. Reload the skin and you should see that we now havea SongTicker in our skin.

Customizing the SongTicker

The basic SongTicker that we added is kind of boring. The font is plain, it doesn't scroll if the name is too long, etc. Here we'll take a look at how to customize Text Objects to look and function how we want them to.

First, let's make the SongTicker a little more functional. The first Parameter we want to use is ticker with a value of "1". This will make the Text scroll if it is longer than the display area is wide. Furthermore, adding showlen with a value of "1" will tell Winamp to append the total length of the song to the end of the Text. Both of these Parameters make the SongTicker more useful in how and what it displays. If for some reason you wish to take away some functionality, you can set nograb to "1" and prevent the user from clicking and dragging the Text manually.

With the functionality of the SongTicker taken care of, we now can move on to enhancing the appearance of the Text. There are a number of ways to affect the Text's looks. The first and most drastic method we'll cover is changing the font. The font that is currently being used is Winamp's default truetype font. It's effective, yes, but too bland for most skins.. When selecting a font, make sure it is something reasonable, one that fits the design of your skin while still maintaining legibility. For this skin I chose "Visitor", one of many excellent freeware fonts available from ÆNIGMAFONTS. First, copy the TTF file into your skin folder. Next we'll have to define it in our Elements. Fonts are a little different than images, so I'll show you how to enter them into player-elements.xml:

<truetypefont id="player.tickerfont" file="visitor2.ttf"/>

The SongTicker font is then set using the Parameter font with a value of whatever you set the id in the Elements, in this case "player.tickerfont". Refresh the skin and observe the changes. You should see our new font in effect.

The next three Parameters are all related, and combined will create a shadow for our Text. Other than its color and position, the shadow text is identical to our regular text. Like color, shadowcolor is an RGB value that determines the color of the shadow. For our skin, let's use a value of "64,64,64" a dark gray. shadowx and shadowy determine the position of the shadow and are really just pixel offsets from the Text's position. Setting shadowx to "1" and shadowy to "2" will result in the shadow being one pixel right and two pixels down from the original Text. You can experiment with these values, even making them negative to put the shadow above and/or to the left of the Text. Using the values above, the SongTicker should now yield something like this:

If you aren't getting something similar, check your XML against 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"
   shadowcolor="64,64,64" shadowx="1" shadowy="2"
/>

These are all the modifications that have been made to the tutorial skin's SongTicker. Now you may go on ahead to add another Text Object, the Timer, or read on to find out what other Parameters are available for Text.

Additional Text Parameters

There are a handful of additional Parameters that can be used with Text Objects. The two most common are bold and antialias. Just like in other applications, bold, when set to "1" will make the Text stronger or thicker. The other, antialias, smooths out the edges of your Text when enabled. Used jointly or independently, these two Parameters can sometimes make your font look better and easier to read. Another Parameter that may enhance your font is forcefixed. When set to "1", this Parameter will tell Winamp to make your font behave as if its characters are all uniform in width, or monospaced. This is sometimes helpful is your characters all seem scrunched together.

The rest of the Parameters available for Text are more appropriate for Timers and will therefore be explained in the next section.