Exemples HTML
Un article de Wiki FreePlayer.org.
Sommaire |
Pourquoi cette page ?
Cette page va permettre de donner des exemples de code HTML utilisables dans les mods Freeplayer.
Des astuces ou des méthodes utilisées avec la Freebox.
Exemples
Exemple 1
Un tableau entier peut être utilisé comme lien (un tableau complet pas une cellule).
Pour cela, il suffit d'entourer l'objet TABLE par un A HREF comme par exemple :
<a href="back">
<table background="btn.gif" border=0 bgcolor="#0000003F" abgcolor="#00FF003F" cellpadding=0 cellspacing=0 width=300>
<tr><td width=70></td><td height=40>Choix numéro 1</td></tr>
</table>
</a>
Exemple 2
En utilisant des images transparentes il est possible de créer des menus dynamiques. Il suffit de définir une table comme lien (voir exemple 1), de spécifier un background pour cette table (instruction abgcolor), et de définir dans cette image background une zone transparente qui changera de couleur lorsque le lien sera sélectionné.
La vitesse de sélection n'a rien a voir avec une interface nécessitant un chargement d'image... ici, tout se fait du coté Freebox ! La fluidité est parfaite !
Voici l'image (assez simple) utilisée pour faire mes tests :
J'ai spécifié un bgcolor pour la table par défaut noir ! Ce qui explique la coche noire pour les éléments non sélectionnés. Et un abgcolor vert pour l'élément sélectionné.
Le résultat est assez sympa :
Voici le code du html utilisé :
<table width=300 align="center" cellpadding=0 cellspacing=0 >
<tr><td>
<a href="back">
<table background="btn.gif" border=0 bgcolor="#0000003F" abgcolor="#00FF003F" cellpadding=0 cellspacing=0 width=300>
<tr><td width=70></td><td height=40>Choix numéro 1</td></tr>
</table>
</a>
</td></tr>
<tr><td>
<a href="back">
<table background="btn.gif" border=0 bgcolor="#0000003F" abgcolor="#00FF003F" cellpadding=0 cellspacing=0 width=300>
<tr><td width=70></td><td height=40>Choix numéro 2</td></tr>
</table>
</a>
</td></tr>
<tr><td>
<a href="back">
<table background="btn.gif" border=0 bgcolor="#0000003F" abgcolor="#00FF003F" cellpadding=0 cellspacing=0 width=300>
<tr><td width=70></td><td height=40>Choix numéro 3</td></tr>
</table>
</a>
</td></tr>
</table>
A noter qu'il faut utiliser le background dans la table qui correspond au lien afin que la couleur soit sous le background et apparaisse dans la transparence de l'image.
En espérant que mes tests pourront servir à tous les développeurs de mods...
Exemple 3
Astuce découverte par keypad
Si vous rajouter une bordure transparente à la table abgcolor, de border="2" et de bordercolor = "#00000000".. cette bordure prend la couleur vlink ...
Le mieux est que quand la sélection est validée, cette bordure prend la couleur du alink !
Lien validé, la borduré prend la couleur du alink !
<font alink="#0000003F" vlink="#00FF003F">
<a href="back">
<table width=300 border="2" bordercolor="#00000000" align="center" cellpadding=0 cellspacing=0 >
<tr><td>Le "bouton"</td></tr>
</table>
</a>
</font>
Exemple 4 - boutons bicolores dynamiques
Il est possible de créer des boutons : - dynamiques (changent de couleur au survol) - pas carrés (c'est à dire de forme totalement biscornue 8-) ) - d'un chargement ultra rapide (une seule couleur dans l'image !) - adaptables sur n'importe quel fond vidéo
La seule limitation est l'utilisation d'une seule couleur pour l'ensemble du bouton.
Mais comment c'est possible ?
Première étape : préparation de l'image
- ouvrez The GIMP (ou équivalent) et créer une nouvelle image de la taille de votre bouton
- remplissez l'image avec la couleur d'avant-plan -le noir-
- dessinez la forme de votre bouton avec la couleur d'arrière-plan -le blanc- (attention à ne pas lisser les contours !)
- Faites "Calque/Trasparence/Ajouter un canal alpha"
- effectuez une sélection "par couleur" de la forme de votre bouton (le blanc)
- choississez "edition/effacer" pour rendre la forme transparente
- enfin passez en "couleurs indexées" et choississez un nombre de couleurs égal à 2
Sauvegardez l'image au format GIF en enlevant l'indication "created wirh the GIMP" (ça fait gagner quelques octets ;-) )
Deuxième étape : le code du bouton
<font size="1">
<a href="back">
<table width="200" border="0" align="center" cellpadding=0 cellspacing=0
bgcolor="#fc0a0a" abgcolor="#ffffff">
<tr><td><img src="monBouton.gif" align="center" alpha="#00" /></td></tr>
</table>
</a>
</font>
> "width" : largeur de l'image. > bgcolor : couleur du bouton inactif > abgcolor : couleur du bouton actif
Et voilà !
L'astuce provient du paramètre alpha="#00" qui rend la partie non transparente de l'image gif totalement transparente (!) par rapport à la vidéo.
En cumulant cette astuce avec le mode mosaique de VLC, il est possible d'obtenir une page ressemblant à ceci (ou pas bien loin...) :
Exemple 5 - halos et ombres
Ici aussi nous allons utiliser le paramètre alpha pour dessiner une ombre semi transperente.
- Créez une image comportant un dégradé vertical noir/blanc (le noir en haut) de la largeur de l'élément à "ombrer".
- Ajoutez cette image juste en dessous de l'élément à ombrer avec le tag alpha="80".
Et voilà ! vous avez maintenant une ombre semi-transparente sous votre image.
Astuce : vous pouvez également faire une dégradé noir vers transparent en intercalant des pixels transparents dans la fondu dégradé par tramage. Ainsi vous évitez l'effet de halo au niveau de votre ombre, au pris d'un légère pixelisation.
Exemple 6 - Menu dynamique (utilisation des arguments du Flux ts)
Qui n’a pas rêvé d’avoir une interface dynamique avec de belles images d’arrière plan qui défilent en fonction de changement de menu comme c’est le cas sur Mediaportal ou autres…
Ce petit tuto va vous permettre de réaliser en partie votre rêve le principe est le suivant :
PARTIE HTML
Après la découverte par hasard d’une fonctionnalité cachée de la freebox : la possibilité d’utiliser l’adresse de flux de background <body background="ts://127.0.0.1?ox=&oy=&ow=&oh=,&ix=&iy=&iw=&ih="> comme lien . Maintenant on a plus besoin d’une page html pour chaque menu… Il suffit d’introduire la fonction « onfocus » et mettre comme location le body background="ts://127.0.0.1?... Exemples :
Pour freebox v4 (non dégroupé!) :
<a href="none" onfocus='location="ts://127.0.0.1?ox=20&oy=20&ow=720&oh=576,&ix=0&iy=192&iw=360&ih=192";' >
Pour freebox HD et V4 dégroupé :
<a href="none" onfocus='service="ts://127.0.0.1?ox=20&oy=20&ow=720&oh=576,&ix=0&iy=192&iw=360&ih=192";' >
'service=...' marche aussi sur freebox v4 (firmware >= 1.8 ).
Les paramètres de « ts:// » nous basculera vers la partie d’image concernée ici c'est la partie video qui sera afficher et ainsi de suite.
PARTIE VLC
Cette partie et très importante car c’est VLC qui se chargera de véhiculer l’image d’arrière plan, pour contourner le problème de temps de chargement on va utiliser une astuce, l’astuce consiste a envoyer une seule images 720*576 (96ppp) format png, (le rendement des jpeg et médiocre avec un zoom important!).
Vous l’avez deviné on va a l’aide des liens et des paramètres « ts:// » afficher une partie de l’image et en même temps la zoomer à la taille de la Télé (720*576)-on définit un rectangle à l'intérieur d'une image vidéo décodée -
Ainsi les paramètres « ts:// » ressembleront a cela :
(musiques) "ts://127.0.0.1?ox=20&oy=20&ow=720&oh=576,&ix=360&iy=0&iw=360&ih=192"
(outils) "ts://127.0.0.1?ox=20&oy=20&ow=720&oh=576,&ix=360&iy=192&iw=360&ih=192"
(photos) "ts://127.0.0.1?ox=20&oy=20&ow=720&oh=576,&ix=360&iy=384&iw=360&ih=192"
(television)"ts://127.0.0.1?ox=20&oy=20&ow=720&oh=576,&ix=0&iy=0&iw=360&ih=192"
(favoris) "ts://127.0.0.1?ox=20&oy=20&ow=720&oh=576,&ix=0&iy=384&iw=360&ih=192"
(video) "ts://127.0.0.1?ox=20&oy=20&ow=720&oh=576,&ix=0&iy=192&iw=360&ih=192"
Utilisation de Menu dynamique avec un Background mp2v
Le background mp2v accepte les arguments du Flux, comme c'est le cas avec le flux ts (ox=&oy=&ow=&oh=,&ix=&iy=&iw=&ih=")seule le syntaxe change.
exemple:
<html>
<head>
</head>
<body background="images/bg.mp2v?ox=0&oy=0&ow=720&oh=576,&ix=360&iy=0&iw=360&ih=192">
<a href="page1" onfocus='service="srv://default?ox=0&oy=0&ow=720&oh=576,&ix=360&iy=0&iw=360&ih=288";'></a>
<a href="page2" onfocus='service="srv://default?ox=0&oy=0&ow=720&oh=576,&ix=0&iy=288&iw=360&ih=288";' ></a>
<a href="page3" onfocus='service="srv://default?ox=0&oy=0&ow=720&oh=576,&ix=360&iy=288&iw=360&ih=288";' ></a>
<a href="page4" onfocus='service="srv://default?ox=0&oy=0&ow=720&oh=576,&ix=0&iy=0&iw=360&ih=288";' ></a>
</body>
</html>
La discussion continue ICI
Pour voir un aperçu de résultat lien 1 lien 2
Exemple 7 - Conserver les choix d'un formulaire de page en page
Problématique : mémoriser de page en page les valeurs d'un formulaire.
Contrainte technique : ne pas faire appel à un script à chaque page.
Astuce : les "input" étant mémorisés comme des "var" (stockés dans le cache freebox), pourquoi pas essayer avec des "input" de type "hidden".
Voilà ce que ça donne :
PAGE 1 :
[...]
<form>
<input type="checkbox" name="CHAMP1" value="TOTO">
<input type="submit">
<input type="hidden" name="CHAMP1">
<input type="hidden" name="CHAMP2">
<input type="hidden" name="CHAMP3">
</form>
[...]
PAGE 2 :
[...]
<form>
<input type="checkbox" name="CHAMP2" value="TATA">
<input type="submit">
<input type="hidden" name="CHAMP1">
<input type="hidden" name="CHAMP2">
<input type="hidden" name="CHAMP3">
</form>
[...]
PAGE 3 :
[...]
<form>
<input type="checkbox" name="CHAMP3" value="TITI">
<input type="submit">
<input type="hidden" name="CHAMP1">
<input type="hidden" name="CHAMP2">
<input type="hidden" name="CHAMP3">
</form>
[...]
Au final, vous remarquerez en pensant de page en page que les "checkbox" cochés sont mémorisés... ;-)
