Revision as of 20:09, 20 June 2009

Création d'une Skin pour la télécommande.

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. 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 manifeste tout comme les é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 guide si vous avez besoin d'un peu plus d'explications complémentaires. C'est parti !

Avant d'ajouter des points d'attache et des pièces, le fichier XML devrait ressembler à cela :

<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="http://www.shareaza.com/"
email="Me@myemail.com"
version="1.0"
type="skin"
language="en"
/>

A ce point, il est recommandé de copier cela dans le fichier texte, et d'éditer le manifeste.

Ici, un rappel du manifeste :

name = Le nom de la skin.
author = La personne qui a créer la skin
description = Une longue description de la skin.
link = Optionnel, votre site internet.
email = Optionnel, votre adresse mail, afin de vous contacter pour plus d'informations.
version = Le nombre de révision de la skin.
type = La plupart des skins devraient avoir ce tag de rempli. Les exceptions sont les skins de traduction.
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.

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

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 la partie (<part name="Background") occupée par l'image de fond (cela en x, y, taille, hauteur.)

<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="http://www.shareaza.com/"
email="Me@my_email.com"
version="1.0"
type="skin"
language="en"
/>

<windowSkin>
<image type="image" path="MyRemote.bmp"/>
<target window="CRemoteWnd"/>
<parts>
<part name="Background" rect="0,0,341,125"/>
</parts>
</windowSkin>

</windowSkins> </skin></source>

ANCHORS (Points d'ataches).

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 x, y, largeur, taille relatif au fond de la télécommande. Voici une liste des objets à ancrer :

File:Tab1.png::

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 votre section "Anchors" ? Jetez-y un coup d'oeil : <source lang="c"> <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_TOOLS_DOWNLOAD" rect="280,83,22,22"/>

<anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>

<anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>

PARTS (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 :

File:Tab2.png::

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 :

Certaines incohérences intéressantes :

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 "Parts" doit ressembler :

{{{1}}}

FONTS

Ensuite la 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"> <caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/> </source>

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="http://www.shareaza.com/"
email="Me@myemail.com"
version="1.0"
type="skin"
language="en"
/>

<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 le forum est là pour ça. Kingmich se fera un plaisir de vous aidez, s'il est disopnible.

==

ShareazaRemoteSkinning/fr: Difference between revisions

Revision as of 20:09, 20 June 2009

Contents

Création d'une Skin pour la télécommande.

ANCHORS (Points d'ataches).

PARTS (Pièces).

FONTS

REGIONS

Le Fichier Final.XML

==

Navigation menu