Traduction

Traduction, correction et amélioration

Source

Comment changer l'apparence de foobar2000 - 3ème partie (How to skin foobar2000 - Part 3)

Création de fonctions interactives (Creating Panel Switchers)

Vous trouverez ici sur Deviant Art (DA) un grand nombre de personnalisation impressionnantes de foobar2000 vous permettant de basculer entre plusieurs vue par l'utilisation de boutons .
Cela signifie que vous pouvez mettre beaucoup d'information au même endroit, l'une au dessus de l'autre, puis attribuer un ensemble de boutons pour activer ces vue, tandis que les autres reste cachées.

Lux par Markkoenig et mon Jam sont de parfaits exemples. Comme vous pouvez le voir sur la capture d'écran ci-dessous, Lux et Jam utilisent des boutons de sélection pour afficher les vue sélectionnées.
Par ailleurs, Lux utilise des bouton/texte tandis que Jam utilise des bouton/image.

Avec ce tutoriel, vous pourrez également créer des fonctions similaire pour votre personnalisation.

Prérequis (Requirements)
Ceci est la troisième partie de nos tutoriaux, assurez-vous que vous avez déjà lu la première et la deuxième partie avant de commencer.
Il y a des choses que je n'expliquer pas, car elles sont à peu près déjà couvertes dans les parties précédentes.

1. Nous allons partir de zéro, nous partirons d'une nouvelle installation portable de foobar2000 que vous connaissez bien maintenant.
Vous devez également télécharger ces composants qui seront utilisés dans ce tutoriel :
- Colonnes UI
- Panel Stack Splitter
- ELPlaylist
- Library Tree
- Channel Spectrum Panel

Il suffit d'extraire et copier les fichiers * .dll dans C:\Program Files\foobar2000\components.
ou plus propre mais un peu plus compliqué dans :
C:\Program Files\foobar2000\user-components\"nom du plug-in" (avec "nom du plug-in".dll dedans).

2. Exécutez foobar2000.
Option d'interface utilisateur apparaît, choisissez "Colonnes UI". Tout d'abord, redimensionner la fenêtre de foobar à un format plus compact.

3. Paramétrage de "Columns UI" aller dans "File -> Preferences -> Display -> Columns UI -> (onglet) Layout"

Ensuite dans "Preset" cliquer sur "New" et appelez le comme vous voulez.

"NG Playlist" est afficher par défaut, le remplacer par "Horizontal Splitter".

4. Faire un clic droit sur le "Horizontal Splitter" et choisir "Insert Panel -> Splitters -> Panel Stack Splitter".

Pour faire plus court à taper, à partir de maintenant nous allons appeler "Panel Stack Splitter" "PSS".
(personnellement je n'aime pas les abréviations surtout en anglais, donc j'ai toujours mis le mot complet)

5. Maintenant nous allons décider du nombre de panneaux commutable que nous voulons.
Pour cet exemple nous n'en prendrons que 2, je veux un panneau pour afficher "library tree" et un autre pour "ELPlaylist".

Ajoutons-les, clic-droit sur "Panel Stack Splitter" "Insert panel -> Panels -> Library Tree" et refaire "Insert panel -> Playlist Views -> ELPlaylist".

Cliquez sur OK pour fermer la fenêtre des préférences, et maintenant foobar affiche deux fenêtres, placés côte-à-côte.

6. Faites un clic droit sur l'onglet de "Panel Stack Splitter -> splitter settings".

Une fenêtre de réglage apparaît et dans l'onglet "PanelList" nous allons remplir les données.

Maintenant, nous devons définir leurs positions et leurs tailles, nous allons commencer par les rendre identiques et les placer autour de la zone inférieure de la fenêtre.
Insérez ces valeurs sur les deux panneaux : "library tree" et "ELPlaylist"

Saisir les valeur suivante (faire un copier/coller ça évite les erreurs)
left : 0
Top : 250
width : %_width%
height : $sub(%_height%,300)

Ne pas oublier de cocher l'option "forced layout".
Maintenant, avec ce code, les panneaux seront positionnés à 250px du haut et 50px du bas, et si vous agrandissez la fenêtre de foobar, ces panneaux vont s'agrandir, mais les marges supérieure et inférieure ne bougerons pas.
Nous pouvons utiliser ces espaces pour ajouter d'autres éléments, et dans ce tutoriel, nous allons utiliser l'espace du bas pour mettre des boutons.

7. Toujours dans la fenêtre de "Splitter Setings" nous allons dans "Script".
Il y a 2 onglets supplémentaire appelé "PerTrack" et "Per Second", nous nous limitons à "PerTrack".

Nous dirons à foobar que nous voulons créer 2 panneaux commutables, avec ce code : $init_ps_global(showpanel,2)

Allons dans l'onglet "Global Variables" et cliquer sur "Reload". Si "showpanel" s'affiche, nous pouvons revenir à l'onglet "Script" et supprimez le code, et la page "PerTrack" sera à nouveau vide.

8. Maintenant, nous pouvons commencer à créer les boutons !
Nous allons d'abord essayer avec de simples boutons/texte.

Copiez le code suivant dans "PerTrack" :
$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 CouleurFond: 100-100-100, fontcolor: 255-255-255 CouleurFond: 105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 CouleurFond: 100-100-100, fontcolor: 255-255-255 CouleurFond: 105-210-231)

Pour information sur les couleur RGB (Rouge Vert Bleu) :
255-255-255: Blanc
100-100-100: Gris foncé
105-210-231: Bleu clair

Cliquez sur "Apply", vous verrez apparitre ces 2 boutons au bas de la fenêtre.

9. Nous continuerons d'écriture le codes , cette fois, nous allons dire à foobar ce que nous voulons voir quand on clique sur ces boutons.
Bien sûr, le premier bouton servira à montrer le panneau bibliothèque (library panel), et le second montrera l'"ELPlaylist".

Nous allons utiliser "$ifequal, $get_ps_global and $showpanel_c" pour cette fonction.
$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1),
$showpanel_c(Library Tree,0))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1),
$showpanel_c(ELPlaylist,0))

Le code ci-dessus, combinée avec "$textbutton" que nous avons créé précédemment, est notre façon de dire foobar "if"(si) nous voulons voir , "then"(alors) montre le, "otherwise" (sinon) cache le.
Les 3 premières lignes diront à foobar; si l'on clique sur le bouton "library", le panneau bibliothèque s'affichera, et si nous ne le faisons pas (parce que nous avons cliqué sur un autre bouton), alors le panneau de la bibliothèque sera caché.
Les 3 lignes suivantes ont également la même fonction, mais il est pour "ELPlaylist".

Cliquez sur OK pour fermer la fenêtre de configuration.
Cliquer sur les boutons pour tester le code. Jusqu'à ce point, "ELPlaylist" ne montrera qu'une page blanche, parceque nous n'avons pas charger de musique dans foobar, glisser/déposé un dossier de musique dans "ELPlaylist".

10. Que diriez-vous si nous ajoutions un autre panneau ? Le panneau "Channel Spectrum Panel" pour avoir une belle visualisation de votre piste que vous écoutez ?
Nous pouvons ajouter via un clic droit sur la zone vide "Add panel -> Visualisation -> Channel spectrum panel".
Ce placement prend toute la zone. Ne vous inquiétez pas, un clic droit sur la l'étiquette "Panel Stack Splitter -> Splitter Setting". Et on va mettre la même position et la taille de l'étape n°6 pour le "channel spectrum panel".

"Channel Groupe Spectrum" est sûrement un peu long comme nom, pourquoi ne le changerions-nous pas par un plus court, "Viz" par-exemple ?

11. Nous allons créer un bouton de texte supplémentaire pour ce panneau,

copier et coller le code dans l'onglet script, juste en dessous des deux boutons, que nous avons créé plus tôt :
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)

Puis ajouter du code similaire à celle décrite à l'étape n°9 pour ce panneau :
$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1),
$showpanel_c(Viz,0))

Noter que nous n'avons pas utiliser "channel spectrum panel" dans "$showpanel", mais "Viz". C'est parce que nous l'avons déjà changé à l'étape #10.
Renommer un panneaux est nécessaire lorsque vous avez deux ou plusieurs panneaux du même composant, et peut être utile si le nom du panneau est tout simplement trop long.

Jusqu'à ce point, ceci est notre code dans la page "PerTrack" :
$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1),
$showpanel_c(Library Tree,0))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1),
$showpanel_c(ELPlaylist,0))
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1),
$showpanel_c(Viz,0))

Fermer la fenêtre "Splitter Setting" et essayez lancer une de vos chansons et basculer entre les panneaux à l'aide des boutons. Impressionnant est-ce pas ?

12. Vous constaterez que la couleur de fond des boutons se change en bleu clair lorsque nous passez la souris dessus.
Nous pouvons utiliser la même couleur pour indiquer quel panneau est actif en assignant de nouvelles variables.
Tout d'abord, il faut ouvrir "Splitter Setting" et modifier notre codes.
Maintenant, il faut déplacer les 3 codes "$textbutton" en dessous des codes "$ifequal", nous utiliserons une paire de fonction "$puts" entre le "$ifequal", et "$get" pour remplacer la valeur "100-100-100" dans nos "textbuttons" "brushcolor", en particulier avec une couleur différente qui va indiquer quel panneau est actuellement actif/montré(active/shown).

Pour faire simple, remplacer votre code actuel par celui-ci :
$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1)
$puts(LibButton,105-210-231),
$showpanel_c(Library Tree,0)
$puts(LibButton,100-100-100))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1)
$puts(PlsButton,105-210-231),
$showpanel_c(ELPlaylist,0)
$puts(PlsButton,100-100-100))
$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1)
$puts(VizButton,105-210-231),
$showpanel_c(Viz,0)
$puts(VizButton,100-100-100))
$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:$get(LibButton),fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:$get(PlsButton),fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:$get(VizButton),fontcolor:255-255-255 brushcolor:105-210-231)

Texte en gras : notre nouveau code de cette étape.

Maintenant, nous allons jeter un coup d'oeil à "$get(LibButton)".
Nous avons déjà mis en "LibButton" par des moyens en attribuant la valeur de la variable de codes antérieurs, en fait, nous avons des variables avec 2 couleurs différentes (bleu clair et gris foncé) pour "LibButton".
La couleur sera utilisée en fonction du panneau actuellement actif. Si elle est "Library Tree", alors "LibButton» sera "105-210-231" ou "bleu clair", si il ne l'est pas, alors "LibButton" sera "100-100-100" ou "gris foncé".
Même chose peut être dit à propos de "$get(PlsButton)" et "$get(VizButton)".

13. Vous pouvez essayer de déplacer les deux panneaux et boutons, vous voulez par exemple mettre en haut les boutons ... ? Bien sur que vous pouvez, il suffit de changer la valeur de "y" de chaque "$textbutton" à "0" (rappelons que "0" signifie "en haut" et une valeur plus élevée signifie une position inférieure).
Remplacer $sub(%_height%,50) par 0.

Maintenant, vous pouvez utiliser l'espace vide en bas et agrandir chaque panneau.
Accédez au "PanelList" et changer la hauteur de chaque panneau pâr : "$sub(%_height%,250)" (au lieu de 300).

14. Maintenant, au lieu de boutons/texte, nous allons utiliser des boutons/image.
Télécharger les icône d'exemple, extraire le dossier "Skins" dans le répertoire foobar, C:\Program Files\Foobar\skins.

Nous allons modifier la couleur de l'arrière-plan de "Panel Stack Splitter" pour avoir un meilleur contraste pour les icônes.
Aller dans "Splitter Settings -> Behaviour -> custom background color -> Change colour..." et commençons avec un gris plus foncé (50-50-50).

Ensuite, dans le script remplacer tous les "$textbutton" par $imagebutton, il faut aussi changer la valeur RVB de $puts couleur pour l'emplacement et le nom de chaque icône.
Exemple tout fait :
$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1)
$puts(LibButton,skins/Library_h.png),
$showpanel_c(Library Tree,0)
$puts(LibButton,skins/Library.png))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1)
$puts(PlsButton,skins/Playlist_h.png),
$showpanel_c(ELPlaylist,0)
$puts(PlsButton,skins/Playlist.png))
$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1)
$puts(VizButton,skins/Viz_h.png),
$showpanel_c(Viz,0)
$puts(VizButton,skins/Viz.png))
$imagebutton(0,0,55,35,$get(LibButton),skins/Library_h.png,SETGLOBAL:showpanel:1;REFRESH)
$imagebutton(60,0,55,35,$get(PlsButton),skins/Playlist_h.png,SETGLOBAL:showpanel:2;REFRESH)
$imagebutton(120,0,55,35,$get(VizButton),skins/Viz_h.png,SETGLOBAL:showpanel:3;REFRESH)

15. Ajoutons pochettes, titres, artiste et informations de l'album de la chanson au dessous de notre code actuel.

/////////////////////////////////////////// COVER & TEXTS
$imageabs(0,0,%_width%,250,%path%,artreader,)
$drawblurrect(0,180,%_width%,70,29-129-0-200,1)corrigé
$font(Segoe UI,20)
$drawstring(%title%,10,180,%_width%,36,230-230-230,elipchar)
$font(Segoe UI,17)
$drawstring(%album% par %artist%,10,215,%_width%,36,230-230-230,elipchar)modifié

Nous continuerons plus tard avec des systèmes plus complexes, y compris afficher/cacher les panneaux multiples et déplacer certains éléments autour à la fois, et puis créer une deuxième série de boutons.
Notre objectif est un peu comme ces captures d'écran ci-dessous :

J'ai mis 2 jours pour traduire, comprendre le sens de certaines expressions, et améliorer cette procédure, et normalement n'importe qui doit être capable de tout réalisé en moins de 15mn (après téléchargement).