ShareazaRemoteSkinning/fr: Difference between revisions

From Shareaza Wiki
Jump to navigation Jump to search
Line 273: Line 273:
=== FONTS ===
=== FONTS ===


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.
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''' - Le nom de la fonte, exemple "Tahoma".
 
??* '''Size''' - La taille de la fonte, exemple "8".
* '''face''' - Nom de la police de caractère, par exemple "'''Tahoma'''".
??* '''Weight''' - Le poids de la fonte, comme constante ou valeur de nombre entier entre 1 et 1000. "Normale" et "Gras" sont également acceptés.
* '''size''' - Hauteur de la police, par exemple "'''8'''"
??* '''Colour'''- La couleur de StatusText sous forme HTML.
* '''weight''' - Épaisseur de la police de caractère, un nombre entre 1 et 1000, ou "'''normal'''" ou "'''bold'''" (gras).
<source lang="c">
* '''Colour''' - La couleur StatusText sous forme HTML.
&lt;caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/&gt;
<caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/>
</source>


=== REGIONS ===
=== REGIONS ===

Revision as of 20:10, 8 May 2014

  Languages:

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

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 finir, il peut y avoir n'importe quelle forme de télécommande en utilisant les régions. Si l'élément région est inclus, il se compose d'un ou de plusieur éléments <shape>, 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. Un exemple ici : <source lang="c"> <region> 

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

</region></source>

Chaque forme consécutive est combinée avec la région actuelle pour produire la forme finale pour la fenêtre. Chaque forme contient :

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

  • or - Ajoutez cette forme à la précédente (logiquement or)
  • and - Prendre la zone superposante de cette forme et la précédente (logiquement and)
  • xor - Prendre la zone couverte par cette forme, ou une autre forme, mais les zones ne se superposant pas (logiquement xor)
  • diff - Soustraire cette forme de la précédente

Les types de forme possibles sont :

  • 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

<source lang="c"> <?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=" "
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></source>

Si vous avez une question n'importe la quelle, n'hésitez pas d'aller au forum, est là pour ça.

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