6. Pygtk’de Resimlerle Çalışmak

Arayüz tasarlarken, programlarımızın görselliğini artırmak, bunları daha göze hitap eder bir hale getirmek için çoğu zaman arayüz üzerine ufak resimler eklemek isteriz. Resimler, abartılmadıkları sürece, programların kullanışlılığı üzerinde olumlu etkide bulunan öğelerdir.

Pygtk, resimlerle çalışmamızı kolaylaştıracak pek çok araç barındırır. İşte biz de bu bölümde bu araçların neler olduğunu, Pygtk uygulamalarına nasıl resim ekleyebileceğimizi inceleyeceğiz.

6.1. Pencere Araçlarına Stoktan Resim Eklemek

Bildiğiniz gibi, Pygtk’de bir düğme oluşturmak için basitçe şu formülü kullanıyorduk:

btn = gtk.Button("düğme")

Burada parantez içinde belirttiğimiz karakter dizisi düğmemizin adı oluyor... “Button” adlı pencere aracı bunun dışında bir parametre daha alır. Bu parametrenin adı “stock”tur. Bunu şöyle kullanıyoruz:

btn = gtk.Button(stock = resim)

“stock” parametresinin yerine http://www.pygtk.org/docs/pygtk/gtk-stock-items.html adresinde gösterilen değerlerden birini yazabilirsiniz. İsterseniz hemen bununla ilgili bir örnek verelim:

#-*-coding: utf-8-*-
import pygtk
pygtk.require20()
import gtk

class ResimliDugme(object):
    def __init__(self):
        self.pencere = gtk.Window(gtk.WINDOW_TOPLEVEL)
        self.pencere.set_border_width(10)
        self.pencere.connect("delete_event", gtk.main_quit)

        self.vbox = gtk.VBox(False, 10)

        self.etk = gtk.Label("Çıkmak istediğinize emin misiniz?")

        self.vbox.pack_start(self.etk, False, False, 0)

        self.hbut = gtk.HButtonBox()

        self.vbox.pack_start(self.hbut)

        self.btn_cik = gtk.Button(stock = gtk.STOCK_QUIT)
        self.btn_cik.connect("clicked", gtk.main_quit)

        self.hbut.pack_start(self.btn_cik, False, False, 0)

        self.btn_iptal = gtk.Button(stock = gtk.STOCK_CANCEL)

        self.hbut.pack_start(self.btn_iptal, False, False, 0)

        self.pencere.add(self.vbox)

        self.pencere.show_all()

    def main(self):
        gtk.main()

rd = ResimliDugme()
rd.main()

Burada düğmeler için kendimiz ayrıca bir ad belirlemedik. “stock” parametresi içinde belirttiğimiz resim, düğme için uygun bir isim de belirler.

Eğer yukarıdaki örneği çalıştırdığınızda düğme üzerinde herhangi bir simge/resim görmüyorsanız bunun sebebi kullandığınız GTK temasıdır... Windows’ta GTK ile birlikte gelen “gtkthemeselector” adlı uygulama yardımıyla kullandığınız temayı değiştirerek düğme üzerinde resim gösterebilen bir tema seçebilirsiniz. “gtkthemeselector” adlı uygulamaya Başlat > Programlar > GTK yolunu takip ederek ulaşabilirsiniz. Eğer bu programı menü içinde bulamazsanız “C:\GTK\bin” klasörü içindeki “gtkthemeselector.exe” adlı dosyaya çift tıklayarak da programı çalıştırabilirsiniz. Orada görünen temalar içinde mesela “Metal” adlı tema düğmeler üzerindeki resimlerin görünmesini sağlar. Eğer “Ben mutlaka varsayılan temayı kullanmak istiyorum. Ama düğme üzerindeki resimler de görünsün istiyorum,” diyorsanız “C:\GTK\share\themes\MS-Windows\gtk-2.0” klasörü içindeki “gtkrc” adlı dosyayı düzenleyerek varsayılan temanın, düğme üzerindeki resimleri göstermesini sağlayabilirsiniz. O dosya içindeki “gtk-button-images” adlı seçeneğin değerini “1” yapıp dosyayı bu şekilde kaydetmeniz yeterli olacaktır... Yani o seçenek şöyle görünmeli:

gtk-button-images = 1

GNU/Linux’ta Ubuntu dağıtımının geliştiricilerinin GNOME masaüstü ayarlarında yaptıkları bir değişiklik nedeniyle Ubuntu’da Pygtk uygulamalarındaki düğme simgeleri görünmez.. Üstelik kullandığınız GTK temasını değiştirmek de burada hiçbir işe yaramayacaktır. Ubuntu’da düğme simgelerini gösterebilmek için “gconf-editor” içindeki “/desktop/gnome/interface/” yolu içindeki “buttons_have_icons” ve “menus_have_icons” değerlerine birer tik atmamız gerekiyor...

6.2. Pencere Araçlarına Dosyadan Resim Eklemek

Yukarıda, pencere araçlarına nasıl stoktan resim ekleyeceğimizi gördük. Şimdi ise pencere araçlarına bilgisayarımızda bulunan başka resimleri de eklemeyi öğreneceğiz. Dilerseniz bir örnek üzerinden gidelim:

import pygtk
pygtk.require20()
import gtk

class Resim(object):
    def __init__(self):
        self.pencere = gtk.Window(gtk.WINDOW_TOPLEVEL)
        self.pencere.connect("delete_event", gtk.main_quit)

        self.resim = gtk.Image()
        self.resim.set_from_file("falanca.png")
        self.resim.show()

        self.btn = gtk.Button()
        self.btn.add(self.resim)
        self.btn.show()

        self.pencere.add(self.btn)

        self.pencere.show()

    def main(self):
        gtk.main()

r = Resim()
r.main()

Burada öncelikle gtk.Image() fonksiyonunu kullanarak bir resim nesnesi oluşturuyoruz. Daha sonra set_from_file() adlı metottan yararlanarak bilgisayarımızda bulunan “falanca.png” adlı dosyayı seçiyoruz. Böylece programımızda hangi resmi kullanacağımızı belirlemiş olduk. Tabii show() metodunu kullanarak resmimizi göstermeyi unutmuyoruz...

Resmimizi tanımladıktan sonra normal şekilde bir düğme oluşturuyoruz ve add() metodunu kullanarak resmi düğmeye ekliyoruz. Yine show() metodunu kullanarak düğmemizi göstermeyi ihmal etmiyoruz.

Son olarak düğmemizi de pencereye ekleyip gösterdikten sonra işimiz bitmiş oluyor...

6.3. Pencere Araçlarına Resim ve Etiket Eklemek

Yukarıda, bir pencere aracına nasıl resim ekleyeceğimizi gördük. Peki aynı pencere aracına hem resim, hem de etiket eklemek istersek ne yapacağız? Dilerseniz yine bir örnek üzerinden gidelim:

#-*-coding: utf-8-*-

import pygtk
pygtk.require20()
import gtk

class Uygulama(object):
    def __init__(self):
        #penceremizi oluşturalım...
        self.pencere = gtk.Window(gtk.WINDOW_TOPLEVEL)

        #penceremizin düzgün kapanmasını sağlayalım...
        self.pencere.connect("delete_event", gtk.main_quit)

        #burada, biraz sonra tanımlayacağımız "kutu_olustur()" adlı fonksiyonu
        #çağırıp bunu bir değişkene atıyoruz.
        self.kutu = self.kutu_olustur("istihzacom.png", "www.istihza.com")

        #düğmemiz...
        self.btn = gtk.Button()

        #biraz önce tanımladığımız kutuyu düğmenin içine yerleştiriyoruz
        self.btn.add(self.kutu)

        #düğmemizi de pencerenin içine koyuyoruz.
        self.pencere.add(self.btn)

        #pencereyi ve pencere araçlarını gösteriyoruz.
        self.pencere.show_all()

    def kutu_olustur(self, rsm, etk):
        #biraz sonra tanımlayacağımız resim ve etiketi tutması için bir HBox()
        #haznesi oluşturuyoruz...
        self.hbox = gtk.HBox()

        #resmimizi tanımlıyoruz.
        self.resim = gtk.Image()

        #set_from_file() metodu ile bilgisayarımızda bulunan bir resmi alıyoruz.
        #yukarıda __init__ fonksiyonu içinde "kutu_olustur()" fonksiyonunu
        #çağırırken "rsm" değişkenini "istihzacom.png" olarak belirledik. Yani
        #bilgisayarımızdan aldığımız resmin adı "istihzacom.png" olacak.
        self.resim.set_from_file(rsm)

        #burada da etiketimizi tanımlıyoruz. Etiket metninin yerinde gördüğünüz
        #"etk" değişkenini yukarıdaki __init__ fonksiyonu içinde
        #"www.istihza.com" olarak belirlemiştik. Dolayısıyla etiket metnimiz
        #"www.istihza.com" olacak.
        self.etiket = gtk.Label(etk)

        #şimdi resim ve etiketi en başta oluşturduğumuz HBox() haznesi içine
        #tek tek yerleştiriyoruz.
        self.hbox.pack_start(self.resim)
        self.hbox.pack_start(self.etiket)

        #resmimizi ve etiketimizi gösteriyoruz.
        self.resim.show()
        self.etiket.show()

        #fonksiyonumuz HBox() haznesini döndürüyor... Böylece HBox() haznesini,
        #içine yerleştirdiğimiz resim ve etiketle birlikte kullanabiliyoruz.
        return self.hbox

    def main(self):
        gtk.main()

uyg = Uygulama()
uyg.main()

Yukarıdaki örnekte yaptığımız açıklamaları dikkatle inceleyin. Özellikle kutu_olustur() fonksiyonunun nasıl bir işlev gördüğüne dikkat edin. Bu fonksiyon, resim ve etiket öğelerini bir HBox() haznesi içine yerleştirip tek bir paket halinde bize veriyor. Biz de bu paketi __init__() fonksiyonu içinde “self.btn” olarak tanımladığımız düğmeye yerleştiriyoruz. Böylece düğme içinde hem resmi hem de etiketi aynı anda gösterme imkanına kavuşuyoruz.

Bu örnekte, gtk.Button() adlı pencere aracının HBox() haznesini içine alabildiğini görüyoruz. Daha önceki derslerimizde HBox() haznesini hep doğrudan pencere üzerine veya başka bir hazne içine yerleştiriyorduk. Pygtk’de gtk.Button() adlı pencere aracı da aslında bir haznedir. Normalde bu pencere aracı içinde yalnızca bir etiket bulunur. Ama gördüğünüz gibi, gtk.Button() aslında HBox() haznesini de içinde barındırma kapasitesine sahip.

Bu bilgiden yola çıkarak, düğme içindeki etiket ve resmin konumlarıyla rahatlıkla oynayabilirsiniz. Mesela “Hbox()” yerine “VBox()” haznesini kullanacak olursanız resim üstte, etiket altta olacaktır...

Dilerseniz bir gtk.Button() aracı içine tablo dahi yerleştirebilirsiniz. Yani yukarıdaki örneği temel alarak şöyle bir şey yazabilirsiniz:

import pygtk
pygtk.require20()
import gtk

class Uygulama(object):
    def __init__(self):
        self.pencere = gtk.Window(gtk.WINDOW_TOPLEVEL)
        self.pencere.connect("delete_event", gtk.main_quit)

        self.kutu = self.kutu_olustur("istihzacom.png", "www.istihza.com")

        self.btn = gtk.Button()
        self.btn.add(self.kutu)

        self.pencere.add(self.btn)

        self.pencere.show_all()

    def kutu_olustur(self, rsm, etk):
        self.tablo = gtk.Table(2, 2)

        self.resim = gtk.Image()
        self.resim.set_from_file(rsm)

        self.etiket = gtk.Label(etk)

        self.tablo.attach(self.resim, 0, 1, 0, 1)
        self.tablo.attach(self.etiket, 0, 1, 1, 2)

        self.resim.show()
        self.etiket.show()
        return self.tablo

    def main(self):
        gtk.main()

uyg = Uygulama()
uyg.main()

Bu örneklerde temel olarak yaptığımız şey, resim ve etiketi tek bir hazne içine yerleştirdikten sonra (bu hazne HBox olabilir, VBox olabilir, hatta gördüğünüz gibi Table dahi olabilir...), alıp bunu bir düğme içine sokmaktan ibaret...