Adding a Visualizer

Visualizers are a special Object provided by Winamp, we don't have to do much to them other than specify position, size and color. Let's look at the XML needed for a Vis:

<vis
   id="vis"
   x="88" y="7"
   w="36" h="14"
   alpha="196"

   colorband1="255,255,255"
   colorband2="255,255,255"
   colorband3="255,255,255"
   colorband4="255,255,255"
   colorband5="255,255,255"
   colorband6="255,255,255"
   colorband7="255,255,255"
   colorband8="255,255,255"
   colorband9="255,255,255"
   colorband10="255,255,255"
   colorband11="255,255,255"
   colorband12="255,255,255"
   colorband13="255,255,255"
   colorband14="255,255,255"
   colorband15="255,255,255"
   colorband16="255,255,255"
   colorbandpeak="255,255,255"

   colorosc1="255,255,255"
   colorosc2="255,255,255"
   colorosc3="255,255,255"
   colorosc4="255,255,255"
   colorosc5="255,255,255"/>

The first new thing we see is the colorband#, where # ranges from 1 to 16. These numbers correlate to the 16 bands that you can color. 1 is the bottommost, 16 is the topmost. For this skin, we've set them all to white, but you can create gradients or any other patterns you wish by changing the values. The colorbandpeak Parameter refers to the top of each bar. This marks the current high point of that bar, and it also falls slower than the rest of the bar. The image below is from another skin, but show one of the many possibilities for the Visualizer. In it, the first band is a shade of blue, band 8 is gray, and band 16 is a reddish purple.

The next set of Parameters, the colorosc#, controls the colors of the oscilloscope. Like the color bands, the values color the waveform depending on the amplitude at that point. colorosc1 determines the color closest to the middle, colorosc2 sets the color of just above and below the middle, and so on to colorosc5 which determines the color of the wave at the furthest points from the middle.

Now that we know how it works, let's drop in our new Vis into our "shade" Layout. It doesn't really matter where it goes as long as it is after the display and before the glass. I decided to put it between the Timer and SongTicker since that is where it will be in the skin.

As always, refresh the skin and make sure the chnages work. If you'd like, change around the color color values to make sure you understand how the bands and oscilloscope work, then we'll continue on to change the colors of our skin using Gamma Groups.