Gnome Dia: creando un set de iconos personalizado para diagramar

Preámbulo

Gnome Dia, es una aplicación de diseño, orientada a esquemas y diagramas, es una de las herramientas que a primera vista parecen “sencillas” pero llega a ser tan poderosa que incluso tiene interpretadores de diagramas ER a bases de datos y diagramas de objetos a código funcional en C++ o PHP, Python.

Como vemos la descripción de la Wikipedia, es un “sustituto” de Microsoft Visio u otros modeladores de diagramas y esquemas y en muchos casos sobrepasa en las capacidades a otros diagramadores comerciales. Es parte del proyecto Gnome.

Los Set de iconos en Gnome Dia

Dia tiene una enorme cantidad de iconos para diversas actividades, desde redes, pasando por ingeniería eléctrica o electrónica, hasta diagramas de flujo o Entidad-Relación, se pueden encontrar páginas para descargar otros sets, etc.

Gnome tiene muy buenos set de íconos, aunque algunos de ellos son tan simplistas, que contrastan con los hechos por herramientas comerciales como Visio, pero, ¿podemos cambiar eso?.

En la mayoría de los casos, la ingeniería reversa, las capacidades de generar código y demás, quedan “opacadas” porque la gente en busca de “eyecandy” se encuentran con unos iconos horrendos para representar las cosas por lo que terminan usando herramientas o propietarias o diseñandolos gráficamente en Inkscape.

Pero eso se acabó, aprenderemos a hacer nuestros propios íconos!

¿Cómo son los Set de Iconos en Gnome Dia?

Cada ícono en DIA es una SHAPE que realmente es una figura SVG (versión 1.0, importante decir esto) diseñable en Inkscape, con algunos cambios como por ejemplo:

  • Cada SHAPE es un XML que “contiene” dentro al SVG
  • Cada SHAPE declara su nombre, su icono (para representarlo en la paleta de herramientas) y sus puntos de conexión (por donde las líneas se unirán al objeto para unirse a otros objetos).

Todas las SHAPES son agrupadas en una “sheet” (hoja) que representa el set completo de shapes (iconos) y le dice a DIA cuales debe cargar. el archivo SHEET también es un XML bastante simple.

¿Como se crea el archivo SHEET?

Cada SHEET es un archivo XML con un namespace específico (de Dia, el dia-sheet-ns) y posee la siguiente estructura:

<?xml version="1.0" encoding="UTF-8"?>
<sheet xmlns="http://www.lysator.liu.se/~alla/dia/dia-sheet-ns">
<name>Pheno-Icons</name>
<created_by>Jesus Lara - jesuslarag@gmail.com</created_by>
<description>Collection of SVG icons convert to Gnome Dia</description>
<contents>

Donde:

NAME: es el nombre que presentará nuestro set de iconos dentro de la paleta de herramientas de DIA

DESCRIPTION: Contiene una descripción informativa del set

CONTENTS: Contendrá la definición de cada icono

Los íconos se definen de la siguiente manera:

<object name="internet">
<description>Internet Cloud</description>
</object>

Donde:

name: Es el nombre del ícono (como se llama el archivo en el filesystem, la regla es que se llame {name}.shape para el icono y {name}.png al botón que lo representará en la barra de herramientas.

El archivo sheet que generemos debe estar guardado en el directorio de sheets de DIA, esto es en:

/usr/share/dia/sheets

¿Cómo son las SHAPES en DIA?

Una SHAPE representa un ícono, es un XML con “al menos” dos namespaces, uno representa la forma SVG (imagen) y otro es la metadata informativa para DIA. Se guardan en Linux con extensión “.shape” y deben ir en una carpeta llamada “exactamente igual” que el nombre del set de iconos (sheet) en la siguiente ruta:

/usr/share/dia/shapes/{nombre del sheet}/

El XML que lo representa tiene la siguiente forma:

<?xml version="1.0"?>
<shape xmlns="http://www.daa.com.au/~james/dia-shape-ns" xmlns:svg="http://www.w3.org/2000/svg" xmlns:math="http://exslt.org/math" xmlns:dia="http://www.daa.com.au/~james/dia-shape-ns" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
  <name>Printer</name>
  <icon>Printer</icon>
  <connections>
	<point x="0" y="0"/>
	<point x="0" y="21"/>
	<point x="41" y="41"/>
	<point x="20.5" y="21" main="yes"/>
  </connections>
  <textbox align="center" resize="no" x1="105.20242" y1="619.06097" x2="107.20242" y2="621.06097"/>
  <aspectratio type="fixed"/>
  <svg:svg version="1.1" width="100.603" height="118.54186" id="svg2"></svg:svg>
</shape> 

Donde:

<shape>: representa el nodo raíz del XML de la forma

<name>: representa el nombre del ícono, como está en el sistema operativo (name.shape)

<icon>: representa el ícono (formato png, 22×22 pixeles) que mostrará esta shape en la barra de herramientas

<connections>: representa los nodos (x,y) de cada “punto” donde esta shape se conectará a otras vía flechas, líneas u otros conectores, por defecto es en el centro, aunque la coordenada (0,0) representa la esquina superior izquierda del ícono.

<textbox>: la shape puede tener una (o más) área de texto donde escribir información, esa área de texto posee alineación de texto y posición X1, Y1 (parte superior) y X2, Y2 (parte inferior).

<aspect_ratio>: significa si el ícono pierde su proporción al ser escalado, si aspect_ratio = fixed, este no perderá su proporción (alto y ancho), si aspect_ratio = flow (o simplemente no se declara) entonces se podrá cambiar el alto y ancho a voluntad.

<svg:svg>: es el nodo raíz del gráfico SVG, nótese bien que viene en la forma de nodo:namespace, como sucede cuándo mezclas más de una sintáxis XML.

Como nota informativa, el tamaño “por defecto” de una shape, si no se especifica en SVG, es en píxeles, aunque podría usar cualquiera de las siguientes unidades de medida:

  • centímentros (cm)
  • Puntos (pt)
  • Pulgadas (inch)
  • Pixeles (px)

Ideas para un buen ícono para DIA

NO NECESARIAMENTE se puede llevar directamente un ícono de SVG (Inkscape, por ejemplo) a DIA, DIA solo reconoce una parte del sub-set de SVG 1.0; por lo que no todas las formas son “renderizadas” en DIA, esto como parte de simplificar tanto el tamaño como el renderizado de diagramas complejos, entre algunos consejos se cuenta:

  • Cuando creen un icono en Inkscape apagar la opcion:

Archivo > Preferencias de Inkscape > Salida SVG > usar Colores por nombre; Esto es porque Dia no reconoce colores por nombre (ejemplo: black) sino unicamente por valor hexa (#000000)

  • No debe tener capas (los “grupos” o layers en DIA no son reconocidos)
  • No usar gradientes en las formas, ni para los bordes ni para el relleno, si necesita un gradiente “emúlelo” con muchas formas separadas de colores en degradado.
  • nunca usar “STROKE” o bordeado de una figura, si necesitas un borde, usa otra forma mas grande, o rectangulos rellenos para simular líneas.
  • NO USAR LINEAS, si requiere líneas, use cuadrados (paths) rellenos muy finos.
  • No usar cuadrados con bordes redondeados (conviertalos a trayectos)
  • Convierte todas las formas a trayectos (sobre todo los circulos y cuadrados redondeados)
  • Si hay grupos de formas, desagruparlas, DIA no trabaja bien con grupos
  • Simplifique los vectores, aunque queremos “vistosidad” recordemos que a final de cuentas es un diagrama “serio” y DIA tardaría muchísimo en renderizar SVG muy complejos.

Si ya tenemos esto claro, podemos hacer un ícono.

Creando un ícono para DIA

  1. Abrimos Inkscape
  2. Creamos un documento nuevo … > No layers (sin capas)
  3. En Archivo > Propiedades del documento: redimensione el ícono para que sea “al menos” 50×55 pixeles, más grande es innecesario para DIA (recuerde, es un SVG, NUNCA perderá definición por muy grande o pequeño que lo pongan).
  4. Creen el ícono como indican los consejos arriba
  5. Tomen alguna de las figuras, y en el menú OBJETO > Propiedades del Objeto … le colocarán un “ID”, esta figura se llamará “nombre”, en etiqueta pondrán “#nombre” y en title pondrán el nombre que quieren que lleve este ícono.
  6. Este nombre, deberá ser único en TODO DIA así que preferentemente sea de la forma “set de iconos” – “nombre del icono”, para asi evitar confusión.
  7. En lo que hayan terminado se verá así:

Guarden y cierren el Inkscape.

Convirtiendo este SVG a Shape

Inicialmente, debemos “convertir” el SVG “de Inkscape” en un SVG “plano” sin más etiquetas XML que las oficiales, aunque en el propio InkScape podemos decir en “Archivo > Guardar como … > SVG plano“, yo lo he hecho por la consola:

inkscape printer.svg --export-plain-svg=printer1.svg

Esto genera a partir de printer.svg un archivo llamado printer1.svg que es una versión “plain” del SVG.

No he encontrado una “forma” de convertir a SVG a DIA, la única que encontré es de Thiago Ribeiro de Gnome, en la cual habla que “se hizo” un script en PHP que transforma (me imagino usando DOM) el archivo SVG a SHAPE, pero dicho script no lo he encontrado en ningún lado.

Yo he usado XSLT (Xtensible Style Sheet Transformations), una forma de transformar archivos XML de un formato a otro (incluso a otros formatos no-XML), con XSLT transformo el SVG en un SHAPE y leo la capa “#nombre” para darle nombre al ícono, es automática y simplemente pide el nombre del archivo.

Para hacer la transformación en consola, he usado XSLTPROC, que es un procesador XSLT 1.0 que viene nativo en todas las distribuciones de GNU/Linux.

Se ejecuta así:

xsltproc -o {nombre icono}.shape svg2dia.xslt {archivo.svg}

La hoja de transformación XSLT pueden descargarla de acá SVG2DIA.XSLT y es GPL v.3

TODO:

  • La hoja debería computar el alto, ancho y centro del ícono, para así computar “al vuelo” los conectores
  • Debería computar “de alguna parte” la posición del textbox, para personalizarlo de manera sencilla

Posteriormente, tenemos que crear el ícono PNG (22×22) a partir del SVG, eso también es fácil usando inkscape en la consola:

inkscape -h 22 -w 22 --export-png=printer.png printer.svg

Esto genera un ícono PNG de 22px por 22px a partir del archivo printer.svg

Cuándo ambos archivos (el .shape y el .png) están listos, los copiamos en el directorio de shapes de nuestro set de íconos (o lo agregamos a un set existente editando el archivo .sheet), agregamos la shape al archivo .sheet y verificamos que funciona en Gnome Dia.

Gnome Dia:

Simplemente abrimos Dia (Gráficos > editor de Diagramas), si nuestro set de iconos está bien y fué reconocido, lo encontraremos en la lista:

Desplegamos la lista, lo buscamos y veremos todos los iconos creados en la barra de herramientas, ya solo nos queda probar los íconos y hacerlos interactuar con otros íconos en un diagrama, he acá un ejemplo:

Automatizando el proceso:

Si ya tenemos todos los íconos SVG para crear las shapes, en el archivo comprimido encontrarán un script bash “muy simple” que simplemente toma todos los SVG de un directorio, los convierte a shapes y genera el icono PNG respectivo.

Así, solamente faltaría que te creara la carpeta del set de iconos y te generara el archivo .sheet!

Pero pronto, pronto!

Conclusiones

Podemos ampliar las capacidades de Gnome Dia simplemente con agregar nuevos íconos para nuestras necesidades de diagramación, también recordemos que Dia tiene módulos que se le pueden adaptar (en python) como por ejemplo dia2code, que genera código (perl, Python, PHP, C++) a partir de la definición de objetos, asi que las capacidades de DIA son ilimitadas!.

Disfruten su nuevo set de íconos!

Acerca de phenobarbital

http://about.me/phenobarbital

Publicado el 14 septiembre 2010 en Blogeando!, Cultura Libre, La nota del día, Linux, PlanetaLinux, Software Libre, trucos de la abuela, Weyu y etiquetado en , , , , , , , , . Guarda el enlace permanente. 9 comentarios.

  1. Un detalle importante es que tambien se pueden hacer los iconos de Dia en Dia, solo haces un diagrama y lo exportas como .shape

    • Si, al final de cuentas DIA es un editor SVG, por lo que puedes importar un SVG (que esté bien diseñado) y luego lo exportas como .shape, es un proceso algo más “manual” y uno a uno que el XSLT.

  2. Es mucho más facil que eso, haces un diagrama y usas Archivo>Exportar y le das extensión .shape, el archivo es un shape ya listo, de hecho hasta te genera el icon .png y demás! No hay manera más fácil de hacer un icon.

    • Lo que pasa es que como te digo, en SVG Dia no es que aguanta todo lo que abras, tendrías que usar su propio editor, puesto que me he dado cuenta que desde Inkscape falla el diseño de muchas cosas (gradientes, formas complejas, grupos, layers, etc), yo que me puse a hacer iconitos de servidores con el tux resaltado no es que estaba muy facil hacerlo en Dia … y si, me dí cuenta que si lo guardo como .shape automáticamente genera el .png iconico …

  3. Otra cosa que aprendí fue que puedes tener librerias de shapes del usuario, solo tienes que ponerlas en $HOME/.dia/shapes y $HOME/.dia/sheets.

  4. Me parece que Dia no es parte como tal de Gnome ya que está escrito en GTK+ y corre incluso en Windows.

    Que el proyecto esté alojado en http://live.gnome.org/Dia no lo hace parte de Gnome. Y está alojado aquí porque existe una versión para Gnome, que en el caso de Debian se lama dia-gnome.

    • El hecho de que tu puedas compilar una aplicación GTK+ para que corra en Windows no la hace “no gnome” … casi todas corren en Windows de hecho.
      Dia fué creando en 1998 por Alexander Larsson de la gente de Red Hat y movió para Gnome *casi* al principio del proyecto.
      Esta es la página oficial de Dia desde siempre > http://projects.gnome.org/dia/

      Dia es mantenido exclusivamente por el Gnome Dia Project Developers.

      Si, es un proyecto de Gnome🙂

  5. Saludos!
    El SVG2DIA.XSLT me dio un error: svg2dia.xslt:4: parser error : XML declaration allowed only at the start of the document

    por lo que simplemente cambie los comentario luego del <?xml….
    y todo funciono bien.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: