<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" id="image-viewer.py" xml:lang="el">

  <info>

    <title type="text">Προβολέας εικόνων (Python)</title>

    <link type="guide" xref="py#examples"/>

    <desc>Μια λίγο περισσότερο από απλή εφαρμογή σαν το "Γεια σου κόσμε" - γράψτε έναν προβολέα εικόνων σε GTK.</desc>

    <revision pkgversion="0.1" version="0.1" date="2011-03-19" status="review"/>

    <credit type="author">

      <name>Jonh Wendell</name>

      <email its:translate="no">jwendell@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Johannes Schmid</name>

      <email its:translate="no">jhs@gnome.org</email>

    </credit>

    <credit type="editor">

      <name>Marta Maria Casetti</name>

      <email its:translate="no">mmcasetti@gmail.com</email>

      <years>2013</years>

    </credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Ελληνική μεταφραστική ομάδα GNOME</mal:name>

      <mal:email>team@gnome.gr</mal:email>

      <mal:years>2012-2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Δημήτρης Σπίγγος</mal:name>

      <mal:email>dmtrs32@gmail.com</mal:email>

      <mal:years>2012, 2013</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Μαρία Θουκιδίδου</mal:name>

      <mal:email>marablack3@gmail.com</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Θάνος Τρυφωνίδης</mal:name>

      <mal:email>tomtryf@gmail.com</mal:email>

      <mal:years>2014, 2015</mal:years>

    </mal:credit>

  </info>

<title>Προβολή εικόνων</title>

<synopsis>

  
Σε αυτόν το μάθημα θα γράψουμε μια πολύ απλή εφαρμογή σε GTK που φορτώνει και εμφανίζει ένα αρχείο εικόνας. Θα μάθετε πώς να:

  <list>

    <item>
Γράψετε μια βασική διεπαφή χρήστη GTK σε Python
</item>

    <item>
Να αντιμετωπίζετε συμβάντα συνδέοντας σήματα με τους χειριστές σημάτων
</item>

    <item>
Σχεδιάζετε διεπαφές χρήστη GTK χρησιμοποιώντας περιέκτες
</item>

    <item>
Φορτώνετε και να εμφανίζετε αρχεία εικόνων
</item>

  </list>

  
Θα χρειαστείτε τα παρακάτω για να μπορέσετε να ακολουθήσετε αυτό το μάθημα:

  <list>

    <item>
Ένα εγκατεστημένο αντίγραφο του <link xref="getting-ready">Anjuta IDE</link>
</item>

    <item>
Βασική γνώση της γλώσσας προγραμματισμού Python
</item>

  </list>

</synopsis>

<media type="image" mime="image/png" src="media/image-viewer.png"/>

<section id="anjuta">

  <title>Δημιουργία έργου με το Anjuta</title>

  
Πριν ξεκινήσετε να προγραμματίζετε, πρέπει να δημιουργήσετε ένα καινούργιο έργο στο Anjuta. Έτσι θα δημιουργηθούν όλα τα απαραίτητα αρχεία που χρειάζονται για την εκτέλεση του κώδικα αργότερα. Επίσης θα ήταν χρήσιμο να τα κρατάτε όλα μαζί.

  <steps>

    <item>

    
Ξεκινήστε το Anjuta και πατήστε <guiseq><gui>αρχείο</gui><gui>νέο</gui><gui>έργο</gui></guiseq> για να ανοίξετε τον οδηγό του έργου.

    </item>

    <item>

    
Επιλέξτε <gui>PyGTK (automake)</gui> από την καρτέλα <gui>Python</gui>, πατήστε <gui>συνέχεια</gui>, και συμπληρώστε τις λεπτομέρειες σας στις επόμενες λίγες σελίδες. Χρησιμοποιήστε το <file>image-viewer</file> ως όνομα του έργου και του καταλόγου.

   	</item>

   	<item>

   	
Βεβαιωθείτε ότι απενεργοποιήσατε το <gui>χρήση του GtkBuilder για διεπαφή χρήση</gui> επειδή θα φτιάξουμε τη διεπαφή χρήστη χειροκίνητα σε αυτό το παράδειγμα. Για ένα παράδειγμα χρήσης του σχεδιαστή διεπαφής, δείτε το <link xref="guitar-tuner.py">επίδειξη ρυθμιστή κιθάρας</link>.

    </item>

    <item>

    
Πατήστε <gui>εφαρμογή</gui> και το έργο θα δημιουργηθεί για εσάς. Ανοίξτε το <file>src/image_viewer.py</file> από τις καρτέλες <gui>έργο</gui> ή <gui>αρχείο</gui>. Περιλαμβάνει πολύ βασικό παράδειγμα κώδικα.

    </item>

  </steps>

</section>

<section id="first">

  <title>Μια πρώτη εφαρμογή σε Gtk</title>

  
Για να δούμε πως φαίνεται μια πολύ βασική εφαρμογή Gtk σε Python:

from gi.repository import Gtk, GdkPixbuf, Gdk

import os, sys

class GUI:

	def __init__(self):

		window = Gtk.Window()

		window.set_title ("Hello World")

		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())

  
Ας ρίξουμε μια ματιά στο τι γίνεται:

  <list>

    <item>

    
Η πρώτη γραμμή εισάγει το όνομα χώρου Gtk (αυτό είναι που περιέχει την βιβλιοθήκη του Gtk). Οι βιβλιοθήκες παρέχονται από το GObject Introspection (gi), που παρέχει γλωσσικές συσχετίσεις για πολλές βιβλιοθήκες του GNOME.

    </item>

    <item>

    
Η μέθοδος __init__ της κλάσης GUI δημιουργεί ένα (άδειο) Gtk.Window, ορίζει τον τίτλο του και μετά συνδέει ένα σήμα να τερματίζει την εφαρμογή όταν το παράθυρο κλείσει. Είναι πολύ απλό, περισσότερα για τα σήματα αργότερα.

    </item>

    <item>

    
Μετά, ορίζουμε το destroy το οποίο απλά θα τερματίσει την εφαρμογή. Καλείται από το σήμα destroy που συνδέσατε παραπάνω.

    </item>

    <item>

    
Το υπόλοιπο του αρχείου κάνει αρχικοποίηση για το Gtk και εμφανίζει το GUI.

    </item>

  </list>

  
Ο κώδικας είναι έτοιμος να εκτελεστεί, οπότε δοκιμάστε το πατώντας <guiseq><gui>τρέξιμο</gui><gui>Εκτέλεση</gui></guiseq>. Θα πρέπει να εμφανίσει ένα άδειο παράθυρο.

</section>

<section id="signals">

  <title>Σήματα</title>

  
Τα σήματα είναι μια από τις έννοιες κλειδιά για τον προγραμματισμό Gtk. Όποτε κάτι συμβαίνει σε ένα αντικείμενο, εκπέμπει ένα σήμα· για παράδειγμα, όταν πατιέται ένα κουμπί εκπέμπει το σήμα clicked. Άμα θέλετε το πρόγραμμά σας να κάνει κάτι όταν αυτό συμβαίνει, πρέπει να συνδέσετε μια συνάρτηση (έναν "χειριστή σημάτων") σε αυτό το σήμα. Ορίστε ένα παράδειγμα:

def button_clicked () :

  print "you clicked me!"

b = new Gtk.Button ("Click me")

b.connect_after ('clicked', button_clicked)

  
Οι τελευταίες δύο γραμμές δημιουργούν ένα Gtk.Button που ονομάζεται b και συνδέει το σήμα το clicked στην συνάρτηση button_clicked, η οποία ορίζεται πιο πάνω. Κάθε φορά που πατιέται ένα κουμπί, ο κώδικας στη συνάρτηση button_clicked θα εκτελείται. Εδώ απλά τυπώνει ένα μήνυμα.

</section>

<section id="containers">

  <title>Περιέκτες: Σχεδίαση διεπαφής χρήστη</title>

  
Γραφικά στοιχεία (έλεγχοι, όπως τα κουμπιά και οι ετικέτες) μπορούν να τοποθετηθούν στο παράθυρο κάνοντας χρήση των περιεκτών. Μπορείτε να οργανώσετε την διάταξη συνδυάζοντας διαφορετικών ειδών περιέκτες, όπως πλαίσια και πλέγματα.

  
Ένα Gtk.Window είναι από μόνο του ένα είδος περιέκτη, αλλά μπορείτε να τοποθετήσετε μόνο ένα γραφικό στοιχείο άμεσα πάνω του. Θα θέλαμε να είχαμε δύο γραφικά στοιχεία, μια εικόνα και ένα κουμπί, άρα θα πρέπει να τοποθετήσουμε έναν υποδοχέα "υψηλότερης χωρητικότητας" μέσα στο παράθυρο για να κρατάει τα άλλα γραφικά στοιχεία. Ένας αριθμός από <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">τύπους περιεκτών</link> είναι διαθέσιμοι, αλλά θα χρησιμοποιήσουμε εδώ ένα Gtk.Box. Ένα Gtk.Box μπορεί να κρατήσει πολλά γραφικά στοιχεία, οργανωμένα οριζόντια ή κάθετα. Μπορείτε να κάνετε και πιο περίπλοκες διατάξεις βάζοντας πολλά πλαίσια το ένα μέσα στο άλλο κ.ο.κ.

  <note>

  
Υπάρχει ένας γραφικός σχεδιαστής διεπαφής χρήστη με όνομα <app>Glade</app> ενσωματωμένος στο <app>Anjuta</app> που κάνει τη σχεδίαση γραφικού περιβάλλοντος πολύ εύκολη. Για αυτό το απλό παράδειγμα, όμως, θα κωδικοποιήσουμε τα πάντα χειροκίνητα.

  </note>

  
Ας προσθέσουμε ένα πλαίσιο και γραφικά στοιχεία στο παράθυρο. Προσθέστε τον παρακάτω κώδικα στη μέθοδο __init__, αμέσως μετά τη γραμμή window.connect_after:

box = Gtk.Box()

box.set_spacing (5)

box.set_orientation (Gtk.Orientation.VERTICAL)

window.add (box)

  
Η πρώτη γραμμή δημιουργεί ένα Gtk.Box που ονομάζεται box και οι επόμενες γραμμές ρυθμίζουν δύο από τις ιδιότητες του: το orientation ρυθμίζεται σε κάθετο (οπότε τα γραφικά στοιχεία τοποθετούνται σε στήλη) και το spacing ανάμεσα στα γραφικά στοιχεία έχει ρυθμιστεί στα 5 εικονοστοιχεία. Η επόμενη γραμμή έπειτα προσθέτει στο παράθυρο το νεοδημιουργημένο Gtk.Box.

  
Μέχρι στιγμής το παράθυρο περιέχει μόνο ένα άδειο Gtk.Box και άμα εκτελέσετε τώρα το πρόγραμμα δε θα δείτε καμία απολύτως αλλαγή (το Gtk.Box είναι ένας διαφανής περιέκτης, οπότε δεν μπορείτε να δείτε ότι είναι εκεί).

</section>

<section id="packing">

  <title>Συσκευασία: Πρόσθεση γραφικών στοιχείων στον περιέκτη</title>

  
Για να προσθέσετε κάποια γραφικά στοιχεία στο Gtk.Box, εισάγετε τον ακόλουθο κώδικα ακριβώς κάτω από την γραμμή window.add (box):

self.image = Gtk.Image()

box.pack_start (self.image, False, False, 0)

  
Η πρώτη γραμμή δημιουργεί ένα καινούργιο Gtk.Image που ονομάζεται image, που θα εμφανίζει ένα αρχείο εικόνας. Καθώς το χρειαζόμαστε αργότερα στο χειριστή σημάτων, θα το ορίσουμε ως μεταβλητή ευρείας κλάσης. Πρέπει να προσθέσετε το image = 0 στην αρχή της κλάσης GUI. Έπειτα, το γραφικό στοιχείο της εικόνας προστίθεται (πακετάρεται) στον περιέκτη box χρησιμοποιώντας τη μέθοδο <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start">pack_start</link> του GtkBox.

  
Το pack_start παίρνει 4 παραμέτρους: το γραφικό στοιχείο που θα προστεθεί στο GtkBox (child)· αν το Gtk.Box πρέπει να μεγαλώσει όταν προστεθεί νέο γραφικό στοιχείο (expand)· αν το νέο γραφικό στοιχείο θα έπρεπε να καλύψει όλο τον δημιουργημένο επιπλέον χώρο αν μεγαλώσει το Gtk.Box (fill)· και πόσος χώρος πρέπει να υπάρχει, σε εικονοστοιχεία, ανάμεσα στο γραφικό στοιχείο και στους γείτονές του μέσα στο Gtk.Box, (padding).

  
Οι περιέκτες (και τα γραφικά στοιχεία) του Gtk επεκτείνονται δυναμικά για να καλύψουν τον διαθέσιμο χώρο, αν τα αφήσετε. Δεν τοποθετείτε τα γραφικά στοιχεία δίνοντας τους ακριβείς θέσεις x, y-συντεταγμένων στο παράθυρο· αλλά, τοποθετούνται σχετικά μεταξύ τους. Αυτό κάνει το χειρισμό της αλλαγής του μεγέθους του παραθύρου πιο εύκολη και τα γραφικά στοιχεία πρέπει να πάρουν αυτόματα ένα λογικό μέγεθος στις περισσότερες περιπτώσεις.

  
Επίσης σημειώστε πώς τα γραφικά στοιχεία οργανώνονται σε μια ιεραρχία. Μόλις πακεταριστούν μέσα στο Gtk.Box, το Gtk.Image θεωρείται θυγατρικό του Gtk.Box. Αυτό επιτρέπει να συμπεριφερθούμε σε όλα τα θυγατρικά ενός γραφικού στοιχείου ως μια ομάδα· για παράδειγμα, μπορείτε να κρύψετε το Gtk.Box, που θα κρύψει επίσης όλα τα θυγατρικά του ταυτόχρονα.

  
Τώρα προσθέστε αυτές τις δύο γραμμές, κάτω από αυτές που μόλις προσθέσατε:

button = Gtk.Button ("Open a picture...")

box.pack_start (button, False, False, 0)

  
Αυτές οι γραμμές είναι παρόμοιες με τις δυο πρώτες, αλλά αυτή τη φορά δημιουργούν ένα Gtk.Button και το προσθέτουν στο box. Σημειώστε ότι ορίζουμε την (δεύτερη) παράμετρο, την expand σε False, ενώ είχε οριστεί True για το Gtk.Image. Έτσι η εικόνα θα πάρει όλο το διαθέσιμο χώρο και τα κουμπιά μόνο όσο χρειάζονται. Όταν μεγιστοποιήσεις το παράθυρο, το μέγεθος των κουμπιών θα παραμείνει το ίδιο, ενώ της εικόνας θα αυξηθεί, χρησιμοποιώντας όλο το υπόλοιπο παράθυρο.

</section>

<section id="loading">

  <title>Φόρτωση της εικόνας: Σύνδεση στο σήμα του κουμπιού clicked</title>

  
Όταν ο χρήστης πατήσει πάνω στο κουμπί <gui>Άνοιγμα εικόνας…</gui>, ένας διάλογος θα εμφανιστεί ώστε ο χρήστης να διαλέξει μια εικόνα. Μόλις διαλέξει, η εικόνα θα φορτωθεί και θα εμφανιστεί στο αντίστοιχο γραφικό στοιχείο.

  
Το πρώτο βήμα είναι να συνδέσουμε το σήμα clicked του κουμπιού με μια συνάρτηση χειριστή σημάτων, την οποία ονομάζουμε on_open_clicked. Βάλτε αυτόν τον κώδικα αμέσως μετά την γραμμή που το κουμπί δημιουργείται button = Gtk.Button():

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

  
Αυτό θα συνδέσει το σήμα clicked στη μέθοδο on_open_clicked η οποία θα οριστεί παρακάτω.

</section>

<section id="loading2">

  <title>Φόρτωση της εικόνας: Γράφοντας την επανάκληση του σήματος</title>

  
Τώρα μπορούμε να δημιουργήσουμε τη μέθοδο on_open_clicked. Εισάγετε τα ακόλουθα στη κλάση GUI, μετά τη μέθοδο __init__:

def on_open_clicked (self, button):

	dialog = Gtk.FileChooserDialog ("Open Image", 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()

  
Αυτό είναι λίγο πιο περίπλοκο από όσα έχουμε κάνει μέχρι τώρα, για αυτό θα το χωρίσουμε σε κομμάτια:

  <list>

    <item>

      
Η γραμμή που ξεκινάει με dialog δημιουργεί έναν διάλογο <gui>Open</gui>, τον οποίο ο χρήστης χρησιμοποιεί για να διαλέξει αρχεία. Ορίζουμε τρεις ιδιότητες: τον τίτλο του διαλόγου, την ενέργεια (type) του διαλόγου (είναι διάλογος "open", αλλά θα μπορούσαμε να χρησιμοποιήσουμε SAVE αν θέλαμε να αποθηκεύσουμε ένα αρχείο)· και transient_for, όπου ορίζει το γονικό παράθυρο του διαλόγου.

    </item>

    <item>

    
Οι επόμενες δύο γραμμές προσθέτουν τα κουμπιά <gui>Cancel</gui> και <gui>Open</gui> στο διάλογο. Το δεύτερο όρισμα της μεθόδου του add_button είναι η (ακέραιη) τιμή που επιστρέφει όταν πατιέται το κουμπί: 0 για το <gui>Ακύρωση</gui> και 1 για το <gui>Άνοιγμα</gui>.

    
Σημειώστε όταν χρησιμοποιούμε τα προκαθορισμένα ονόματα κουμπιών που υπάρχουν στο Gtk, αντί να γράψουμε οι ίδιοι "Ακύρωση" ή "Άνοιγμα". Το πλεονέκτημα στη χρήση των προκαθορισμένων ονομάτων είναι ότι οι ετικέτες των κουμπιών θα έχουν ήδη μεταφραστεί στη γλώσσα του χρήστη.

    </item>

    <item>

    
To set_default_response καθορίζει ποιο κουμπί θα ενεργοποιηθεί όταν ο χρήστης επιλέξει ένα αρχείο με διπλό κλικ ή πατήσει <key>Enter</key>. Στην περίπτωση μας, χρησιμοποιούμε το κουμπί <gui>Άνοιγμα</gui> σαν προεπιλεγμένο (το οποίο έχει τιμή 1).

    </item>

    <item>

    
Οι επόμενες τρεις γραμμές περιορίζουν το διάλογο <gui>Άνοιγμα</gui> να εμφανίζει μόνο αρχεία που μπορούν να ανοιχθούν από το Gtk.Image. Δημιουργούμε πρώτα ένα αντικείμενο φίλτρου· προσθέτουμε στο φίλτρο όλων των ειδών αρχεία που υποστηρίζονται από το Gdk.Pixbuf (το οποίο περιέχει τα περισσότερα είδη εικόνων όπως PNG και JPEG). Τέλος, καθορίζουμε το φίλτρο να είναι το φίλτρο του διαλόγου <gui>Άνοιγμα</gui>.

    </item>

    <item>

    
Το dialog.run εμφανίζει το διάλογο <gui>Άνοιγμα</gui>. Ο διάλογος θα περιμένει τον χρήστη να διαλέξει μια εικόνα· όταν διαλέξει, το dialog.run θα επιστρέψει την τιμή <output>1</output> (θα επιστρέψει <output>0</output> αν ο χρήστης πατήσει <gui>Ακύρωση</gui>). Ο έλεγχος ροής if ελέγχει για αυτό.

    </item>

    <item>
Αν υποθέσουμε ότι ο χρήστης πάτησε το <gui>Άνοιγμα</gui>, η επόμενη γραμμή ορίζει την ιδιότητα file του Gtk.Image στο όνομα του αρχείου εικόνας που επέλεξε ο χρήστης. Το Gtk.Image θα φορτώσει και θα εμφανίσει την επιλεγμένη εικόνα.

    </item>

    <item>

    
Στην τελευταία γραμμή αυτής της μεθόδου, καταστρέφουμε τον διάλογο <gui>άνοιγμα</gui> γιατί δεν τον χρειαζόμαστε πια.

    </item>

  </list>

  </section>

<section id="run">

  <title>Τρέξτε την εφαρμογή</title>

  
Θα πρέπει να έχετε όλον τον κώδικα που χρειάζεστε, οπότε δοκιμάστε να τον εκτελέσετε. Εδώ είναι το τέλος· ένα πλήρες και λειτουργικό πρόγραμμα προβολής εικόνων (και ένας μικρός οδηγός σε Python και Gtk) σε ελάχιστο χρόνο!

</section>

<section id="impl">

 <title>Υλοποίηση αναφοράς</title>

 
Αν αντιμετωπίσετε πρόβλημα με τον οδηγό, συγκρίνετε τον κώδικά σας με αυτόν τον <link href="image-viewer/image-viewer.py">κώδικα αναφοράς</link>.

</section>

<section id="next">

  <title>Επόμενα βήματα</title>

  
Εδώ είναι κάποιες ιδέες για το πώς μπορείτε να επεκτείνετε αυτή την απλή παρουσίαση:

  <list>

   <item>

   
Βάλτε τον χρήστη να επιλέξει ένα κατάλογο αντί για αρχείο και δώστε ελέγχους να γυρίζουν όλες τις εικόνες σε έναν κατάλογο.

   </item>

   <item>

   
Εφαρμόστε τυχαία φίλτρα και εφέ στην εικόνα όταν αυτή φορτωθεί και επιτρέψτε στον χρήστη να αποθηκεύσει την επεξεργασμένη εικόνα.

   
Το <link href="http://www.gegl.org/api.html">GEGL</link> παρέχει ισχυρές δυνατότητες επεξεργασίας εικόνας.

   </item>

   <item>

   
Επιτρέψτε στον χρήστη να φορτώνει εικόνες από μερισμό δικτύου, από σαρωτές και από άλλες περίπλοκες πηγές.

   
You can use <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> to handle network file transfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> to handle scanning.

   </item>

  </list>

</section>

</page>