Hasta el momento, has estado trabajando con texto, tanto, para mostrar texto, como para editarlo. Sin embargo, teniendo en cuenta el dicho una imagen vale mas que mil palabras, ha llegado el momento, de enfrentarte con las imágenes. Simplemente, se trata de conseguir que tu aplicación muestre imágenes. Pero, esto puede ser una opción realmente potente, para conseguir que tu aplicación sea mas atractiva, sea mas interesante. En este sentido, y aunque Gtk tiene diferentes clases para mostrar imágenes, quiero centrarme en una sola Gtk.Image, una clase, suficientemente potente.

Así, en este capítulo del tutorial, además de mostrarte los usos básicos, de Gtk.Image, quiero que veas determinadas operaciones que seguro te resultaran interesantes mientras desarrollas tu aplicación.

Imágenes con Gtk y JavaScript

De nuevo, y tal y como hemos hecho en anteriores capítulos del tutorial, vamos a construir una sencilla ventana en la que contener nuestra clase Gtk.Image. A partir de aquí, realizaremos diferentes operaciones, para sacarle el máximo partido a esta herramienta.

En este caso, nuestro cuadro de diálogo, será ligeramente mas grande que en ejemplos anteriores, porque vamos a contener una imagen, pero esencialmente, es igual.

#!/usr/bin/env gjs

imports.gi.versions.Gtk = '3.0'
const {Gtk, GObject, GdkPixbuf} = imports.gi;

Gtk.init(null);

var Dialog = GObject.registerClass(
    class Dialog extends Gtk.Dialog{
        _init(){
            super._init({
                defaultWidth: 700,
                defaultHeight: 500
            });
            let layout = new Gtk.Grid({
                margin: 10,
                rowSpacing: 5,
                columnSpacing: 5
            });
            this.add_button("Aceptar", Gtk.ResponseType.OK);
            this.add_button("Cancelar", Gtk.ResponseType.CANCEL);
            this.get_content_area().add(layout);
            let image = new Gtk.Image({
                vexpand: true,
                hexpand: true,
                margin: 10,
                file: 'imagen.jpg',
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER
            });
            layout.attach(image, 0, 0, 1, 1);
            this.show_all();
        }
    }
);

let dialog = new Dialog();
if (dialog.run() == Gtk.ResponseType.OK){
    log("Has pulsado OK");
}

En este caso, desde luego no era necesario utilizar un objeto de la clase Gtk.Grid, dado que solo tienes la imagen, pero, como vas a añadir mas cosas he preferido hacerlo desde el principio para no despistar.

Como ves, la forma de añadir una imagen a tu aplicación es algo relativamente sencillo con esta clase. En este caso he utilizado la propiedad file para crear la imagen, pero existen otras propiedades con las que también las podrías hacer. Por ejemplo, tienes la clase GdkPixbuf.Pixbuf, que es realmente interesante y que te mostraré mas adelante en este capítulo. También puedes utilizar otras propiedades para esto como puede ser stock, icon_name, gicon. Puedes leer mas sobre estas propiedades en Gtk.Image.

También puedes crear imágenes utilizando una serie de métodos de esta clase que te pueden facilitar el trabajo, como son los siguientes,

• Gtk.Image.new_from_animation
• Gtk.Image.new_from_file
• Gtk.Image.new_from_gicon
• Gtk.Image.new_from_icon_name
• Gtk.Image.new_from_icon_set
• Gtk.Image.new_from_pixbuf
• Gtk.Image.new_from_resource
• Gtk.Image.new_from_stock

Por ejemplo, para el caso de crearlo directamente desde un archivo lo puedes hacer de la siguiente forma,

let imagen = Gtk.Imagen.new_from_file('imagen.jpg');

El inconveniente de hacerlo de esta forma, en lugar de como lo has hecho anteriormente, es que tienes que posteriormente añadir todas propiedades de la clase, para que simplemente la imagen quede centrada. A lo mejor, es mas razonable hacerlo como lo hiciste inicialmente.

Por otro lado, indicarte que este objeto, no tiene muchos mas métodos y propiedades que sean realmente interesantes. Muchos los hemos visto anteriormente, porque son métodos o propiedades heredadas, y otros, que son muy particulares de esta clase.

Indicarte, que existen unos métodos para toda la operativa relacionada con el arrastrar y soltar, Drag and Drop. Sin embargo, esto no lo trataré en este capítulo, sino que quedará para un futuro capítulo dedicado única y exclusivamente a este tema.

GdkPixbuf.Pixbuf

Ya te he adelantado, que una forma de definir la imagen en la clase Gtk.Image, es utilizando un Pixbuf. Esta es una clase realmente interesante, porque si bien, no tiene muchas propiedades, si que tiene una gran cantidad de métodos con los que tratar las imágenes que incorporas en tu aplicación.

Igual que en el caso de la imagen, también tienes diferentes métodos para crear un Pixbuf. Algunos de estos métodos, quizá los mas interesantes, son,

• Pixbuf.new_from_file para crearlo desde un archivo
• Pixbuf.new_from_file_at_scale para crearlo desde un archivo pero indicando las dimensiones y con la posibilidad de preservar el aspecto.
• Pixbuf.new_from_file_at_size igual que el anterior, pero sin la posibilidad de preservar el aspecto.

Algunos métodos interesantes

Sea como sea, te recomiendo que visites la documentación de GdkPixbuf.Pixbuf, para que veas todas las posibilidades que te ofrece, pero de cualquier forma, no quiero dejar pasar la oportunidad para mencionarte algunos de estos métodos.

• flip, te permite voltear una imagen vertical u horizontalmente.
• rotate_simple, con este método puedes girar una imagen
• scale para escalar la imagen. Aquí puedes indicar hasta el tipo de interpolación que quieres hacer para mejorar el aspecto de la imagen resultante.
• add_alpha añade el canal alfa a la imagen.
• composite permite crear una transformación de la imagen original.

Por ejemplo, si quisieras voltear la imagen del ejemplo anterior, podrías añadir un botón a tu aplicación que te permitiera hacerlo de forma sencilla, tal y como te muestro a continuación,

let button = new Gtk.Button({
    label: "Voltear"
});
button.connect("clicked", ()=>{
    let pb = image.get_pixbuf();
    image.set_from_pixbuf(pb.flip(false));
});
layout.attach(button, 0, 1, 1, 1);

De la misma manera, si lo que quieres es simplemente girar la imagen, el código que tienes que añadir a tu aplicación es tan sencillo como el que te muestro a continuación,

let button2 = new Gtk.Button({
    label: "Rotar"
});
button2.connect("clicked", ()=>{
    let pb = image.get_pixbuf();
    image.set_from_pixbuf(pb.rotate_simple(GdkPixbuf.PixbufRotation.COUNTERCLOCKWISE));
});
layout.attach(button2, 1, 1, 1, 1);

Conclusión

Como ves, esto de añadir una imagen, e incluso poder modificarla a tu antojo es algo relativamente sencillo. La cuestión es que muchas veces no le damos la importancia que tiene a las imágenes dentro de una aplicación, y realmente le dan mucha cercanía a la misma. Y es que, las imágenes son realmente importantes, y de ahí la razón de dedicar un capítulo del tutorial a las imágenes con Gtk y JavaScript. Solo tienes que recordar el popular dicho de una imagen vale mas que mil palabras. Así, que no lo dudes y empieza a añadir imágenes a tu aplicación.

---

Imagen del ejemplo Tj Holowaychuk en Unsplahs