Apvalkalų ruošimo vadovas

[ Atgal į „Shareaza“ apvalkalų ruošimo vadovą ]

Pultelio apvalkalų ruošimas

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 - Jūsų pultelio pavadinimas.
  • Author - Pultelio autoriaus asmenvardis.
  • 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>

    

  

  
INKARAI

  
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:

  

    
 
      Inkarai
      Aprašas
    

    
 
      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>

    

  

  
DALYS

  
Next, you'll want your buttons to have up, hover, down, and disabled states. Here's how you add button states:

  

    
 
      Dalys
      Aprašas
    

    
 
      _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>

    

  

  
ŠRIFTAI

  
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"/>

    

  

  
REGIONAI

  
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.

  
Štai pavyzdys:

  

    
 
      
<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 - Stačiakampis
    • 
    
  • ellipse - Elipsė
    • 
    
  • 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>
</skin>

    

  

  
Good luck! If you have any questions, please post them on the skinning forum. =)
  

  

 
[ 
    Atgal į „Shareaza“ apvalkalų ruošimo vadovą ]





      

    

    



  

    
    
      
  • en
    • 
      
  • es
    • 
      
  • fr
    • 
      
  • de
    • 
      
  • hr
    • 
      
  • it
    • 
      
  • lt
    • 
      
  • nl
    • 
      
  • nb
    • 
      
  • pl
    • 
      
  • pt
    • 
      
  • sl
    • 
      
  • tr
    • 
      
  • el
    • 
      
  • he
    • 
      
  • ja
    • 
      
  • zh-tw
    • 
      
  • en
    • 
      
  • ca
    • 
      
  • fa
    • 
      
  • ru
    • 
    

  



  




Daugelis žmonių aukoja savo laiką ir pastangas Shareaza'i. Peržiūrėkite mūsų padėkos puslapį.


Visit Shareaza's Project Page at SourceForge.net



  < Į puslapio viršų | Susisiekite su mumis >