Wiki.Pardus-Linux.Org sitesinden

Giriş

Bu çalışmamızda resim gösteren basit bir arayüz yapacağız.

Arayüzün Oluşturulması

Öncelikle qt designer ile arayüzümüzü kolayca oluşturalım.Programı açınca açılan ilk pencerede "main window" u seçip "olustur" a tıklayalım.

Soldaki parçacık kutusu bölümünden ""Buttons" kısmından dört adet "push button" , "display widgets" bölümünden bir adet "label" parçalarını farenin sol tuşu ile tıklayıp ana pencere "main window" üzerine sürükleyerek bırakın ve resimde olduğu gibi yerleştirin.Üstteki "label" in boyutunu büyütmek için üstüne tıklayın.Tıkladığınızda üstünde mavi noktalar oluşur.Bu noktalara tıkladığınızda boyutlarını değiştirebilirsiniz.

Daha sonra yerleştirdiniz parçacıklara çift tıklayarak isimlerini resimdeki gibi değiştirin.

Şimdi sıra düğmelere görev atamakta."Düzenle > Sinyal slot düzenle" yi tıklayın yada "f4" e basın.Resimde görüldüğü gibi kapat tuşuna tıklayıp tuşu bırakmadan biraz sürükleyip boşluk üzerinde bırakın.Sakın başka bir parçacık üzerine bırakmayın.

Yeni bir pencere açılacak.Açılan pencerede birinci bölümden "clicked()" seçip, aşağıdaki "Tüm sinyal ve slotları göster" tıklayıp, sağdaki bölümden "close()" seçip, tamam deyip kapatıyoruz.

Aynı işlemi "Resim-1,-2,-3" tuşları için de yapın.

Arayüzle işimiz bitti.Şimdi aklınıza "Peki resimleri nerede göstereceğiz?" sorusu takılmış olabilir.Bu soruya ben de bir soruyla cevap vereyim: düğmelerle ne yapacağımız belli olduğuna göre acaba o kadar büyük "label" ile ne yapacağız? Bu sorularını cevabını birazdan vereceğiz.Şimdi yaptığımız bu formu bir yere resim.ui uzantısı ile kaydedin.İsim önemli değil ama son ek ".ui" olmalı.

Kodların Ayarlanması

resim.ui adıyla kaydedilmiş dosyanın olduğu dizine gidip konsolda şu komutu verin:

pyuic4 resim.ui -o resim.py

Artık elimizde az önce yaptığımız formun kodları var.Ancak bu kodların henüz hazır olmadığını ve bir kaç düzenleme yapmamız gerektiğini önceki denemelerden biliyorsunuz.

resim.py dosyasını açıp en altına şu kodları yapıştırıyoruz:

app = QtGui.QApplication(sys.argv)
window = QtGui.QMainWindow()
ui = Ui_MainWindow()
ui.setupUi(window)

window.show()
sys.exit(app.exec_())

Şimdi sıra düğmelere atayacağımız görevlerin kodlarını ayarlamakta.

Daha önceki denemelerimizden tuşlara görev atayabilmemiz için bu kodları fonksiyon içinde yazacağımızı biliyoruz.Ancak fonksiyonun içine resim gösterebilmek için ne yazacağız? Bundan önce yukarıda sorulan soruyu cevaplayalım.Resmimizi "label" parçacığı sayesinde göstereceğiz.Çok basit bir kod yardımıyla:setPixmap().Ancak ondan önce resmi tanımlamamız gerekecek.Bir basit kod daha:"QtGui.QPixmap".Bu kodlar sayesinde önce resimlerimizi tanımlayacağız.Sonra da resmi açması için kod yazacağız:

def ac1(self):
	res1 = QtGui.QPixmap(  "resim-1.jpg" )
	ui.label.setPixmap(res1 )

Burada yazdığımız "( "resim-1.jpg" )" bölüm resmimizin olduğu yer.Şu an ben resim-1.jpg ve resim.py dosyalarım aynı dizinde bulunuyor.Eğer siz farklı bir dizinden resim alacaksanız resmin bulunduğu adresi tam olarak yazın.

Bu komutları sadece bir düğme için yazdık.Diğer iki düğme için de aynı kodları yazıyoruz ama resimlerin adlarını belirttiğimiz yerleri değiştirmeyi unutmuyoruz.

Bu komutları düğmelere atayabilmek için önce fonksiyon olarak tanımlamamız sonra da bu fonksiyonları sınıf içine almamız gerekiyor. Yani kodlarımızın son hali şöyle:

class resim:
	def __init__(self, ui):
		self.ui = ui
	
	def ac1(self):
	        res1 = QtGui.QPixmap(  "resim-1.jpg" )
	        ui.label.setPixmap(res1 )

        def ac2(self):
	        res2 = QtGui.QPixmap(  "resim-2.jpg" )
	        ui.label.setPixmap(res2 )

        def ac3(self):
	        res3 = QtGui.QPixmap(  "resim-3.jpg" )
	        ui.label.setPixmap(res3 )

Şimdi sıra yazdığımız kodları düğmelere atamak da.Dosyadan aşağıda verdiğim bölümü bulun:

        self.retranslateUi(MainWindow)
        QtCore.QObject.connect(self.pushButton_4,QtCore.SIGNAL("clicked()"),MainWindow.close)
        QtCore.QObject.connect(self.pushButton,QtCore.SIGNAL("clicked()"),MainWindow.close)
        QtCore.QObject.connect(self.pushButton_2,QtCore.SIGNAL("clicked()"),MainWindow.close)
        QtCore.QObject.connect(self.pushButton_3,QtCore.SIGNAL("clicked()"),MainWindow.close)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

Biz "def retranslateUi(self, MainWindow):" yardımıyla biliyoruz ki:

ui.pushButton  = (Resim-1 tuşu)

Bu tuşun içinde geçtiği komutun en son bölümünü

MainWindow.close

silip (ui.pushButton_4 = (kapat) a dokunmuyoruz o zaten kapatmak için kullanılacak)

self.resim.ac1  (resim sınıfımız, ac1 bu sınıf içindeki fonksiyonumuz: Yukarıda yazdığımız kodlar) 

kodunu yazıyoruz.

Bu değişikli resim tuşlarının üçü için de yapıyoruz.

Son olarak da

self.retranslateUi(MainWindow)

yazısını hemen altına

self.resim = resim(self)

yazıyoruz.

Yani son hali şöyle:

        self.retranslateUi(MainWindow)
	self.resim = resim(self)
        QtCore.QObject.connect(self.pushButton_4,QtCore.SIGNAL("clicked()"),MainWindow.close)
        QtCore.QObject.connect(self.pushButton,QtCore.SIGNAL("clicked()"),self.resim.ac1)
        QtCore.QObject.connect(self.pushButton_2,QtCore.SIGNAL("clicked()"),self.resim.ac2)
        QtCore.QObject.connect(self.pushButton_3,QtCore.SIGNAL("clicked()"),self.resim.ac3)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

Son olarak dosyanın en üstüne şu kodları ekliyoruz:

import random, sys

Artık programımız çalışır durumda.Programı çalıştırmak için resim.py dosyasının olduğu dizinde konsolda şu komutu verin:

python resim.py

Karşılaştığınız sorunlar için forumda açtığım konuya yazabilirsiniz.

Adres: http://forum.pardus-linux.org/viewtopic.php?p=86032#86032