Skin-FAQ

[ Zurück zum Skinnen von Shareaza ]

Das Erstellen von "Remote Skins"

Die Vielfalt an Einstellungen, die Sie an der Fernsteuerung vornehmen können, ist schier endlos. Sie können das Hintergundbild frei wählen und im Vordergrund alle Medien- und Bandbreiten-Bestandteile platzieren. So können Sie diese dann vollständig überblicken. Die Fernbedienung ist komplett an Ihre Bedürfnisse anpassbar und kann so viele oder so wenige von Shareazas Funktionen beinhalten wie Sie möchten.

In diesem Kapitel erfahren Sie Schritt für Schritt, wie Sie eine Fernsteuerung designen. dabei wird angenommen, dass Sie etwas vom Skinnen für Shareaza verstehen. Deshalb sollten Sie es in Betracht ziehen, dieManifestesowie die Fensterskin-Elemente zu lesen, bevor Sie anfangen. Wie auch immer, wenn Sie sofort loslegen möchten: Dieses Tutorial beinhaltet alles notwendige Wissen. Beachten Sie die fettgeschriebenen roten Passagen, wenn Sie meinen, eine tiefergehende Erklärung wäre hilfreich. Also, los geht's =)

Bevor wir Anker und Teile hinzufügen, sollte Ihre .xml folgendermaßen aussehen:

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

An diesem Punkt empfehle ich, den folgenden Text in Ihre Datei zu übernehmen und die Manifest-Felder entsprechend zu ändern.

Hier eine kurze Beschreibung aller Manifest-Elemente.

  • Name - Der Name Ihrer Fernbedienung
  • Author - Der Name des Designers
  • Description - Eine treffende Beschreibung der Fernbedienung (z.B. Dies ist ein Mini-Bandbreiten-Monitor).
  • Link - Eine Seite für detailliertere Infos über Ihre Fernbedienung oder andere Kollektionen von selbigen.
  • E-mail - Eine Email-Adresse, um Sie bezüglich Informationen oder Bugs zu erreichen.
  • Version - Die Versionsnummer, je höher desto neuer (1,1.1,1.2 etc.).
  • Type - Steht immer auf Skin
  • Language - Falls auf Deutsch, wählen Sie "de".

Als nächstes das Hintergrundbild. Dazu müssen Sie folgendes tun:


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

    

  

  
Anker

  
Nachdem der Hintergrund steht, was fehlt jetzt noch? Genau, wir müssen noch die Funktionen verankern. Diese Anchors (= engl. Anker) geben Shareaza die genaue Position an, wo es die einzelnen Knöpfe platzieren soll. Nochmal, die Angaben sind in x und y, also rechts-links und oben-unten , wobei der Ursprung anhand des Hintergrundbilds bestimmt wird. Hier eine Liste aller platzierbarer Funktionen mit kurzer Beschreibung:

  

    
 
      Anker
      Beschreibung
    

    
 
      StatusText
      Ein Bereich, der den Liedtitel, die vergangene Zeit, die Bandbreite etc. anzeigt
    

    
 
      History
      Display mit aktueller Bandbreite
    

    
 
      FlowTx
      Display mit ausgehender Bandbreite
    

    
 
      FlowRx
      Display mit eingehender Bandbreite
    

    
 
      MediaSeekTrack
      Medien-Suchleiste
    

    
 
      MediaVolTrack
      Lautstärkeregelung für Medien
    

    
 
      ScalerTrack
      Skalierleiste zur Begrenzung der Bandbreite
    

    
 
      MediaStatePlaying
      Platz für das Playing-Banner während des Abspielens
    

    
 
      MediaStatePaused
      Platz für das Paused-Banner während des Pausierens
    

    
 
      MediaStateStopped
      Platz für das Stopped-Banner während des Stoppens
    

    
 
      _ID_TRAY_OPEN
      Stellt Shareaza wieder her, wenn es im Tray ist
    

    
 
      _ID_MONITOR_CLOSE
      Schließt die Fernbedienung
    

    
 
      _ID_NETWORK_SEARCH
      Öffnet einen neuen Such-Reiter
    

    
 
      _ID_TOOLS_DOWNLOAD
      Öffnet das Download-Fenster für Torrents
    

    
 
      _ID_TAB_LIBRARY
      Öffnet den Bibliothek-Reiter
    

    
 
      _ID_MEDIA_PLAY
      der Play-Knopf
    

    
 
      _ID_MEDIA_PAUSE
      der Pause-Knopf
    

    
 
      _ID_MEDIA_STOP
      der Media-Knopf
    

    
 
      _ID_MEDIA_PREVIOUS
      der Zurück-Knopf
    

    
 
      _ID_MEDIA_NEXT
      der Nächste-Knopf
    

    
 
      _ID_MEDIA_MUTE
      der Lautlos-Knopf
    

  

  
Jede Funktion Shareazas kann auf dem Remote verankert werden. Für mehr Auswahl werfen Sie einen Blick in die default-de.xml. Sie finden es im Languages-Ordner in Ihrem Skins-Verzeichnis. Doh nun zum eigentlichen Verankern...

  

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

    

  

  
Bestandteile

  
Als nächstes sollten wir den Buttons ihre Attribute zuweisen (up, hover, down und inaktiv). So macht man das:

  

    
 
      Bestandteile
      Beschreibung
    

    
 
      _ID_MEDIA_STOP.Up
      Stop-Button in seinem StandBy-Zustand (Up)
    

    
 
      _ID_MEDIA_STOP.Hover
      Stop-Button, wenn Sie mit der Maus darauf zeigen (Hover)
    

    
 
      _ID_MEDIA_STOP.Down
      Stop-Button im aktiven Zustand (Down)
    

    
 
      _ID_MEDIA_STOP.Disabled
      Stop-Button in seinem inaktiven Zustand (Media-Player ist ausgeschaltet)
    

  

  
Sie können diese Zustände für alle Bestandteile definieren. Wenn Sie über diese auf Ihrem Remote drüberfahren, wird der Hover-Zustand angezeigt. Wenn Sie den Button betätigen, wird der Down-Zustand erscheinen. Natürlich werden diese Bestandteile nur angezeigt, wenn Sie entsprechende Achors definiert haben. Für einen Stop-Button benötigen Sie folgende Anker und Bestandteile:

  

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

    

  

  
Hier noch ein paar Tips & Tricks:

  
    
    
  • Der Play-Pause-Anker schließt einen inaktiven Zustand der jeweils anderen Aktion aus. Sie werden einen Pause-Button sehen, während Musik läuft. Ansonsten den Play-Button.
    • 
    
  • Sollten Sie den inaktiven Status für Play ausschließen, wird der Button sich wie ein "Datei öffnen"-Button verhalten, sollte der Media Player inaktiv bzw. im Standby sein.
    • 
    
  • Für die History/Flow-Parts können Sie "1" um das Bild von unten zeichnen zu lassen und "2" um das Bild von oben zu zeichnen (um es zB. direkt an die Geschwindigkeitsleiste angrenzen zu lassen).
    • 
  

  
So würde Ihr Bestandteile-Absatz (hoch, runter, inaktiv, schwebend) aussehen.

  

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

    

  

  
Schriftarten

  
Als nächstes widmen wir uns der Textformatierung. Sie bestimmt Schriftart und Stil, in denen Ihr Status-Text-Anker seinen Sinn und Zweck erfüllt, wie die Anzeige des Songtitels, der Uhrzeit, der verwendeten Bandbreite etc.

  
    
    
  • Face - Der Name der Schriftart, z.B. "Tahoma"
    • 
    
  • Size - Die Font-Größe, zum Beispiel "8".
    • 
    
  • Weight - Die Breite, entweder als Konstante oder als Integer-Zahl zwischen 1 und 1000. "normal" und "bold" sind ebenso zulässig
    • 
    
  • Colour - The colour of your StatusText in html form.
    • 
  

  

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

    

  

  
REGIONEN

  
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.

  
Hier ein Beispiel:

  

    
 
      
<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 - Ein Rechteck
    • 
    
  • ellipse - Eine 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"
    • 
  

  
Fertige .xml-Datei

  

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

  

 
[ 
    Zurück zum Skinnen von Shareaza ]





      

    

    



  

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

  



  




Viele Personen tragen zu Shareaza bei. Bitte besuchen Sie unsere"Dank an"-Seite.


Visit Shareaza's Project Page at SourceForge.net



  < Seitenanfang | Kontakt >