Introducción

Para aquellos que no conozcais Picapy, indicaros, que es una sencilla aplicación que permite gestionar vuestros álbumes de Google+ y Picasa Web desde el escritorio de Ubuntu, de una forma muy, pero que muy sencilla, rápida e intuitiva. En esta nueva versión, solo he modificado la apariencia de Picapy, para darle un toque mas minimalista, a la vez que integrado en el entorno de Ubuntu.

Hace algún tiempo que quería meterle mano al uso de CSS con Gtk+, con el fin de darle un toque mas minimalista a las aplicaciones. Me refiero al aspecto que tiene uPdf, pero utilizando únicamente css, sin necesidad de realizar grandes artificios. Y lo cierto, es que la combinación de css con Gtk+, da un resultado mas que interesante, permitiendo ademas la posibilidad de animaciones.

Picapy

Como he comentado en la introducción esta versión no tiene ningún cambio relevante sobre versiones anteriores, nada mas que el aspecto referente a CSS y Gtk+, que le da el toque minimalista. Si quieres conocer mas sobre el funcionamiento de Picapy, te recomiendo veas algunas de las entradas anteriores a esta.

Instalación

Si quieres instalar Picapy en tu equipo, indicar que está versión está disponible para Quantal y Raring, pero existen versiones para Precise, Oneiric, Maverick, Natty y Lucid. Aunque para estas ultimas versiones no está muy actualizado, debido a las dependencias que tiene. Dado que Picapy no está disponible desde el Centro de Software de Ubuntu, y mientras que preparo una versión para que la acepten, puedes instalar Picapy en tu equipo, añadiendo el siguiente repositorio, y luego actualizas e instalas:

sudo add-apt-repository ppa:atareao/atareao && sudo apt-get update && sudo apt-get install picapy

Esta versión no necesita guardar ninguna contraseña, puesto que lo haces vía Web, permaneciendo la cuenta lo mas segura posible.

Gtk+ y css

En este artículo, me quiero centrar básicamente en el asunto de Gtk+ y CSS, puesto que como he indicado en la introducción, se trata de una manera, relativamente sencilla de darle un toque totalmente personalizado a la aplicación. Para poder definir y personalizar una aplicación con css, tendremos que utilizar algo similar a lo que ves a continuación:

style_provider = Gtk.CssProvider()
		css = """
			#MyWindow{
				background-color: rgba(60, 60, 60, 255);
			}
			#minimal_button {
				border-image: none;
				background-image: none;
				background-color: rgba(60, 60, 60, 255);				
				border-radius: 0px;
			}
			#minimal_button:hover {
				transition: 600ms linear;
				background-image: none;
				border-image: none;
				background-color: rgba(150, 150, 150, 255);
			}
		"""
		style_provider.load_from_data(css.encode('UTF-8'))
		Gtk.StyleContext.add_provider_for_screen(
			Gdk.Screen.get_default(), 
			style_provider,     
			Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
		)

Evidentemente, lo que está definido como «css» es totalmente personalizable, pero quiero analizar, un par de detalles. Esto lo estoy empleando en subclase de Gtk.Button, MinimalButton, que he definido:

class MinimalButton(Gtk.Button):
	def __init__(self, file_image_active, file_image_inactive):
		Gtk.Button.__init__(self)
		self.set_name('minimal_button')
		self.image_active = Gtk.Image.new_from_file(os.path.join(comun.IMGDIR,file_image_active+'.svg'))
		self.image_inactive = Gtk.Image.new_from_file(os.path.join(comun.IMGDIR,file_image_inactive+'.svg'))
		self.set_sensitive(True)

	def set_sensitive(self,sensitive):
		Gtk.Button.set_sensitive(self,sensitive)
		if sensitive:
			self.set_image(self.image_active)
		else:
			self.set_image(self.image_inactive)

Para evitar la definición de botón se aplique a todos los GtkButton, lo que hago es difinir un nombre:

self.set_name('minimal_button')

Que coincidirá con el estilo que definimos en el css. Si se lo queremos aplicar a todos los Gtk.Button, lo que haremos será definir «.button» o «GtkButton», y lo aplicará a todos los elementos.

El siguiente punto, para conseguir un botón minimalista, es eliminar todos los vestigios de los botones de Gtk+, y de ahí que aparezcan las dos siguientes líneas de código:

border-image: none;
background-image: none;

Por último, para animar el asunto, cuando pongamos nuestro ratón encima del botón, se producirá una animación, que consiste en cambiar el color del botón de un gris oscuro a un gris claro, pero no de golpe, sino con una transición de 600 ms, definidos por la línea de código:

transition: 600ms linear;

Conclusiones

En fin, con esto te puedes hacer una idea de lo sencillo que es personalizar las herramientas de Gtk+, con tan solo utilizar css, que es realmente sencillo de utilizar. Tengo que indicar que no todas las opciones de css se pueden emplear en Gtk+, pero si muchas de ellas.