ShareazaRemoteSkinning

From Shareaza Wiki
Revision as of 21:37, 8 May 2014 by Ji d (talk | contribs) (Created page with "{{Language}} {{Updated|2014.05.08| 2.7.x.0}} =Creating Remote Skins= Starting with an analogy, the remote is like a ''Mr. Potato head''. You set a background image (the face...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
  Languages:

[[::ShareazaRemoteSkinning|English]] • [[::ShareazaRemoteSkinning/de|Deutsch]] • [[::ShareazaRemoteSkinning/es|Español]] • [[::ShareazaRemoteSkinning/fr|Français]] • [[::ShareazaRemoteSkinning/he|עברית]] • [[::ShareazaRemoteSkinning/it|Italiano]] • [[::ShareazaRemoteSkinning/nl|Nederlands]] • [[::ShareazaRemoteSkinning/pl|Polski]] • [[::ShareazaRemoteSkinning/pt|Português]] • [[::ShareazaRemoteSkinning/ru|Русский]] • [[::ShareazaRemoteSkinning/zh-hant|‪中文(繁體)]]

e
  Updated:

This page has been updated on 2014.05.08 for the release of Shareaza v 2.7.x.0.

e

Creating Remote Skins

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. You can always go back on the various elements of a theme by going to the main page of skinning of Shareaza.. 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://shareaza.sourceforge.net/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://shareaza.sourceforge.net/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>
 <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.

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://shareaza.sourceforge.net/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>
  <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>

<region> <shape type="rectangle" rect="1,15,341,83"/> <shape type="roundrectangle" rect="319,0,332,1" combine="or" /> </region> </windowSkin> </windowSkins> </skin> Good luck! If you have any questions, please post them on the http://shareaza.sourceforge.net/phpbb/

Navigation:     ShareazaWiki > Skinning tutorial > ShareazaRemoteSkinning

Retrieved from "https://shareaza.sourceforge.net/w/index.php?title=ShareazaRemoteSkinning&oldid=10765"