Entête de la liste des chaînes

Créer des skins dans Fritivi.
Version 1.2
Barre de commandes
de fenêtre
Aperçu général de l'interface :
Entête de la liste des
chaînes
Element de la liste des
chaînes
Barre de défilement
Télécommande
Quelques conseils
Les emplacements des éléments et leurs formes sont donnés en tant qu'exemples dans les
pages suivantes et peuvent être modifiés comme vous le voulez.
Lisez ces conseils avant de perdre du temps à faire des choses qui ne passeront pas dans le skinner
et dans Fritivi :
–
–
–
les zones des boutons sont obligatoirement rectangulaires (ils ne peuvent pas être « découpés »).
Vous pouvez faire des boutons de formes libres (ronds ou autres) mais il faut laisser de l'espace
entre les différents boutons pour éviter les chevauchements lorsque vous placerez les zones.
chaque partie de l'interface décrite dans les pages ci-dessous peut par contre être découpée pour
avoir une forme non-rectangulaire, c'est la couleur fuchsia de Windows (RVB : 255,0,255) qui
est découpée. Il ne doit pas y avoir d'anti-alias pour le découpage des éléments, méfiez vous
de vos logiciels d'édition d'image. Un pixel avec une valeur RVB (255,0,254) ne sera pas
découpé et sera donc visible dans l'interface. Je sais que ce n'est pas pratique, mais il n'est pas
possible de faire de transparence partielle (alpha) au dessus de la vidéo. Un tutoriel viendra
bientôt pour expliquer la démarche à suivre pour supprimer l'anti-alias dans les logiciels
d'édition d'image récalcitrants.
utilisez le fuschia pour aligner les éléments, notamment le bloc de l'entête avec les éléments de
la liste et la barre de défilement comme ci-dessous. Laissez aussi une bande d'un pixel en
fuschia autour de chaque élément, ça permet de le séparer du bord et de séparer les éléments
entre eux.
Entête de la liste des chaînes
Masquage de la liste
(Bouton normal)
Freebox TV, Webs Tvs Interface de parcours
et Radios, Emissions
des disques
( fichiers/médias en
(fichiers présents sur le
ligne)
pc)
Interface de consultation du
programme TV
Champ texte pour la
recherche d'éléments dans la
liste + bouton relançant la
recherche (à droite)
Gestion des listes
préférées pour l'interface
en cours.
Activation du mode « liste
compacte »
Activation du Freeplayer
intégré
Affichage du volet
supplémentaire
Ajouter l'élément sélectionné
à la liste des médias préférés
Liste déroulante permettant
de filtrer la liste en cours
selon des critères prédéfinis
Liste déroulante d'ordre de tri
de la liste en cours
Mode "ce que j'écoute" de
MSN Messenger
Affichage des options
de Fritivi
« Reprise automatique » (sur
les flux, relance la chaîne en
cas de freeze, sur les fichiers,
lis le fichier suivant lors de la
fin de lecture du fichier en
cours)
Interface de gestion des
programmations
(enregistrements
programmés)
Titre de la liste en cours
(espace à prévoir)
Retourner à la racine de la
liste
Remonter la liste d'un niveau
Réduction des freezes pour
les lignes difficiles.
La polices du titre de la liste et du champ de recherche sont paramétrables (taille, nom de police,
couleur). La couleur du champ de recherche est paramétrable également.
Vous devez aussi laisser un emplacement pour afficher l'heure.
Voir les différentes images page suivante.
Quatre images sont nécessaires : le fond avec les boutons à l'état normal, le fond avec les boutons à
l'état survolé, le fond avec les boutons à l'état enfoncé/cliqué, le fond avec les boutons à l'état
normal et sans le volet déroulé.
entete.bmp
entete_over.bmp
entete_down.bmp
entete_courte.bmp
Par défaut l'entête est l'entête courte. Lors du clic sur le bouton d'affichage du volet, c'est l'entête
complète qui est affichée. Ce fonctionnement permet de n'afficher que les fonctions principales en
permanence ce qui allège l'écran et permet de gagner de l'espace pour la liste. Les fonctions plus
"accessoires" sont affichées uniquement à la demande de l'utilisateur.
L'image pour l'entête courte doit être à la taille de celle-ci, donc plus petite que l'entête normale. Si
vous gardez la même taille que l'entête normale en remplissant l'espace restant avec du fuschia,
vous aurez un gros espace vide entre l'entête et les éléments de liste.
Comme pour la télécommande, il n'est pas obligatoire de placer l'ensemble des éléments dans
l'entête, si vous voulez ne pas placer les boutons de certaines fonctions, c'est possible. Ces fonctions
seront de toute façon toujours accessibles via le menu déroulant.
Onglet d'affichage de la liste
Vous devez inclure dans vos skins une image onglet_chaines.bmp qui sera découpée elle aussi avec
la couleur fuschia. Cette image est affichée en haut à gauche lorsque l'entête et la liste sont
masquées, un clic dessus permet de les faire réapparaître.
Elément de la liste des chaînes
Titre de l'élément (le
coeur est ajouté
automatiquement
pour les médias
préférés)
Sous-titre de
l'élément
Numéro de
l'élément
Logo (36*36)
Heure de fin
Heure de
début
Jauge
Les polices (taille, nom, couleur) sont paramétrables pour tous les éléments texte. Deux images de
fond sont nécessaires, une pour l'élément normal et une autre pour l'élément sélectionné.
La jauge d'avancement du programme ne doit pas être présente sur l'image de l'élément sélectionné.
Elle doit être faite en 2 bitmaps séparés, un pour la jauge vide, l'autre pour la jauge pleine.
Elément de la liste des chaînes en mode compact
Logo (taille variable
de 8*8 à 36*36)
Titre de l'élément (le
coeur est ajouté
automatiquement
pour les médias
préférés)
L'affichage en mode compact permet de gagner de l'espace et d'afficher beaucoup plus d'éléments
dans la liste. Il est activé/désactivé instantanément via le bouton "Activation/désactivation du mode
compact de la liste" placé dans l'entête de la liste des chaînes. Cette image doit être en deux états
également : état normal et état sélectionné.
Nom des images :
–
élément en taille normale : ElementListe.bmp, ElementListe_selected.bmp
–
élément compact : ElementListe_compact.bmp, ElementListe_compact_selected.bmp
–
jauge : elementliste_gauge_empty.bmp (jauge vide), elementliste_gauge_full.bmp (jauge pleine)
Barre de défilement
Flèche haut
Zone étirable (étirée
verticalement selon la
hauteur de la liste)
Curseur
Flèche bas
Curseur, flèche vers le haut et flèche vers le bas sont des boutons possédant trois états (normal,
survolé, cliqué).
Attention pour la barre de défilement aussi les zones à placer sont rectangulaires, vous pouvez donc
faire un curseur arrondi comme dans l'image ci-dessus mais mais bordures des flèches doivent être
droites.
Nom des images :
BarreDefilement.bmp, BarreDefilement_Over.bmp, BarreDefilement_Down.bmp
Barre des commandes de fenêtre
Mode
« toujours
devant »
Fermer
Fritivi
Affichage normal
Affichage
miniature
Minimiser
Fritivi
Affichage
plein écran
Afficher
l'aide
Tous les éléments sont des boutons à trois états.
Les noms des images sont :
CommandesFenetre.bmp, CommandesFenetre_Over.bmp, CommandesFenetre_Down.bmp
Télécommande
Jauge de
progression
de la lecture
en cours
Capture d'écran
Affichage/masquage du
PiP (aperçu miniature)
Etat du lecteur
(espace à
prévoir pour
le texte).
Position et
durée du
fichier (espace
à prévoir pour
le texte)
Réglage du
zoom
Réglages de
l'image
Muet
Retour rapide,
lecture, avance
rapide,
pause/timeshift, stop,
enregistrement.
Monter le son
Baisser le son
Jauge de volume
sonore
Ici aussi 3 états doivent être réalisés pour les boutons (normal, au survol, enfoncé).
Les jauges (progression de la lecture et niveau sonore) sont définies sur l'état normal (la jauge doit y
être représentée vide) et sur l'état au survol (la jauge doit y être représentée pleine).
Comme pour l'entête de la liste, il n'est pas nécessaire de placer tous les éléments, si vous voulez ne
pas afficher certaines fonctions, c'est tout à fait possible. Ces fonctions resteront disponibles pour
l'utilisateur via le menu déroulant.
Nom des images :
Telecommande.bmp, Telecommande_Over.bmp, Telecommande_Down.bmp