# Bildvisare (Python)

Lite mer än ett enkelt ”Hej världen”-program - skriv en bildvisare i GTK.
Jonh Wendell
jwendell@gnome.org
Johannes Schmid
jhs@gnome.org
Marta Maria Casetti
mmcasetti@gmail.com 2013
Sebastian Rasmussen
sebras@gmail.com 2019
Anders Jonsson
anders.jonsson@norsjovallen.se 2021

# Bildvisare

      I denna handledning kommer vi skriva ett väldigt enkelt GTK-program som läser in och visar en bildfil. Du kommer lära dig hur du:

        Skriver ett enkelt GTK-användargränssnitt i Python
        Hanterar händelser genom att ansluta signaler till signalhanterare
        Gör layouter för GTK-användargränssnitt genom att använda behållare
        Läser in och visar bildfiler

      Du behöver följande för att kunna följa denna handledning:

        En installerad kopia av den integrerade utvecklingsmiljön Anjuta
        Grundläggande kunskap i programmeringsspråket Python

# Skapa ett projekt i Anjuta

Innan du börjar koda kommer du behöva konfigurera ett nytt projekt i Anjuta. Detta kommer skapa alla filer som du behöver för att bygga och köra koden senare. Det är också användbart för att hålla allting samlat.

Starta Anjuta och klicka på Arkiv Ny Projekt för att öppna projektguiden.

Välj PyGTK (automake) från fliken Python, klicka på Fortsätt, och fyll i dina detaljer på de nästkommande sidorna. Använd guitar-tuner som projektnamn och katalog.

Se till att inaktivera Använd GtkBuilder för användargränssnitt då vi kommer bygga användargränssnittet manuellt i detta exempel. Se gitarrstämmardemonstrationen för ett exempel på hur du använder gränssnittsbyggaren.

Klicka på Verkställ så kommer projektet skapas åt dig. Öppna src/image_viewer.py från flikarna Projekt eller Filer. Den innehåller grundläggande exempelkod.

# Ett första Gtk-program

Låt oss se hur ett väldigt enkelt Gtk-program ser ut i Python:

from gi.repository import Gtk, GdkPixbuf, Gdk import os, sys

class GUI: def __init__(self): window = Gtk.Window() window.set_title ("Hej världen") window.connect_after('destroy', self.destroy)

window.show_all()

def destroy(window, self): Gtk.main_quit()

def main(): app = GUI() Gtk.main()

if __name__ == "__main__": sys.exit(main())

Låt oss ta en titt på vad som händer:

Den första raden importerar Gtk-namnrymden (d.v.s. inkluderar Gtk-biblioteket). Biblioteken tillhandahålls av GObject Introspection (gi), vilket tillhandahåller språkbindningar för många GNOME-bibliotek.

In the `__init__` method of the `GUI` class creates an (empty) `Gtk.Window`, sets its title and then connects a signal to quit the application once the window is closed. That's pretty simple overall, more on signals later.

Next, `destroy` is defined which just quits the application. It is called by the `destroy` signal connected above.

Resten av filen gör initiering för Gtk och visar det grafiska användargränssnittet.

Koden är redo att köras, så pröva den med Kör Kör. Den kommer visa ett tomt fönster.

# Signaler

Signals are one of the key concepts in Gtk programming. Whenever something happens to an object, it emits a signal; for example, when a button is clicked it gives off the `clicked` signal. If you want your program to do something when that event occurs, you must connect a function (a "signal handler") to that signal. Here's an example:

def button_clicked () : print "Du klickade på mig!"

b = new Gtk.Button ("Klicka på mig") b.connect_after ('clicked', button_clicked)

The last two lines create a `Gtk.Button` called `b` and connect its `clicked` signal to the `button_clicked` function, which is defined above. Every time the button is clicked, the code in the `button_clicked` function will be executed. It just prints a message here.

# Behållare: göra en layout för användargränssnittet

Widgets (controls, such as buttons and labels) can be arranged in the window by making use of containers. You can organize the layout by mixing different types of containers, like boxes and grids.

A `Gtk.Window` is itself a type of container, but you can only put one widget directly into it. We would like to have two widgets, an image and a button, so we must put a "higher-capacity" container inside the window to hold the other widgets. A number of container types are available, but we will use a `Gtk.Box` here. A `Gtk.Box` can hold several widgets, organized horizontally or vertically. You can do more complicated layouts by putting several boxes inside another box and so on.

There is a graphical user interface designer called Glade integrated in Anjuta which makes UI design really easy. For this simple example, however, we will code everything manually.

Let's add the box and widgets to the window. Insert the following code into the `__init__` method, immediately after the `window.connect_after` line:

box = Gtk.Box() box.set_spacing (5) box.set_orientation (Gtk.Orientation.VERTICAL) window.add (box)

The first line creates a `Gtk.Box` called `box` and the following lines set two of its properties: the `orientation` is set to vertical (so the widgets are arranged in a column), and the `spacing` between the widgets is set to 5 pixels. The next line then adds the newly-created `Gtk.Box` to the window.

So far the window only contains an empty `Gtk.Box`, and if you run the program now you will see no changes at all (the `Gtk.Box` is a transparent container, so you can't see that it's there).

# Packning: Lägga till komponenter till behållaren

To add some widgets to the `Gtk.Box`, insert the following code directly below the `window.add (box)` line:

self.image = Gtk.Image() box.pack_start (self.image, False, False, 0)

The first line creates a new `Gtk.Image` called `image`, which will be used to display an image file. As we need that later on in the signal handler, we will define it as a class-wide variable. You need to add `image = 0` to the beginning of the `GUI` class. Then, the image widget is added (packed) into the `box` container using GtkBox's `pack_start` method.

`pack_start` takes 4 arguments: the widget that is to be added to the GtkBox (`child`); whether the `Gtk.Box` should grow larger when the new widget is added (`expand`); whether the new widget should take up all of the extra space created if the `Gtk.Box` gets bigger (`fill`); and how much space there should be, in pixels, between the widget and its neighbors inside the `Gtk.Box` (`padding`).

Gtk containers (and widgets) dynamically expand to fill the available space, if you let them. You don't position widgets by giving them a precise x,y-coordinate location in the window; rather, they are positioned relative to one another. This makes handling window resizing much easier, and widgets should automatically take a sensible size in most situations.

Also note how the widgets are organized in a hierarchy. Once packed in the `Gtk.Box`, the `Gtk.Image` is considered a child of the `Gtk.Box`. This allows you to treat all of the children of a widget as a group; for example, you could hide the `Gtk.Box`, which would also hide all of its children at the same time.

Infoga nu dessa två rader under de två du just lade till:

button = Gtk.Button ("Öppna en bild…") box.pack_start (button, False, False, 0)

These lines are similar to the first two, but this time they create a `Gtk.Button` and add it to `box`. Notice that we are setting the `expand` argument (the second one) to `False` here, whereas it was set to `True` for the `Gtk.Image`. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.

# Läsa in bilden: ansluta till knappens `clicked`-signal

When the user clicks on the Open Image... button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.

The first step is to connect the `clicked` signal of the button to a signal handler function, which we call `on_open_clicked`. Put this code immediately after the `button = Gtk.Button()` line where the button was created:

button.connect_after('clicked', self.on_open_clicked)

Detta kommer ansluta `clicked`-signalen till metoden `on_open_clicked` som vi kommer definiera nedan.

# Läsa in bilden: skriva signalens återanrop

Now we can create the `on_open_clicked` method. Insert the following into the `GUI` class code block, after the `__init__` method:

def on_open_clicked (self, button): dialog = Gtk.FileChooserDialog ("Öppna bild", button.get_toplevel(), Gtk.FileChooserAction.OPEN); dialog.add_button (Gtk.STOCK_CANCEL, 0) dialog.add_button (Gtk.STOCK_OK, 1) dialog.set_default_response(1)

filefilter = Gtk.FileFilter () filefilter.add_pixbuf_formats () dialog.set_filter(filefilter)

if dialog.run() == 1: self.image.set_from_file(dialog.get_filename())

dialog.destroy()

Det här är lite mer komplicerat än något som vi försökt så här långt, så låt oss dela upp det:

The line beginning with `dialog` creates an Open dialog, which the user can use to choose files. We set three properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used `SAVE` if the intention was to save a file; and `transient_for`, which sets the parent window of the dialog.

The next two lines add Cancel and Open buttons to the dialog. The second argument of the `add_button` method is the (integer) value that is returned when the button is pressed: 0 for Cancel and 1 for Open.

Observera att vi använder standardknappnamn från Gtk, istället för att manuellt skriva in ”Avbryt” eller ”Öppna”. Fördelen med att använda standardnamn är att knappetiketterna redan kommer vara översatta till användarens språk.

`set_default_response` determines the button that will be activated if the user double-clicks a file or presses Enter. In our case, we are using the Open button as default (which has the value 1).

The next three lines restrict the Open dialog to only display files which can be opened by `Gtk.Image`. A filter object is created first; we then add all kinds of files supported by `Gdk.Pixbuf` (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the Open dialog's filter.

`dialog.run` displays the Open dialog. The dialog will wait for the user to choose an image; when they do, `dialog.run` will return the value 1 (it would return 0 if the user clicked Cancel). The `if` statement tests for this.

Assuming that the user did click Open, the next line sets the `file` property of the `Gtk.Image` to the filename of the image selected by the user. The `Gtk.Image` will then load and display the chosen image.

In the final line of this method, we destroy the Open dialog because we don't need it any more.

# Kör programmet

All kod som du behöver bör nu vara på plats, så testa att köra koden. Det var det, en fullt fungerande bildvisare (och en snabb rundtur av Python och Gtk) på inte mycket tid alls!

# Referensimplementation

Om du stöter på problem med handledningen kan du jämföra din kod med denna referenskod.

# Nästa steg

Här är några idéer på hur du kan utöka denna enkla demonstration:

Låt användaren välja en katalog snarare än en fil, och tillhandahåll kontroller för att gå igenom alla bilderna i en katalog.

Tillämpa slumpmässiga filter och effekter till bilden då den läses in och låt användaren spara den ändrade bilden.

GEGL har kraftfulla bildmanipuleringsförmågor.

Allow the user to load images from network shares, scanners, and other more complicated sources.

You can use GIO to handle network file transfers and the like, and GNOME Scan to handle scanning.