ShareazaRemoteSkinning/fr: Difference between revisions

From Shareaza Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Languages|ShareazaRemoteSkinning}}
{{Languages|ShareazaRemoteSkinning}}
== Création d'une Skin pour la télécommande ==
{{Updated|08 mai 2014| 2.7.x.0}}


Commençons par une analogie. La télécommande est comme une tête de monsieur Patate. Vous avez placé une image de fond (le visage), et avec la section "'''anchor'''", ancrer tous les médias et la partie bande passante (les yeux, le nez, la bouche...) dessus. Avec la télécommande, vous pouvez contrôler les médias et les fonctions de bande passante. Elle est entièrement personnalisable, et peut inclure autant de fonction de shareaza que vous le souhaitez.
= Création d'un thème pour la télécommande =
Dans cette section, vous serez conduit pas à pas dans la construction de votre télécommande. Cette section ''suppose'' que vous avez une connaissance de base du skinning de Shareaza.
Pensez à lire la rubrique du [[ManualOfSkinning/fr|manifeste]] tout comme les [[WindowsSkin/fr|éléments windowskin]] avant de ''construire'' votre télécommande. Cela dit, si vous vous sentez près à faire le "grand" plongeon, ce tutoriel indique les éléments dont vous avez besoin. Relisez toutes fois le [[ManualOfSkinning/fr|guide]] si vous avez besoin d'un peu plus d'explications complémentaires. C'est parti !


Avant d'ajouter [[WindowSkin/fr|des points d'attache]] et des [[WindowSkins/fr|pièces]], le fichier XML devrait ressembler à cela :
== Préambule ==
Commençons par une analogie...
Imaginons que la télécommande  de Shareaza est en fait une tête de "''Monsieur Patate''".


<source lang="c">
Placez une image de fond pour le visage puis avec des ancres (comme indiqué dans la section [[Skinning.windowSkins/fr#&lt;anchors>|&lt;anchors>]]) placez tous les médias ainsi que la partie bande passante comme vous <em>placeriez les yeux, le nez et la bouche de Monsieur Patate</em>...
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
A partir de la télécommande, on peut contrôler la lecture des médias (musique; vidéo) et les fonctions de bande passante. La télécommande est entièrement personnalisable et peut inclure autant de fonction de shareaza que l'on souhaite.
&lt;skin xmlns="http://www.shareaza .com/schemas/Skin.xsd" version="1.0"&gt;
&lt;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"
/&gt;
&lt;windowSkins&gt;
&lt;windowSkin&gt;
&lt;/windowSkin&gt;
&lt;/windowSkins&gt;
&lt;/skin&gt;</source>


A ce point, il est recommandé de copier cela dans le fichier texte, et d'éditer le manifeste.
Ce tutoriel vous accompagnera pas-à-pas dans la construction d'un thème pour la télécommande. Mais pour cela, il est préférable d'avoir certaine connaissances de base dans construction de thème. Avant de commencer, prenez le temps de lire les rubriques [[Skinning_tutorial/fr#Le "Manifest"|'''manifest''']], l'élément [[Skinning.windowSkins/fr|<windowSkins>]].
Vous pourrez à tout moment revenir sur les différents [[Skinning_tutorial/fr#Les éléments d'un thème|<ins>éléments</ins>]] constituant un thème en vous rendant sur la [[Skinning_tutorial/fr|page principale]] de la thématisation de Shareaza.


Ici, un rappel du '''[[ManualOfSkinning/fr|manifeste]]''' :
Cela dit, si vous vous sentez près à faire le "grand" plongeon, ce tutoriel indique les éléments dont vous avez besoin. C'est parti !
* '''name''' = Le nom de la skin.
 
* '''author''' = La personne qui a créer la skin
==Manifest==
* '''description''' = Une longue description de la skin.
Avant d'ajouter [[Skinning.windowSkins/fr#&lt;anchors>|des points d'attache]] et des [[Skinning.windowSkins/fr#<parts>|pièces]], votre fichier XML devrait ressembler à celui-ci :
* '''link''' = Optionnel, votre site internet.
 
* '''email''' = Optionnel, votre adresse mail, afin de vous contacter pour plus d'informations.
  <?xml version="1.0" encoding="UTF-8"?>
* '''version''' = Le nombre de révision de la skin.
  <skin xmlns="http://shareaza.sourceforge.net/schemas/Skin.xsd" version="1.0">
* '''type''' = La plupart des skins devraient avoir ce tag de rempli. Les exceptions sont les skins de traduction.
  <manifest name="Ma télécommande"
* '''language''' = Inclure seulement si le type (ci-dessus) est "language". Il indique le code de langage que la traduction fournit (exemple "en" pour english), ou pour spécifier le langage utilisé par la télécommande.
  author="Mon pseudonyme"
  description="télécommande personnalisée"
  link="http://shareaza.sourceforge.net/"
  email="Monadresse@email.com"
  version="1.0"
  type="skin"
  language="fr"
  />
  <windowSkin>
  <windowSkin>
 
  </windowSkin>
  </windowSkins>
  </skin>
 
Ici, il est recommandé de copier cela dans un fichier texte et de modifier le manifeste.
 
Un rappel de ce qu'est un '''[[Skinning_tutorial/fr#Le "Manifest"|'''manifest''']]''' :
* '''name''' = Le nom du thème.
* '''author''' = Nom ou pseudonyme de l'auteur du thème.
* '''description''' = Une (longue) description du thème.
* '''link''' = Votre site internet (Optionnel).
* '''email''' = Votre adresse email, afin de vous contacter pour plus d'informations (Optionnel).
* '''version''' = La version de révision du thème.
* '''type''' = Indiquer "skin" sur ce tag, à moins de réaliser un thème linguistique (traduction) ou il faut indiquer "language".
* '''language''' = Inclure ce tag seulement si le type (ci-dessus) est "language". Il indique le code de langage que la traduction fournit (exemple "fr" pour français), ou pour spécifier le langage utilisé par la télécommande.
 
 
==Intégration==


Ensuite, vient le fond d'image, voici les étapes :
Ensuite, vient le fond d'image, voici les étapes :
* Entrer le chemin où se trouve l'image *.bmp (bitmaps).
# Entrer le chemin où se trouve l'image *.bmp (bitmaps).
* Entrer le chemin de la fenêtre concernée par l'image ("Cremote Wnd")
# Entrer le chemin de la fenêtre concernée par l'image = "CremoteWnd" (la télécommande).
* Entrer la partie (&lt;part name="Background") occupée par l'image de fond (cela en '''[[WindowSkins/fr|x, y, taille, hauteur]]'''.)
# Etablir l'image de fond ("Background"), sous la forme [[Skinning.windowSkins/fr#&lt;anchors>|x, y, taille, hauteur]]'''.


<source lang="c">
  <?xml version="1.0" encoding="UTF-8"?>
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  <skin xmlns="http://shareaza.sourceforge.net/schemas/Skin.xsd" version="1.0">
&lt;skin xmlns="http://www.shareaza .com/schemas/Skin.xsd" version="1.0"&gt;
  <manifest name="Ma télécommande"
&lt;manifest name="My Remote"
  author="Mon pseudonyme"
author="My name"
  description="télécommande personnalisée"
description="A remote"
  link="http://shareaza.sourceforge.net/"
link=""
  email="Monadresse@email.com"
email="Me@my_email.com"
  version="1.0"
version="1.0"
  type="skin"
type="skin"
  language="fr"
language="en"
  />
/&gt;
  <windowSkin>
&lt;windowSkins&gt;
  <windowSkin>
&lt;windowSkin&gt;
 
&lt;image type="image" path="MyRemote.bmp"/&gt;
    <image type="image" path="MyRemote.bmp"/>
&lt;target window="CRemoteWnd"/&gt;
    <target window="CRemoteWnd"/>
&lt;parts&gt;
    <parts>
&lt;part name="Background" rect="0,0,341,125"/&gt;
    <part name="Background" rect="0,0,341,125"/>
&lt;/parts&gt;
    </parts>
  &lt;/windowSkin&gt;
   
&lt;/windowSkins&gt;
  </windowSkin>
&lt;/skin&gt;</source>
  </windowSkins>
  </skin>


===ANCHORS (Points d'ataches).===
===Anchors (Ancres ou point d'attache)===


Maintenant que la télécommande à un fond, vous voulez peut-être ancrer quelques boutons sur la droite ? Les points d'attaches indiquent où peindre les parties de la fenêtre skinnée. Encore faut-il que ces parties soient ancrées sur la fenêtre dans l'espace [[WindowSkins/fr|x, y, largeur, taille]] relatif au fond de la télécommande.
Maintenant que la télécommande à un fond, vous voulez peut-être ancrer quelques boutons ? Sur la droite ?  
Voici une liste des objets à [[WindowSkins/fr|ancrer]] :
Les ancres indiquent où doivent être affichés les différents parties du thèmes, tels que les boutons.  
C'est l'élément [[Skinning.windowSkins/fr#&lt;anchors>|anchor]] qui assure cette fonction en indiquant la position relative au fond (<ins>x, y, taille, hauteur</ins>) des objets à incorporer dans le thème.


::[[Image:tab1.png]]::
Ci-dessous une liste des objets à [[Skinning.windowSkins/fr#&lt;anchors>|ancrer]] :


N'importe quelle fonction de shareaza peut être ancrée sur la télécommande. Pour trouver plus de fonction il suffit d'ouvrir le fichier "default-en.xml". Il se trouve dans le dossier (par défaut) C:/Program files/Shareaza/Skins/Languages.  
{| border="0" cellspacing="0" cellpadding="5" style="background-color:#FFFFC0"
|-
|'''<ins>Ancres</ins>'''
|'''<ins>Description</ins>'''
|-
|StatusText
|L'endroit où est affiché le titre du fichier média, le temps écoulé, bande-passante, etc.
|-
|History
|L'endroit où sont montrés les niveaux de bande-passante
|-
|FlowTx
|Le taux d'envois
|-
|FlowRx
|Le taux de téléchargement
|-
|MediaSeekTrack
|Glissière "seek" pour le média
|-
|MediaVolTrack
|Glissière de volume
|-
|ScalerTrack
|Glissière de limitation de la bande-passante
|-
|MediaStatePlaying
|Pictogramme "Lecture" du média.
|-
|MediaStatePaused
|Pictogramme "pause" du média.
|-
|MediaStateStopped
|Pictogramme "stop" du média.
|-
|_ID_TRAY_OPEN
|Ouvre Shareaza quand il est minimisé dans la barre de tâches
|-
|_ID_MONITOR_CLOSE
|Ferme la télécommande.
|-
|_ID_NETWORK_SEARCH
|Ouvre un onglet de recherche.
|-
|_ID_TOOLS_DOWNLOAD
|Ouvre la fenêtre de téléchargement.
|-
|_ID_TAB_LIBRARY
|Ouvre la bibliothèque
|-
|_ID_MEDIA_PLAY
|Bouton lecture.
|-
|_ID_MEDIA_PAUSE
|Bouton pause
|-
|_ID_MEDIA_STOP
|Bouton stop
|-
|_ID_MEDIA_PREVIOUS
|Bouton précédent
|-
|_ID_MEDIA_NEXT
|Bouton suivant
|-
|_ID_MEDIA_MUTE
|Bouton muet
|}


A quoi ressemble votre section "Anchors" ? Jetez-y un coup d'oeil :
<source lang="c">
&lt;anchors&gt;
&lt;anchor name="StatusText" rect="69,46,262,20"/&gt;
&lt;anchor name="History" rect="70,27,208,13"/&gt;
&lt;anchor name="FlowTx" rect="292,27,12,13"/&gt;
&lt;anchor name="FlowRx" rect="319,27,12,13"/&gt;
&lt;anchor name="MediaSeekTrack" rect="71,67,232,12"/&gt;
&lt;anchor name="MediaVolTrack" rect="162,91,64,17"/&gt;
&lt;anchor name="ScalerTrack" rect="71,40,206,9"/&gt;
&lt;anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/&gt;
&lt;anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/&gt;
&lt;anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/&gt;
&lt;anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/&gt;
&lt;anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/&gt;
&lt;anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/&gt;
&lt;anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/&gt;
&lt;anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/&gt;
&lt;anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/&gt;
&lt;anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/&gt;
&lt;anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/&gt;
&lt;/anchors&gt;</source>


===PARTS (Pièces).===
N'importe quelle fonction de shareaza peut être ancrée sur la télécommande.
Pour trouver plus de fonction il suffit d'ouvrir le fichier "[[http://sourceforge.net/p/shareaza/code/HEAD/tree/trunk/Languages/default-en.xml default-en.xml]]". Il se trouve dans le dossier (par défaut) C:/Program files/Shareaza/Skins/Languages.
 
A quoi ressemble la section "Anchors" ? Jetez-y un coup d'oeil :
<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 (Parties ou pièces)===


Ensuite, Vous souhaitez que les boutons puissent être : haut, bas, glissants, et qu'ils soient désactivable.
Ensuite, Vous souhaitez que les boutons puissent être : haut, bas, glissants, et qu'ils soient désactivable.
Voici comment ajouter des états aux boutons :
Voici comment ajouter des états aux boutons :
{| border="0" cellspacing="0" cellpadding="5" style="background-color:#FFFFC0"
|-
|'''<ins>Parts</ins>'''
|'''<ins>Description</ins>'''
|-
|_ID_MEDIA_STOP.'''<ins>Up</ins>'''
|Le bouton "Stop" en mode "haut" (non-cliqué)
|-
|_ID_MEDIA_STOP.'''<ins>Hover</ins>'''
|Le bouton "Stop" en mode "survole" (quand le curseur est au-dessus).
|-
|_ID_MEDIA_STOP.'''<ins>Down</ins>'''
|Le bouton "Stop" en mode "appuyé".
|-
|_ID_MEDIA_STOP.'''<ins>Disabled</ins>'''
|Le bouton "Stop" en mode "désactivé".
|}
Toutes les parties peuvent avoir ces états, lorsque la souris survole le bouton l'effet "hover" est affiché. Quand le bouton est cliqué c'est l'effet "down" qui s'affiche, etc...
Bien sûr, ces pièces sont habillées seulement si une ancre l'accompagne. les parties et ancrages suivant sont requis :
<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>
====Quelques astuces : ====
* Mettre les ancres "lecture" et "pause" sur le même secteur, en n'ajoutant pas l'état désactivé, donne un bouton qui va afficher la fonction "pause" quand la lecture est en cours et un bouton "lecture" quand le lecteur est en pause ou arrêtée.
* Si l'état "désactivé" est exclus pour "lecture", le bouton "Lecture" va agir comme un bouton "Ouvrir fichier..." quand le lecteur média est fermé ou sans fichiers dans la liste de lecture.
* Pour les parties "History" ou "Flow", utilisez "1" pour avoir une image affichée dans un état "bas" (down) et "2" pour avoir une image affichée dans un état "haut" (up). (Par exemple, bord maximal de la barre de bande passante.)
Voilà à quoi votre section [[Skinning.windowSkins/fr#<parts>|parts]] (états des boutons "up", "down", "disabled", "hover") peut ressembler. :
  <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 ===
Ensuite, il faut définir le [[Skinning.fonts/fr|texte de légende]]. Il définit la police de caractères et le style qui apparaît sur l'ancrage "'''StatusText'''". Il sera utilisé pour les titres, la durée d'une musique, la bande passante, etc...
* '''face''' - Nom de la police de caractère, par exemple "'''Tahoma'''".
* '''size''' - Hauteur de la police, par exemple "'''8'''"
* '''weight''' - Épaisseur de la police de caractère, un nombre entre 1 et 1000, ou "'''normal'''" ou "'''bold'''" (gras).
* '''Colour''' - La couleur StatusText sous forme HTML.
<caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/>


::[[Image:tab2.png]]::
=== Regions ===


Toutes les pieces peuvent atteindre ces états. Quand la souris passe au dessus, l'état "glissant" ("hover") est "peint". Quand le bouton est pressé, l'état vers le bas est "peint". Bien sûr, ces pièces sont seulement peintent que si un point d'attache l'accompagne. Si l'arrêt est souhaité, par contre, les pièces et ancrages suivant sont requis :
Pour terminer, la télécommande peut avoir la forme que vous voulez, il suffit d'utiliser l'élément [[Skinning.windowSkins/fr#<region>|région]]. L'élément région se compose d'un ou plusieurs éléments '''<shape>''' (forme). Chacun de ces éléments représentant une forme primitive, qui peuvent être combinés ensemble en effectuant des opérations sur les ensembles pour construire une forme finale complexe.


<source lang="c">  
Voici un exemple :
&lt;anchors&gt;
<region>
&lt;anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/&gt;
    <shape type="rectangle" rect="9,25,-11,-1"/>
&lt;/anchors&gt;
    <shape type="roundRect" rect="0,0,-1,26" size="16,25" combine="or"/>
&lt;parts&gt;
</region>
? &lt;part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/&gt;
? &lt;part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/&gt;
&lt;/parts&gt; </source>


Certaines ''incohérences'' intéressantes :
Chaque forme consécutive est combiné afin former la forme finale.  
* Les points d'attaches "Play"et "Pause", sur une même zone, excluent un état "désactivé". il y aura un bouton "Pause" lorsqu'un média sera joué, et un bouton "Play", quand le média sera en pause ou en arrêt.
* Exclue un état "désactivé" pour "Play"."Play" agira en tant que "Ouvrir" un fichier média, quand le Média Player est fermé ou vide.
* Pour les parties History/Flow , utilisez "1" pour afficher l'image peinte "bas" et "2" pour afficher l'image "dessus" (ex : bord maximal de la barre de bande passante.)


Voilà à quoi ce que la section "[[WindowSkins/fr|Parts]]" doit ressembler :
====Chaque forme contient :====
{{box|<source lang="c">
&lt;parts&gt;
&lt;part name="Background" rect="0,0,341,125"/&gt;
&lt;part name="HistoryTx1" rect="6,150,208,13"/&gt;
&lt;part name="HistoryRx1" rect="6,131,208,13"/&gt;
&lt;part name="FlowTx1" rect="228,131,12,13"/&gt;
&lt;part name="FlowRx1" rect="255,131,12,13"/&gt;
&lt;part name="MediaSeekTab" rect="159,210,23,11"/&gt;
&lt;part name="MediaSeekBar" rect="209,210,92,10"/&gt;
&lt;part name="MediaVolTab" rect="140,210,9,17"/&gt;
&lt;part name="MediaVolBar" rect="159,221,58,17"/&gt;
&lt;part name="ScalerTab" rect="224,224,9,9"/&gt;
&lt;part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/&gt;
&lt;part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/&gt;
&lt;part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/&gt;
&lt;part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/&gt;
&lt;part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/&gt;
&lt;part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/&gt;
&lt;part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/&gt;
&lt;part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/&gt;
&lt;part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/&gt;
&lt;part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/&gt;
&lt;part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/&gt;
&lt;part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/&gt;
&lt;part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/&gt;
&lt;part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/&gt;
&lt;part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/&gt;
&lt;part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/&gt;
&lt;part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/&gt;
&lt;part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/&gt;
&lt;part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/&gt;
&lt;part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/&gt;
&lt;part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/&gt;
&lt;part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/&gt;
&lt;part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/&gt;
&lt;part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/&gt;
&lt;part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/&gt;
&lt;part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/&gt;
&lt;/parts&gt;</source>}}


=== FONTS ===
{| border="0" cellspacing="0" cellpadding="5"
|- style="background-color:#FFFFC0"
|'''forme'''
|'''Description'''
|-
|type
|Le type de forme (expliqué ci-dessous)
|-
|rect
|Le rectangle qui forme la bordure de cette forme, dans la forme x1, y1, x2, y2. Les nombres négatifs sont en relation avec le bord droit ou le bas de la fenêtre, donc "0,0,-1,-1" va couvrir la fenêtre entière.
|-
|combine
|Comment combiner cette forme avec la précédente. La première forme ne doit avoir d'attribut "combine".
|}


Ensuite la '''[[FontSkins/fr|légende de texte]]''' devra être placé. Elle place la fonte et le modèle qui apparaît dans le point d'ancrage "StatusText". Elle sera utilisée pour le titre du média, le temps la bande passante, etc.
?* '''Face''' - Le nom de la fonte, exemple "Tahoma".
??* '''Size''' - La taille de la fonte, exemple "8".
??* '''Weight''' - Le poids de la fonte, comme constante ou valeur de nombre entier entre 1 et 1000. "Normale" et "Gras" sont également acceptés.
??* '''Colour'''- La couleur de StatusText sous forme HTML.
<source lang="c">
&lt;caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/&gt;
</source>


=== REGIONS ===
====Les méthodes de composition sont :====


Pour finir, il peut y avoir n'importe quelle forme de télécommande en utilisant les '''[[WindowSkins/fr|régions]]'''. Si l'élément région est inclus, il se compose d'un ou de plusieur éléments '''&lt;shape&gt;''', chacun représentant une forme primitive, qui sont combinés ensemble en utilisant des règles de normes pour produire la région complexe finale.
{| border="0" cellspacing="0" cellpadding="5"
Un exemple ici :
|- style="background-color:#FFFFC0"
<source lang="c">
|'''Méthode'''
&lt;region&gt;
|'''Description'''
&lt;shape type="rectangle" rect="9,25,-11,-1"/&gt;
|-
&lt;shape type="roundRect" rect="0,0,-1,26" size="16,25" combine="or"/&gt;
|or
&lt;/region&gt;</source>
|Ajouter cette forme aux précédents ("OR")
|-
|and
|Prendre la zone de chevauchement de cette forme et les précédents ("AND")
|-
|xor
|Prendre la zone couverte par cette forme ou l'autre, mais pas les zones de chevauchement("XOR")
|-
|diff
|Soustraire cette forme des précédentes
|}


Chaque forme consécutive est combinée avec la région actuelle pour produire la forme finale pour la fenêtre. Chaque forme contient :
====Les types de formes possibles sont: :====
* '''type''' - Le type de forme (voir ci-dessous).
* '''rect''' - Le rectangle de limite pour cette forme, en x1, y1, x2, y2 forme. Les nombres négatifs sont relatifs à la droite ou au bord inférieur de la fenêtre, ainsi "0.0.-1.-1" couvrirait la fenêtre entière.
*'''combine''' - comment combiner cette forme avec la précédente. La première forme ne devrait avoir aucun attribut de combinaison.


Les modes de combinaison possibles sont :
{| border="0" cellspacing="0" cellpadding="5"
* '''or''' - Ajoutez cette forme à la précédente (logiquement or)
|- style="background-color:#FFFFC0"
* '''and''' - Prendre la zone superposante de cette forme et la précédente (logiquement and)
|'''Type'''
* '''xor''' - Prendre la zone couverte par cette forme, ou une autre forme, mais les zones ne se superposant pas (logiquement xor)
|'''Description'''
* '''diff''' - Soustraire cette forme de la précédente
|-
|rectangle
|Un rectangle
|-
|ellipse
|Une ellipse
|-
|roundRect
|Un rectangle aux coins arrondis. Les formes de ce type doivent avoir un attribut de plus : '''size''' avec deux paramètres qui représentent la longueur et la hauteur des courbes, par exemple size="16,20"
|}


Les types de forme possibles sont :  
Il ne reste plus qu'à tester le fichier :  
* '''rectangle''' - Un rectangle 
* '''ellipse''' - Une ellipse 
* '''roundRect''' - Un rectangle avec les bords arrondis. Un rectangle avec les bords arrondis. Les formes de ce type, ont besoin d'avoir un attribut supplémentaire nommé "size", avec deux paramètres intégrés, représentant la largeur et la taille des courbes par exemple size="16,20"


=== Le Fichier Final.XML ===
  <?xml version="1.0" encoding="UTF-8"?>
  <skin xmlns="http://shareaza.sourceforge.net/schemas/Skin.xsd" version="1.0">
  <manifest name="Ma télécommande"
  author="Mon pseudonyme"
  description="télécommande personnalisée"
  link="http://shareaza.sourceforge.net/"
  email="Monadresse@email.com"
  version="1.0"
  type="skin"
  language="fr"
  />
  <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>


<source lang="c">
'''<ins>Bonne chance</ins>''' ! Si vous avez des questions, ou des suggestions voir des corrections à apporter, n'hésitez pas à participer aux discussions sur le forum : [http://shareaza.sourceforge.net/phpbb/ http://shareaza.sourceforge.net/phpbb/]
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;skin xmlns="http://www.shareaza .com/schemas/Skin.xsd" version="1.0"&gt;
&lt;manifest name="My Remote"
author="My name"
description="A remote"
link=" "
email="Me@myemail.com"
version="1.0"
type="skin"
language="en"
/&gt;
&lt;windowSkins&gt;
&lt;windowSkin&gt;
&lt;image type="image" path="WMPRemote.bmp"/&gt;
&lt;target window="CRemoteWnd"/&gt;
&lt;anchors&gt;
&lt;anchor name="StatusText" rect="69,46,262,20"/&gt;
&lt;anchor name="History" rect="70,27,208,13"/&gt;
&lt;anchor name="FlowTx" rect="292,27,12,13"/&gt;
&lt;anchor name="FlowRx" rect="319,27,12,13"/&gt;
&lt;anchor name="MediaSeekTrack" rect="71,67,232,12"/&gt;
&lt;anchor name="MediaVolTrack" rect="162,91,64,17"/&gt;
&lt;anchor name="ScalerTrack" rect="71,40,206,9"/&gt;
&lt;anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/&gt;
&lt;anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/&gt;
&lt;anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/&gt;
&lt;anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/&gt;
&lt;anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/&gt;
&lt;anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/&gt;
&lt;anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/&gt;
&lt;anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/&gt;
&lt;anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/&gt;
&lt;anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/&gt;
&lt;anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/&gt;
&lt;/anchors&gt;
&lt;parts&gt;
&lt;part name="Background" rect="0,0,341,125"/&gt;
&lt;part name="HistoryTx1" rect="6,150,208,13"/&gt;
&lt;part name="HistoryRx1" rect="6,131,208,13"/&gt;
&lt;part name="FlowTx1" rect="228,131,12,13"/&gt;
&lt;part name="FlowRx1" rect="255,131,12,13"/&gt;
&lt;part name="MediaSeekTab" rect="159,210,23,11"/&gt;
&lt;part name="MediaSeekBar" rect="209,210,92,10"/&gt;
&lt;part name="MediaVolTab" rect="140,210,9,17"/&gt;
&lt;part name="MediaVolBar" rect="159,221,58,17"/&gt;
&lt;part name="ScalerTab" rect="224,224,9,9"/&gt;
&lt;part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/&gt;
&lt;part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/&gt;
&lt;part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/&gt;
&lt;part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/&gt;
&lt;part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/&gt;
&lt;part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/&gt;
&lt;part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/&gt;
&lt;part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/&gt;
&lt;part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/&gt;
&lt;part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/&gt;
&lt;part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/&gt;
&lt;part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/&gt;
&lt;part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/&gt;
&lt;part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/&gt;
&lt;part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/&gt;
&lt;part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/&gt;
&lt;part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/&gt;
&lt;part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/&gt;
&lt;part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/&gt;
&lt;part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/&gt;
&lt;part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/&gt;
&lt;part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/&gt;
&lt;part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/&gt;
&lt;part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/&gt;
&lt;part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/&gt;
  &lt;part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/&gt;
&lt;part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/&gt;
&lt;/parts&gt;
&lt;caption fontFace="Small Fonts" fontSize="8" fontWeight="normal" colour="FFB000"/&gt;
&lt;region&gt;
  &lt;shape type="rectangle"  rect="1,15,341,83"/&gt;
  &lt;shape type="roundrectangle" rect="319,0,332,1" combine="or" /&gt;
&lt;/region&gt;</source>


Si vous avez une question n'importe la quelle, n'hésitez pas d'aller au {{Shareaza Forums|forum}}, est là pour ça.
{{Nav2Fr|Skinning_tutorial/fr}}

Latest revision as of 21:49, 8 May 2014

  Updated:

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

e

Création d'un thème pour la télécommande

Préambule

Commençons par une analogie... Imaginons que la télécommande de Shareaza est en fait une tête de "Monsieur Patate".

Placez une image de fond pour le visage puis avec des ancres (comme indiqué dans la section <anchors>) placez tous les médias ainsi que la partie bande passante comme vous placeriez les yeux, le nez et la bouche de Monsieur Patate... A partir de la télécommande, on peut contrôler la lecture des médias (musique; vidéo) et les fonctions de bande passante. La télécommande est entièrement personnalisable et peut inclure autant de fonction de shareaza que l'on souhaite.

Ce tutoriel vous accompagnera pas-à-pas dans la construction d'un thème pour la télécommande. Mais pour cela, il est préférable d'avoir certaine connaissances de base dans construction de thème. Avant de commencer, prenez le temps de lire les rubriques manifest, l'élément <windowSkins>. Vous pourrez à tout moment revenir sur les différents éléments constituant un thème en vous rendant sur la page principale de la thématisation de Shareaza.

Cela dit, si vous vous sentez près à faire le "grand" plongeon, ce tutoriel indique les éléments dont vous avez besoin. C'est parti !

Manifest

Avant d'ajouter des points d'attache et des pièces, votre fichier XML devrait ressembler à celui-ci :

 <?xml version="1.0" encoding="UTF-8"?>
 <skin xmlns="http://shareaza.sourceforge.net/schemas/Skin.xsd" version="1.0">
 <manifest name="Ma télécommande"
  author="Mon pseudonyme"
  description="télécommande personnalisée"
  link="http://shareaza.sourceforge.net/"
  email="Monadresse@email.com"
  version="1.0"
  type="skin"
  language="fr"
  />
 <windowSkin>
  <windowSkin>
  
  </windowSkin>
 </windowSkins>
 </skin>

Ici, il est recommandé de copier cela dans un fichier texte et de modifier le manifeste.

Un rappel de ce qu'est un manifest :

  • name = Le nom du thème.
  • author = Nom ou pseudonyme de l'auteur du thème.
  • description = Une (longue) description du thème.
  • link = Votre site internet (Optionnel).
  • email = Votre adresse email, afin de vous contacter pour plus d'informations (Optionnel).
  • version = La version de révision du thème.
  • type = Indiquer "skin" sur ce tag, à moins de réaliser un thème linguistique (traduction) ou il faut indiquer "language".
  • language = Inclure ce tag seulement si le type (ci-dessus) est "language". Il indique le code de langage que la traduction fournit (exemple "fr" pour français), ou pour spécifier le langage utilisé par la télécommande.


Intégration

Ensuite, vient le fond d'image, voici les étapes :

  1. Entrer le chemin où se trouve l'image *.bmp (bitmaps).
  2. Entrer le chemin de la fenêtre concernée par l'image = "CremoteWnd" (la télécommande).
  3. Etablir l'image de fond ("Background"), sous la forme x, y, taille, hauteur.
 <?xml version="1.0" encoding="UTF-8"?>
 <skin xmlns="http://shareaza.sourceforge.net/schemas/Skin.xsd" version="1.0">
 <manifest name="Ma télécommande"
  author="Mon pseudonyme"
  description="télécommande personnalisée"
  link="http://shareaza.sourceforge.net/"
  email="Monadresse@email.com"
  version="1.0"
  type="skin"
  language="fr"
  />
 <windowSkin>
  <windowSkin>
  
   <image type="image" path="MyRemote.bmp"/>
   <target window="CRemoteWnd"/>
   <parts>
   <part name="Background" rect="0,0,341,125"/>
   </parts>

  </windowSkin>
 </windowSkins>
 </skin>

Anchors (Ancres ou point d'attache)

Maintenant que la télécommande à un fond, vous voulez peut-être ancrer quelques boutons ? Sur la droite ? Les ancres indiquent où doivent être affichés les différents parties du thèmes, tels que les boutons. C'est l'élément anchor qui assure cette fonction en indiquant la position relative au fond (x, y, taille, hauteur) des objets à incorporer dans le thème.

Ci-dessous une liste des objets à ancrer :

Ancres Description
StatusText L'endroit où est affiché le titre du fichier média, le temps écoulé, bande-passante, etc.
History L'endroit où sont montrés les niveaux de bande-passante
FlowTx Le taux d'envois
FlowRx Le taux de téléchargement
MediaSeekTrack Glissière "seek" pour le média
MediaVolTrack Glissière de volume
ScalerTrack Glissière de limitation de la bande-passante
MediaStatePlaying Pictogramme "Lecture" du média.
MediaStatePaused Pictogramme "pause" du média.
MediaStateStopped Pictogramme "stop" du média.
_ID_TRAY_OPEN Ouvre Shareaza quand il est minimisé dans la barre de tâches
_ID_MONITOR_CLOSE Ferme la télécommande.
_ID_NETWORK_SEARCH Ouvre un onglet de recherche.
_ID_TOOLS_DOWNLOAD Ouvre la fenêtre de téléchargement.
_ID_TAB_LIBRARY Ouvre la bibliothèque
_ID_MEDIA_PLAY Bouton lecture.
_ID_MEDIA_PAUSE Bouton pause
_ID_MEDIA_STOP Bouton stop
_ID_MEDIA_PREVIOUS Bouton précédent
_ID_MEDIA_NEXT Bouton suivant
_ID_MEDIA_MUTE Bouton muet


N'importe quelle fonction de shareaza peut être ancrée sur la télécommande. Pour trouver plus de fonction il suffit d'ouvrir le fichier "[default-en.xml]". Il se trouve dans le dossier (par défaut) C:/Program files/Shareaza/Skins/Languages.

A quoi ressemble la section "Anchors" ? Jetez-y un coup d'oeil :

<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 (Parties ou pièces)

Ensuite, Vous souhaitez que les boutons puissent être : haut, bas, glissants, et qu'ils soient désactivable. Voici comment ajouter des états aux boutons :

Parts Description
_ID_MEDIA_STOP.Up Le bouton "Stop" en mode "haut" (non-cliqué)
_ID_MEDIA_STOP.Hover Le bouton "Stop" en mode "survole" (quand le curseur est au-dessus).
_ID_MEDIA_STOP.Down Le bouton "Stop" en mode "appuyé".
_ID_MEDIA_STOP.Disabled Le bouton "Stop" en mode "désactivé".


Toutes les parties peuvent avoir ces états, lorsque la souris survole le bouton l'effet "hover" est affiché. Quand le bouton est cliqué c'est l'effet "down" qui s'affiche, etc... Bien sûr, ces pièces sont habillées seulement si une ancre l'accompagne. les parties et ancrages suivant sont requis :

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

Quelques astuces :

  • Mettre les ancres "lecture" et "pause" sur le même secteur, en n'ajoutant pas l'état désactivé, donne un bouton qui va afficher la fonction "pause" quand la lecture est en cours et un bouton "lecture" quand le lecteur est en pause ou arrêtée.
  • Si l'état "désactivé" est exclus pour "lecture", le bouton "Lecture" va agir comme un bouton "Ouvrir fichier..." quand le lecteur média est fermé ou sans fichiers dans la liste de lecture.
  • Pour les parties "History" ou "Flow", utilisez "1" pour avoir une image affichée dans un état "bas" (down) et "2" pour avoir une image affichée dans un état "haut" (up). (Par exemple, bord maximal de la barre de bande passante.)


Voilà à quoi votre section parts (états des boutons "up", "down", "disabled", "hover") peut ressembler. :

 <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

Ensuite, il faut définir le texte de légende. Il définit la police de caractères et le style qui apparaît sur l'ancrage "StatusText". Il sera utilisé pour les titres, la durée d'une musique, la bande passante, etc...

  • face - Nom de la police de caractère, par exemple "Tahoma".
  • size - Hauteur de la police, par exemple "8"
  • weight - Épaisseur de la police de caractère, un nombre entre 1 et 1000, ou "normal" ou "bold" (gras).
  • Colour - La couleur StatusText sous forme HTML.

Regions

Pour terminer, la télécommande peut avoir la forme que vous voulez, il suffit d'utiliser l'élément région. L'élément région se compose d'un ou plusieurs éléments <shape> (forme). Chacun de ces éléments représentant une forme primitive, qui peuvent être combinés ensemble en effectuant des opérations sur les ensembles pour construire une forme finale complexe.

Voici un exemple :

<region>
   <shape type="rectangle" rect="9,25,-11,-1"/>
   <shape type="roundRect" rect="0,0,-1,26" size="16,25" combine="or"/>
</region>

Chaque forme consécutive est combiné afin former la forme finale.

Chaque forme contient :

forme Description
type Le type de forme (expliqué ci-dessous)
rect Le rectangle qui forme la bordure de cette forme, dans la forme x1, y1, x2, y2. Les nombres négatifs sont en relation avec le bord droit ou le bas de la fenêtre, donc "0,0,-1,-1" va couvrir la fenêtre entière.
combine Comment combiner cette forme avec la précédente. La première forme ne doit avoir d'attribut "combine".


Les méthodes de composition sont :

Méthode Description
or Ajouter cette forme aux précédents ("OR")
and Prendre la zone de chevauchement de cette forme et les précédents ("AND")
xor Prendre la zone couverte par cette forme ou l'autre, mais pas les zones de chevauchement("XOR")
diff Soustraire cette forme des précédentes

Les types de formes possibles sont: :

Type Description
rectangle Un rectangle
ellipse Une ellipse
roundRect Un rectangle aux coins arrondis. Les formes de ce type doivent avoir un attribut de plus : size avec deux paramètres qui représentent la longueur et la hauteur des courbes, par exemple size="16,20"

Il ne reste plus qu'à tester le fichier :

 <?xml version="1.0" encoding="UTF-8"?>
 <skin xmlns="http://shareaza.sourceforge.net/schemas/Skin.xsd" version="1.0">
 <manifest name="Ma télécommande"
  author="Mon pseudonyme"
  description="télécommande personnalisée"
  link="http://shareaza.sourceforge.net/"
  email="Monadresse@email.com"
  version="1.0"
  type="skin"
  language="fr"
  />

  <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> Bonne chance ! Si vous avez des questions, ou des suggestions voir des corrections à apporter, n'hésitez pas à participer aux discussions sur le forum : http://shareaza.sourceforge.net/phpbb/


Navigation:     Page d'accueil > Skinning_tutorial/fr > ShareazaRemoteSkinning/fr