Przewodnik skórkowania

[ Powrót do skórkowania Shareazy ]

Tworzenie skórek pilota.

Pilot jest zbudowany analogicznie do ludzkiej głowy. Ustawiasz obrazek tła (twarz) i zaczepiasz na nim wszystkie części multimediów i pasma (oczy, nos, usta itd.). Pilotem możesz kontrolować funkcje pasma i multimediów. Jest całkowicie konfigurowywalny i możesz dołączyć tak mało lub tak dużo funkcji Shareazy jak chcesz.

W tej sekcji będziesz przeprowadzony krok po kroku przez budowanie pilota. Ta sekcja zakłada, że masz już wiedzę o skórkowaniu Shareazy. Dlatego dobrym pomysłem jest przeczytanie o manifestach jak i elemencie skórek okien zanim zacznie się budować skórkę dla pilota. Chociaż jeśli lubisz zagłębiać się w temat, ten przewodnik zademonstruje ci elementy których potrzebujesz. Patrz na czerwony pogrubiony tekst zawsze gdy potrzebujesz trochę więcej wyjaśnień. No to zaczynamy =)

Zanim dodamy uchwyty i części twój plik .xml powinien wyglądać tak:

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

W tym momencie zalecam skopiowanie tego do twojego pliku tekstowego i edycję pól 'manifestu'.

Tutaj jest zwięzły opis wszystkich elementów manifestu.

  • Name - Nazwa twojego pilota.
  • Author - Imię twórcy pilota.
  • Description - Stosowny opis pilota (np: To jest minikontroler pasma).
  • Link - Do strony domowej po więcej informacji o twoim pilocie lub innych kolekcjach pilotów.
  • E-mail - Adres email do skontaktowania się po więcej informacji lub raportowania błędów dotyczących pilota.
  • Version - Numer określający wersję. Nowe wersje powinny być numerowane coraz wyżej (1,1.1,1.2 itd.).
  • Type - Zawsze ustaw na skórkę.
  • Language - Jeśli po polsku ustaw na 'pl'.

Następnie ustawimy nasz obrazek tła. Oto lista kroków:

  • Ustaw ścieżkę obrazka do miejsca gdzie są grafiki .bmp twojego pilota.
  • Ustaw docelowe okno na 'CRemoteWnd' (okno pilota).
  • Ustaw region (<part name='Background'$gt;) który zajmuje tło twojego pilota (to jest in x, y, szerokość, wysokość).

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

    

  

  
UCHWYTY

  
Teraz twój pilot ma tło i chcesz nałożyć na niego parę przycisków? Uchyty mówią Shareazie gdzie ma odmalować przyciski. Są one zawieszone na oknie w x,y,szerokość,wysokość względnie do tła pilota. Tutaj jest lista i opis co możesz zawiesić:

  

    
 
      Uchwyty
      Objaśnienie
    

    
 
      StatusText
      Obszar wyświetlający tytuł piosenki, upływający czas, pasmo itd.
    

    
 
      History
      Widok wykorzystania pasma
    

    
 
      FlowTx
      Widok pasma wychodzącego
    

    
 
      FlowRx
      Widok pasma przychodzącego
    

    
 
      MediaSeekTrack
      Suwak szukania dla multimediów
    

    
 
      MediaVolTrack
      Suwak głośności dla multimediów
    

    
 
      ScalerTrack
      Suwak skalowania dla limitowania pasma
    

    
 
      MediaStatePlaying
      Obszar na graficzny znak 'odtwarzaj' kiedy odgrywane są multimedia
    

    
 
      MediaStatePaused
      Obszar na graficzny znak 'pauza' kiedy odgrywane są multimedia
    

    
 
      MediaStateStopped
      Obszar na graficzny znak 'zatrzymaj' kiedy odgrywane są multimedia
    

    
 
      _ID_TRAY_OPEN
      Pokazuje Shareazę na pierwszym planie
    

    
 
      _ID_MONITOR_CLOSE
      Zamyka pilota
    

    
 
      _ID_NETWORK_SEARCH
      Otiera nową zakładkę szukania
    

    
 
      _ID_TOOLS_DOWNLOAD
      Otwiera okno pobierania torrenta
    

    
 
      _ID_TAB_LIBRARY
      Otwiera zakładkę biblioteki
    

    
 
      _ID_MEDIA_PLAY
      Przycisk 'odtwarzaj'
    

    
 
      _ID_MEDIA_PAUSE
      Przycisk 'pauza'
    

    
 
      _ID_MEDIA_STOP
      Przycisk 'multimedia'
    

    
 
      _ID_MEDIA_PREVIOUS
      Przycisk 'poprzedni'
    

    
 
      _ID_MEDIA_NEXT
      Przycisk 'następny'
    

    
 
      _ID_MEDIA_MUTE
      Przycisk 'wycisz'
    

  

  
Każda funkcja Shareaza może być użyta w pilocie. Aby znaleźć więcej funkcji wystarczy otworzyć plik default-en.xml. Możesz go znaleźć w folderze języków który znajduje się w twoim folderze skórek. Jak wygląda sekscja uchwytów? Zobacz teraz.

  

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

    

  

  
CZĘŚCI

  
Następnie, chcesz aby twoje przyciski miały kilka stanów: wyłączony, wciśnięty, najechany i normalny. Tutaj pokażemy jak dodać stany przycisków:

  

    
 
      Części
      Objaśnienie
    

    
 
      _ID_MEDIA_STOP.Up
      Przycisk 'stop' w stanie odpoczynku (normalny).
    

    
 
      _ID_MEDIA_STOP.Hover
      Przycisk 'stop' najechany przez kursor.
    

    
 
      _ID_MEDIA_STOP.Down
      Przycisk 'stop' wciśnięty.
    

    
 
      _ID_MEDIA_STOP.Disabled
      Przycisk 'stop' wyłączony (odtwarzacz multimedialny wyłączony).
    

  

  
Każda z twoich części może mieć takie stany. Kiedy najeżdżach na nie na twoim pilocie, malowany jest stan 'najechany'. Kiedy przyciskasz przycisk, malowany jest stan 'wciśnięty'. Oczywiście, te części są malowane jedynie wtedy kiedy jest odpowiedni uchwyt. Jeśli chcesz przycisk 'stop. potrzebujesz następujących części i uchwytu. Popatrz.

  

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

    

  

  
Tutaj jest parę interesujących sztuczek:

  
    
    
  • 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 - Nazwa czcionki, np: "Tahoma".
    • 
    
  • Size - The font size, for example "8".
    • 
    
  • Weight - Waga czcionki, zarówno stała jak i wartość całkowita pomiędzy 1 a 1000. 'normal' i 'bold' także są akceptowalne.
    • 
    
  • Colour - The colour of your StatusText in html form.
    • 
  

  

    
 
      
<caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/>

    

  

  
STREFY

  
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.

  
Tutaj jest przykład:

  

    
 
      
<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 - Typ kształtu (zobacz niżej).
    • 
    
  • 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 - Prostokąt
    • 
    
  • ellipse - Elipsa
    • 
    
  • 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"
    • 
  

  
KOŃCOWY PLIK .XML

  

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

  

 
[ 
    Powrót do skórkowania Shareazy ]





      

    

    



  

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

  



  




Wielu ludzi poświęca swój czas i wysiłek dla Shareazy. Proszę zobaczyć naszą stronę z podziękowaniami.


Visit Shareaza's Project Page at SourceForge.net



  < Góra strony | Skontaktuj się z nami >