Starting with an analogy, the remote is like a Mr. Potato head. You set a background image (the face) and from then on anchor all the media and bandwidth parts (eyes, nose, mouth etc.) onto that background image. With the remote you can control media and bandwidth functions. It's entirely customizable and can include as many or as few Shareaza functions as you like.
In this section, you will be taken step-by-step through the building of the remote. This section assumes you have a knowledge of Shareaza skinning. That's why it's a great idea to read up on manifests as well as windowskin elements before building your remote skin. However, if you feel like diving right in, this tutorial demonstrates the elements you need. Look for the bold red text whenever you need a bit more explanation. Let's get started =)
Before we add anchors and parts your .xml file should look like this:
<?xml version="1.0" encoding="UTF-8"?> <skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0"> <manifest name="My Remote" author="My name" description="A remote" link="http://shareaza.sourceforge.net/" email="Me@myemail.com" version="1.0" type="skin" language="en" /> <windowSkins> <windowSkin> </windowSkin> </windowSkins> </skin> |
At this point I'd recommend copying this into your text file and editing the manifest fields.
Here is a brief description of all the manifest elements.
- Name - The name of your remote.
- Author - The name of the remote's creator.
- Description - A relevant description of the remote (eg. This is a mini-bandwidth controller).
- Link - To a homepage for more information on your remote or other remote collections.
- E-mail - An e-mail address to contact for more information and or bugs concerning the remote.
- Version - A number denoting the version. Newer versions are increasingly numbered (1,1.1,1.2 etc.).
- Type - Always set to skin.
- Language - If in English set to "en".
Next, we'll set our background image. Here are the steps:
- Set image path to the .bmp your remote graphics are in.
- Set target window as "CremoteWnd" (the remote window).
- Set the region (<part name="Background") your remote's background occupies (this is in x, y, width, height).
<?xml version="1.0" encoding="UTF-8"?> <skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0"> <manifest name="My Remote" author="My name" description="A remote" link="http://shareaza.sourceforge.net/" email="Me@my_email.com" version="1.0" type="skin" language="en" /> <windowSkins> <windowSkin> <image type="image" path="MyRemote.bmp"/> <target window="CRemoteWnd"/> <parts> <part name="Background" rect="0,0,341,125"/> </parts> </windowSkin> </windowSkins> </skin> |
ANCHORS
Now that your remote has a background, you'll want to anchor some buttons on right? Anchors tell Shareaza where to paint your button parts on the remote window. Again, these parts are anchored onto the window in x,y,width,height relative to the remote's background. Here's a list and description of what you can anchor:
| Anchors | Description |
| StatusText | Area displaying song title, time elapsed, bandwidth etc. |
| History | Running bandwidth display |
| FlowTx | Outgoing bandwidth display |
| FlowRx | Incoming bandwidth display |
| MediaSeekTrack | Seek track for media |
| MediaVolTrack | Volume track for media |
| ScalerTrack | Scaler track for bandwidth limiting |
| MediaStatePlaying | Area for graphical 'play' sign when media is playing |
| MediaStatePaused | Area for graphical 'pause' sign when media is paused |
| MediaStateStopped | Area for graphical 'stop' sign when media is stopped |
| _ID_TRAY_OPEN | Restores Shareaza when in the system tray |
| _ID_MONITOR_CLOSE | Closes the remote |
| _ID_NETWORK_SEARCH | Opens a new search tab |
| _ID_TOOLS_DOWNLOAD | Opens the download a torrent window |
| _ID_TAB_LIBRARY | Opens the library tab |
| _ID_MEDIA_PLAY | The play button |
| _ID_MEDIA_PAUSE | The pause button |
| _ID_MEDIA_STOP | The media button |
| _ID_MEDIA_PREVIOUS | The previous button |
| _ID_MEDIA_NEXT | The next button |
| _ID_MEDIA_MUTE | The mute button |
Any shareaza function can be anchored onto the remote. To find more function just open up the default-en.xml file. It is found in the languages folder that resides in your skins folder. What does your anchor section look like? Take a look.
<anchors> <anchor name="StatusText" rect="69,46,262,20"/> <anchor name="History" rect="70,27,208,13"/> <anchor name="FlowTx" rect="292,27,12,13"/> <anchor name="FlowRx" rect="319,27,12,13"/> <anchor name="MediaSeekTrack" rect="71,67,232,12"/> <anchor name="MediaVolTrack" rect="162,91,64,17"/> <anchor name="ScalerTrack" rect="71,40,206,9"/> <anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/> <anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/> <anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/> <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/> <anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/> <anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/> <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/> <anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/> <anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/> <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/> <anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/> </anchors> |
PARTS
Next, you'll want your buttons to have up, hover, down, and disabled states. Here's how you add button states:
| Parts | Description |
| _ID_MEDIA_STOP.Up | Stop button in it's resting (Up) state. |
| _ID_MEDIA_STOP.Hover | Stop button in mouse-hovering-over state. |
| _ID_MEDIA_STOP.Down | Stop button in pressed down state. |
| _ID_MEDIA_STOP.Disabled | Stop button in disabled state (Media player off). |
For all your parts you can have these states. When you hover over them on your remote, the 'hover' state is painted. When you press the button down, the 'down' state is painted. Of course, these parts are only painted if you have an accompanying anchor. If you wanted stop you'd need the following anchor and parts. Have a look.
<anchors> <anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/> </anchors> <parts> <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/> <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/> <part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/> </parts> |
There are some interesting quirks:
- Anchor play and pause onto the same area and exclude a disabled state part. You will have a pause button when music plays and a play button when music is paused/stopped.
- Exclude a disabled state for play and play will act as an open media file button when the media player is closed/empty.
- For History/Flow parts use "1" to have the image painted from the bottom and "2" to have the image painted from the top (eg. a peak edge to your bandwidth bar).
Here's what your parts (up, down, disabled, hover button states) section would look like.
<parts> <part name="Background" rect="0,0,341,125"/> <part name="HistoryTx1" rect="6,150,208,13"/> <part name="HistoryRx1" rect="6,131,208,13"/> <part name="FlowTx1" rect="228,131,12,13"/> <part name="FlowRx1" rect="255,131,12,13"/> <part name="MediaSeekTab" rect="159,210,23,11"/> <part name="MediaSeekBar" rect="209,210,92,10"/> <part name="MediaVolTab" rect="140,210,9,17"/> <part name="MediaVolBar" rect="159,221,58,17"/> <part name="ScalerTab" rect="224,224,9,9"/> <part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/> <part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/> <part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/> <part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/> <part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/> <part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/> <part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/> <part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/> <part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/> <part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/> <part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/> <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/> <part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/> <part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/> <part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/> <part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/> <part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/> <part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/> <part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/> <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/> <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/> <part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/> <part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/> <part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/> <part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/> <part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/> <part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/> <part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/> <part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/> <part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/> </parts> |
FONTS
Next we need to set your text-caption. It sets the font and style that appears in your StatusText anchor. It will be used for the song title, time, bandwidth etc.
- Face - The font face name, for example "Tahoma".
- Size - The font size, for example "8".
- Weight - The font weight, either as a constant or an integer value between 1 and 1000. "normal" and "bold" are also accepted.
- Colour - The colour of your StatusText in html form.
<caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/> |
REGIONS
Lastly, you can have any shape of a remote through the use of regions. If the region element is included, it consists of one or more <shape> elements, each representing a primitive shape, which are merged together using standard set operations to produce the final complex region.
Here is an example:
<region> <shape type="rectangle" rect="9,25,-11,-1"/> <shape type="roundRect" rect="0,0,-1,26" size="16,25" combine="or"/> </region> |
Each consecutive shape is combined with the current region to produce the ultimate shape for the window. Each shape contains:
- type - The type of shape (see below).
- rect - The bounding rectangle for this shape, in x1,y1,x2,y2 form. Negative numbers are relative to the right or bottom edge of the window, so "0,0,-1,-1" would cover the entire window.
- combine - How to combine this shape with the previous ones. The first shape should have no combine attribute.
The possible combine modes are:
- or - Add this shape to the previous ones (logical or)
- and - Take the overlapping area of this shape and the previous ones (logical and)
- xor - Take the area covered by this shape, or the other shape, but not overlapping areas (logical xor)
- diff - Subtract this shape from the previous ones
The possible shape types are:
- rectangle - A rectangle
- ellipse - An ellipse
- roundRect - A rectangle with rounded edges. Shapes of this type need to have an extra attribute named size with two integer parameters representing the width and height of the curves, for example size="16,20"
FINAL .XML FILE
<?xml version="1.0" encoding="UTF-8"?> <skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0"> <manifest name="My Remote" author="My name" description="A remote" link="http://www.shareaza.com/" email="Me@myemail.com" version="1.0" type="skin" language="en" /> <windowSkins><windowSkin> <image type="image" path="WMPRemote.bmp"/> <target window="CRemoteWnd"/> <anchors> <anchor name="StatusText" rect="69,46,262,20"/> <anchor name="History" rect="70,27,208,13"/> <anchor name="FlowTx" rect="292,27,12,13"/> <anchor name="FlowRx" rect="319,27,12,13"/> <anchor name="MediaSeekTrack" rect="71,67,232,12"/> <anchor name="MediaVolTrack" rect="162,91,64,17"/> <anchor name="ScalerTrack" rect="71,40,206,9"/> <anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/> <anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/> <anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/> <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/> <anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/> <anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/> <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/> <anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/> <anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/> <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/> <anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/> </anchors> <parts> <part name="Background" rect="0,0,341,125"/> <part name="HistoryTx1" rect="6,150,208,13"/> <part name="HistoryRx1" rect="6,131,208,13"/> <part name="FlowTx1" rect="228,131,12,13"/> <part name="FlowRx1" rect="255,131,12,13"/> <part name="MediaSeekTab" rect="159,210,23,11"/> <part name="MediaSeekBar" rect="209,210,92,10"/> <part name="MediaVolTab" rect="140,210,9,17"/> <part name="MediaVolBar" rect="159,221,58,17"/> <part name="ScalerTab" rect="224,224,9,9"/> <part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/> <part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/> <part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/> <part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/> <part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/> <part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/> <part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/> <part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/> <part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/> <part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/> <part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/> <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/> <part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/> <part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/> <part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/> <part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/> <part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/> <part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/> <part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/> <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/> <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/> <part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/> <part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/> <part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/> <part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/> <part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/> <part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/> <part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/> <part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/> <part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/> </parts> <caption fontFace="Small Fonts" fontSize="8" fontWeight="normal" colour="FFB000"/> <region> <shape type="rectangle" rect="1,15,341,83"/> <shape type="roundrectangle" rect="319,0,332,1" combine="or" /> </region> </windowSkin> </windowSkins> |
Good luck! If you have any questions, please post them on the skinning forum. =)
