Home

Manual Diseño y programación skins enigma2

Estado
Cerrado para nuevas respuestas.

JR

OpenSPA Team
Miembro del equipo
Admin OpenSPA
10 Ago 2007
23.255
15.928
0
En pleno Delta
Bueno, por petición más o menos popular, más menos que más, abro este hilo para ir explicando cómo se hace un skin en enigma2.

No habrá examen final ni diploma, pero al menos podréis tener la satisfacción de haber hecho vosotros mismos un skin y haberlo compartido con todos nosotros.

Este hilo quedará cerrado, solo será para el manual o cursillo, ya que lo iré haciendo por etapas, tal y como el tiempo me lo permita. Abriré otro para ir hablando del tema entre todos así éste quedará limpio.
 

JR

OpenSPA Team
Miembro del equipo
Admin OpenSPA
10 Ago 2007
23.255
15.928
0
En pleno Delta
REQUISITOS INICIALES

1. Hardware : PC con windows
2. Hardware : Receptor enigma2, preferiblemente 4K, que arranca más rápido.
3. Software : OpenSkin-Designer, última versión en https://github.com/Humaxx/OpenSkin-Designer
4. Software : Notepad++ (no es imprescindible, se usa para modificaciones rápidas sin interfaz gráfica)
5. Software : WinSCP o cualquier cliente FTP
 

JR

OpenSPA Team
Miembro del equipo
Admin OpenSPA
10 Ago 2007
23.255
15.928
0
En pleno Delta
CONSIDERACIONES INICIALES

En enigma2 los skins se pueden encontrar en /usr/share/enigma2/ y tienen principalmente los siguientes archivos y carpetas :

1. skin.xml, con todo el código de cada pantalla.
2. prev.png : es el logo del skin y que aparecerá en la pantalla de selecció de skin.
3. picon_default.png : es el picon que saldrá en el skin en caso de que no tengamos picons descargados.
4. skin.info : archivo de texto donde pondremos la información del skin. Se ponen cosas como el nombre del skin, el autor, la versión o información del copyright.
4. Carpeta window : incluye los png que definirán las pantallas estándar cuando una screen no esté definida en el skin.
5. Carpeta fonts : incluye las fuentes que se usarán en el skin y no están definidas en enigma2.
6. Carpetas icons y buttons : incluyen los png de iconos y botones. El nombre puede cambiarse por el que queramos, pero lo normal es que tengan ese nombre. Veremos que el nombre de la carpeta puede definirse en el skin.xml.

Esta es la estructura principal de la carpeta del skin, pero hay más carpetas y archivos que cada skinner incluye a su criterio.
 

JR

OpenSPA Team
Miembro del equipo
Admin OpenSPA
10 Ago 2007
23.255
15.928
0
En pleno Delta
COPYRIGHT

Dentro del skin.info o dentro del mismo skin.xml podemos encontrar información sobre la licencia o copyright que tiene el skin, es decir, si el autor permite distribuirlo, modificarlo o usarlo.

Un ejemplo sería :

Código:
  <!-- You can modify and redistribute it as long as you keep this License and the original author for the skin and all of your modifications -->

o

Código:
Copyright Notice:
All material in this skin I have make , not covered by other copyright and not explicitly marked as public domain is copyright © openSPA

En resumen, que si vais a modificar un skin para adaptarlo a una imagen por ejemplo, primero se tiene que respetar el deseo del creador, y aunque ponga que es un skin libre, siempre debéis nombrar al autor.
 
Última edición:

JR

OpenSPA Team
Miembro del equipo
Admin OpenSPA
10 Ago 2007
23.255
15.928
0
En pleno Delta
NOMENCLATURA

Vamos a listar las palabras usadas cuando hablamos de skins.

skin : es la interfaz gráfica con la que se muestra en pantalla el código de un plugin o de un sistema operativo como enigma2.

screen : es como llamamos a cada pantalla que se define en un skin. Cada vez que interactuamos con el mando y nos cambia la pantalla, es una screen diferente. Las screens pueden estar definidas en el pyo del plugin o de enigma2, en el skin_default.xml de /usr/share/enigma2/ o en el mismo skin. Si una screen está repetida en dos sitios, siempre tiene preferencia la que esté definida en nuestro skin.xml.

font : fuente o tipo de letra con la que representaremos el texto en pantalla. En enigma2 tenemos unas cuantas fuentes definidas pero si queremos alguna diferente tenemos que ponerla en nuestro skin, carpeta fonts. Normalmente se pone en formato ttf u otf, y por internet se pueden encontrar miles de ellas.

Log o debug : son las líneas de código que se van ejecutando y que nos da información enigma2. Con el log podremos saber los nombres de cada screen por las que vayamos pasando, más adelante sabremos como.

Resolución de skin : lo más normal en enigma2 es encontrarnos skins normales, diríamos los que son HD o 720, y skins FullHD con una resolución de 1920x1080 ya veces también llamados skins 1080. La relación entre uno y otro, a la hora de escribir el código, es que los tamaños en los skins 1080 se multiplican por 1,5. La posición de los objetos también se multiplica por 1,5 y aunque no queden perfectamente ajustados, solo requieren pequeñas modificaciones.

Converter : una especie de plugin escrito en python que nos dará información de e2 para ponerla en el skin. Por ejemplo, la fecha y hora del sistema, los iconos meteorológicos, el uso de CPU o RAM, etc.

Renderer : programa escrito en python que define la forma como se mostrará un widget en pantalla

Iremos completando este pequeño diccionario a medida que vayan saliendo nuevos conceptos.

No os preocupéis si no entendéis los conceptos Converter y renderer, ya iremos viéndolos. Además no es necesario programar nada, tan solo saber que información sacan y definirlos en el skin.
 
Última edición:

JR

OpenSPA Team
Miembro del equipo
Admin OpenSPA
10 Ago 2007
23.255
15.928
0
En pleno Delta
PARTES DE UN SKIN

Un skin debe empezar siempre con <skin> y acabar con </skin>

Cualquier parte del código que no queréis que se ejecute, tipo la información de copyright o comentarios vuestros, lo podéis poner empezando por <!-- y acabando por -->. Es decir si ponéis en el skin una línea como esta :

<!--Hola soy Paco-->

el sistema pasará de ella.

Aunque un skin puede llevar otros elementos que más adelante nombraremos estas son las partes que básicamente componen un skin.

<output id="0">
Aquí le diremos que resolución tiene nuestro skin, normalmente será xres=1920 o 1280 e yres=1080 o 720.

La estructura usada es un sola línea :

<resolution xres="1920" yres="1080" bpp="32"/>

<colors>
Aquí definiremos todos los colores que vamos a usar en el skin. Si dentro de una screen se usa algún color no definido aquí, el skin petará.

Dónde definimos los colores? Lo más habitual es definirlos en el texto y fondos. Nos adentraremos más al hablar de las screens.

La estructura usada es la siguiente :

<color name="nombre_color" value="#xxyyyyyy"/>

Dónde :
  • nombre_color será el nombre que le pondréis vosotros al color para luego llamarlo en cualquier screen
  • xx será el valor de la transparencia que tendrá ese color (00 será opaco y 99 será transparente total)
  • yyyyyy será el código del color en hexadecimal. Podéis ver más sobre código colores en https://www.color-hex.com/
Un truquillo para saber el código de un color es abrir Photoshop y cuando vas a la paleta de colores y seleccionas un color de da el código hex.

Ejemplo :

Código:
<color name="colorJR10" value="#35001123"/>

O sea, el color #001123

IMG_20200729_161341.jpg
con una transparencia de 35, en el skin lo llamaremos colorJR10.

<fonts>
Aquí se definen las fuentes o tipos de letra que llevarán los textos en cada screen.

Mucho cuidado con este apartado, ya que si no se definen bien o hay algún problema con una fuente no arrancará enigma2. Aún así tendréis conexión FTP y podréis arreglar el desaguisado.

La estructura es la siguiente :

<font filename="ruta+nombre_archivo" name="nombre_fuente" scale="xxx"/>

Dónde :
  • Ruta+nombre_archivo es como bien indica la ruta dónde está el archivo de la fuente y el nombre de dicho archivo. Ejemplo : /usr/share/enigma2/fonts/opensans.ttf. Las fuentes preinstaladas en enigma2 se encuentran en /usr/share/enigma2/fonts y las fuentes nuevas que vayáis a usar se meten en una carpeta fonts d'entre de la carpeta de vuestro skin.
  • Nombre_fuente es el nombre con el que llamaréis a la fuente dentro de una screen.
  • xxx es el factor de escala que se aplicará al tamaño que definamos en cada screen. 100 sería la medida que tiene por defecto la fuente. Si queremos bajar el tamaño pondremos un valor inferior a 100 y si queremos incrementarlo pondremos un valor superior a 100.
Algunas veces, sobretodo en skins 1080, os encontraréis con una línea como ésta :

<alias name="ServiceInfo" font="RegularHD" size="23" height="50"/>

Estas líneas que empiezan por alias definen las fuentes de algunas listas que lleva enigma2. Entraremos más en profundidad más adelante.

<subtitles>
Poco a decir en esta parte. No la he tocado nunca, pero se supone que actúas sobre las características de los subtítulos.

La estructura es :

<sub name="Subtitle_TTX" font="RegularHD;30" shadowColor="#40101010" shadowOffset="3,3"/>

Y como veis se define el nombre, la fuente usada y como opcional los shadowColor y ShadowOffset que son dos atributos de color para sombrear el contorno del texto.

<windowstyle type="skinned" id="0">
Aquí se definen algunas características comunes para el skin de lo que aparece en la pantalla de la TV.

Si esas características están definidas en la screen les dará prioridad pero si no están definidas pillará los datos de este apartado.

Ejemplo :

Código:
<color name="Background" color="colorJR3"/

Aquí le estamos diciendo que el atributo Background (fondo) de un cuadro de texto, label, lista, etc. tendrá el valor colorJR3, a no ser que se indique otro valor dentro de la screen.

Se definen varios atributos, entre ellos :
  • Fuente de los títulos. Ejemplo :
<title offset="x,y" font="nombre_fuente; z" />

donde offset es la posición del título en las pantallas por defecto, y font las características de la fuente.

Otras opciones :
  • name="Background"
  • name="LabelForeground"
  • name="ListboxBackground"
  • name="ListboxForeground"
  • name="ListboxSelectedBackground"
  • name="ListboxSelectedForeground"
  • name="ListboxMarkedBackground"
  • name="ListboxMarkedForeground"
  • name="ListboxMarkedAndSelectedBackground"
  • name="ListboxMarkedAndSelectedForeground"
  • name="WindowTitleForeground"
  • name="WindowTitleBackground"
También dentro de windowstyle tenemos esto :

<borderset name="bsWindow">

aquí definimos todos los atributos de los bordes de las screens que no salen en el skin principal o que definimos con el atributo flags="wfBorder" (o simplemente no definimos el atributo, ya que por defecto las screens tienen wfBorder como definido. Más que definir, lo que hacemos es indicarle la ruta del png que hemos diseñado para dichos bordes.

Ejemplo :

<pixmap pos="bpTopLeft" filename="BlackSPA/window/dltesq.png" />
<pixmap pos="bpTop" filename="BlackSPA/window/dlt.png" />
<pixmap pos="bpTopRight" filename="BlackSPA/window/dltdrt.png" />
<pixmap pos="bpLeft" filename="BlackSPA/window/esq.png" />
<pixmap pos="bpRight" filename="BlackSPA/window/drt.png" />
<pixmap pos="bpBottomLeft" filename="BlackSPA/window/bxesq.png" />
<pixmap pos="bpBottom" filename="BlackSPA/window/bx.png" />
<pixmap pos="bpBottomRight" filename="BlackSPA/window/bxdrt.png"

donde :

bpTopLeft es la esquina superior izquierda.
bpTop es la parte superior central.
bpTopRight es la esquina superior derecha.
bpLeft es la parte central izquierda
bpRight es la parte cental derecha.
bpBottomLeft es la esquina inferior izquierda.
bpBottom es la parte inferior cental.
bpBottomRight es la esquina inferior derecha.

<windowstyle type="skinned" id="1">
Aquí se define algunas características comunes del skin del display LCD.

<parameters>
En algunos skins veréis también el apartado parameters, que se utilizan poco o nada en skins 720p, pero son casi obligatorios en skins 1080p. Aquí se definen parámetros de algunas listas o pantallas que no se pueden definir dentro de la screen.

Y a partir de aquí ya debemos definir las screens que van a componer el skin.
 
Última edición:

JR

OpenSPA Team
Miembro del equipo
Admin OpenSPA
10 Ago 2007
23.255
15.928
0
En pleno Delta
COMPOSICIÓN DE UNA SCREEN

Cada screen puede tener más o menos líneas dependiendo de lo que esté definido en el py que la ejecuta. También podemos llenarla nosotros de pixmaps o labels como ahora veremos.

Como os dije anteriormente, mediante el log o debug de enigma2 podemos saber el nombre de las screens y consultar en el py correspondiente o en otro skin que widgets hay definidos. Luego entramos más en profundidad.

En una la primera línea de la screen definiremos los siguientes atributos :

<screen name="NewScreen" title="MyScreen" position="0, 0" flags="wfNoBorders" transparent="0" backgroundColor="transparent" size="1920, 1080" />

name es el nombre de la screen y debéis poner el nombre con el que enigma2 ejecuta la screen.
position es la posición en pantalla con coordenadas x y.
flags es el atributo donde definimos si la screen llevará bordes definidos en la cabecera (wfBorders) o se definirá sin bordes (wfNoBorders).
transparent, puede ser 0 (ópaco) o 1 (transparente)
backgroundColor es el color del fondo de la screen.
size es el tamaño que tendrá la screen.
title es el título de la screen, podéis ponerlo o dejarlo vacío. Si no se pone saldrá el título que tenga definida la screen en el py correspondiente.

A partir de esa primera línea empezaremos a definir el contenido de la screen. A grandes rasgos, las screens están compuestas por :
  • eLabel, que son como cajetines rectangulares o cuadrados que normalmente se usan para fondos o para poner texto. Siempre se recomienda usar eLabel en lugar de ePixmap para la fluidez del skin, aunque el eLabel sea muy simple. El texto que pongamos aparecerá tal cual en pantalla, si lo ponemos en inglés y esa misma cadena de texto está incluida en el archivo de traducciones, saldrá traducido, sino se quedará tal cual lo hemos puesto.
  • ePixmap, es cualquier imagen, normalmente en formato png que queramos poner en el skin, ya sean iconos, logos, fondos, etc.
  • widget, es la parte importante de la screen, donde se definen todos los campos programados en los py, que pueden ser desde listas hasta la fecha y hora actuales o el tiempo meteorológico.
 
Última edición:

JR

OpenSPA Team
Miembro del equipo
Admin OpenSPA
10 Ago 2007
23.255
15.928
0
En pleno Delta
OpenSkin Designer

Para facilitar el diseño de los skins, en Windows tenemos el OpenSkin Designer, software de código libre y podréis encontrar en el git de humaxx.

https://github.com/Humaxx/OpenSkin-Designer/releases

En el momento de redacción de este manual, la última versión publicada es la 3.2.5.0

Para usarlo, lo descargamos, descomprimimos en nuestro disco duro (no es instalable, es portable) y ejecutamos el archivo OpenSkinDesigner.exe

1603295423926.png
Nos aparecerá la interfaz del programa.

1603295562210.png

Ahora tenemos que abrir el skin que queramos modificar o el skin sobre el que queremos basarnos para hacer el nuestro. Aunque el skin que vayáis a hacer desde 0 sea diferente a cualquier otro, siempre es mejor aprovechar un skin ya hecho para ir modificando screens, colores, fuentes, etc.

Antes de abrir un skin, es necesario que esté situado en la carpeta "skins" ya que el OpenSkin Designer leerá el skin.xml de cada carpeta de skin. Por ejemplo :

1603296046847.png

Yo tengo los skins BlackSPA y xtra, y al abrir archivo en el OpenSkin Designer :

1603296124027.png

1603296251996.png

Vemos que el interfaz se divide en 3 partes, más los menús más la barra de herramientas.

En la barra de herramientas tenemos los iconos para abrir o guardar skin, deshacer o rehacer, eliminar, y todos los botones de crear o añadir. A la izquierda tenemos Añadir screen, Añadir panel (facilita el desarrollo de un skin pero no es imprescindible) o Editar root (te envía a la pantalla de texto para editar las partes de cabecera de un skin, como son los colores, fuentes, etc. A la derecha tenemos los botones que usaremos dentro de una screen, y son Añadir widget, Añadir Label o Añadir Pixmap.

CONTINUARÁ
 
Estado
Cerrado para nuevas respuestas.