Desarrollo Text2skin
De VdrWiki
|
¡ Precaución ! |
|
Esta documentación es válida para la versión 1.0 del text2skin-plugin. |
Estructura general de documentos XML
Quien haya trabajado con XML puede saltar esta sección.
Los ficheros XML tienen una estructura de elementos en forma de árbol. Cada documento comienza con un elemento raíz (un contenedor) que incluye todos los demás elementos de la jerarquía. Los elementos, también llamados etiquetas, se encierran entre los caracteres de mayor que (<) y menor que (>), una barra inclinada antes del nombre indica que la etiqueta es de cierre.
<elemento>
<subelemento>
...
</subelemento>
</elemento>
Cada elemento puede tener atributos para especificar más propiedades. Los atributos se escriben después del nombre del elemento y dentro de < y >, sus valores se escriben después de un igual (=) y entre comillas dobles (").
<elemento atributo="valor" otroatributo="otro valor"> ... </elemento>
Los elementos vacíos no incluyen ningún otro elemento y deben estar completamente vacíos, tampoco se admite una nueva línea.
<elemento atributo="valor"></elemento>
Es posible escribir estos elementos de una manera sencilla
<elemento atributo="valor" />
Los ficheros XML comienzan con una instrucción de control para especificar la versión de XML usada
<?xml version="1.0"?>
Estructura general de los ficheros de piel (skin)
Cada fichero de piel, con extensión .skin, comienza con la instrucción de control (ver arriba) seguido por el elemento raíz <skin>. Este elemento tiene tres atributos que deben ser especificados
- version - Versión del formato de piel, actualmente es "1.0"
- name - Nombre de la piel dentro del OSD
- screenBase - especifica cómo se dibuja la piel, "relative" relativo a la configuración del VDR o "absolute" absoluto a las coordenadas 720x576.
<?xml version="1.0"?> <skin version="1.0" name="brushed Aluminium" screenBase="relative"> ... </skin>
Estructura de las secciones individualmente
Las diferentes secciones del OSD del VDR están definidas en varios elementos <display>. Los más importantes son "menu" y "channelInfo". El elemento <display> toma el atributo id que se especifica en cada sección
- channelInfo
- channelSmall
- volume
- message
- replayInfo
- replaySmall
- menu
Cada definición de <display> comienza con la definición de las áreas de uso, también llamadas ventanas (windows). La cantidad y profundidad de color de las ventanas depende del dispositivo de salida.
<display id="replayInfo"> <window x1="0" x2="619" y1="-113" y2="-84" bpp="4"/> <window x1="20" x2="99" y1="-83" y2="-44" bpp="4"/> ... </display>
Dibujando objetos
Después de la definición de las áreas de dibujo los objetos se pueden dibujar en ellas libremente. Hay tres tipos de objetos
- objetos sencillos
* rectangle - dibuja un rectángulo relleno * text - texto estático o compuesto * image - dibuja una imagen * ellipse - dibuja una elipse * slope - dibuja una curva
- objetos extensos o relacionados
* progress - barra de progreso * scrolltext - texto en varias líneas * scrollbar - barra de desplazamiento
- grupos y objetos especiales
* block - agrupa varios objetos * list - define una lista en el menú * item - define un elemento en la lista
Los objetos sencillos son fáciles de entender, todos tienen los atributos x1, y1, x2 e y2 que describen la posición y dimensión, excepto <image>, que sólo usa x e y cuando no se aplica escalado y color que es la descripción del color en hexadecimal o simbólico. Las imágenes necesitan además el atributo path y pueden tener los atributos bgColor y alpha (transparencia 0-255). Text puede tener el atributo align (con valores como left, right y center), scrolltext además puede tener font. Las elipses son círculos inclinados con el atributo arc que indica la dirección. Scroll- y las barras de progreso también necesitan bgColor, y current y total sólo para las barras de progreso.
<image x="0" y="-70" path="Aluminium_volumebar.png"/>
<rectangle x1="20" x2="99" y1="-83" y2="-44" color="#00000000"/>
<text x1="42" x2="571" y1="-113" y2="-86" color="#FF000000" font="Osd">{ReplayTitle}</text>
<progress x1="124" x2="577" y1="-70" y2="-55" color="#FF84ff00" bgColor="#FFFFFFFF" current="{ReplayPositionIndex}" total="{ReplayDurationIndex}"/>
<scrolltext x1="24" y1="138" y2="-72" x2="583" font="helmetr.ttf:20" color="#AFFFFF00">
{PresentShortText}
{PresentDescription}
</scrolltext>
Texto y Tokens
En el ejemplo de arriba en text se usa texto entre corchetes. A esto se llama token, los tokens son variables que dependen de la información del VDR. En la referencia hay una lista completa de tokens y las demos de pieles pueden ser usadas como ejemplo. El texto y la ruta (path) se pueden mezclar con los token para visualizar información dinámica
<image x="0" y="0" path="logos/{ChannelName}.mng" />
Cada objeto, además de sus atributos, puede tener el atributo condition que es una función compleja. Las condiciones se usan para condicionar la visualización de un elemento o bloque a la información proporcionada por VDR. Un token puede también ser una condición. Un token sin contenido es evaluado como falso. El texto incluido en las funciones se encierran con comillas simples. Para mostrar comillas simples se usa como escape la barra invertida (\).
<image x="20" y="-83" alpha="180" condition="file('replay/{ReplayMode}.png')" path="replay/{ReplayMode}.png" />
<image x="20" y="-83" alpha="180" condition="not(file('replay/{ReplayMode}.png'))" path="replay/common.png" />
<image x="314" y="-34" condition="{IsPlaying}" path="symbols/play_sml.xpm" />
<image x="334" y="-34" condition="{IsFastForward:2}" path="symbols/ffwd_sml.xpm" />
<image x="420" y="25" condition="or({HasVPS},{HasTimer},{IsRunning})" path="Aluminium_epgbottom.png" />
Muestra la imagen sólo si ...
- ...el fichero existe
- ...el fichero no existe
- ...el modo de reproducción es Replay
- ...el modo de reproducción es Forward Level 2 (:0 es la reproducción normal sin multi-velocidad y :X indica el nivel)
- ...el evento actual tiene VPS o ha sido programado para grabar o se está viendo.
Atributos de los Token
Algunos tokens pueden tener atributos, que no son atributos XML. En este momento estos tokens son {MenuTitle}, {MenuCurrent} y todos los tokens de fecha y hora. Éstos siguen al nombre del token separados por dos puntos. Para usar los dos puntos en el contenido del atributo deben estar precedidos del escape (\).
<text .....>{DateTime:%H\:%M}</text>
Los tokens de fecha y hora usan las mismas reglas que aplica strftime (ver man strftime) para {MenuTitle} y {MenuCurrent} sólo existe el atributo clean, que elimina los tabuladores y números de teclas rápidas del texto.
Condiciones complejas y objetos de bloque
Las condiciones complejas se usan para condicionar la visualización de elementos a la existencia de cierta información del VDR. Un bloque de objetos agrupa varios elementos para facilitar el uso de las condiciones.
Los siguientes ejemplos muestran el logo del canal con una sombra sólo si el fichero existe, de otra manara se visualiza el área transparente.
<rectangle x1="0" x2="67" y1="0" y2="51" color="#00000000" condition="not(file('logos/{ChannelName}.mng'))"/>
<block condition="file('logos/{ChannelName}.mng')">
<rectangle x1="4" x2="67" y1="4" y2="51" color="#AF000000"/>
<image x="0" y="0" path="logos/{ChannelName}.mng"/>
</block>
Agrupando un texto largo con barra de desplazamiento que sólo se mostrará si el texto no se ajusta a la página.
<block condition="{MenuText}">
<scrolltext x1="30" y1="60" x2="519" y2="343" color="#FFFFFFFF" font="Sml">{MenuText}</scrolltext>
<image condition="or({CanScrollUp},{CanScrollDown})" x="561" y="52" path="menu-scrollbar.png" />
<scrollbar condition="or({CanScrollUp},{CanScrollDown})" x1="569" y1="69" x2="578" y2="315" color="#FF975000" bgColor="#DAB38D13" />
<image condition="and(not({CanScrollUp}),{CanScrollDown})" x="561" y="39" path="symbols/arrowup-off.png" />
<image condition="and(not({CanScrollUp}),{CanScrollDown})" x="561" y="319" path="symbols/arrowdown-on.png" />
<image condition="and({CanScrollUp},not({CanScrollDown}))" x="561" y="39" path="symbols/arrowup-on.png" />
<image condition="and({CanScrollUp},not({CanScrollDown}))" x="561" y="319" path="symbols/arrowdown-off.png" />
<image condition="and({CanScrollUp},{CanScrollDown})" x="561" y="39" path="symbols/arrowup-on.png" />
<image condition="and({CanScrollUp},{CanScrollDown})" x="561" y="319" path="symbols/arrowdown-on.png" />
</block>
Lista en el menú principal
El elemento especial <list> especifica el área de visualización de una lista de elementos. Sus únicos atributos son x1, y1, x2 e y2. El primer subelemento tiene que ser el elemento especial <item> que sólo tiene el atributo height (altura). Después de <item> se pueden poner elementos normales. height de <item> define la dimensión del área de la lista donde se dibujan los elementos.
<list x1="24" y1="62" x2="569" y2="-82">
<item height="28" />
<text x1="25" x2="569" y1="3" y2="27" color="#AF00FFFF" font="Sml">{MenuGroup}</text>
<text x1="25" x2="569" y1="3" y2="27" color="#AFFFFFFF" font="Sml">{MenuItem}</text>
<rectangle x1="0" x2="579" y1="0" y2="27" color="#FF2B1B9E" condition="{IsMenuCurrent}" />
<text x1="22" x2="569" y1="0" y2="27" color="#AFFFFFFF" font="Osd">{MenuCurrent}</text>
<text x1="0" x2="25" y1="0" y2="27" color="#AFFFFFFF" font="Osd" condition="{IsMenuCurrent}">-></text>
</list>
Se debe entender bien cómo se dibuja la lista. Las coordenadas de los objetos dentro de la lista son relativas al área de visualización de la lista. Cada objeto en la lista se dibuja varias veces, para cada elemento de la lista. Las coordenadas de Y se incrementa en una altura de <item> cada vez. Los tokens {MenuCurrent}, {MenuItem} y {MenuGroup} se dibujan con tabuladores, en menús separados como la programación, mientras que {IsMenuCurrent}, {IsMenuGroup} o {IsMenuItem} se dibujan sólo una vez por cada elemento de la lista.
<text x1="25" x2="569" y1="3" y2="27" color="#AF00FFFF" font="Sml">{MenuGroup}</text>
<text x1="25" x2="569" y1="3" y2="27" color="#AFFFFFFF" font="Sml">{MenuItem}</text>
<rectangle x1="0" x2="579" y1="0" y2="27" color="#FF2B1B9E" condition="{IsMenuCurrent}" />
Creación de mapas de imágenes para los logos del menú
Para mostrar un logo dependiendo el elemento seleccionado, el texto limpio (atributo clean) del elemento (ej. Recordings) se compara con su traducción (aquí Grabaciones). Con las entradas de los módulos en el menú (ej. MP3) del módulo (aquí mp3) se compara con su traducción. (Cuidado: este elemento no es parte de la lista y también debe estar fuera del contenedor <list>).
<image x="25" y="100" path="logos/schedule.png" condition="equal({MenuCurrent:clean},trans('Schedule'))" />
<image x="25" y="100" path="logos/channels.png" condition="equal({MenuCurrent:clean},trans('Channels'))" />
<image x="25" y="100" path="logos/timers.png" condition="equal({MenuCurrent:clean},trans('Timers'))" />
<image x="25" y="100" path="logos/music.png" condition="equal({MenuCurrent:clean},plugin('mp3'))" />
Lo mismo se aplica a {MenuTitle:clean} si se desea un logo para el menú actual, en lugar del elemento seleccionado.
Lista de todas las funciones
- not - negación del término
(ej. "not(equal({PresentStartDateTime},{PresentVPSDateTime}))" )
- and - verdadero si todos los parámetros son verdaderos
(ej. "and({CanScrollUp},{CanScrollDown})" )
- or - verdadero si un parámetro es verdadero
(ej. ver arriba)
- equal - verdadero si los parámetros son verdaderos
- file - devuelve el parámetro si el fichero existe en el directorio de la piel
(ej. "file('logos/{ChannelName}.png')" )
- trans - devuelve la traducción (i18n) del parámetro, falso si la traducción no se encuentra
(ej. "equal('Kanäle', trans('Channels'))" )
Normalmente los textos en las funciones se encierran entre comillas, sólo se pueden omitir si es un token. (ej. not({MenuText}) en lugar de not('{MenuText}') )
Escalado de imágenes
Con esta función es posible escalar imágenes independientemente de la configuración del OSD. Esta función se activa cuando se usan los atributos x1, x2, y1 e y2 con sus posiciones relativas en lugar de x e y (que deshabilitan esta función). El atributo "color" especifica el máximo número de colores que debe tener después del escalado.
Colores
Los colores se dan en formato RGB con información de transparencia
color=#AARRGGBB
- A - valor de alpha (transparencia 0-255)
- R - valor del rojo
- G - valor del verde
- B - valor del azul
Algunos ejemplos
AARRGGBB color=#00000000 = Negro, totalmente transparente color=#FF000000 = Negro, totalmente opacao color=#7F000000 = Negro, 50% transparente color=#7FFFFFFF = Blanco, 50% transparente
Fuentes True-type
Hay tres fuentes predefinidas
- Osd
- Fix
- Sml
Si la librería freetype está instalada es posible usar las fuentes True-Type del direcctorio
/etc/vdr/plugins/text2skin/fonts/
o
/etc/vdr/plugins/text2skin/SkinName/
En el fichero de la piel la fuente se define con
font="Osd"
o con la fuente True-Type con el tamaño y ancho deseados
font="helmetr.ttf[:size][,width]"
Enlaces
| [1] | Referencia de text2skin |
--Eduardo 11:58 6 mar, 2006 (CET)
