4.2. Widżety

Prosta 1-okienkowa aplikacja prezentująca większość podstawowych widżetów dostępnych w bibliotece Qt6 za pomocą Pythona 3 i biblioteki PyQt6. Przykład ilustruje również techniki programowania obiektowego (ang. Object Oriented Programing).

W wybranym katalogu przygotuj środowisko wirtualne Pythona. Zainstaluj bibliotekę PyQt6 w aktywowanym środowisku:

(.venv) pip install pyqt6

Uwaga

Wymagana wiedza:

• Znajomość Pythona w stopniu średnim.

• Znajomość podstaw projektowania interfejsu z wykorzystaniem bibliotek Qt (zob. scenariusz Kalkulator).

• Przedstawiona aplikacja składa się z 3 plików, które muszą być zapisane w tym samym katalogu, np. widzety.

4.2.1. QPainter – podstawy rysowania

Zaczynamy od utworzenia głównego pliku aplikacji o nazwie widzety.py. Wstawiamy do niego poniższy kod:

Plik widzety.py. Kod nr

from PyQt6.QtWidgets import QApplication, QWidget
from gui_z1 import UiWidget


class Widgety(QWidget, UiWidget):
    """ Główna klasa aplikacji """

    def __init__(self):
        super().__init__()
        self.setWindowTitle('Widżety')


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    okno = Widgety()
    okno.show()
    sys.exit(app.exec())

Klasa Widgety posłuży do zdefiniowania głównego okna oraz logiki działania naszej aplikacji. Dziedziczy z klasy QWidget – podstawowej klasy biblioteki Qt, która jest bazą dla każdego elementu GUI, w tym okna głównego. Dziedziczy również z klasy UiWidget importowanej z pliku gui.py, w którym zdefiniujemy elementy interfejsu graficznego.

W konstruktorze klasy (__init()__) wywołujemy konstruktory klas rodziców (super().__init__()) oraz ustawiamy tytuł okna aplikacji (self.setWindowTitle('Widżety')).

Pozostały kod tworzy instancję aplikacji w oparciu o klasę QApplication, a także instancję okna głównego, czyli klasy Widgety, wyświetla je i uruchamia pętlę zdarzeń.

Kod klasy UiWidget umieszczamy we wspomnianym pliku o nazwie gui.py:

Plik gui.py. Kod nr

from ksztalty import Ksztalty, Ksztalt
from PyQt6.QtWidgets import QHBoxLayout, QVBoxLayout


class UiWidget:
    """ Klasa definiująca GUI """

    def __init__(self):

        # widget definiujący kształt, instancja klasy Ksztalt
        self.ksztalt1 = Ksztalt(None, Ksztalty.RECT)

        # układ poziomy dla kształtów oraz przycisków CheckBox
        uklad_h1 = QHBoxLayout()
        uklad_h1.addWidget(self.ksztalt1)

        # główny układ okna, pionowy
        uklad_okna = QVBoxLayout()
        uklad_okna.addLayout(uklad_h1)

        # ustawienie głównego układu okna
        self.setLayout(uklad_okna)

W konstruktorze klasy tworzymy widżet ksztalt1, który będzie mógł rysować figury geometryczne. Widżet jest instancję klasy Ksztalt zaimportowanej z pliku ksztalty.py. Z tego pliku importujemy również klasę Ksztalty, której właściwości oznaczają rysowane figury, w tym przypadku prostokąt: self.ksztalt1 = Ksztalt(None, Ksztalty.Rect)

Jeden widżet może zawierać wiele różnych elementów GUI, które trzeba w jakiś sposób porozmieszczać. Służą do tego układy graficzne (ang. layouts). Biblioteka Qt udostępnia układy:

• poziomy (QHBoxLayout),

• pionowy (QVBoxLayout),

• tabelaryczny (QGridLayout).

Rysowany kształt dodajemy do układu poziomego za pomocą metody addWidget(). Następnie sam układ poziomy dodajemy do pionowego układu okna za pomocą metody addLayout(). Główny układ okna naszego widżetu ustawiamy w metodzie setLayout().

4.2.2. Klasa Ksztalt

W pliku ksztalty.py umieszczamy poniższy kod:

Plik ksztalty.py. Kod nr

from PyQt6.QtWidgets import QWidget
from PyQt6.QtGui import QPainter, QColor, QPolygon
from PyQt6.QtCore import QPoint, QRect, QSize


class Ksztalty:
    """ Klasa pomocnicza, symuluje typ wyliczeniowy """
    RECT, ELLIPSE, POLYGON, LINE = range(4)


class Ksztalt(QWidget):
    """ Klasa definiująca widget do rysowania kształtów """
    # współrzędne prostokąta i trójkąta
    prost = QRect(1, 1, 101, 101)
    punkty = QPolygon([
        QPoint(1, 101),  # punkt początkowy (x, y)
        QPoint(51, 1),
        QPoint(101, 101)])

    def __init__(self, parent, ksztalt=Ksztalty.RECT):
        super().__init__(parent)

        # kształt do narysowania
        self.ksztalt = ksztalt

        # kolor obramowania i wypełnienia w formacie RGB
        self.kolor_o = QColor(0, 0, 0)
        self.kolor_w = QColor(255, 255, 255)

Za pomocą klasy Ksztalty symulujemy typ wyliczeniowy, tzn. angielskim nazwom kształtów, które będą dostępne jako dane statyczne klasy, przypisujemy kolejne liczby całkowite zaczynając od 0. Kształty, które będziemy rysowali, to:

• RECT – prostokąt, wartość 0;

• ELLIPSE – elipsa, w tym koło, wartość 1;

• POLYGON – linia łamana zamknięta, np. trójkąt, wartość 2;

• LINE – linia łącząca dwa punkty, wartość 3.

Klasa Ksztalt dziedziczy z klasy QWidget i pozwoli na rysowanie zdefiniowanych w klasie Ksztalty figur. W konstruktorze definiujemy właściwości obiektu, który ma być rysowany:

• self.ksztalt – rysowana figura wskazana w parametrze ksztalt, której domyślna wartość to Ksztalty.RECT,

• self.kolor_o, self.kolor_w – kolory obramowania i wypełnienia.

Kolory tworzymy za pomocą klasy QColor, używając formatu RGB, np .: QColor(0, 0, 0).

Do klasy Ksztalt dodajemy metody odpowiedzialne za rysowanie:

Plik ksztalty.py. Kod nr

    def paintEvent(self, e):
        qp = QPainter()
        qp.begin(self)
        self.rysuj_figury(qp)
        qp.end()

    def rysuj_figury(self, qp):
        qp.setPen(self.kolor_o)  # kolor obramowania
        qp.setBrush(self.kolor_w)  # kolor wypełnienia
        # wygładzanie kształtu
        qp.setRenderHint(QPainter.RenderHint.Antialiasing)

        if self.ksztalt == Ksztalty.RECT:
            qp.drawRect(self.prost)
        elif self.ksztalt == Ksztalty.ELLIPSE:
            qp.drawEllipse(self.prost)
        elif self.ksztalt == Ksztalty.LINE:
            qp.drawLine(self.prost.topLeft(), self.prost.bottomRight())
        elif self.ksztalt == Ksztalty.POLYGON:
            qp.drawPolygon(self.punkty)

Za rysowanie każdego widżetu odpowiada metoda paintEvent(). Nadpisujemy ją. Tworzymy instancję klasy QPainter umożliwiającej rysowanie różnych kształtów (qp = QPainter()). Między metodami begin() i end() wywołujemy metodę rysuj_figury(), w której implementujemy kod rysujący poszczególne kształty.

Metoda rysuj_figury() otrzymuje obiekt klasy QPainter. Jego metody setPen() i setBrush() pozwalają ustawić kolor odpowiednio obramowania i wypełnienia. Następnie w instrukcji warunkowej sprawdzamy rodzaj rysowanego kształtu i wywołujemy metodę rysującą odpowiednią figurę:

• drawRect() – rysuje prostokąt,

• drawEllipse() – rysuje elipsę (koło),

• qp.drawLine() – pozwala narysować linię wyznaczoną przez współrzędne punktu początkowego i końcowego typu QPoint; nasza klasa wykorzystuje tu współrzędne lewego górnego (self.prost.topLeft()) i prawego dolnego (self.prost.bottomRight()) rogu domyślnego prostokąta prost,

• drawPolygon() – pozwala rysować wielokąty, jako argument podajemy listę typu QPolygon punktów typu QPoint opisujących współrzędne kolejnych wierzchołków; domyślne współrzędne zdefiniowane zostały jako atrybut punkty klasy Ksztalty,

Informacja

Każdy rysowany kształt wpisany jest w prostokąt zdefiniowany jako właściwość statyczna klasy Ksztalt: prost = QRect(1, 1, 101, 101). Obiekt ten jest instancją klasy QRect. Dwie pierwsze wartości to współrzędne lewego górnego, a dwie następne prawego dolnego rogu prostokąta w 2-wymiarowym układzie współrzędnych.

Początek układu współrzędnych, w odniesieniu do którego definiujemy w Qt pozycję widżetów czy punkty opisujące kształty, znajduje się w lewym górnym rogu obiektu rodzica, np. głównego okna aplikacji.

Informacja

Warto zrozumieć różnicę pomiędzy zmiennymi klasy a zmiennymi instancji. Zmienne (właściwości, atrybuty) klasy, określane również jako dane statyczne, są wspólne dla wszystkich jej instancji. W naszej aplikacji zdefiniowaliśmy w ten sposób zmienne prost i punkty klasy Ksztalt.

Zmienne instancji natomiast są inne dla każdego obiektu. Definiujemy je w konstruktorze, używając słowa self. Np. każda instancja klasy Ksztalt może mieć inną wartość właściwości self.ksztalt.

Zob.: Class and Instance Variables

Ćwiczenie

• Uruchom skrypt widzety.py.

• Spróbuj zmienić rodzaj rysowanej figury oraz kolory jej obramowania i wypełnienia.

Być może zauważysz, że po uruchomieniu naszego skryptu rozmiar okna aplikacji nie jest dopasowany do rozmiaru rysowanej figury. Spróbujemy to zmienić uzupełniając kod klasy Ksztalt:

Plik ksztalty.py. Kod nr

    def sizeHint(self):
        return QSize(102, 102)

    def minimumSizeHint(self):
        return QSize(102, 102)

    def ustaw_ksztalt(self, ksztalt):
        self.ksztalt = ksztalt
        self.update()

    def ustaw_kolor_w(self, r=0, g=0, b=0):
        self.kolor_w = QColor(r, g, b)
        self.update()

W nadpisanych metodach sizeHint() i minimumSizeHint() określamy sugerowany i minimalny rozmiar naszego kształtu. Są one niezbędne, aby układy graficzne (ang. layouts), w których umieścimy kształty, zarezerwowały odpowiednio dużo miejsca na ich wyświetlenie.

Kod uzupełniliśmy również o dwie metody ustaw_ksztalt() i ustaw_kolor_w(), które przydadzą się nam dalej. Jak wskazują nazwy – pozwolą one zmieniać kształt i jego kolor wypełnienia już po utworzeniu obiektu. Metoda self.update() wymusi ponowne narysowanie kształtu.

Ćwiczenie

• Ponownie przetestuj działanie aplikacji, spróbuj zmienić rodzaj rysowanej figury oraz kolor jej wypełnienia.

Informacja

W kolejnych krokach będziemy dodawać widżety różnego typu. Kod tworzący odpowiednie obiekty i ustawiający ich początkowe właściwości dopisywać będziemy w pliku gui.py w konstruktorze klasy UiWidget. Dodając widżety, musimy pamiętać o zaimportowaniu odpowiedniej klasy z PyQt6.QtWidgets na początku pliku.

Kod wiążący sygnały ze slotami umieścimy w pliku widzety.py, w konstruktorze klasy Widgety. Sloty implementować będziemy jako funkcje tej klasy.

4.2.3. Przyciski CheckBox

Wykorzystując klasę Ksztalt utworzymy kolejny obiekt do rysowania figur. Dodamy także przyciski typu QCheckBox umożliwiające zmianę rodzaju wyświetlanej figury.

Importy w pliku gui.py:

from PyQt6.QtWidgets import QCheckBox, QButtonGroup

Klasa UiWidget przyjmuje następującą postać:

Plik gui.py. Kod nr

class UiWidget:
    """ Klasa definiująca GUI """

    def __init__(self):

        # widget definiujący kształt, instancja klasy Ksztalt
        self.ksztalt1 = Ksztalt(None, Ksztalty.RECT)
        self.ksztalt2 = Ksztalt(None, Ksztalty.ELLIPSE)
        self.ksztalt_aktywny = self.ksztalt1

        # przyciski CheckBox
        uklad_chk = QVBoxLayout()  # układ pionowy
        self.grupa_chk = QButtonGroup()
        for i, v in enumerate(('Kwadrat', 'Koło', 'Trójkąt', 'Linia')):
            self.chk = QCheckBox(v)
            self.grupa_chk.addButton(self.chk, i)
            uklad_chk.addWidget(self.chk)
        przyciski = self.grupa_chk.buttons()
        przyciski[self.ksztalt_aktywny.ksztalt].setChecked(True)

        # przycisk CheckBox do wyboru aktywnego kształtu
        self.ksztalt_chk = QCheckBox('<=')
        self.ksztalt_chk.setChecked(True)
        uklad_chk.addWidget(self.ksztalt_chk)

        # układ poziomy dla kształtów oraz przycisków CheckBox
        uklad_h1 = QHBoxLayout()
        uklad_h1.addWidget(self.ksztalt1)
        uklad_h1.addLayout(uklad_chk)
        uklad_h1.addWidget(self.ksztalt2)
        # koniec CheckBox

        # główny układ okna, pionowy
        uklad_okna = QVBoxLayout()
        uklad_okna.addLayout(uklad_h1)

        # ustawienie głównego układu okna
        self.setLayout(uklad_okna)

Dodajemy drugi obiekt self.ksztalt2, domyślnie rysujący elipsę. Definiujemy też dodatkową właściwość self.ksztalt_aktywny, która przechowywała będzie aktualnie wybrany kształt, tzn. albo ksztal1 (domyślnie) albo ksztalt2.

Do tworzenia przycisków typu CheckBox wykorzystujemy pętlę for, która odczytuje z krotki kolejne indeksy i etykiety przycisków. Jeśli masz wątpliwości, jak to działa, przetestuj następujący kod w konsoli Pythona:

>>> for i, v in enumerate(('Kwadrat', 'Koło', 'Trójkąt', 'Linia')):
...   print(i, v)

Odczytane etykiety przekazujemy do konstruktora: self.chk = QCheckBox(v).

Przyciski wyboru kształtu działać mają na zasadzie wyłączności, w danym momencie powinien być zaznaczony tylko jeden z nich. Tworzymy więc grupę logiczną grupa_chk na podstawie klasy QButtonGroup. Do grupy dodajemy przyciski, oznaczając je kolejnymi indeksami: self.grupa_chk.addButton(self.chk, i).

Metoda buttons() zwraca listę przycisków, którą zapisujemy w zmiennej przyciski. Przycisk odpowiadający aktualnemu kształtowi wskazujemy przez indeks self.ksztalt_aktywny.ksztalt i wywołujemy metodę setChecked(True), która go zaznacza.

Poza pętlą tworzymy jeszcze jeden przycisk (self.ksztaltChk = QCheckBox("<=")), niezależny od powyższej grupy. Jego stan wskazuje aktywny kształt. Domyślnie go zaznaczamy: self.ksztaltChk.setChecked(True), co oznacza, że aktywną figurą będzie pierwszy kształt.

Wszystkie elementy interfejsu umieszczamy w układzie poziomym o nazwie uklad_h1. Po lewej stronie znajdzie się ksztalt1, w środku układ przycisków wyboru, a po prawej ksztalt2.

4.2.3.1. Obsługa sygnałów

Teraz zajmiemy się obsługą sygnałów. Przypomnijmy, że są to wydarzenia zachodzące w obrębie okna naszej aplikacji (ruch myszy, kliknięcia, naciśnięcia klawiszy itp.) przechwytywane przez główną pętlę zdarzeń naszej aplikacji. Do ich obsługi używamy slotów, czyli funkcji, w tym wypadku będą to metody klasy Widgety.

W pliku widzety.py rozbudowujemy klasę Widgety:

Plik widzety.py. Kod nr

class Widgety(QWidget, UiWidget):
    """ Główna klasa aplikacji """

    def __init__(self):
        super().__init__()
        self.setWindowTitle('Widżety')

        # Sygnały i sloty
        # przyciski CheckBox
        self.grupa_chk.buttonClicked.connect(self.ustaw_ksztalt)
        self.ksztalt_chk.clicked.connect(self.aktywuj_ksztalt)

    def ustaw_ksztalt(self):
        self.ksztalt_aktywny.ustaw_ksztalt(self.grupa_chk.checkedId())

    def aktywuj_ksztalt(self, wartosc):
        nadawca = self.sender()
        if wartosc:
            self.ksztalt_aktywny = self.ksztalt1
            nadawca.setText('<=')
        else:
            self.ksztalt_aktywny = self.ksztalt2
            nadawca.setText('=>')
        przyciski = self.grupa_chk.buttons()
        przyciski[self.ksztalt_aktywny.ksztalt].setChecked(True)

Grupa przycisków grupa_chk po kliknięciu emituje sygnał buttonClicked()`. Przekazujemy jego obsługę do slotu (metody klasy Widgety) ustaw_ksztalt().

W slocie ustaw_ksztalt() używamy metody o tej samej nazwie klasy Ksztalt do ustawienia nowej figury do narysowania. Jako argument przekazujemy identyfikator klikniętego przycisku odczytywany za pomocą metody checkedId(). Jest to liczba całkowita, która wskazuje jedną z figur zdefiniowanych w klasie Ksztalty.

Przypomnijmy (zob. wyżej), że metoda ustaw_ksztalt() z klasy Kształt aktualizuje identyfikator figury i wywołuje metodę update(), która wywołuje metodę paintEvent(), a ta metodę rysuj_figury(), która rysuje nową figurę.

Kliknięcie przycisku checkbox wskazującego aktywną figurę obsługujemy za pomocą slotu aktywuj_ksztalt(). Jej zadaniem jest ustawienie pierwszego lub drugiego kształtu jako aktywnego. Jeżeli przekazany do slotu argument wartosc będzie miał wartość True, co oznacza, że checkbox został zaznaczony, aktywujemy ksztalt1, w przeciwnym razie ksztalt2. Zmieniamy również odpowiednio tekst wyświetlany przy przycisku.

Informacja

Warto zapamiętać, jak uzyskać dostęp do obiektu nadawcy, który wygenerował dany sygnał. W odpowiednim slocie używamy kodu self.sender().

Ćwiczenie

Uruchom kilkakrotnie aplikację. Spróbuj zmieniać inicjalne rodzaje domyślnych kształtów i kolory wypełnienia figur.

4.2.4. Slider i przyciski RadioButton

Możemy już manipulować rodzajami rysowanych kształtów na obydwu obszarach rysowania. Spróbujemy teraz dodać widżety pozwalające je kolorować.

W pliku gui.py dodajemy importy:

from PyQt6.QtCore import Qt
from PyQt6.QtWidgets import QSlider, QLCDNumber, QSplitter
from PyQt6.QtWidgets import QRadioButton, QGroupBox

Rozbudowujemy konstruktor klasy UiWidget. Po komentarzu # koniec CheckBox wstawiamy:

Plik gui.py. Kod nr

        # Slider i LCDNumber
        self.suwak = QSlider(Qt.Orientation.Horizontal)
        self.suwak.setMinimum(0)
        self.suwak.setMaximum(255)
        self.lcd = QLCDNumber()
        self.lcd.setSegmentStyle(QLCDNumber.SegmentStyle.Flat)

        # układ poziomy (splitter) dla slajdera i lcd
        uklad_h2 = QSplitter(Qt.Orientation.Horizontal, self)
        uklad_h2.addWidget(self.suwak)
        uklad_h2.addWidget(self.lcd)
        uklad_h2.setSizes((125, 75))

        # przyciski RadioButton
        self.uklad_r = QHBoxLayout()
        for v in 'RGB':
            self.radio = QRadioButton(v)
            self.uklad_r.addWidget(self.radio)
        self.uklad_r.itemAt(0).widget().setChecked(True)

        # grupujemy przyciski
        self.grupa_rbb = QGroupBox('Opcje RGB')
        self.grupa_rbb.setLayout(self.uklad_r)
        self.grupa_rbb.setObjectName('Radio')
        self.grupa_rbb.setCheckable(True)

        # układ poziomy dla grupy Radio
        uklad_h3 = QHBoxLayout()
        uklad_h3.addWidget(self.grupa_rbb)
        # koniec RadioButton

Do zmiany wartości składowych kolorów RGB wykorzystamy instancję klasy QSlider, czyli popularny suwak, w tym wypadku poziomy. Po utworzeniu obiektu, ustawiamy za pomocą metod setMinimum() i setMaximum() zakres zmienianych wartości <0-255>.

Następnie tworzymy instancję klasy QLCDNumber, którą wykorzystamy do wyświetlania wartości wybranej za pomocą suwaka. Obydwa obiekty dodajemy do poziomego układu, rozdzielając je instancją typu QSplitter. Obiekt tez pozwala płynnie zmieniać rozmiar otaczających go widżetów.

Przyciski typu RadioButton posłużą nam do wskazywania kanału koloru RGB, którego wartość chcemy zmienić. Tworzymy je w pętli, wykorzystując odczytane z ciągu znaków 'RGB' nazwy kanałów: self.radio = QRadioButton(v). Przyciski rozmieszczamy w układzie poziomym (self.uklad_r.addWidget(self.radio)).

Pierwszy z nich zaznaczamy: self.uklad_r.itemAt(0).widget().setChecked(True). Metoda itemAt(0) zwraca nam pierwszy element danego układu jako typ QLayoutItem. Kolejna metoda widget() przekształca go w obiekt typu QWidget, dzięki czemu możemy wywoływać jego metody.

Układ przycisków dodajemy do grupy typu QGroupBox: self.grupa_rbb.setLayout(self.uklad_r). Tego typu grupa zapewnia graficzną ramkę z przyciskiem aktywującym typu CheckBox, który domyślnie zaznaczamy: self.grupa_rbb.setCheckable(True). Za pomocą metody setObjectName() grupie nadajemy nazwę Radio. Grupę dodajemy do układu poziomego.

Wszystkie dodane powyżej widżety zostały umieszczone w układach poziomych, które należy dodać do głównego układu okna. Dopisz przed wywołaniem metody setLayout() odpowiedni kod:

Plik gui.py. Kod nr

uklad_okna.addWidget(uklad_h2)
uklad_okna.addLayout(uklad_h3)

4.2.4.1. Obsługa sygnałów

W pliku widzety.py dodajemy importy:

from PyQt6.QtGui import QColor
from PyQt6.QtWidgets import QRadioButton

Uzupełniamy konstruktor (__init__()) klasy Widgety:

Plik widzety.py. Kod nr

        self.kanaly = {'R'}  # zbiór kanałów
        self.kolor_w = QColor(0, 0, 0)  # kolor RGB kształtu 1

        # Slider + przyciski RadioButton
        for i in range(self.uklad_r.count()):
            self.uklad_r.itemAt(i).widget().toggled.connect(self.ustaw_kanal)
        self.suwak.valueChanged.connect(self.zmien_kolor)

Zmiana stanu przycisku RadioButton emituje sygnał toggled. W pętli for i in range(self.uklad_r.count()): wiążemy ten sygnał dla każdego przycisku układu ze slotem ustaw_kanal().

Przesuwanie suwaka wyzwala sygnał valueChanged, który łączymy ze slotem zmien_kolor().

Do klasy Widget dodajemy teraz wspomniane sloty i metodę pomocniczą:

Plik widzety.py. Kod nr

    def ustaw_kanal(self, wartosc=''):
        nadawca = self.sender()
        if isinstance(nadawca, QRadioButton) and wartosc:
            # nadawca to QRadioButton
            self.kanaly = set()  # resetujemy zbiór kanałów
            kanal = nadawca.text()
            self.kanaly.add(kanal)
            self.wypisz_kanal(kanal, self.suwak)

    def wypisz_kanal(self, kanal, widzet):
        if kanal == 'R':
            widzet.setValue(self.kolor_w.red())
        elif kanal == 'G':
            widzet.setValue(self.kolor_w.green())
        else:
            widzet.setValue(self.kolor_w.blue())

    def zmien_kolor(self, wartosc):
        self.lcd.display(wartosc)
        if 'R' in self.kanaly:
            self.kolor_w.setRed(wartosc)
        if 'G' in self.kanaly:
            self.kolor_w.setGreen(wartosc)
        if 'B' in self.kanaly:
            self.kolor_w.setBlue(wartosc)
        self.ksztalt_aktywny.ustaw_kolor_w(
            self.kolor_w.red(),
            self.kolor_w.green(),
            self.kolor_w.blue())

Metoda ustaw_kanal() służy do zapisania w zbiorze kanałów self.kanaly litery oznaczającej wybrany kanał. Kanał można wybrać za pomocą różnych widżetów, dlatego na początku w zmiennej nadawca zapisujemy obiekt nadawcy. Warunek isinstance(nadawca, QRadioButton) and wartosc sprawdza za pomocą funkcji wbudowanej isinstance(nadawca, QRadioButton), czy nadawcą jest przycisk RadioButton i jeżeli tak, czy parametr wartosc ma wartość True, co oznacza, że przycisk jest zaznaczony. Jeżeli zostanie spełniony, do zresetowanego wcześniej zbioru kanałów dodajemy literę wybranego kanału: self.kanaly.add(nadawca.text()). Następnie wywołujemy metodę wypisz_kanal().

Zadaniem metody wypisz_kanal() jest ustawienie wartości kanału przekazanego w parametrze kanal w widżecie przekazanym w parametrze widzet za pomocą metody setValue(). Przekazny kanał wykkrywamy w złożonej instrukcji warunkowej, składową koloru odczytujemy za pomocą odpowiednich metod, np.: self.suwak.setValue(self.kolor_w.red()).

Metoda zmien_kolor() wywoływana jest po zmianie wartości, tj. liczby z zakresu <0; 255>, za pomocą suwaka. Wartość wyświetlamy w widżecie LCD: self.lcd.display(wartosc). Następnie sprawdzamy, który ze zmienianych kanałów znajduje się w zbiorze kanały i aktualizujemy jego wartość w kolorze wypełnienia, np.: self.kolor_w.setRed(wartosc).

Na koniec składowe koloru wypełnienia kolor_w przekazujemy do metody ustaw_kolor_w() aktywnego kształtu. Przypomnijmy, żę metoda ta zdefiniowana w pliku ksztalty.py aktualizuje kolor kształtu i wymusza jego ponowne rysowanie.

Przetestuj działanie aplikacji.

4.2.5. ComboBox i SpinBox

Modyfikowane kanały koloru można również wybierać z rozwijalnej listy typu QComboBox, a ich wartości ustawiać za pomocą widżetu QSpinBox.

W pliku gui.py dodajemy importy:

from PyQt6.QtWidgets import QComboBox, QSpinBox

Po komentarzu # koniec RadioButton uzupełniamy konstruktor klasy UiWidget:

Plik gui.py. Kod nr

        # Lista ComboBox i SpinBox
        self.lista_rgb = QComboBox()
        for v in 'RGB':
            self.lista_rgb.addItem(v)
        self.lista_rgb.setEnabled(False)
        # SpinBox
        self.spin_rgb = QSpinBox()
        self.spin_rgb.setMinimum(0)
        self.spin_rgb.setMaximum(255)
        self.spin_rgb.setEnabled(False)
        # układ pionowy dla ComboBox i SpinBox
        uklad_v1 = QVBoxLayout()
        uklad_v1.addWidget(self.lista_rgb)
        uklad_v1.addWidget(self.spin_rgb)
        # do układu poziomego grupy Radio dodajemy układ ComboBox i SpinBox
        uklad_h3.insertSpacing(1, 25)
        uklad_h3.addLayout(uklad_v1)
        # koniec ComboBox i SpinBox

Do listy utworzonej na podstawie klasy ComboBox dodajemy za pomocą pętli for litery poszczególnych kanałów: self.lista_rgb.addItem(v).

Obiekt typu SpinBox podobnie jak Slider wymaga ustawienia zakresu wartości <0-255>. Stosujemy takie same metody, jak wcześniej, tj. setMinimum() i setMaximum().

Obydwa widżety na początku wyłączamy metodą setEnabled(False). Umieszczamy jeden nad drugim w pionowym układzie uklad_v1, a układ dodajemy obok przycisków Radio uklad_h3.addLayout(uklad_v1), oddzielając go odstępem 25 px: uklad_h3.insertSpacing(1, 25).

4.2.5.1. Obsługa sygnałów

W pliku widzety.py dodajemy import:

from PyQt6.QtWidgets import QRadioButton

Do konstruktora dodajemy kod przechwytujący 3 sygnały:

Plik widzety.py. Kod nr

        # Lista ComboBox i SpinBox
        self.grupa_rbb.clicked.connect(self.ustaw_stan)
        self.lista_rgb.currentTextChanged.connect(self.ustaw_kanal)
        self.spin_rgb.valueChanged.connect(self.zmien_kolor)

Pierwszy sygnał, tj. kliknięcie przycisku CheckBox grupy przycisków RadioButton wiążemy ze slotem ustaw_stan():

Plik widzety.py. Kod nr

    def ustaw_stan(self, wartosc):
        if wartosc:
            # włączone przyciski RadioButton
            self.lista_rgb.setEnabled(False)
            self.spin_rgb.setEnabled(False)
        else:
            # włączona lista ComboBox
            self.lista_rgb.setEnabled(True)
            self.spin_rgb.setEnabled(True)
            self.kanaly = set()
            self.kanaly.add(self.lista_rgb.currentText())
            self.wypisz_kanal(wartosc, self.spin_rgb)

Jeżeli metoda ustaw_stan() w parametrze wartosc otrzyma True, tzn. przycisk jest zaznaczony, wyłączamy widżety ComboBox i SpinBox (setEnabled(False)). W przeciwnym razie je włączamy (setEnabled(True)), a także resetujemy zbiór kanałów i dodajemy do niego kanał wybrany na liście: self.kanaly.add(self.lista_rgb.currentText()). Na koniec ustawiamy wartość aktywnego kanału w obiekcie SpinBox.

Zmianę kanału na liście ComboBox, tj. sygnał currentTextChanged obsługujemy za pomocą dodanej wcześniej metody ustaw_kanal(), która przyjmuje następującą postać:

Plik widzety.py. Kod nr

    def ustaw_kanal(self, wartosc=''):
        nadawca = self.sender()
        if isinstance(nadawca, QRadioButton) and wartosc:
            # nadawca to QRadioButton
            self.kanaly = set()  # resetujemy zbiór kanałów
            kanal = nadawca.text()
            self.kanaly.add(kanal)
            self.wypisz_kanal(kanal, self.suwak)
        elif isinstance(nadawca, QComboBox):
            # nadawca to QComboBox
            self.kanaly = set()  # resetujemy zbiór kanałów
            self.kanaly.add(wartosc)
            self.wypisz_kanal(wartosc, self.spin_rgb)

Dodajemy warunek isinstance(nadawca, QComboBox) sprawdzający, czy nadawcą jest obiekt typu QComboBox. Jeżeli tak, resetujemy zbiór kanałów i dodajemy literę wybranego kanału: self.kanaly.add(wartosc). Na koniec ustawiamy wartość tego kanału w obiekcie SpinBox: self.wypisz_kanal(wartosc, self.spin_rgb).

Informacja

Slot ustaw_kanal() w przypadku sygnału toogled obiektu typu QRadioButton otrzymuje w argumencie wartosc wartość True lub False w zależności od tego, czy przycisk jest zaznaczony czy nie. W przypadku sygnału currentTextChanged obiektu typu QComboBox argument wartosc zawiera literę wybranego kanału.

Zmiana wartości w kontrolce SpinBox, czyli sygnał valueChanged, przekierowujemy do dodanego wcześniej slotu zmien_lolor(), który obsługuje również zmiany wartości na suwaku.

Uruchom aplikację i sprawdź jej działanie.

4.2.6. Przyciski PushButton

Za pomocą dodanych do tej pory widżetów możemy zmieniać kolor każdego kanału składowego osobno. Dodamy teraz możliwość zmiany koloru kilku kanałów jednocześnie. Użyjemy grupy przycisków typu QPushButton.

W pliku gui.py dodajemy importy:

from PyQt6.QtWidgets import QPushButton

Następnie po komentarzu # koniec ComboBox i SpinBox dopisujemy kod w konstruktorze klasy UiWidget:

Plik gui.py. Kod nr

        # przyciski PushButton
        uklad_pb = QHBoxLayout()
        self.grupa_pb = QButtonGroup()
        for v in 'RGB':
            self.btn = QPushButton(v)
            self.btn.setCheckable(True)
            self.grupa_pb.addButton(self.btn)
            uklad_pb.addWidget(self.btn)
        self.grupa_pb.setExclusive(False)
        # grupujemy przyciski
        self.grupa_pbb = QGroupBox('Przyciski RGB')
        self.grupa_pbb.setLayout(uklad_pb)
        self.grupa_pbb.setObjectName('Push')
        self.grupa_pbb.setCheckable(True)
        self.grupa_pbb.setChecked(False)
        # koniec PushButton

Przyciski tworzymy podobnie jak wcześniej w pętli za pomocą instrukcji: self.btn = QPushButton(v). Każdy przycisk przekształcamy na stanowy, tj. taki który może być trwale wciśnięty, za pomocą metody setCheckable(True). Następnie przycisk dodajemy do grupy typu QButtonGroup, która umożliwi zaznaczenie (wciśnięcie przycisku): self.grupa_pb.addButton(self.btn). Każdy przycisk dodawany jest również do układu poziomego uklad_pb.

Wywołanie po pętli metody grupy przycisków setExclusive(False) umożliwi zaznaczanie (wciskanie) wielu przycisków na raz, czyli odwrotnie niż w przypadku grupy przycisków CheckBox.

Układ przycisków dodajemy do ramki typu QGroupBox z przyciskiem CheckBox: self.grupa_pbb.setCheckable(True). Na początku ramkę wyłączamy: self.grupaPBtn.setChecked(False).

Ramkę z przyciskami musimy dodać do głównego układu okna za pomocą metody addWidget(). Kod powinien wyglądać następująco:

Plik gui.py. Kod nr

        # główny układ okna, pionowy
        uklad_okna = QVBoxLayout()
        uklad_okna.addLayout(uklad_h1)
        uklad_okna.addWidget(uklad_h2)
        uklad_okna.addLayout(uklad_h3)
        uklad_okna.addWidget(self.grupa_pbb)

4.2.6.1. Obsługa sygnałów

W pliku widzety.py dodajemy import:

from PyQt6.QtWidgets import QPushButton

Obsługę sygnałów dopisujemy w konstruktorze:

Plik widzety.py. Kod nr

        # przyciski PushButton
        for btn in self.grupa_pb.buttons():
            btn.clicked.connect(self.ustaw_kanal)
        self.grupa_pbb.clicked.connect(self.ustaw_stan)

W pętli odczytujemy kolejne przyciski z grupy grupa_pb zwracane przez metodę buttons() i kliknięcie każdego wiążemy ze slotem ustaw_kanal().

Kod metody ustaw_kanal() uzupełniamy:

Plik widzety.py. Kod nr

        elif isinstance(nadawca, QPushButton):
            if wartosc:
                self.kanaly.add(nadawca.text())
            elif nadawca.text() in self.kanaly:
                self.kanaly.remove(nadawca.text())

Po wykryciu, że nadawca sygnału jest obiektem typu QPushButton, sprawdzamy, czy przycisk został wciśnięty, tj. argument wartosc ustawiony jest na True. Jeżeli tak, odpowiedni kanał zostanie dodany do zbioru self.kanaly, a w przeciwnym razie zostanie ze zbioru usunięty.

Inaczej niż w poprzednich metodach, obsługujących przyciski Radio i listę ComboBox, nie resetujemy tu zbioru kanałów.

Przetestuj zmodyfikowaną aplikację.

4.2.7. QLabel i QLineEdit

Dodamy do aplikacji zestaw widżetów typu QLineEdit, tzn. 1-liniowych pól edycyjnych. Pola będą oznaczone etykietami typu QLabel i będą umożliwiały ustawienia składowych koloru wypełnienia aktywnego kształtu.

W pliku gui.py dodajemy importy:

from PyQt6.QtWidgets import QLabel, QLineEdit

Następnie po komentarzu # koniec PushButton uzupełnij konstruktor klasy UiWidget:

Plik gui.py. Kod nr

        # etykiety QLabel i pola QLineEdit
        uklad_h4 = QHBoxLayout()
        self.label_r = QLabel('R')
        self.label_g = QLabel('G')
        self.label_b = QLabel('B')
        self.edit_r = QLineEdit('0')
        self.edit_g = QLineEdit('0')
        self.edit_b = QLineEdit('0')
        for v in 'rgb':
            label = getattr(self, 'label_' + v)
            edit = getattr(self, 'edit_' + v)
            edit.setObjectName('edit_' + v)
            edit.setMaxLength(3)
            uklad_h4.addWidget(label)
            uklad_h4.addWidget(edit)
        # koniec QLabel i QLineEdit

        # główny układ okna, pionowy

Zaczynamy od utworzenia trzech etykiet i trzech pól edycyjnych dla każdego kanału. W pętli wykorzystujemy funkcję Pythona getattr(obiekt, nazwa), która potrafi zwrócić podany jako nazwa atrybut obiektu. W tym przypadku kolejne etykiety i pola edycyjne, które umieszczamy obok siebie w poziomie. Przy okazji ograniczamy długość wpisywanego w pola edycyjne tekstu do 3 znaków: edit.setMaxLength(3).

Układ uklad_h4 trzeba jeszcze dodać do głównego układu okna:

Plik gui.py. Kod nr

uklad_okna.addLayout(uklad_h4)

4.2.7.1. Obsługa sygnałów

W pliku widzety.py dodajemy import:

from PyQt6.QtWidgets import QLineEdit

Obsługę sygnałów dopisujemy w konstruktorze:

Plik widzety.py. Kod nr

        # etykiety QLabel i pola QEditLine
        for v in 'rgb':
            edit = getattr(self, 'edit_' + v)
            edit.editingFinished.connect(self.ustaw_kanal)
            edit.editingFinished.connect(self.zmien_kolor)

W pętli, podobnej jak w pliku interfejsu, sygnał zakończenia edycji tekstu w polu typu QLineEdit wiążemy z dodanymi wcześniej slotami ustaw_kanal i zmien_kolor(). Będziemy mogli wpisywać w tych polach nowe wartości składowych koloru.

Uzupełniamy metodę ustaw_kanal():

Plik widzety.py. Kod nr

        elif isinstance(nadawca, QLineEdit):
            self.kanaly = set()  # resetujemy zbiór kanałów
            kanal = nadawca.objectName()[-1].upper()
            self.kanaly.add(kanal)

Jeżeli nadawca jest obiektem typu QLineEdit, odczytujemy ostatnią literę z jego nazwy i zamieniamy na wielką: nadawca.objectName()[-1].upper(). Litera ta oznacza edytowany kanał, który dodajemy do zbioru kanałów.

Następnie zmieniamy metodę zmien_kolor(), która do tej pory otrzymywała wartości typu całkowitego z suwaka QSlider lub pola QSpinBox. Pole edycyjne zwraca liczbę, ale w postaci tekstu, który trzeba zamienić na typ całkowity. Dodajemy więc na początku metody instrukcję:

Plik widzety.py. Kod nr

    def zmien_kolor(self, wartosc=0):
        if isinstance(self.sender(), QLineEdit):
            wartosc = int(self.sender().text())
        self.lcd.display(wartosc)

Natomiast na końcu omawianej metody umieszczamy wywołanie nowej metody: self.info().

Kod metody info() dopisujemy do klasy Widgety:

Plik widzety.py. Kod nr

    def info(self):
        font_b = "QWidget { font-weight: bold }"
        font_n = "QWidget { font-weight: normal }"

        for v in 'rgb':
            label = getattr(self, 'label_' + v)
            if v.upper() in self.kanaly:
                label.setStyleSheet(font_b)
            else:
                label.setStyleSheet(font_n)

        self.edit_r.setText(str(self.kolor_w.red()))
        self.edit_g.setText(str(self.kolor_w.green()))
        self.edit_b.setText(str(self.kolor_w.blue()))

Jej zadanie polega na wyróżnieniu kanałów znajdujących się w zbiorze kanaly poprzez pogrubienie czcionki etykiet i uaktywnieniu odpowiednich pól edycyjnych. Jeżeli kanał jest nieaktywny, ustawiamy normalną czcionkę etykiety i wyłączamy pole edycji. Wszystko dzieje się w pętli wykorzystującej omawianą już funkcję getattr() do uzyskania dostępu do kolejnych obiektów. Na końcu metody wartości poszczególnych kanałów koloru wpisujemy do odpowiednich pól edycyjnych.

Informacja

Typ czcionki zmieniamy z pomocą stylów CSS zdefiniowanym na początku funkcji pod nazwą font_b i font_n. Później przypisujemy je etykietom za pomocą metody setStyleSheet().

Wprowadź omówione zmiany i przetestuj działanie aplikacji.

4.2.8. Dodatki

Nasza aplikacja działa, ale można dopracować w niej kilka szczegółów. Poniżej zaproponujemy kilka zmian, które potraktować należy jako zachętę do samodzielnych ćwiczeń i przeróbek.

1. Pola edycyjne QLineEdit dla składowych zielonej i niebieskiej powinny być na początku nieaktywne.

2. Zaznaczenie jednej z grup widżetów powinno wyłączać inne grupy, tj. w danym momencie powinna być aktywna albo grupa przycisków Radio albo lista Combo albo grupa przycisków Push z polami edycyjnymi.

3. Jeżeli aktywujemy grupę Push, należy zaznaczyć (wcisnąć) przycisk odpowiadający ostatniemu aktywnemu kanałowi.

4. Stan pól edycyjnych powinien odpowiadać stanowi przycisków Push, wciśnięty przycisk to aktywne pole i odwrotnie.

5. Funkcja zmien_kolor() nie jest zabezpieczona przed błędnymi danymi wprowadzanymi do pól edycyjnych.

6. Dodaj dwa osobne przyciski, które umożliwią kopiowanie koloru i kształtu z jednej figury na drugą.

7. Dodaj etykietę lub pole edycyjne, które będzie wyświetlało aktualnie ustawiony kolor dla aktywnego kształtu w formacie szesnastkowym.

4.2.9. Materiały

1. Qt Widgets

2. Widgets Tutorial

3. Layout Management

---

Materiały Python 101 udostępniane przez Centrum Edukacji Obywatelskiej na licencji Creative Commons Uznanie autorstwa-Na tych samych warunkach 4.0 Międzynarodowa.

Utworzony:

2026-04-19 o 17:42 w Sphinx 7.3.7

Autorzy:

Robert Bednarz