Picapy minimalista gracias a css

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.

0013_picapy.png

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.

5 comentarios en “Picapy minimalista gracias a css

  1. Javier A. hace 9 años

    Hola. Descargué hace poco picapy y me pareció sorprendentemente sencilla y rápida pero tengo una duda: ¿es posible con picapy descargar los albumes que comparte contigo otro usuario/a de picasa? Gracias y, de nuevo, enhorabuena.

    1. El atareao hace 9 años

      Hola jalgi,

      Lo cielo es que no lo he probado nunca. No tengo ni idea pero voy a probarlo. Aunque en teoría si que se debe poder…

      Gracias

      1. Javier A. hace 9 años

        Hola, de nuevo.

        Si así fuera, ¿podrías explicarlo?. Gracias.

  2. Marcos L. Garrido hace 9 años

    ERROR:root:Could not find any typelib for GnomeKeyring
    Traceback (most recent call last):
    File «/usr/bin/picapy», line 37, in
    from picapy import Picapy
    File «/usr/share/picapy/picapy.py», line 51, in
    from preferences import Preferences
    File «/usr/share/picapy/preferences.py», line 33, in
    from gkeyring import MyGnomeKeyring, NoPasswordFound, GnomeKeyringLocked
    File «/usr/share/picapy/gkeyring.py», line 27, in
    from gi.repository import GnomeKeyring, GLib
    ImportError: cannot import name GnomeKeyring

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *