Σελίδα 1 από 2

Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 24 Φεβ 2009, 16:52
από Dimitris
Γενικά
Θέμα του οδηγού αυτού είναι τα γραφικά με τη χρήση της βιβλιοθήκης GTK+. Ο επίσημος οδηγός στα αγγλικά βρίσκεται εδώ: http://library.gnome.org/devel/gtk-tutorial/stable/ Τα παραδείγματα που χρησιμοποιώ βρίσκονται και στον αρχικό οδηγό. Παρ'όλ' αυτά δεν πρόκειται για μετάφραση μιας και ο μεταφραστής είναι προδότης (traduttore traditore :D ) αλλά για έναν καινουριο οδηγό.
Η GTK+ είναι μια βιβλιοθήκη που ξεκίνησε από το πρόγραμμα GIMP και εξελίχθηκε σε αυτόνομη βιβλιοθήκη. Παρέχει τις βασικές λειτουργίες για γραφικά, GUI, συμβάντα, κ.α.

Προαπαιτούμενα
Για τη χρήση της βιβλιοθήκης θα χρειαστεί να εγκαταστήσουμε μερικά πακέτα, τα build-essential, gtk+-2.0, pkg-config. To build-essential μας δίνει το GNU C μεταγλωττιστή, τo εργαλείo make κ.α., το gtk+-2.0 είναι η βιβλιοθήκη, και το pkg-config είναι ένα βοηθητικό πρόγραμμα που διαχειρίζεται τις παραμέτρους για το gcc. Aνοίγουμε το τερματικό και πληκτρολογούμε:
Κώδικας: Επιλογή όλων
sudo apt-get install build-essential gtk+-2.0 pkg-config

Φυσικά ως προαπαιτούμενο είναι και ο οδηγός viewtopic.php?f=9&t=55 για μεταγλώττιση πηγαίου κώδικα.


Καλημέρα, κόσμε
Στον παρών οδηγό θα ασχοληθούμε με c, αλλά υπάρχουν και διεπιφάνειες και για άλλες γλώσσες προγραμματισμού. Ανοίγουμε ένα αρχείο bla.c και γράφουμε μέσα τον παρακάτω κώδικα:
Κώδικας: Επιλογή όλων
#include <gtk/gtk.h>

int main( int   argc,
          char *argv[] )
{
    GtkWidget *window;
   
    gtk_init (&argc, &argv);
   
    window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    gtk_widget_show  (window);
   
    gtk_main ();
   
    return 0;
}

Το αποθηκεύουμε και έπειτα το μεταγλωττίζουμε με την εντολή:
Κώδικας: Επιλογή όλων
gcc bla.c -o bla `pkg-config --cflags --libs gtk+-2.0`

Προσοχή παραπάνω είναι ` και όχι ', αυτό σημαίνει αντικατάσταση του αποτελέσματος της εντολής pkg-config --cflags --libs gtk+-2.0, την οποία αν εκτελέσουμε μόνη της θα δούμε μια λίστα από διαδρομές, αρχεία, βιβλιοθήκες τα οποία είναι παράμετροι για το gcc. Φυσικά αν ξέρουμε τι κάνουμε αυτές τις παραμέτρους μπορούμε να τις τροποποιήσουμε με το χέρι.

Τρέχοντας το πρόγραμμα:
Κώδικας: Επιλογή όλων
./bla

θα δούμε ένα παράθυρο που δεν έχει τη δυνατότητα τερματισμού εκτός από το ctrl+c.

H πρώτη γραμμή λέει στο πρόγραμμά μας ποια αρχεία να συμπεριλάβει. Η διαδρομή των αρχείων καθορίζεται από την εντολή pkg-config --cflags --libs gtk+-2.0. Μετά από τον απαραίτητο ορισμό του κυρίως προγράμματος main χρειαζόμαστε την κλήση της συνάρτησης gtk_init. Σε όλα τα προγράμματα αυτή η κλήση είναι απαραίτητη εκτός κι αν ξέρουμε τι κάνουμε. Όλες τις παραμέτρους από τη γραμμή εντολών που έχουν να κάνουν με τη gtk τις αφαιρεί από τη λίστα των παραμέτρων και τις υπόλοιπες μπορεί ο χρήστης να τις χρησιμοποιήσει όπως θέλει.

Στην gtk σχεδόν όλα είναι GtkWidgets. Έτσι και το παράθυρό μας είναι ένας δείκτης τύπου GtkWidget (GtkWidget *window). Αυτός είναι ο ορισμός του αλλά το παράθυρο δημιουργείται για πρώτη φορά στη γραμμή:
Κώδικας: Επιλογή όλων
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

Δημιουργείται όμως στη μνήμη, τίποτε δε φαίνεται ακόμη στην οθόνη. Η εντολή που το προβάλλει είναι η:
Κώδικας: Επιλογή όλων
gtk_widget_show  (window);

Αλλά πάλι δε συμβαίνει τίποτε. Αρχίζουμε και βλέπουμε πράματα όταν ο κώδικάς μας μπει στο βρόγχο gtk_main (), ο οποίος είναι και ο κύριος βρόγχος του προγράμματός μας. Μετά από αυτή την εντολή τίποτε δε συμβαίνει.

Pygtk
Και ύστερα από την παραπάνω προτροπή ακολουθεί σε python. Η python είναι μια γλώσσα προγραμματισμού που δε χρειάζεται να μεταγλωττιστεί (interpreted και όχι compiled, ας με βοηθήσει κάποιος με την ελληνική ορολογία) Σε αυτή την περίπτωση θα χρειαστούμε επιπλέον το πακέτο pygtk.

Ανοίγουμε το τερματικό και πληκτρολογούμε python και μας περιμένει το γνωστό
>>>
Εδώ πληκτρολογούμε
Κώδικας: Επιλογή όλων
>>>import pygtk
>>>import gtk

κι έτσι έχουμε εισάγει τις βιβλιοθήκες που χρειαζόμαστε. Μιας και στην python δε χρειάζεται να δηλώσουμε μεταβλητές απλώς δημιουργουμε το παράθυρό μας με
Κώδικας: Επιλογή όλων
>>>window = gtk.Window(gtk.WINDOW_TOPLEVEL)

και το προβάλουμε με
Κώδικας: Επιλογή όλων
>>> window.show()

Προφανώς ακόμη δεν εμφανίστηκε τίποτε στην οθόνη γιατί δε φτάσουμε στο κυρίως βρόγχο. Αυτό γίνεται με
Κώδικας: Επιλογή όλων
>>>gtk.main_level()

Και πάλι το πρόγραμμά μας δεν έχει δυνατότητα τερματισμού εκτός από ctrl+c. Η δυνατότητα τερματισμού πραγματοποιείται με σύνδεση του συμβάντος με την αντίστοιχη εντολή.

Creative Commons License
Η εργασία υπάγεται στην άδεια Creative Commons Αναφορά-Παρόμοια διανομή 3.0 Ελλάδα

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 24 Φεβ 2009, 17:00
από linuxman
Μπράβο , αχ και να είχα χρόνο να τα μάθω αυτά !!! :mrgreen:

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 24 Φεβ 2009, 17:19
από greatst
Τα θερμά και ειλικρινή μου συγχαρητήρια! Εύχομαι να τον εμπλουτίσεις τον οδηγό το συντομότερο! Θα πρότεινα να συμπεριλάβεις όλα τα αντικείμενα που θα ήθελε κάποιος να χρησιμοποιήσει σε μια εφαρμογή που θα αναπτύξει. Επίσης θα σου πρότεινα, μιας και τον "κόπο" θα τον κάνεις μια φορά για τη C, εάν έχεις χρόνο και όρεξη όταν τελειώσεις τον οδηγό να τον "μετατρέψεις" και για PyGTK, μιας και σε όσους δεν είναι εξοικειωμένοι με τη C, η Python θα τους φανεί(?) ευκολότερη.

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 24 Φεβ 2009, 21:57
από Dimitris
Όπως βλέπετε η python δίνει τη δυνατότητα γρήγορου πειραματισμού και δεν έχει τη χρονοβόρα διαδικασία μεταγλώττισης, οπότε από δω και στο εξής ό,τι έχει να κάνει με γραφικό περιβάλλον θα προγραμματίζεται σε python. Φυσικά παρόμοια ισχύουν και σε c ή σε όποια άλλη γλώσσα υπάρχουν bindings. O επίσημος οδηγός για τη pygtk μπορεί να βρεθεί εδώ http://www.pygtk.org/tutorial.html μαζί με πολλές άλλες χρήσιμες πληροφορίες.

Συνεχίζοντας την εισαγωγή στη gtk, όλες οι ενέργειες αλληλεπίδρασης με τον υπολογιστή είναι συμβάντα (events) και σήματα (signals). Όταν δηλαδή είμαστε στον αγαπημένο μας φυλλομετρητή και κάνουμε "κλικ" στο κουμπι για να μας πάει στην προηγούμενη ιστοσελίδα τότε ο φυλλομετρητης αντιλαμβάνεται το κλικ και στέλνει ένα σήμα ότι κάτι πρέπει να κάνει. Τότε ελέγχει ότι το click έγινε στο συγκεγκριμένο κουμπι και όχι σε κάποιο άλλο και ενεργοποιεί μια συνάρτηση. Η συνάρτηση αυτή τότε ψάχνει σε μία λίστα η οποία έχει αποθηκευμένη όλες τις διευθύνσεις και πηγαίνει στην τελευταία διεύθυνση που έχει στη μνήμη. Αυτή είναι η αρχή με την οποία λειτουργούν τα προγράμματα και με την οποία γράφονται.

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 08 Απρ 2009, 13:54
από greatst
@Dimitris: Δεν θα τον συνεχίσεις τον οδηγό; Μην μείνουμε με την όρεξη... :ugeek:

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 08 Απρ 2009, 14:48
από Dimitris
Θα το συνεχίσω αλλά έχουμε και δουλειές. :D Προς το παρόν ψάχνω να βρώ γιατί ένα working array σε ένα πρόγραμμα FORTRAN που δουλεύω, χρειάζεται να έχει μέγεθος 4,κάτι * 10^10 στοιχεία και πως να το μειώσω ή να το παρακάμψω. Όχι και το πιο ευχάριστο που μπορεί να κάνει κανείς. Υπομονή, λοιπόν.

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 23 Ιουν 2011, 00:22
από giannosfor
Αν θέλουμε να δημιουργήσουμε γραφικά χρησιμοποιώντας Java και τις βιβλιοθήκες της gnome.
Spoiler: show
Εγκαθιστούμε τις βιβλιοθήκες.
Κώδικας: Επιλογή όλων
# sudo apt-get install libjava-gnome-java
# sudo apt-get install default-jdk

έπειτα γράφουμε το κώδικα
Κώδικας: Επιλογή όλων
import org.gnome.gdk.Event;
import org.gnome.gtk.Button;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

public class ExampleQuit
{
    public static void main(String[] args) {
        final Window w;
        final Label l;
        final Button b;

        Gtk.init(args);
        w = new Window();
        b = new Button("Press me!");
        w.add(b);
        b.connect(new Button.Clicked() {
            public void onClicked(Button source) {   
      Gtk.mainQuit();
            }
        });
        w.setTitle("Button_Exit");
   w.setDefaultSize(250, 150);
   w.setPosition(WindowPosition.CENTER);
        w.showAll();

        w.connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
   
   
        Gtk.main();
    }
}
Γιά όσους ξέρουν Java τα πράγματα δεν είναι πολύ δύσκολα.
Το παραπάνω πρόγραμμα δημιουργεί ένα παράθυρο το οποίο περιέχει ένα κουμπί.Ας τα πάρουμε απ'την αρχή.

Εισάγει τις βιβλιοθήκες που θα χρειαστούμε.Αντίστοιχες βιβλιοθήκες είναι η Swing και Awt.
Κώδικας: Επιλογή όλων
import org.gnome.gdk.Event;
import org.gnome.gtk.Button;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;
Αρχικοπιοεί τι Gtk βιβλιιοθήκες.
Κώδικας: Επιλογή όλων
Gtk.init(args);
Δημιουργεί ένα Window το οποίο είναι top level container (Widgets) στο οποίο βάζει έπειτα το κουμπί που δημιουργεί.
Ποιο κάτω συνδέει το κουμπί με ένα χειριστή συμβάντος αν δηλαδή το κλικάρουμε να συμβεί κάτι,στο συγκεκριμένο να τερματίσει το πρόγραμμα.
Κώδικας: Επιλογή όλων
w = new Window();
        b = new Button("Press me!");
        w.add(b);
        b.connect(new Button.Clicked() {
            public void onClicked(Button source) {   
      Gtk.mainQuit();
            }
        });
Σε αυτό το κομμάτι ασχολείται με το top level container το window.Του ορίζει τίτλο,μέγεθος,το στοιχίζει στη μέση και το εμφανίζει μάζι με το περιεχόμενο του.
Κώδικας: Επιλογή όλων
w.setTitle("Button_Exit");
   w.setDefaultSize(250, 150);
   w.setPosition(WindowPosition.CENTER);
        w.showAll();
Χειριστή ώστε να κλείσει το πρόγραμμα αν κλείσει το παράθυρο.
Κώδικας: Επιλογή όλων
w.connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
Αρχικοποιεί και τρέχει το πρόγραμμα.
Κώδικας: Επιλογή όλων
Gtk.main();

Αυτό ήταν τώρα για να το κάνουμε complile
Κώδικας: Επιλογή όλων
javac -cp /usr/share/java/gtk.jar ExampleQuit.java
και για να το τρέξουμε
Κώδικας: Επιλογή όλων
java -cp /usr/share/java/gtk.jar:. ExampleQuit


Χρήσιμες σελίδες http://java-gnome.sourceforge.net/ http://zetcode.com/tutorials/javagnometutorial/

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 23 Ιουν 2011, 00:52
από simosx
@giannosfor: Στην ελληνική κοινότητα GNOME μαζεύουμε προγράμματα για GNOME σε διάφορες γλώσσες.
Δες το παράδειγμα με pygtk, https://github.com/simos/pygtk-hello-world

Μπορείς να φτιάξεις αποθετήριο για το παραπάνω (σε Java) και να ενημερώσεις με γράμμα την ελληνική ομάδα GNOME, http://www.gnome.gr/ ;

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 24 Ιουν 2011, 22:31
από giannosfor
Για όποιον ενδιαφέρετε ένα ακόμα παράδειγμα σε Java υπάρχει εδώ το πρόγραμμα περιέχει σχόλια.
Αυτή τη φορά δείχνουμε πώς να βάλουμε δύο κουμπιά σε ένα παράθυρο.

Re: Γραφικά με GTK+

ΔημοσίευσηΔημοσιεύτηκε: 26 Ιουν 2011, 22:02
από giannosfor
Παράθυρο με δυνατότητα τερματισμού

Αν θέλουμε το παράθυρο να έχει δυνατότητα τερματισμού θα πρέπει κάνουμε τα ακόλουθα.
Στο παράθυρο όταν πατηθεί το κουμπί τερματισμού που είναι συνήθως το "x" στέλνει ένα σήμα destroy δηλαδή να κλείσει το παράθυρο.
Εμείς πρέπει να συνδέσουμε αυτό το σήμα με μία συνάρτηση που να κλείνει το πρόγραμμα.
Η γραμμή κώδικα που χρειάζεται να συμπληρώσουμε είναι:

Κώδικας: Επιλογή όλων
g_signal_connect (window, "destroy",G_CALLBACK (gtk_main_quit), NULL);

Σαν πρώτη παράμετρο πέρνει το αντικείμενο στο οποίο θα παρατηρηθεί το γεγονός που θέλουμε να συνδέσουμε.Σαν δεύτερη παράμετρο πέρνει το σήμα που θέλουμε να χειριστούμε.Η τρίτη παράμετρος είναι η συνάρτηση που θέλουμε να εκτελεστεί όταν το σήμα παρατηρηθεί.Θα μπορούσαμε να χρησιμοποιήσουμε οποιαδήποτε συνάρτηση ακόμα και συναρτήσεις που έχουμε γράψει εμείς.Η συγκεκριμένη τερματίζει το πρόγραμμα.Αυτό που θέλαμε.Τέλος η τέταρτη παράμετρος είναι τα δεδομένα που θέλουμε να περάσουμε στη συνάρτηση που καλούμε.Εδώ δε χρειάζεται να περάσουμε τίποτα και γι'αυτό η τιμή είναι NULL.