Design2Py Converter v1.5

Design2Py Converter v1.5

PyQt5 ile arayüz geliştirirken tasarım yapmak için aşağıdaki şemada görüldüğü gibi 2 yöntem mevcuttur:

1) Kod ile tasarım yapmak,
2) Qt designer ile tasarım yapmak

Genellikle zaman kazandırdığı ve kolay olduğu için Qt Designer ile tasarım yapmayı tercih ediyorum. Qt Designer ile tasarım yapıldığında bu tasarımın Python ile kullanılması gerekmektedir. Bu aşamada da 2 farklı yöntem mevcuttur:

1) Pyuic5 ile hazırlanan tasarım Python kodlarına dönüştürülür.
2) loadUi fonksiyonu ile tasarım Python tarafından çağrılır.

loadUi fonksiyonu kullanıldığında arayüz elemanları proje geliştirirken okunamadığı için kod tamamlama özelliği çalışmıyor. Bu özellik çalışmadığında hem arayüz elemanları nesne adlarıyla çağrılırken hem de arayüz elemanlarının sahip olduğu özellikleri (fonksiyonları) kullanırken zorlanıyorsunuz. Bu sebeple hazırlamış olduğum tasarımı Pyuic5 ile Python kodlarına dönüştürmeyi tercih ediyorum. Pyuic5 dönüştürücüsünün nasıl kullanıldığını Ücretsiz PyQt5 Dersleri eğitim serisinde bulabilirsiniz. Biraz zahmetli, hataya açık ve arayüz geliştirirken vakit alan bir işlem olduğu için bu işlemleri daha kolay yapabilmek adına Design2Py Converter programını geliştirdim. YouTube kanalımda PyQt5 derslerini anlatırken sıklıkla kullandım ve mail aracılığı ile isteyenlere ücretsiz olarak verdim. (Bu yazının yazıldığı tarih itibariyle benden 109 kişi programı istedi. Eğer onlarda verdiğim linki başkalarıyla paylaştıysa gerçek kullanıcı sayısı daha fazla olabilir.) Design2Py Converter v1.3 hakkında detaylı bilgilere buradan ulaşabilirsiniz.

Design2Py Converter v1.3'te Karşılaşılan Hatalar

Programı farklı işletim sistemlerinde çok sayıda kişi kullandı ve geri bildirim olarak aşağıdaki hataları bildirdiler:

1) Farklı PyQt5 versiyonlarında Pyuic5'in farklı yapıda olmasından dolayı bir versiyonda başarılı bir şekilde dönüşüm yaparken (PyQt 5.6 - pyuic5.bat) bir başka versiyonda (PyQt 5.11.3 - pyuic5.exe) dönüşüm yapmaması.
2) Pyuic5 veya Pyrcc5 in bulunduğu klasör yolunu bulmak için ortam değişkenlerine erişmeye çalışıyordum ve bu sebeple programın kapanması.

Yeni özelliklerin olduğu ve bahsedilen hataların olmadığı v1.5 hazırlandı.

Design2Py Converter v1.5'te Yenilikler

1. Dil Desteği

Design2Py Converter v1.5 Türkçe ve İngilizce olmak üzere 2 farklı dilde çalışabilmektedir. Dil tercihi menüden değiştirilebilmektedir.

2. Ayarları Kaydetme-Yükleme Özelliği

Kullanım kolaylığı için getirilen bir özelliktir. Programı kapatmadan önce mevcut ayarlarını (dil tercihi, seçilen sekme (sayfa) ve dosya yolları) kayıt ederseniz ve programı daha sonra açtığınızda kaldığınız yerden devam edebilmek için kaydetmiş olduğunuz ayarları yükleyebilirsiniz. Böylelikle her seferinde dosya yollarını ayarlamak zorunda kalmazsınız.

Ayrıca Programın bulunduğu klasör içerisinde formata uygun (program tarafından oluşturulmuş) init.json adında ayarlar dosyası varsa, Design2Py Converter bu dosyada yer alan ayarlara göre açılacaktır. Bu özellik sayesinde kaydetmiş olduğunuz ayarları tekrar yüklemenize ihtiyaç duymayacaksınız.

3. Yardım Menüsünde Yapılan Değişiklikler

Yardım menüsünde 2 ufak değişiklik yapılmıştır. Daha önce YouTube kanalıma yönlendiren link zaten PyQt5 Dersleri ile YouTube kanalına gidilebildiği için Blog sayfama yönlendirilmiştir ve adı Yapay Zeka Labs Blog olarak değiştirilmiştir. İkinci olarak Sürüm Notları seçeneği ile program ve versiyon hakkında detaylı bilgilere ulaşılması adına bu sayfaya yönlendirme sağlanmıştır.

4. Yapay Zeka Labs Sekmesi

Giriş sekmesinde bulunan Yapay Zeka Labs logosuna tıkladığınızda Yapay Zeka Labs YouTube kanalım açılacaktır.

5. ui-2-py Sekmesi

Programın farklı PyQt5 versiyonlarında Pyuic5'in farklı yapıda olmasından dolayı bir versiyonda başarılı bir şekilde dönüşüm yaparken (PyQt 5.6 - pyuic5.bat) bir başka versiyonda (PyQt 5.11.3 - pyuic5.exe) dönüşüm yapmaması en büyük problemdi ve bu problemden kurtulmak için Pyuic5 bileşeninin kullanımını iptal ettim. Dönüşüm işleri programın içinde gerçekleşmektedir. Bu sekmede kullanıcının yapması gereken tek şey dönüştürmek istediği tasarımı Tasarımı (.ui) Seç butonuna basarak seçmesidir. Önceki versiyonda (v1.3) Python kodlarına dönüştürülen tasarım mevcut tasarım ile aynı klasöre ve tasarım adının sonuna _python eklenerek kaydediliyordu. Kullanıcıya kayıt isminde ve klasör yolunda değişiklik yapma hakkı tanıdım. İsterse Kayıt Yoluna Gözat tuşuna basarak değişiklik yapabilir. Son olarak dönüşüm işlemini gerçekleştirmek için kullanıcının Dönüştür ui -> py tuşuna basması gerekiyor.

Buna ek olarak Pyuic5'in hangi klasörde olduğunu bulmak için "Ortam Değişkenlerine" erişmeye çalışmamdan kaynaklanan sorunlardan da kurtulmuş oldum.

6. qrc-2-py Sekmesi

"Ortam Değişkenlerine" erişerek Pyuic5 ve Pyrcc5 in bulunduğu klasör yolunu kullanıcıyı yormadan bulmam güzel bir özellikti ancak farklı kullanıcılarda bahsettiğim gibi sorunlara yol açmıştı. Arayüz açılırken kayıtlı ayarlarla açılması ve mevcut ayarların kayıt edilmesi özelliklerini getirerek yine kullanıcıyı yormadan ihtiyaç duyulan klasör yolları otomatik bulunacaktır. Kullanıcının klasör yollarını değiştirmediği sürece sadece bir defa bilgisayarında Pyrcc5'in bulunduğu klasör yolunu bulması gerekecektir. Pyrcc5'e Gözat tuşuna basılarak Pyrcc5 seçildikten sonra Dosyayı (.qrc) Seç tuşuna basılarak Python kodlarına dönüştürülmek istenen Qt Kaynak Dosyası seçilmelidir. Son olarak Python kodlarını elde etmek için Dönüştür qrc->py tuşuna basılmalıdır.

Burada Python kodlarına dönüştürülen Qt kaynak dosyası mevcut Qt kaynak dosyası ile aynı klasöre aynı ismin sonuna _rc eklenerek kaydedilmektedir.

Design2Py Converter v1.5 İndirme Bağlantıları

İşletim Sistemi	Design2Py Converter	Yayınlanma Tarihi
Windows 7-10	v1.5.0	08.04.2020 - 19:34
Ubuntu 16.04	v1.5.0	08.04.2020 - 19:44
Ubuntu 18.04	v1.5.0	09.04.2020 - 00:50
MacOS High Sierra 10.13	v1.5.0	19.05.2020 - 13:40
Raspbian	-	-
Ubuntu Mate	-	-

Test Edilen PyQt5 Versiyonları

Aşağıdaki tabloda Design2Py Converter programının test edildiği ve herhangi bir sorunla karşılaşılmayan PyQt5 versiyonları gösterilmektedir. Benim tek başıma her işletim sistemi için ve her PyQt5 versiyonu için test etmek için vaktim olmadığından sizler de burada yer almayan PyQt5 versiyonları kullanıyorsanız, programın o versiyonlar için de durumunu yorum olarak bildirirseniz tabloyu o bilgiler ışığında güncelleyeceğim.

İşletim Sistemi	Test Edilen PyQt5 Versiyonları
Windows 7-10	5.6.0 - 5.11.3 - 5.13.2
Ubuntu 16.04	5.11.3
Ubuntu 18.04	5.13.1
MacOS High Sierra 10.13	5.11.3
Raspbian	-
Ubuntu Mate	-

PyQt5'de Signal - Slot Kavramı

PyQt5 Signal - Slot (İşaret - İşlev) Kavramı

Qt birden çok platformu destekleyen (cross-platform) masaüstü, gömülü sistem ve mobil ortamlar için grafiksel kullanıcı arayüzü geliştirmemizi sağlayan bir araçtır. Qt ile kullanıcı arayüzü geliştirmek için C++ programlama dili kullanılmaktadır. PyQt5, Qt programını Python ile kullanmamızı sağlar. PyQt5 hakkında detaylı açıklamalara önceki yazılarımdan ulaşabilirsiniz:

PyQt5 (pip ile) Windows Kurulumu
PyQt5 ile Grafiksel Kullanıcı Arayüzü Geliştirme

Bu yazıda

• Signal-slot nedir ?
• Signal-slot mekanizması nasıl çalışır ?
• Öntanımlı (Default) işaretler (signal) nedir, nasıl kullanılır ?
• Qt Designer ile signal-slot bağlantısı nasıl yapılır ?
• Kod yazarak signal-slot bağlantısı nasıl yapılır ?
• Kendimiz işaret (signal) tanımlayabilir miyiz ?
• Signal-slot bağlantısı nasıl kaldırılır (iptal edilir)?
sorularına cevap bulacağız.

1. Signal - Slot Nedir ? Signal - Slot Mekanizması Nasıl Çalışır ?

Signal, Türkçe'de hem sinyal hem de işaret olarak kullanılmaktadır. Slot kelimesinin ise yuva anlamı vardır. Aslında slot programlama dili açısından düşünüldüğünde fonksiyon olarak kullanılabilir. Fonksiyon da dilimizde yaygın olarak kullanılan bir kelime olmasına karşın Türkçe karşılığı işlev'dir. Signal-Slot yerine işaret-işlev diyebiliriz ancak bu kavram Qt'ye özgü bir kavram olduğu için signal-slot kavramından işaret-işlev olarak bahsedildiğinde anlam karmaşası olabilir. Bu sebeple yazının geri kalan bölümünde signal-slot olarak orijinal hali ile kullanmayı planlıyorum. Signal-Slot bana göre Qt'de dolayısıyla PyQt5'de arayüz geliştirmek için öğrenilmesi gereken en önemli kavram. Signal-Slot yapısı kullanılmadan kullanıcıya sadece yapmış olduğunuz tasarımı verebilirsiniz. Signal-Slot yapısı kullanılmadan yapılan bir arayüz yani tasarım üzerinde kullanıcı hiç bir işlem yapamaz. Kullanıcıya arayüz ile sunulan özelliklerin bir karşılığının olması ancak signal-slot yapısı ile sağlanır.

Signal-slot kavramını yukarıda yer alan animasyon üzerinden anlatmaya çalışalım. Animasyonun sol üst köşesinde bir kullanıcı yer alıyor, sağ üst köşede ise bizim hazırlamış olduğumuz bir kullanıcı arayüzü olduğunu varsayalım. Kullanıcı, hazırlamış olduğumuz arayüz üzerinde bir eylemde bulunduğunda örneğin bir tuşa bastığında bir sinyal yayınlanır ve bu sinyal bir fonksiyona bağlı ise o fonksiyon çağrılır ve fonksiyon içerisinde yer alan işlem gerçekleştirilir. Arayüzü hazırlayan kişi arayüz elemanları ve fonksiyonlar arasında signal-slot bağlantıları yapar ve kullanıcı arayüz üzerinde bir işlem yaptığında ilgili fonksiyon çağrılır. Signal-slot mekanizması bu şekilde çalışır. Örneklerle birlikte bu kavramı daha iyi anlayacaksınız.

2. Öntanımlı (Default) İşaretler (Signals) Nedir? Öntanımlı İşaretler Nasıl Kullanılır ?

Öntanımlı (default) işaretler Qt tarafından önceden tanımlanmış parçacığa özgü işaretlerdir. Bu hazır işaretler çok rahatlıkla kullanılabilir. Yazının ilerleyen bölümlerinde öntanımlı işaretlerin kullanımını örneklerle daha iyi anlayacaksınız. Örneğin basılabilir tuşun (QPushButton) tıklandı (clicked), basıldı (pressed), bırakıldı (released) gibi öntanımlı işaretleri bulunmaktadır. Bu işaretleri fonksiyonlara bağladığınızda ve kullanıcı bu tuş üzerinde bir eylemde bulunduğunda ilgili fonksiyonlar çalıştırılır.

3. Qt Designer ile Signal - Slot Bağlantısı Nasıl Yapılır ?

Qt Designer ile signal-slot bağlantısı yapmak için öncelikle Qt Designer açılır. Qt Designer içerisinde yer alan menüde bulunan Edit sekmesine tıklanır ve bu sekmede yer alan Edit Signals/Slots seçeneğine tıklanır.

Aynı işlemi F4 tuşuna basarak ya da aşağıdaki şekilde belirtilen tuşa basarak gerçekleştirebilirsiniz.

Signals-slots moduna geçmeden önce 1) arayüz tasarımını tamamlamış olmalısınız ve 2) arayüz üzerinde yer alan parçacıkların hangi işlevleri yapacağını belirlemiş olmanız gerekir. Signal-slot kavramını anlatabilmek için yatay kaydırma butonu (QHorizontalSlider) ve etiket (QLabel) parçacıklarından oluşan aşağıdaki tasarım yapıldı. Burada kaydırma butonunun konumu değiştirtirildiğinde o anki pozisyonunun değeri QLabel da gösterilecektir. Arayüz tasarımını tamamladık ve arayüzde yer alan parçacıkların ne iş yapacakları tanımlandıktan sonra yukarıda anlatıldığı gibi Signals/Slots moduna geçiş yapılır.

Signals-slots modunda iken Yatay Kaydırıcıya (HorizontalSlider) farenin sol tuşu ile tıklanır ve bu tuşa basılı tutularak etiketin (Label) üzerine getirilir ve burada tuş bırakılır. Tuşu bırakır bırakmaz Configure Connection adında yeni bir pencere açılacaktır. Bu pencerenin sol bölümünde yatay kaydırıcıya ait öntanımlı (default) işaretler bulunmaktadır. Biz burada değer değişti (valueChanged(int)) işaretini seçiyoruz. Bu işaret kaydırıcının değeri değiştiğinde işaret yayar. Biz bu işareti bir slot'a yani fonksiyona bağladığımızda kaydırıcının her değeri değiştiğinde bu fonksiyon çağrılacaktır.

İşaret seçimini yaptıktan sonra pencerenin sağ bölümü aktif hale gelir ve burada öntanımlı (default) slot'lar yani fonksiyonlar bulunmaktadır. Hem işaretler için hem de slot'lar için öntanımlı işaret ve slotları kullanabildiğimiz gibi kendi işaret ve fonksiyonlarımızı da Edit butonuna basarak tanımlayabiliriz. Biz burada etiket (Label) için setNum(int) fonksiyonunu seçiyoruz.

Yukarıda yer alan ekran görüntüsünde gördüğünüz gibi yatay kaydırıcının (HorizontalSlider) değeri değiştirildiğinde bu değer etikete (Label) yazdırılmaktadır. Burada basit bir şekilde herhangi bir kod yazmadan Qt Designer ile signal-slot bağlantısı gerçekleştirmiş olduk. Bu yöntem benim tercih ettiğim bir yöntem değil bu yüzden örnek sayısını arttırmadan ve daha fazla detaya girmeden konunun bu kadar yeterli olduğunu düşünüyorum. Kod yazarak signal-slot bağlantısının nasıl yapıldığını bir sonraki bölümde inceleyeceğiz.

4. Kod Yazarak Signal-Slot Bağlantısı Nasıl Yapılır ?

Bu bölümde, yazının başında yer alan şemada gösterilen connect(), @pyqtSlot() ve pyqtSignal fonksiyonlarının kullanımını öğreneceğiz.

4.1. "connect()" Fonksiyonu ile Signal-Slot Bağlantısı

Qt Designer ile Signal-Slot bağlantısı bölümünde anlatılan Yatay kaydırıcı (QHorizontalSlider) ve etiket (QLabel) parçacıklarından oluşan tasarım bu bölümde de kullanılacak.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

from PyQt5.QtWidgets import* from qt_designer_python import Ui_MainWindow class dersler_7(QMainWindow): def __init__(self): super().__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) self.ui.horizontalSlider.valueChanged['int'].connect(self.set_current_value_slot) def set_current_value_slot(self, current_index): self.ui.label.setText("değer = " + str(current_index)) uygulama = QApplication([]) pencere = dersler_7() pencere.show() uygulama.exec_()

13 nolu satırda Yatay Kaydırıcının o anki değerini int tipinde değer gönderen "valueChanged" işareti 16 nolu satırda kendi tanımladığımız "set_current_value_slot" fonksiyonuna "connect" ile bağladık. Dikkat ederseniz yazmış olduğumuz slot yani fonksiyon "valueChanged" işaretinden gönderilen int tipindeki yatay kaydırıcının değerini alacak şekilde yazılmıştır. Daha detaylı bilgiye yazının en alt bölümünde yer alan videoyu izleyerek ulaşabilirsiniz.

4.2. @pyqtSlot() ile Sinyal-Slot Bağlantısı Yapma

Burada @pyqtSlot() ile signal-slot bağlantısı yaparken slot'a istediğimiz ismi veremiyoruz. Slot'a vereceğimiz isim aşağıda belirtilen formatta olması gerekir.

on_ nesne_adi_ sinyal_adi()

Bir önceki bölümde "connect()" fonksiyonu ile yapmış olduğumuz bağlantıyı aşağıdaki kodlarda @pyqtSlot() dekoratörü ile yaptık.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

from PyQt5.QtWidgets import* from PyQt5.QtCore import pyqtSlot from qt_designer_python import Ui_MainWindow class dersler_7(QMainWindow): def __init__(self): super().__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) @pyqtSlot(int) def on_horizontalSlider_valueChanged(self, current_index): self.ui.label.setText("değer = " + str(current_index)) uygulama = QApplication([]) pencere = dersler_7() pencere.show() uygulama.exec_()

2 nolu satırda QtCore modülünden pyqtSlot sınıfını kodlarımıza eklediğimize dikkat ediniz. Daha detaylı bilgiye yazının en alt bölümünde yer alan videoyu izleyerek ulaşabilirsiniz.

• Bir İşaret birden fazla Slot'a bağlanabilir

• Birden fazla İşaret bir Slot'a bağlanabilir

• Bir İşaret başka bir İşaret'e bağlanabilir

4.3. pyqtSignal() ile Sinyal Oluşturma

Bu bölümde pyqtSignal() kullanımına örnek verebilmek için aşağıdaki akış diyagramını gerçekleştiren kodlar yazıldı.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

from PyQt5.QtWidgets import* from PyQt5.QtCore import pyqtSignal from qt_designer_python import Ui_MainWindow class dersler_7(QMainWindow): my_signal = pyqtSignal(int) def __init__(self): super().__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) self.ui.horizontalSlider.valueChanged[int].connect(self.my_signal[int]) self.my_signal[int].connect(self.my_slot) def my_slot(self, current_index): self.ui.label.setText("değer = " + str(current_index)) uygulama = QApplication([]) pencere = dersler_7() pencere.show() uygulama.exec_()

2 nolu satırda QtCore modülünden pyqtSignal sınıfını kodumuza eklediğimize dikkat ediniz. 8 nolu satırda int tipinde değer gönderen-alan kendi sinyalimizi tanımladık. Yatay kaydırıcının valueChanged sinyalini kendi tanımlamış olduğumuz sinyale 16 nolu satırda bağladık. Bu bağlantı ile bir sinyalin bir başka sinyale bağlanabildiğini görmüş olduk. Son olarak kendi tanımladığımız sinyali yine kendi tanımladığımız slot'a 18 nolu satırda bağladık. Kaydırıcının değeri değiştiğinde valueChanged sinyali yayınlanacak dolayısıyla buna bağlı olan sinyalimiz de yayınlanmış olacak ve kendi sinyalimize bağlı my_slot() fonksiyonu çağrılarak etikte yatay kaydırıcının değeri yazdırılacak. Bu tarz bağlantılar bu uygulama için gereksiz olsa da daha karmaşık arayüzler hazırladığınızda bu tür bağlantılara ihtiyacınız olacak.

Kendi tanımlamış olduğumuz işaretin yayınlanmasını sağlayan emit() fonksiyonu kullanımına örnek verebilmek için aşağıdaki akış diyagramını gerçekleştiren kodlar yazıldı.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

from PyQt5.QtWidgets import* from PyQt5.QtCore import pyqtSignal from qt_designer_python import Ui_MainWindow class dersler_7(QMainWindow): my_signal = pyqtSignal(int) def __init__(self): super().__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) self.ui.horizontalSlider.valueChanged['int'].connect(self.set_current_value_slot) self.my_signal[int].connect(self.my_slot) def set_current_value_slot(self, current_index): self.my_signal.emit(current_index) def my_slot(self, current_index): self.ui.label.setText("değer = " + str(current_index)) uygulama = QApplication([]) pencere = dersler_7() pencere.show() uygulama.exec_()

5. Signal-slot bağlantısı nasıl kaldırılır (iptal edilir)?

Signal-slot bağlantısı yaparken connect() fonksiyonunu kullanarak yazmış olduğumuz ifadenin aynısını disconnect() ifadesiyle yazıyoruz. Eğer disconnect(slot_adi) yazarsak sadece yazmış olduğumuz slot ile bağlantı koparılır. disconnect() fonksiyonunu içerisinde hiçbir ifade yer almayacak şekilde yazarsak belirtilen işaret ile yapılmış olan tüm slot bağlantıları kaldırılır. Signal-slot bağlantısının iptal edilmesi çok sık kullanılan bir yöntem değildir ama arayüz geliştirirken ihtiyaç duyacağınız durumlar olabilir.

Signal-slot mekanizması kolay ve esnek kod yazmamızı sağlayan Qt nin sağlamış olduğu en önemli özelliklerden biridir. Bu yazıda signal-slot kavramını, signal-slot mekanizmasının nasıl çalıştığını, nasıl signal-slot bağlantısının yapıldığını elimden geldiğince anlatmaya çalıştım. Detaylı açıklamalara aşağıdaki videoyu izleyerek ulaşabilirsiniz.

PyQt5 (pip ile) Windows Kurulumu

PyQt5 (pip ile) Windows Kurulumu

Qt, çok gelişmiş bir Grafiksel Kullanıcı Arayüz (GKA) (Graphical User Interface, GUI) hazırlama programıdır. Qt ile profesyonel arayüzler hazırlanabilmektedir. Qt'nin bana göre en önemli avantajı birçok işletim sisteminde (Windows, Linux, Mac) kullanılabiliyor olmasıdır. Bu özellik cross-platform olarak geçiyor. Qt'nin ticari ve Açık Kaynak (Open Source) olmak üzere 2 çeşit lisansı mevcuttur. Hobi amaçlı kullanım ücretsizdir. Qt ile yazılım geliştirmek için C++ programlama dilini biliyor olmanız gerekmektedir. C++ programlama dili; son yıllarda kullanım alanı çok hızlı bir şekilde genişleyen, öğrenmesi ve kod yazması kolay olan Python programlama diline göre zor bir programlama dilidir. Python son yıllarda veri bilimi, yapay zeka vb. bir çok alanda çalışan yazılımcıların ilk sıradaki tercihi olmaktadır. Hem Python programlama dilinin nimetlerinden yararlanmak hem de Qt ile arayüz geliştirmek istediğimizde karşımıza PyQt çıkmaktadır. PyQt, Qt'nin mevcut tanımlı özelliklerini Python ile kullanmamızı sağlayan köprü vazifesi gören ayrı bir programdır. Literatürde bu işlem "binding" kelimesi ile tanımlanmaktadır. PyQt Riverbank tarafından geliştirilmiştir. Ticari ve Açık Kaynak (GPL) lisansı vardır. Qt4 kullanımı sağlayan PyQt4 ve son çıkan Qt5 kullanımını sağlayan PyQt5 olmak üzere 2 çeşit Genel PyQt versiyonu vardır. Biz burada PyQt5 kurulumu yapacağız.

1. Önkoşullar

PyQt5 kurulumuna geçmeden Python 3.5 veya daha üst bir Python versiyonunun işletim sisteminize kurulu olması gerekir. Eğer windows işletim sisteminizde Python kurulu değilse Python Windows Kurulumu yazımı okumanızı tavsiye ederim. İlgili yazıda işletim sisteminizde Python'un kurulu olup olmadığını nasıl kontrol edeceğiniz veya hangi Python versiyonunun kurulu olduğunu nasıl öğreneceğinizi bulabilirsiniz. Ayrıca kurulum için kullanmayı planladığımız pip komutunun doğru kullanımı için pip nedir ? pip3 nedir ? nasıl kurulur ? yazımı okuyabilirsiniz.

2. Pip ile PyQt5 Kurulumu

Python programlama dili için yazılım deposu olan PyPI sitesinden pip komutu ile Python paketleri/kütüphaneleri kolay bir şekilde işletim sisteminize kurulur. PyQt5 için aşağıdaki komut çalıştırılarak kurulum gerçekleştirilir.

pip install PyQt5

Kullandığınız pip komutunun işletim sisteminizde yer alan Python versiyonlarından hangisine kurulum yapacağını kontrol ederek doğru Python versiyonu için kurulum yapınız.

Yukarıdaki tablodan görebildiğiniz gibi PyQt5 ile arayüz geliştirmek için 2 farklı seçenek mevcut. Bunlardan birincisi Kod yazarak tasarım ikincisi ise Qt Designer ile tasarım.

3. Qt Designer Kurulumu

Qt Designer ile yapılan tasarım da 2 farklı şekilde; Python kodlarına dönüştürülerek veya Python kodlarıyla birlikte kullanmak üzere Python ortamına yüklenerek kullanılabilir. pip ile yapılan kurulum bize sadece kod yazarak tasarım yapmamızı sağlar. Qt Designer kullanmak için aşağıdaki komut çalıştırılarak Windows işletim sisteminize designer kurulumu gerçekleştirebilirsiniz. Ayrıca bu kurulum ile Qt Designer tasarımını Python kodlarına dönüştüren (pyuic5) dönüştürücüsünün kurulumu da gerçekleştirilir.

pip install pyqt5-tools

Bu komut hakkındaki detaylı bilgiye ve kurulumun tüm detaylarına aşağıda yer alan videoyu izleyerek ulaşabilirsiniz.

PyQt5 ile Grafiksel Kullanıcı Arayüzü (GUI) Geliştirme

PyQt5 ile Grafiksel Kullanıcı Arayüzü (GUI) Geliştirme

PyQt5 ile Grafiksel Kullanıcı Arayüzü (GKA; Graphical User Interface, GUI) tasarımı yapmak için birçok seçeneğimiz var. Bunları 3 başlık altında toplamak mümkün. GUI tasarımını aşağıdaki yöntemlerle gerçekleştirebiliriz.

1. GUI tasarımını Kod yazarak gerçekleştirme
2. Qt Designer ile tasarım yapıp tasarımı Python kodlarına çevirme
3. Qt Designer ile tasarım yapıp bu tasarımı loadUi modülü yardımıyla Python kodlarında kullanmak

Burada PyQt5 kurulumu yaptığınızı varsayıyorum eğer yapmadıysanız PyQt5 kurulumu için önceki yazımı takip edebilirsiniz.
Windows'a PyQt5 Kurulumu

Tasarıma geçmeden önce belirtmem gereken diğer bir husus da PyQt5 ile GUI tasarımı yaparken kullanacağımız GUI araçları hakkında ilgili dökümanlara nasıl ulaşacağımızı bilmemiz konusudur.
PyQt5 sınıf, metod ve fonksiyonlarına aşağıdaki yolu izleyerek ulaşabiliriz:

Başlat > Tüm Programlar > PyQt GPL v5.6 for Python v3.5 (x64) > Documentation > PyQt Reference Guide

bu yolda belirtilen klasör ismi sizin kurmuş olduğunuz PyQt5 versiyonuna göre farklı olabilir.

Kurulum ve PyQt5 dökmümanlarına ulaşma konusundan bahsettikten sonra arayüz geliştirme yöntemlerine geçebiliriz.

1. Kod Yazarak Arayüz Geliştirme

Tüm 3 yöntem için de aynı arayüzü tasarlayacağız. Bunun için hem basit hem de sinyal-slot yapısını kullanacağımız bir tasarıma karar verdim. Qt'nin en önemli özelliklerinden biri de sinyal-slot(yuva) yapısıdır. Bu yapıyı bir örnekle açıklamaya çalışalım. Arayüzde bir tuşa bastığımızda tıklandı (clicked) sinyali yayınlanır ve bu tuşa basıldığında yapılacak işleri (dosya seçme, kamera açma, yazıyı silme, aklınıza gelebilecek herşey) yazdığımız slot'da belirtmemiz gerekir. Slot burada bir fonksiyondur. Bizim tek yapmamız gereken sinyal ile slot bağlantısını "connect" işlevi ile tanımlamak. Geliştireceğimiz arayüz aşağıdaki ekran görüntüsünde gösterilmiştir. Bu arayüz bir etiket (QLabel) iki tane düğmeden (QPushButton) oluşmaktadır. Etikette "Merhaba PyQt5" yazmaktadır. Temizle düğmesi ile etikette yazan yazı silinmektedir. Göster düğmesi ile etikete yeniden "Merhaba PyQt5" yazılmaktadır.

Bu arayüzü elde etmek için yazacağımız kod aşağıda belirtilmiştir.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

#from PyQt5.QtWidgets import QWidget, QApplication, QLabel, QPushButton, QVBoxLayout from PyQt5.QtWidgets import* from PyQt5.QtCore import* class first_GUI(QWidget): def __init__(self): #super(first_GUI, self).__init__() #super().__init__() QWidget.__init__(self) self.label_text = QLabel("Merhaba PyQt5") self.label_text.setAlignment(Qt.AlignCenter) self.label_text.setStyleSheet("color: rgb(0,0,255);font-weight: bold; font-size: 16pt") pushButton_clear = QPushButton("Temizle") pushButton_clear.setMinimumHeight(40) pushButton_clear.setStyleSheet("font-weight: bold; font-size: 16pt") pushButton_show = QPushButton("Göster") pushButton_show.setMinimumHeight(40) pushButton_show.setStyleSheet("font-weight: bold; font-size: 16pt") pushButton_clear.clicked.connect(self.clear_text) pushButton_show.clicked.connect(self.show_text) vertical_layout = QVBoxLayout() vertical_layout.addWidget(self.label_text) vertical_layout.addWidget(pushButton_clear) vertical_layout.addWidget(pushButton_show) self.setLayout(vertical_layout) self.setWindowTitle("PyQt5 first GUI") self.resize(400,300) def clear_text(self): self.label_text.clear() def show_text(self): self.label_text.setText("Merhaba PyQt5") app = QApplication([]) widget = first_GUI() widget.show() app.exec_()

Şimdi adım adım bu kodları açıklayalım.

1 2 3

#from PyQt5.QtWidgets import QWidget, QApplication, QLabel, QPushButton, QVBoxLayout from PyQt5.QtWidgets import* from PyQt5.QtCore import*

1 nolu satır yorum satırıdır. Burada isterseniz yorum satırında belirtildiği gibi kullanacağınız arayüz bileşenlerini tek tek ekleyebilirsiniz ya da 2 nolu satırda belirtildiği gibi QtWidgets sınıfına ait tüm bileşenler eklenir. 3 nolu satırda QtCore sınıfına ait metodlar eklenir.

6 7	class first_GUI(QWidget): def __init__(self):

6 nolu satırda QWidget sınıfından ürettiğimiz "first_GUI" adında sınıfı tanımlıyoruz. Burada QWidget yerine QDialog ya da QMainWindow tipinde bir sınıf oluşturabilirdik. Her sınıfın __init__() fonksiyonu vardır ve sınıf çağrıldığında ilk olarak bu fonksiyon çalıştırılır. self ifadesi bir sınıfta tanımlanan değişkenlerin, fonksiyonların sınıf dışından çağrılabilmesi için o sınıfa ait bir fonksiyon, değişken olduğunu belirtmek için kullanılır. C++ programlama dilinde kullanılan this ifadesi ile aynı kullanıma sahiptir.

8 9 10

#super(first_GUI, self).__init__() #super().__init__() QWidget.__init__(self)

8 ve 9 nolu satırlar yorum satırıdır. Bu satırları yazmamın sebebi 10 nolu satıra alternatif olarak kullanılabiliyor olmalarıdır. super() fonksiyonu miras alma (inheritance) durumunda kullanılan miras aldığımız bir üst (parent, base) sınıfın nitelik ve metodlarını kullanmamızı sağlar. 8 nolu satır eski tip super() fonksiyonudur. 9 nolu satır ise Python 3 ile yeni kullanılmaya başlayan super() fonksiyonudur. 10 nolu satır ile üst sınıfın __init__() fonksiyonu çağrılır. 10 nolu satırı ya da yerine 9 nolu satırı yazmaksak programımızı çalıştırdığımızda hata alırız.

12 13 14

self.label_text = QLabel("Merhaba PyQt5") self.label_text.setAlignment(Qt.AlignCenter) self.label_text.setStyleSheet("color: rgb(0,0,255);font-weight: bold; font-size: 16pt")

12 nolu satırda QLabel etiket parçacığı (widget) "Merhaba PyQt5" yazısını içerecek şekilde oluşturulur. Nesne adı (object name) "label_text" olarak tanımlanmıştır ve sınıf dışında (slot tanımlamalarında) bu etikete ulaşmamız gerekeceğinden bu parçacık self ifadesiyle tanımlanmıştır.
13 nolu satırda etiket içerisinde yazan yazının hizalaması ortalanmıştır. Bu hizalamayı setAlignment fonksiyonu sağlamaktadır.
14 nolu satırda etikette yazan yazının rengini, font büyüklüğünü ve font kalınlığını setStyleSheet fonksiyonunu CSS tanımlamaları kullanarak ayarlıyoruz.

16 17 18 19 20 21

pushButton_clear = QPushButton("Temizle") pushButton_clear.setMinimumHeight(40) pushButton_clear.setStyleSheet("font-weight: bold; font-size: 16pt") pushButton_show = QPushButton("Göster") pushButton_show.setMinimumHeight(40) pushButton_show.setStyleSheet("font-weight: bold; font-size: 16pt")

16 nolu satırda üzerinde "Temizle" yazan QPushButton (buton, düğme, tuş) parçacığı tanımlıyoruz. Bu düğmenin minimum yüksekliğini 40 piksel olarak 17 nolu satırda setMinimumHeight fonksiyonunu kullanarak tanımlıyoruz. 18 nolu satırda daha önce etiket için yaptığımız gibi setStyleSheet fonksiyonunu kullanarak düğme üzerinde yazan yazının font özelliklerinde daha güzel görünmesini sağlayacak değişiklikler yapıyoruz. Bu düğmemizin adını "pushButton_clear" olarak tanımlıyoruz. Ben hangi parçacık olduğunu belirten (pushButton) ve ne işe yarayacağını belirten kelimeleri birleştirerek isimlendirme yapıyorum. Böylece kod içerisinde hangi tipte bir düğme olduğunu ve ne işe yaradığını anlamak kolay oluyor ve kodun anlaşılabilirliğini arttırıyor. Burada etiketten farklı olarak oluşturduğumuz düğmeyi self'e atamadık çünkü sınıf dışında ihtiyacımız olmayacak eğer ihtiyaç duyarsak self olarak tanımlamalıyız. 19, 20 ve 21 nolu satırlar önceki satırların 2. düğme olan "Göster" düğmesini oluşturmamıza ve aynı işlemleri onun üzerinde yapmamızı sağlamaktadır.

23 24

pushButton_clear.clicked.connect(self.clear_text) pushButton_show.clicked.connect(self.show_text)

23 ve 24 nolu satırlar sinyaller ile fonksiyonları (slotları) birbirine connect metodunu kullanarak bağladığımız satırlar. "Temizle" düğmesinin clicked sinyalini "clear_text" fonksiyonuyla birbirine bağladık ve "Temizle" düğmesine tıklandığında "clear_text" fonksiyonu çağrılacaktır. "Göster" düğmesinin clicked sinyalini de "show_text" fonksiyonuna bağladık. Kod yazarken türkçe karakter kullanamadığımızdan anlaşılabilir olması için ingilizce değişken ve fonksiyon adı kullanmayı tercih ediyorum.

26 27 28 29

vertical_layout = QVBoxLayout() vertical_layout.addWidget(self.label_text) vertical_layout.addWidget(pushButton_clear) vertical_layout.addWidget(pushButton_show)

26 nolu satırda dikey yerleşim düzeni ( QVBoxLayout ) tanımlıyoruz ve 27, 28, 29 nolu satırlarda addWidget fonksiyonunu kullanarak sırasıyla oluşturduğumuz etiket ve düğmeleri bu dikey yerleşim planı içerisine ekliyoruz. Tasarımınıza göre Yatay yerleşim düzeni ( QHBoxLayout ) veya ızgara yerleşim düzeni ( QGridLayout ) kullanabilirsiniz.

31 32 33

self.setLayout(vertical_layout) self.setWindowTitle("PyQt5 first GUI") self.resize(400,300)

31 nolu satırda oluşturduğumuz dikey yerleşim düzenini sınıfımızın (oluşturacağımız arayüzün) yerleşim düzeni olmasını sağlamak için setLayout fonksiyonuyla tanımlıyoruz. 32 nolu satırda arayüzün gösterileceği pencerenin adının "PyQt5 first GUI" olmasını setWindowTitle fonksiyonunu kullanarak sağlıyoruz. 33 nolu satırda açılacak pencerenin boyutlarını yüksekliği 300 piksel, genişliği 400 piksel olacak şekilde resize fonksiyonunu kullanarak ayarlıyoruz. Bu satır ile "first_GUI" sınıf tanımlaması bitmiştir.

36 37

def clear_text(self): self.label_text.clear()

36 nolu satırda "Temizle" düğmesinin tıklama sinyaline bağlanan "clear_text()" slotunu (fonksiyonunu) tanımlıyoruz. Değişken olarak self değişkenini almaktadır. İşlem olarak QLabel sınıfının clear() fonksiyonu ile etiket içerisinde yazan yazı temizlenir.

39 40

def show_text(self): self.label_text.setText("Merhaba PyQt5")

39 ve 40 nolu satırlarda "Göster" düğmesinin "show_text()" slotu tanımlanmaktadır. Bir etikete yazı yazmak için kullanılan setText() fonksiyonu ile bu düğmeye tıklandığında "Merhaba PyQt5" yazısı yazacaktır. Bu düğmenin yaptığı işi gözlemlemek için öncelikle etikette yazan yazı silinmelidir.

42 43 44 45

app = QApplication([]) widget = first_GUI() widget.show() app.exec_()

Sınıf ve slot tanımlamalarından sonra 42 nolu satırda QApplication sınıfından "app" adında bir nesne tanımlıyoruz. 43 nolu satırda "first_GUI" adında tanımladığımız sınıftan "widget" adında bir nesne tanımlıyoruz. Bu nesnenin show() fonksiyonunu kullanarak arayüz için oluşturduğumuz pencereyi gösteriyoruz (44 nolu satır). 45 nolu satırda QApplication sınıfının exec_() fonksiyonu ile sonsuz bir döngü oluşturulur. Bu ifade ile kullanıcının arayüzü kullanarak fare ve klavye ile yapmış olduğu tüm işlemler yakalanarak komutlar yerine getirilir. Pencere kapatılana kadar döngü devam eder.
Böylece kod yazarak kullanıcı arayüzü geliştirmiş olduk. Python kodlarından farklı olarak yazdığımız kodu (Windows için) .pyw uzantılı olarak kaydediyoruz.

2. Qt Designer Tasarımını Python Kodlarına Çevirme

İlk yöntemde her şeyi kod yazarak tanımladık. Bu çok uzun bir işlem olmasa da Qt Designer ile tasarım yapmak sizin için uygun olabilir. Bunun için PyQt5 kurulumu ile birlikte gelen Qt Designer açılır.

Kod yazarak yaptığımız tasarımın aynısını Qt Designer ile yaptık. Aşağıdaki videoyu izleyerek tasarımın nasıl yapıldığını izleyebilirsiniz.

Qt Designer ile yapılan tasarımı .ui uzantılı olarak kaydediyoruz. Daha sonra komut satır (cmd) programı açılır. Tasarımı kaydettiğimiz klasöre geçiyoruz ve Python kurulumunun gerçekleştiği klasörde yer alan (“C:\Program Files\Python35\Lib\site-packages\PyQt5\") pyuic5.bat designer ile (.ui uzantılı) yaptığımız tasarım ve bunun Python kodlarına çevrileceğinde hangi isimle kaydedileceğini tanımlayarak çalıştırılır. Örnek kodu aşağıda bulabilirsiniz.

“C:\Program Files\Python35\Lib\site-packages\PyQt5\pyuic5.bat” designer_example.ui -o designer_example.py

Bu kodu çalıştırarak tasarımı Python kodlarına çevirdik. Tasarımda yapacağımız her işlemden sonra kodu çalıştırarak bu dönüşümü gerçekleştirmemiz gerektiğinden yazacağımız kodları otomatik oluşturulan bu Python koduna yazmıyoruz bunun yerine bu kodu kullanacak başka Python kodu (wrapper) yazacağız. Qt Designer ile tasarım yaptığımızda sinyal-slot bağlantısı için 3 farklı yöntem mevcuttur.

1. Kod yazarak sinyal-slot bağlantısı yapma
2. Qt Designer ile sinyal-slot bağlantısı yapma
3. @pyqtSlot() ile sinyal-slot bağlantısı yapma

2.1. Kod Yazarak Sinyal-Slot Bağlantısı Yapma

Python koduna dönüştürülen tasarımı kullanmamızı sağlayan ve sinyal-slot bağlantısının kod yazılarak yapıldığı Python kodunu (wrapper) aşağıda bulabilirsiniz.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

from PyQt5.QtWidgets import* from designer_example import Ui_MainWindow class Pyuic5_example(QMainWindow): def __init__(self): super().__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) self.ui.pushButton_clear.clicked.connect(self.clear_text) self.ui.pushButton_show.clicked.connect(self.show_text) def clear_text(self): self.ui.label.clear() def show_text(self): self.ui.label.setText("Merhaba PyQt5") app = QApplication([]) window = Pyuic5_example() window.show() app.exec_()

Burada satır satır açıkladığımız ilk yöntemden farklı olarak 2 nolu satırda .py uzantılı tasarımın Python kodlarına dönüştürüldüğü dosya adını kullanarak (designer_example) Ui_MainWindow() modülü eklenmiştir.
8 ve 9 nolu satırlarda tasarım kodumuz mevcut Python koduna eklenmiştir. Bu işlem için setupUi() fonksiyonu kullanılmıştır ve ilk yöntemden farklı olarak atama self değişkenine değil de self.ui değişkenine yapılmıştır.
11 ve 12 nolu satırlarda kod yazarak sinyal-slot bağlantıları yapılmıştır. Diğer satırlarda yer alan kodlar ilk yöntemde açıklandığından burada tekrar açıklanmayacaktır.

2.2. Qt Designer ile Sinyal-Slot Bağlantısı Yapma

Sinyal-Slot bağlantısını kod yazarak değil de Qt Designer ile de yapabilirsiniz. Yazı ile bu işlemi anlatmak zor olduğundan dolayı aşağıdaki videoyu izleyerek bağlantının nasıl yapıldığını öğrenebilirsiniz.

Burada 2.1 yönteminde yazmış olduğumuz Python kodlarında yer alan sinyal-slot bağlantılarının yapıldığı 11 ve 12 nolu satırları siliyoruz çünkü bu satırlara ihtiyacımız yok. Bu satırları sildikten sonra kalan kısımları tasarımı yükleme ve tasarlanan arayüzü çalıştırmak için kullanabilirsiniz.

2.3. @pyqtSlot() ile Sinyal-Slot Bağlantısı Yapma

pyqtSlot dekoratörü ile sinyal-slot bağlantısının nasıl yapıldığını aşağıdaki video'yu izleyerek öğrenebilirsiniz.

Qt Designer ile yapmış olduğumuz tasarımı kullanabilmek için yazmış olduğumuz Python kodlarında sinyal-slot bağlantısı için pyqtSlot dekoratörü kullandığımızda slot tanımlamalarından bir satır önce @pyqtSlot() ifadesi eklenir. Burada Slot ismini belirlerken istediğimiz ismi yazamıyoruz belirli bir kurala göre isimlendirme yapmamız gerekiyor. İsimlendirmede kullanacağımız parçacığın nesne adı (object name, bunu designer'dan parçacığa tıkladığımızda sağ tarafta görebilirsiniz) ve kullanılacak sinyal aşağıdaki formatta yazılır:

on_ nesne_adi_ sinyal_adi()

Örnek slot tanımlamalarını aşağıdaki Python kodunun 14 ve 18. satırlarında görebilirsiniz.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

from PyQt5.QtWidgets import* from PyQt5.QtCore import pyqtSlot from designer_example import Ui_MainWindow class Pyuic5_example(QMainWindow): def __init__(self): super().__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) @pyqtSlot() def on_pushButton_clear_clicked(self): self.ui.label.clear() @pyqtSlot() def on_pushButton_show_clicked(self): self.ui.label.setText("Merhaba PyQt5") app = QApplication([]) window = Pyuic5_example() window.show() app.exec_()

Burada önceki kodlardan farklı olarak QtCore sınıfından pyqtSlot 2 nolu satırda gösterildiği gibi eklenir.

3. Qt Designer ile Tasarım + loadUi modülü ile bu Tasarımı Kullanma

İkinci yöntemde tasarımda yaptığınız her değişiklik sonrasında tasarımı Python kodlarına çevirmek için pyuic.bat çalıştırılır. Bu kod çalıştırma işlemi size zahmetli bir iş olarak gelebilir. Tüm bunlarla uğraşmadan Qt Designer ile yapmış olduğunuz tasarımı kolay bir şekilde dönüşüm yapmadan kullanabileceğiniz bir yöntem mevcut. Qt Designer ile yapmış olduğumuz tasarımı kullandığımız Python kodu aşağıda verilmiştir.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

from PyQt5.QtWidgets import* from PyQt5.QtCore import pyqtSlot from PyQt5.uic import loadUi class loadUi_example(QMainWindow): def __init__(self): super().__init__() loadUi("designer_example.ui",self) @pyqtSlot() def on_pushButton_clear_clicked(self): self.label.clear() @pyqtSlot() def on_pushButton_show_clicked(self): self.label.setText("Merhaba PyQt5") app = QApplication([]) window = loadUi_example() window.show() app.exec_()

Burada diğer yazdığımız kodlardan farklı olarak 4 nolu satırda uic modülünde yer alan loadUi fonksiyonu eklenmiştir ve bu fonksiyon 10 nolu satırda .ui uzantılı tasarımı yüklemek için kullanılmıştır. Burada sinyal-slot bağlantısı 2.3 bölümünde anlatıldığı gibi pyqtSlot() dekorlayıcısı kullanılarak yapılmıştır. Diğer kodlar daha önce açıklandığından tekrar açıklanmayacaktır. Sanırım PyQt5 ile GUI geliştirmek için en ideal yöntem son olarak bahsettiğimiz üçüncü yöntem gibi gözüküyor.