Modern Skin: Relative Positioning

From Winamp Developer Wiki
Revision as of 18:14, 24 September 2008 by Tarik (Talk | contribs)

Jump to: navigation, search

Creating a Modern Skin --> Intro --> Winamp 2 to Winamp 3+ --> Simple Skin Tutorial --> XML Intro --> Simple Skin Tutorial (Continued) --> Container --> Group --> Relative Positioning --> Complex Skin --> Non-Rect Player --> Layer Composition --> Alpha Channels --> Animatedlayer --> Snap Points --> Drawers --> Skin Scripting --> Drawer Scripting --> Animating a Skin --> Maki Overview --> Glossary


What is Relative Positioning?

A. Introduction

Modern Winamp skinning offers unparalleled flexibility in element placement. You're no longer restricted to specifying X&Y coordinates for an element. Instead, you can define the position of the element relative to your component. When the component resizes, the element will stretch or move with the component. This flexibility frees the skin designer from the hassel of retooling or redrawing the graphic assets over and over again to different size and width. Winamp will do that for you. =)

B. Add relativepos.xml to your SimpleTutorial

For this section, I have made another XML file called "relativepos.xml" that you need to include in your SimpleTutorial skin. Download the relativepos.xml here.(Please right-click on the link and choose 'Save As...' or 'Save Link Target As...')

Place this file in the same directory as your SimpleTutorial skin directory. For most people, the path is "C:\Program Files\Winamp\Skins\SimpleTutorial". Add this line to your Skin.xml in SimpleTutorial:

File:Rpos include.png


This is what your skin.xml should look like after the change:


File:Rpos skinxml.png


RelativePos.xml

File:Rpos xmlcode1.png


Relativepos.xml uses elements from the SimpleTutorial skin. I am using the "blue-vis-layer.png" and "red-vis-layer.png" in the Player directory.


File:Rpos xmlcode2.png


File:Blue-vis-layer.png File:Red-vis-layer.png


Relative Position 1: Defining X&Y Coordinates

File:Rpos xmlcode3.png


A. Register_autopopup="1"

Before we delve into the code, I want to go over one feature. Take a look at this tag: File:Rpos autopopup.png. When you add this tag to a groupdef, Winamp automatically wraps a container and layout around it and allow you to see the group in a separate window. This is particularly useful when you want to test the behavior of that group separate from everything else. To open that window, right click on the Main Player to bring up the menu. Go to the "Windows" submenu and you'll see the extra windows relativepos.xml has created. Open them up and try them out.


File:Rpos menu.png


B. Defining X&Y Coordinates

Line 11-19 defines a group with a "blue-vis" layer at the coordinate of (20,30). This is probably what you've been doing all along. As you can see, that the blue-vis layer's location doesn't change if you resize the window. The position is fixed.


File:Rpos1 small.png

* Small size window


File:Rpos1 big.png

* Large size window; Blue-vis layer position did not change


I encourage you to play with this XML file. If you change the X&Y coordinates on line 14 to (-20, -30), your blue-vis layer will disappear. The reason is that the coordinate specified will be outside the context of your component window and therefore will not be rendered.

File:Rpos1 left.png


Relative Position 2: Specify the Height and Width

File:Rpos xmlcode4.png

In group 2, we're defining the height and width of the blus-vis layer that is larger than the image. When you do that, Winamp will stretch the image to that size. Likewise, if you specify height or width that is smaller than the image, Winamp will shrink the image to fit to that size.


File:Rpos2 1.png

* RPOS1 window: Height and Width not specified


File:Rpos2 2.png

* RPOS2 window: Height and Width defined



Relative Position 3: RelatX & Negative X Coordinate

File:Rpos xmlcode5.png


Line 30-39 defines a group with a "blue-vis" layer at the coordinate of (-120,30). Notice that we have an extra line on line 34: "relatx=1". By setting relatx to 1, you're telling Winamp to start the x-coordinate from the right edge of the window. Note that the X-Coordinate should be negative; otherwise the blue-vis layer will not show up.

This is a convenient feature if you want an element stick to a specific distance relative to the right edge of the window. Notice that when I resize the window, the blue-vis layer stays fixed distance relative to the right edge of the window.


File:Rpos3 small.png

* RPOS3 window with relatx=1


File:Rpos3 big.png

* RPOS3 window with relatx=1: window resized


File:Rpos3 right.png

* RPOS3 window with relatx=1; coordinate (20,20)



Relative Position 4: RelatY & Negative Y Coordinate

File:Rpos xmlcode6.png


Line 40-49 defines a group with a "blue-vis" layer at the coordinate of (20,-80). Notice theline on line 44: "relaty=1". By setting relaty to 1, you're telling Winamp to start the y-coordinate from the bottom edge of the window. Note that the Y-Coordinate should be negative; otherwise the blue-vis layer will not show up.

This is a convenient feature if you want an element stick to a specific distance relative to the bottom edge of the window. Notice that when I resize the window, the blue-vis layer stays fixed distance relative to the bottom edge of the window.


File:Rpos4 small.png

* RPOS4 window with relaty=1


File:Rpos4 big.png

* RPOS4 window with relaty=1: window resized


File:Rpos4 bottom.png

* RPOS4 window with relaty=1: coordinate (20,50)



Relative Position 5: Relatw and RelatH

File:Rpos xmlcode7.png


Line 50-72 demonstrate the use of relath and relatw. From the beginning of this section we know that by defining height and width different from the original image size, Winamp will automatically stretch or shrink the image to fit that size constraint. What is powerful (and awesome) about modern skins is that you can also tell Winamp to adjust the height and width of an element with respect to the right and bottom edge of the window. This is accomplished through "relath" and "relatw".

In our example, we defined a blue-vis group (lines 52-60) and a red-vis group that encompasses the blue-vis group (lines 63-72). The blue-vis group is defined with no preset x, y, h or w because we will define them on line 71.

The magic happens on line 71. With relath set to 1 and relatw set to 1, we're telling Winamp to stretch or shrink the blue-vis layer so that it is 50 pixels away from the right and bottom edge of the window. The blue-vis layer is stretched and the distance is maintained as I expanded the size of the window.


File:Rpos5 small.png

* RPOS5 window with relath=1 and relatw=1


File:Rpos5 big.png

*RPOS5 window with relath=1 and relatw=1; window resized; Blue-vis layer stretched