# Formato del skin de MPlayer

El propósito de este documento es describir el formato de los skin de MPlayer. La información contenida aquí puede ser errónea, porque

1. No soy yo quien ha escrito el GUI.

2. El GUI no está terminado.

3. Puedo equivocarme.

No se sorprenda si algo no funciona como se describe aquí.

Gracias a Zoltán Ponekker por su ayuda.

András Mohari <mayday@freemail.hu>

## Visión general

Realmente no hay nada que hacer con el formato del skin, pero debe saber que MPlaner no tiene un skin integrado, por eso al menos un skin debe estar instalado para poder usar el GUI.

### Directorios

Los directorios donde se buscan los skins son (en orden):

1. `$(DATADIR)/skins/`

2. `$(PREFIX)/share/mplayer/skins/`

3. `~/.mplayer/skins/`

Tenga en cuenta que la primera ruta puede variar de acuerdo a cómo fue configurado MPlayer (vea los argumentos `--prefix` y `--datadir` del script `configure`).

Todo skin es instalado en su propio directorio bajo uno de los directorios listados más arriba, por ejemplo:

    $(PREFIX)/share/mplayer/skins/default/

### Formato de las imágenes

Las imágenes deben ser PNGs a color verdadero (24 or 32 bpp).

En la ventana principal y en la barra de reproducción (ver más abajo) puede usar imágenes con `transparencia': Regiones rellenas con color #FF00FF (magenta) son completamente transparentes cuando se ven con MPlayer. Esto significa que puede incluso tener ventanas con formas si su servidor X tiene la extensión XShape.

### Componentes del skin

Los skins son formatos bastante libres (no como otros skins de formato fijo de Winamp/XMMS, por ejemplo), de manera que pueda crear algo grande.

Actualmente hay tres ventanas que decorar: la ventana principal, la subventana, la barra de reproducción, y el skin del menú (que puede activarse con clic derecho).

- La ventana principal y/o la barra de reproducción es donde puede controlar MPlayer. El fondo de la ventana es una imagen. Varios objetos pueden (y deben) ser colocados en la ventana: botones, medidores (desplazables) y etiquetas. Para cada objeto, debe especificar su posición y tamaño.

  Un botón tiene tres estados (pulsado, soltado, desactivado), por eso la imagen debe estar dividida en tres partes verticalmente. Vea el objeto botón para detalles.

  Un medidor (usado principalmente para la barra de búsqueda y el control de volumen/balance) puede tener cualquier número de fases dividiendo su imagen en diferentes partes unas debajo de otras. Vea hpotmeter y potmeter para detalles.

  Etiquetas son un poco especiales: Los caractere necesarios para pintarlas se toman de un archivo de imagen, y los caracteres en la imagen son descritos por un archivo de descriptión de tipografía. Lo último es un archivo de texto plano que especifica la posición x,y y el tamaño de cada carater en la imagen (el archivo de imagen y su archivo de descripción de tipografía forman juntos un tipo de letra). Vea dlabel y slabel para detalles.

  Todas las imágenes pueden tener transparencia completa como se describe en la sección que habla de formatos de imagen. Si el servidor X no soporta la extensión XShape, las partes marcadas como transparentes se verán negras. Si le gusta usar esta característica, el ancho del fondo de la imagen de la ventana principal debe ser divisible por 8.

- La subventana es donde aparece la película. Puede mostrar una imagen específica si no hay película cargada (es bastante aburrido tener una ventana vacía :-)) Nota: la transparencia no está permitida aquí.

- El skin del menú es una forma de controlar MPlayer con entradas de menú. Dos imágenes son requeridas para el menú: una es la imagen base que muestra el menú en su estado normal, la otra es usada para mostrar las entradas seleccionadas. Cuando hace salir el menú, la entrada seleccionada actualmente es copiada desde la segunda imagen sobre la entrada de menú que hay bajo el puntero del ratón (la segunda imagen nunca se muestra entera).

  Una entrada de menú se define por su posición y tamaño en la imagen (vea la sección que habla del skin del menú para detalles).

Hay algo importante que aún no he mencionado: Para que los botones, medidores deposición y entradas de menú funcionen, MPlayer tiene que saber qué hacer cuando se hace clic en ellos. Esto se hace con mensajes (eventos). Para estos objetos debe definir los mensajes que se generan cuando se hace clic en ellos.

### Archivos

Necesita los siguientes archivos para construir un skin:

- El archivo de configuración llamado skin le dice a MPlayer cómo poner las diferentes partes del skin juntas y qué debe hacer cuando se hace clic en alguna parte de la ventana.

- La imagen de fondo para la ventana principal

- Imágenes para los objetos en la ventana principal (incluyendo uno o más archivos de descripción de tipografía necesarios para dibujar las etiquetas).

- La imagen que se mostrará en la subventana (opcional).

- Dos imágenes para el skin del menú (son necesarias solo si quiere crear un menú).

Con la excepción del archivo de configuración del skin, puede nombrar los otros archivos como quiera (pero note que los archivos de descripción de tipografía deben tener extensión `.fnt`).

## El archivo de skin

Como se menciona más arriba, este es el archivo de configuración del skin. Su orientación en lineal; las líneas que son comentarios comienzan por un caracter '`;`' al principio de la línea (solo espacios y tabuladores están permitidos antes del '`;`').

El archivo está dividido en secciones. Cada sección describe el skin para una aplicación y tiene la siguiente forma:

    section = nombre de la sección
    .
    .
    .
    end

Actualmente solo hay una aplicación, por lo que necesita una sola sección: su nombre es movieplayer.

Dentro de esta sección cada ventana está descrita por un bloque de la siguiente forma:

    window = nombre de la ventana
    .
    .
    .
    end

donde nombre de la ventana puede ser una de las siguientes cadenas de texto:

- main - para la ventana principal

- sub - para la subventana

- menu - para el skin del menú

- playbar - barra de reproducción

(Los bloques sub y menú son opcionales - no necesita crear un menú o decorar la subventana.)

Dentro de un bloque de ventana, puede definir cada objeto para la ventana con una línea del siguiente modo:

    objeto = parámetro

Donde `objeto` es una cadena que identifica el tipo de objeto GUI, `parámetro` es un valor numérico o textual (o una lista de valores separados por comas).

Poniendo todo lo de arriba jutno, el archivo entero quedará algo similar a esto:

    section = movieplayer
      window = main
      ; ... objetos para la ventana principal ...
      end

      window = sub
      ; ... objetos para la subventana ...
      end

      window = menu
      ; ... objetos para el menú ...
      end

      window = playbar
      ; ... objetos para la barra de reproducción ...
      end
    end

El nombre de un archivo de imagen se debe dar sin los directorios - las imágenes se buscan en el directorio `skins`. También puede (pero necesita ser root) especificar la extensión del archivo. Si el archivo no existe, MPlayer intentará cargar el archivo `<filename>.<ext>`, donde `png` y `PNG` son probados para `<ext>` (en ese orden). El primer nombre de archivo que coincida será el que se use.

Finalmente unas palabras acerca del posicionamiento. La ventana principal y la subventana pueden ser colocadas en las diferentes esquinas de la pantalla dando las coordenadas `X` e `Y` . `0` es arriba o izquierda, `-1` es el centro y `-2` es a la derecha o abajo, como se muestra en la ilustracion:

    (0, 0)----(-1, 0)----(-2, 0)
      |          |          |
      |          |          |
    (0,-1)----(-1,-1)----(-2,-1)
      |          |          |
      |          |          |
    (0,-2)----(-1,-2)----(-2,-2)

Aquí tiene un ejemplo para clarificar esto. Suponga que tiene una imagen llamada `main.png` que usa para la ventana principal:

    base = main, -1, -1

MPlayer intentará cargar los archivos `main`, `main.png`, `main.PNG`.

### Ventana principal y barra de reproducción

Más abajo tiene la lista de entradas que pueden usarse en los bloques '`window = main`' ... '`end`', y '`window = playbar`' ... '`end`'.

`base = image, X, Y`

  Le permite especificar la imagen de fondo para usar en la ventana principal. La ventana aparecerá en la posición `X,Y` dada de la pantalla. La ventana tendrá el tamaño de la imagen.

  Estas coordenadas no funcionan actualmente para la ventana de reproducción.

  Las regiones transparentes en la imagen (coloreadas con #FF00FF) aparecen en negro en servidores X sin la extensión XShape. El ancho de la imagen debe ser divisible por 8.

`button = imagen, X, Y, ancho, alto, mensaje`

  Coloca un botón de tamaño `ancho` * `alto` en la posición `X,Y`. El `mensaje` especificado es generado cuando se hace clic en el botón. La imagen dada en `imagen` debe tener tres partes una debajo de otra (de acuerdo con los posibles estados del botón), como esto:

      +--------------+
      |  pulsado     |
      +--------------+
      |  soltado     |
      +--------------+
      |  desactivado |
      +--------------+

`decoration = enable|disable`

  Activa o desactiva la decoración del administrador de ventanas para la ventana principal. Por defecto toma el valor disable.

  Esto no funciona para la ventana de reproducción, no lo necesita.

`hpotmeter = botón, bancho, balto, fases, numfases, defecto, X, Y, ancho, alto, mensaje`

`vpotmeter = botón, bancho, balto, fases, numfases, defecto, X, Y, ancho, alto, mensaje`

  Coloca un medidor horizontal (hpotmeter) o vertical (vpotmeter) de tamaño `ancho` * `alto` en la posición `X,Y`. La imagen puede ser dividida en diferentes partes para las diferentes fases del medidor (por ejemplo, puede tener un medidor para el control del volumen que vaya de verde a rojo mientras sus valores cambian desde el mínimo al máximo.). `hpotmeter` puede tener un botón que se desplaze horizontalmente. Los parámetros son:

  - `botón` - la imagen que se usará para el botón (debe tener tres partes una debajo de otra, como en el caso de botón)

  - `bancho`,`balto` - tamaño del botón

  - `fases` - la imagen que se usará para las diferentes fases del medidor horizontal. Un valor especial `NULL` puede usarse si no desea una imagen. La imagen debe estar dividida en `numfasespartes` verticalmente como esto:

        +------------+
        |  fase #1   |
        +------------+
        |  fase #2   |
        +------------+
             ...
        +------------+
        |  fase #n   |
        +------------+

  - `numfases` - número de fases almacenadas en la imagen de `fases`

  - `defecto` - valor por defecto en el medidor (en el rango de `0` a `100`)

  - `X`,`Y` - posición del medidor

  - `ancho`,`alto` - ancho y alto del `medidor`

  - `mensaje` - el mensaje que se ha de generar cuando se cambia el valor del `hpotmeter`

`potmeter = fases, numfases, defecto, X, Y, ancho, alto, mensaje`

  Un `hpotmeter` sin un botón. (Creo que está hecho para hacer una especie de botón que gire sobre sí mismo, pero reacciona a arrastre horizontal solamente). Para la descripción de los parámetros vea hpotmeter. `fases` puede ser `NULL`, pero es poco útil, porque no le permite ver donde está establecido el valor del `potmeter`.

`font = fontfile, fontid`

  Define una tipografía. `fontfile` es el nombre del archivo de descripción de la tipografía con extensión `.fnt` (no especifique la extensión aquí). `fontid` es usado para referirse a la tipografía (vea dlabel y slabel). Pueden definirse hasta 25 tipografías.

`slabel = X, Y, fontid, "text"`

  Coloca una etiqueta estática en la posición `X,Y`. `text` se muestra usando la tipografía identificada con `fontid`. El texto es una cadena de texto en crudo (variables como `$x` no funcionarán) que debe ser encerrada entre comillas dobles (el caracter " no puede ser parte del texto). La etiqueta es mostrada usando la tipografía identificada por `fontid`.

`dlabel = X, Y, width, align, fontid, "text"`

  Coloca una etiqueta dinámica en la posición `X,Y`. La etiqueta se llama dinámica porque su texto es refrescado periódicamente. La longitud máxima de la etiqueta viene dada por `width` (su altura es la altura de un caracter). Si el texto que ha de ser mostrado es más ancho que esta, será desplazado, si no será alineado dentro del espacio especificado por el valor del parámetro `align`: `0` es para derecha, `1` para centrado, `2` para izquierda.

  El texto que ha de ser mostrado viene dado por `text`: Debe ser escrito entre comillas dobles (por eso el caracter " no puede ser parte del texto). La etiqueta es mostrada usando la tipografía identificada por `fontid`. Puede usar las siguientes variables en el texto:

  Variable | Significado
  --- | ---
  $1 | tiempo de reproducción en formato hh:mm:ss
  $2 | tiempo de reproducción en formato mmmm:ss
  $3 | tiempo de reproducción en formato hh (horas)
  $4 | tiempo de reproducción en formatomm (minutos)
  $5 | tiempo de reproducción en formato ss (segundos)
  $6 | longitud de película en formato hh:mm:ss
  $7 | longitud de película en formato mmmm:ss
  $8 | tiempo de reproducción en formato h:mm:ss
  $v | volumen en formato xxx.xx%
  $V | volumen en formato xxx.xx
  $b | balance en formato xxx.xx%
  $B | balance en formato xxx.xx
  $$ | el caracter $
  $a | un caracter de acuerdo con el tipo de audio (ninguno: `n`, mono: `m`, estéreo: `t`)
  $t | número de pista (en lista de reproducción)
  $o | nombre del archivo
  $f | nombre del archivo en minúsculas
  $F | nombre del archivo en mayúsculas
  $T | un caracter en función del tipo de flujo (archivo: `f`, Video CD: `v`, DVD: `d`, URL: `u`)
  $p | el caracter p (si una película está siendo mostrada y la tipografía tiene el caracter p
  $s | el caracter s (si la película ha sido detenida y la tipografía tiene el caracter s
  $e | el caracter e (si se ha pausado la reproducción y la tipografía tiene el caracter e
  $x | ancho de la película
  $y | alto de la película
  $C | nombre del codec usado

Las variables `$a, $T, $p, $s` y `$e` devuelven caracteres que deben mostrarse como símbolos especiales (por ejemplo, e es para el símbolo de la pausa que normalmente es algo parecido a ||). Debe tener una tipografía para caracteres normales y una diferente para los símbolos. Vea la sección acerca de símbolos para más información.

### Subventana

Las siguientes entradas pueden ser usadas en el bloque '`window = sub`' . . . '`end`'.

`base = image, X, Y, width, height`

  La imagen que se mostrará en la ventana. La ventana aparecerá en la posición `X,Y` dada de la pantalla (`0,0` es la esquina arriba a la izquierda). Puede especificar `-1` para el centro y `-2` para el lado derecho (`X`) y abajo (`Y`). La ventana será tan grande como sea la imagen. `width` y `height` definen el tamaño de la ventana; son opcionales (si no se especifican, la ventana tendrá el mismo tamaño que la imagen).

`background = R, G, B`

  Le permite especificar el color de fondo. Es útil si la imagen es más pequeña que la ventana. `R`, `G` y `B` especifican los valores de las componentes de color para rojo, verde y azul (cada uno ha de tener un valor decimal de 0 a 255).

### Menú del skin

Como se mencionó anteriormente, el menú es mostrado usando dos imágenes. Las entradas normales para el menú se toman de la imagen especificada por el objeto `base`, mientras que la entrada que actualmente esté seleccionada es tomada desde la imagen especificada por el objeto `selected`. Debe definir la posición y el tamaño de cada entrada de menú a través del objeto de menú.

Las siguientes entradas pueden usarse en el bloque de '`window = menu`'. . .'`end`'.

`base = image`

  La imagen para las entradas normales del menú.

`selected = image`

  La imagen mostrando el menú con todas las entradas seleccionadas.

`menu = X, Y, width, height, message`

  Define la posición `X,Y` y el tamaño de una entrada de menú en la imagen. `message` es el mensaje que ha de generarse cuando el ratón del botón es soltado sobre la entrada.

## Tipografías

Como se mencionó en la sección acerca de las partes de un skin, una tipografía viene definida por una imagen y un archivo de descripción. Puede colocar caracteres en cualquier parte de la imagen, pero ha de asegurarse de que su posición y tamaño vienen dados en el archivo de descripción de manera exacta.

El archivo de descripción de la tipografía (con extensión `.fnt`) puede tener líneas de comentarios que empiecen por '`;`'. El archivo debe tener una línea en la forma

    image = image

Donde `image` es el nombre del archivo de imagen que se usará para la tipografía (puede no especificar la extensión).

    "char" = X, Y, width, height

Aquí `X` e `Y` especifican la posición del caracter `char` en la imagen (`0,0` es la esquina superior izquierda). `width` y `height` son las dimensiones del caracter en pixels.

Este ejemplo define los caracteres A, B, C usando `font.png`.

    ; Puede ser "font" en lugar de "font.png".
    image = font.png

    ; Tres caracteres son suficientes para el propósito de esta demostración :-)
    "A" =  0,0, 7,13
    "B" =  7,0, 7,13
    "C" = 14,0, 7,13

### Símbolos

Algunos caracteres tienen significado especial cuando son devueltos por algunas de las variables usadas en dlabel. Estos caracteres se deben mostrar como símbolos para que parezca un bonito logotipo de DVD en lugar del caracter '`d`' para un flujo de DVD por ejemplo.

La siguiente tabla lista todos los caracters que pueden ser usados para mostrar símbolos (y que por lo tanto requieren una tipografía diferente).

Caracter | Símbolo
--- | ---
p | play
s | stop
e | pausa
n | no sound
m | mono sound
t | stereo sound
f | stream es un archivo
v | stream es un Video CD
d | stream es un DVD
u | stream es una URL

## Mensajes GUI

Son los mensajes que pueden ser generados por los botones, potmetros y entradas de menú.

Algunos de los mensajes pueden no funcionar como se espera (o ni funcionar). Como ya sabe, el GUI está bajo desarrollo.

evNone

  Mensaje vacío, no tiene efecto (excepto quizá en las versiones CVS :-)).

Control de reproducción:

evPlay

  Inicia la reproducción.

evStop

  Detiene la reproducción.

evPause

evPrev

  Salta a la pista previa en la lista de reproducción.

evNext

  Salta a la siguiente pista en la lista de reproducción.

evLoad

  Carga un archivo (abriendo una ventana del navegador de archivos, para que pueda elegir uno).

evLoadPlay

  Hace lo mismo que `evLoad`, pero inicia automáticamente la reproducción después de cargar el archivo.

evLoadAudioFile

  Carga un archivo de audio (con el selector de archivos)

evLoadSubtitle

  Carga un archivo de subtítulos (con el selector de archivos)

evDropSubtitle

  Desactiva el uso de subtítulos actual.

evPlaylist

  Abre/cierra la ventana de lista de reproducción.

evPlayVCD

  Intenta abrir el disco en la unidad de CD-ROM dada.

evPlayDVD

  Intenta abrir el disco en la unidad de DVD-ROM dada.

evLoadURL

  Muestra la ventana de diálogo para URL.

evPlaySwitchToPause

  Lo contrario a `evPauseSwitchToPlay`. Este mensaje inicia la reproducción y la imagen para el botón `evPauseSwitchToPlay` es mostrada (para indicar que el botón puede ser pulsado de nuevo para volver a pausar la reproducción).

evPauseSwitchToPlay

  Forma un cambio junto con `evPlaySwitchToPause`. Puede ser usado para tener un botón normal de play/pausa. Ambos mensajes deben ser asignados a botones que se muestren exactamente en la misma posición en la ventana. Este mensaje pausa la reproducción y la imagen para el botón `evPlaySwitchToPause` es mostrada (para indicar que el botón puede ser pulsado de nuevo para continuar la reproducción).

Búsqueda:

evBackward10sec

  Busca 10 segundos hacia atrás.

evBackward1min

  Busca 1 minuto hacia atrás.

evBackward10min

  Busca 10 minutos hacia atrás.

evForward10sec

  Busca 10 segundos hacia adelante.

evForward1min

  Busca 1 minuto hacia adelante.

evForward10min

  Busca 10 minutos hacia adelante.

evSetMoviePosition

  Busca la posición (puede ser usado por un potmetro; el valor relativo (0-100%) del potmetro será el que se use).

Control de video:

evHalfSize

evDoubleSize

  Establece doble tamaño para la ventana de la película.

evFullScreen

  Cambia el modo pantalla completa activado/desactivado.

evNormalSize

  Establece la ventana de video a tu tamaño normal

evSetAspect

Control de audio:

evDecVolume

  Decrementa el volumen.

evIncVolume

  Incrementa el volumen.

evSetVolume

  Establece el volumen (puede ser usado por un potmetro; el valor relativo (0-100%) del potmetro será el que se use).

evMute

  Silencia/activa el sonido.

evSetBalance

  Establece el balance (puede ser usado por un potmetro; el valor relativo (0-100%) del potmetro será el que se use).

evEqualizer

  Activa/desactiva el ecualizador.

Miscelánea:

evAbout

  Abre la ventana de acerca de.

evPreferences

  Abre la ventana de preferencias.

evSkinBrowser

  Abre la ventana del navegador de skins.

evIconify

  Iconifica la ventana.

evExit

  Sale del programa.