ShareazaRemoteSkinning/fr

From Shareaza Wiki
Jump to navigation Jump to search
  Languages:

English • Deutsch • Español • Français • עברית • Italiano • Nederlands • Polski • Português • Русский • ‪中文(繁體)

e
  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

Retrieved from "https://shareaza.sourceforge.net/w/index.php?title=ShareazaRemoteSkinning/fr&oldid=10771"