Vodnik za preobleke

[ Nazaj na Shareazine preobleke ]

Ustvarjanje oddaljenih preoblek

Kot primerjavo lahko Daljinca označimo kot sestavljanko, kjer najprej nastavimo sliko ozadja in nato dodajamo medije in pasovno širino na to ozadje. Z daljincem lahko upravljate s medijskimi funkcijami ter funkcijami pasovne širine. Je popolnoma prilagodljiv in lahko vljučuje vse ali pa samo nekatere željene funkcije.

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 =)

Preden bomo začeli dodajati sidra in dele,vaše preobleke, si oglejte kako bi morala izgledati vaša .xml datoteka na začetku:

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

Na tem mestu vam priporočamo, da si vsebino skopirate v vašo besedilno datoteko in začnete urejati manifestna polja.

Tu je kratek opis vseh manifestnih elementov.

  • Name - The name of your remote.
  • Author - The name of the remote's creator.
  • Description - Ustrezen opis daljinca (na primer: To je mali krmilnik pasovnih širin)
  • Link - Na spletno stran za dodatne informacije glede vašega daljinca ali drugih oddaljenih kolekcijah.
  • E-mail - E-naslov za kontakt glede dodatnih informacij in hroščev v zvezi z vašim daljincem.
  • Version - Številka, ki prikazuje različico. Novejše različice so oštevilčene naraščajoče (1,1.1,1.2 itd.).
  • Type - Always set to skin.
  • Language - Pri uporabi angleškega jezika se nastavi na "en", pri slovenskem na "sl" itd.

Naslednje si boste nastavili sliko ozadja. Tu so navedeni postopki:


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

    

  

  
SIDRA

  
Sedaj, ko ima vaš daljinec ozadje, boste verjetno želeli nanj postaviti nekaj gumbov, kajne? Z uporabo sider poveste Shareazi, kam naj postavi gumbe v oddaljenem oknu. Gumbi so tako vsidrani v okno z uporabo določil, kot so x, y, širina (width) in višina (height), ki določajo relativno mesto gumbov v ozadju daljinca. Tukaj je naveden seznam z opisi vseh možnih sider:

  

    
 
      Sidra
      Opis
    

    
 
      StatusText
      Področje, ki prikazuje naslov pesmi, pretečen čas, pasovno širino itd.
    

    
 
      History
      Running bandwidth display
    

    
 
      FlowTx
      Outgoing bandwidth display
    

    
 
      FlowRx
      Incoming bandwidth display
    

    
 
      MediaSeekTrack
      Išči medij v sledi
    

    
 
      MediaVolTrack
      Glasnost (Volume track for media)
    

    
 
      ScalerTrack
      Drsnik za določevanje pasovne širine (Scaler track for bandwidth limiting)
    

    
 
      MediaStatePlaying
      Grafični znak za 'predvajanje', ko je medij predvajan
    

    
 
      MediaStatePaused
      Grafični znak za 'premor', ko je predvajanje medija trenutno prekinjeno
    

    
 
      MediaStateStopped
      Grafični znak za 'ustavi', ko je predvajanje medija ustavljeno
    

    
 
      _ID_TRAY_OPEN
      Povrne Shareazo po stanju v sistemski vrstici (system tray)
    

    
 
      _ID_MONITOR_CLOSE
      Closes the remote
    

    
 
      _ID_NETWORK_SEARCH
      Odpre nov zavihek za iskanje
    

    
 
      _ID_TOOLS_DOWNLOAD
      Odpre okno za prenos torrenta
    

    
 
      _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
    

  

  
Na daljinec lahko vstavite katerokoli funkcijo Shareaze. Za iskanje po vseh možnih funkcijah, si odprite datoteko default-en.xml. Najdete jo lahko v mapi s Shareaza preoblekami. Kako izgleda vaše sidro na ozadju? Oglejte si.

  

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

    

  

  
DELI

  
Nastavite gumb tako, da bo izgledal drugačen ob stanju gor (up), dol (down), na miškinem kazalcu (hover) in onemogočeno. Tu lahko ugotovite, kako to storiti:

  

    
 
      Deli
      Opis
    

    
 
      _ID_MEDIA_STOP.Up
      Gumb Ustavi v osnovnem (up) načinu.
    

    
 
      _ID_MEDIA_STOP.Hover
      Gumb Ustavi, ko ga pokrijemo z miškinim kazalcem.
    

    
 
      _ID_MEDIA_STOP.Down
      Gumb Ustavi, ko je v aktiviranem (down) načinu.
    

    
 
      _ID_MEDIA_STOP.Disabled
      Gumb Ustavi v onemogočenem (disabled) načinu (ko je medijski predvajalnik ugasnjen).
    

  

  
Za vse dele lahko določite te načine.Ko gumb pokrijete z miškinim kazalcem, se prikaže način 'hover'. Ko pritisnete na gumb (z miško seveda), se prikaže 'down' način. Seveda pride do prikaza druge grafične slike ob teh dogodkih le, če imate za to nastavljeno ustrezno sidro. Če želite gumb Ustavi, potrebujete naslednj esidro in dele:

  

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

    

  

  
Nekaj zanimivih idej za uporabo:

  
    
    
  • 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 - Debelina pisave, navedena bodisi kot konstanta ali številka (angl. integer) z vrednostjo med 1 in 1000. Dovoljene so tudi vrednosti "normal", za navadni debelino pisave ter "bold", za krepko pisavo.
    • 
    
  • 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>
</skin>

    

  

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

  

 
[ 
    Nazaj na Shareazine preobleke ]





      

    

    



  

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

  



  




Veliko ljudi prispeva svoj trud in čas v Shareazo, zato vas vabimo, da obiščete stran z zaslugami.


Visit Shareaza's Project Page at SourceForge.net



  < Na vrh strani | Kontakt >