Biblioteki graficzne
Jednym z zadań systemu operacyjnego jest obsługa interfejsu do komunikacji z użytkownikiem.
Od kilkudziesięciu lat najpopularniejszym rozwiązaniem jest tzw. graficzny interfejs użytkownika (ang. GUI).
Zastąpił on komunikację wykorzystującą wiersz poleceń (ang. CLI – command line interface). Paradoksalnie ta metoda komunikacji nadal służy do wykonywania bardziej zaawansowanych zadań związanych z obsługą komputera, wykorzystywaną np. przez administratorów systemów komputerowych. Jest także podstawowym sposobem komunikacji z użytkownikiem dla programów, które piszą uczniowie na lekcjach informatyki w języku C++ lub Python.
Rozpoczęcie tworzenia aplikacji z elementami graficznego interfejsu wymaga wybrania biblioteki GUI.
Ograniczeniami mogą być wybrany język programowania oraz system operacyjny. Przykładowe biblioteki graficzne to: GTK+, Kivy, MFC, Swing, Tk, Qt, WxWidgets. Każda z tych bibliotek ma paradygmaty, którymi kierowali się twórcy podczas jej tworzenia i rozwoju. Przykładowo Kivy jest wolną biblioteką o otwartym źródle do tworzenia aplikacji na urządzenia mobilne, charakteryzujące się stosunkowo małym ekranem, możliwością zmiany jego orientacji oraz obsługą funkcji wielodotyku (ang. multi-touch). W artykule zostaną przedstawione przykładowe aplikacje w oparciu o bibliotekę Tk, która miała swój początek w języku Tcl. Obecnie jej popularność zawdzięczamy zintegrowaniu do standardowo dostępnych bibliotek w języku Python, w którym występuje pod nazwą tkinter. Został w niej napisany edytor IDLE oraz obsługa grafiki żółwia w postaci modułu turtle.
Kontrolki
W każdej z wymienionych bibliotek wyróżnić można zbiór widżetów (kontrolek), takich jak: przycisk, etykieta, pole edycyjne, lista rozwijana itd. W niektórych można znaleźć specjalistyczne kontrolki, np. do wyboru koloru z palety RGB, czy interpretowania i wyświetlania kodu HTML.
Każdy z widżetów jest umieszczany albo w oknie, albo w tzw. widżecie pojemnikowym co pozwala na lepszą kontrolę rozmieszczenia ich w oknie aplikacji. Podczas tworzenia widżetu zwykle ustawia się opcje, których wartości domyślnych nie akceptujemy. Podpinamy (ang. bind) funkcje, które mają zostać wykonane, gdy jakieś zdarzenie zostanie przekazane do widżetu, np. kliknięty przycisk, poruszony kursor myszy na pewnym obszarze.
Kontrolek z różnych bibliotek nie należy mieszać w jednej aplikacji.
W tabeli 1 zostały przedstawione podstawowe widżety biblioteki tkinter.
kontrolka informacja wybrane opcje
Button na przycisku można wyświetlać tekst lub obraz, określające jego przeznaczenie;
do przycisku można dołączyć funkcję, która jest wywoływana po jego kliknięciu
command – funkcja wywoływana po kliknięciu przycisku
text – tekst wyświetlany na przycisku
Canvas kanwa do rysowania w aplikacji kształtów, takich jak linie,
owale, wielokąty i prostokąty bg – kolor tła
height – wysokość width – szerokość Checkbutton przycisk wyboru do wyświetlania wielu opcji – użytkownik
może wybrać kilka opcji text – wyświetlany tekst
variable – zmienna sterująca śledząca bieżący stan przycisku wyboru
65
Cyfrowa edukacja
65
Nauczanie informatyki
Jarosław Biszczuk, Agnieszka Samulska
kontrolka informacja wybrane opcje
Entry jednowierszowe pole tekstowe służące do akceptowania
wartości od użytkownika text – wyświetlany tekst
Label etykieta służąca m.in. do wyświetlania napisów lub
obrazów font – rodzaj czcionki
text – wyświetlany tekst Radiobutton wyświetlanie wielu opcji w postaci przycisków –
użytkownik może wybrać tylko jedną z podanych opcji text – wyświetlany tekst value – zmienna sterująca variable – zmienna kontrolna Scrollbar pasek przewijania orient – ustawianie orientacji
paska Spinbox wariant widżetu Entry, za pomocą którego można
wybierać spośród ustalonej liczby wartości from – minimalna wartość to – maksymalna wartość increment – krok
Text widżet tekstowy służący do wyświetlania dowolnie
sformatowanego tekstu w wielu wierszach bg – kolor tła height – wysokość width – szerokość font – rodzaj czcionki Tabela 1. Podstawowe widżety biblioteki tkinter
Pełna lista widżetów biblioteki tkinter wraz z ich szczegółowymi opisami znajduje się na stronie https://www.tutorialspoint.com/python/python_gui_programming.htm
Podstawowa składnia większości instrukcji tworzących widżet wygląda następująco:
nazwa = nazwa_widżetu(master, option=value, ...) Przykładowo dla przycisku może wyglądać tak:
btn_oblicz = Button(master = window, text = "Oblicz", command = nazwa_funkcji)
Proste aplikacje okienkowe
Na rysunku 1 została przedstawiona aplikacja utworzona w oparciu o bibliotekę tkinter. Aplikacja ta konwertuje liczbę zapisaną w podanym systemie liczbowym na system binarny, szesnastkowy i dziesiętny.
Rysunek 1. Przykładowa aplikacja z wykorzystaniem biblioteki tkinter Tworzenie aplikacji zaczynamy od importu biblioteki tkinter.
from tkinter import *
Kolejny krok polega na utworzeniu okna zatytułowanego Liczby.
window = Tk()
window.title("Liczby")
66
Cyfrowa edukacja
66
Nauczanie informatyki
66
Nauczanie informatyki
Okienka w Pythonie
Kontrolki wykorzystywane w aplikacji umieszczone są jedna pod drugą w układzie kratownicy (grid). Położenie kontrolki ustala się podając odpowiednio numer wiersza oraz kolumny. Dodatkowo można ustalić odstępy zewnętrzne (padx, pady). Każda z kontrolek ma swoje własne atrybuty:
• etykieta (Label) – tekst (text),
• pole tekstowe (Entry) – szerokość (width),
• przycisk (Button) – tekst (text) i polecenie (command).
Tworzymy widżety podając opcje, takie jak np. master – nazwa okna, w którym będą osadzone, width – szerokość widżetu w znakach czy text. Metoda grid() służy do umieszczenia widżetu w oknie. Użyto opcji row oraz column do wskazania miejsca położenia kontrolki, zaś padx i pady to odległość widżetu od krawędzi okna – odpowiednio w poziomie i pionie. Odległość ta podawana jest w pikselach. Na rysunku 1 mamy 7 widżetów, co ma odzwierciedlenie w prezentowanym kodzie. Numerowanie kolumn i wierszy rozpoczyna się od 0.
lbl_tytul = Label(master = window, text = "Program do zamiany systemów liczbowych") lbl_tytul.grid(row = 0, column = 0, padx = 10, pady = 10)
lbl_t1 = Label(master = window, text = "Podaj liczbę") lbl_t1.grid(row = 1, column = 0, padx = 10, pady = 10) txt_liczba = Entry(master = window, width = 20)
txt_liczba.grid(row = 2, column = 0, padx = 10, pady = 10) lbl_t2 = Label(master = window, text = "Podaj podstawę systemu") lbl_t2.grid(row = 3, column = 0, padx = 10, pady = 10)
txt_podstawa = Entry(master = window, width = 20)
txt_podstawa.grid(row = 4, column = 0, padx = 10, pady = 10)
btn_oblicz = Button(master = window, text = "Oblicz", command = zamiana) btn_oblicz.grid(row = 5, column = 0, padx = 10, pady = 10)
lbl_wynik = Label(master = window, text = "Wynik obliczeń") lbl_wynik.grid(row = 6, column = 0, padx = 10, pady = 10)
Do konwersji liczby o podanej podstawie służy funkcja zamiana. Najlepiej zdefiniować ją przed kodem programu – musi być zdefiniowana przed instrukcją tworzącą przycisk (tam jest przypisane jej wywołanie, jako reakcja na naciśnięcie przycisku: command = zamiana).
def zamiana():
liczba = txt_liczba.get()
podstawa = int(txt_podstawa.get()) liczba = int(liczba, podstawa)
lbl_wynik["text"] = "Dwójkowo: " + bin(liczba)[2:] + "\nSzesnastkowo: " + hex(liczba)[2:] + "\nDziesietnie: " + str(liczba)
Wynikiem metody get() jest ciąg znaków wpisany w polu tekstowym. Funkcja int() zamienia ciąg znaków na liczbę dziesiętną. Jej opcjonalnym drugim parametrem jest podstawa systemu, w którym zapisany jest pierwszy parametr. Funkcje bin() i hex() zamieniają liczbę dziesiętną na napis, reprezentujący liczbę odpowiednio w systemie binarnym i szesnastkowym. Dwa pierwsze znaki to informacja o systemie, dlatego wyświetlamy napisy od trzeciego znaku [2:].
Program uruchamia okno aplikacji w nieskończonej pętli.
window.mainloop()
Kolejny przykład dotyczy aplikacji do szyfrowania ciągów liter szyfrem Vigenère’a1 (rysunek 2). Szyfr ten opiera się na tabeli, w której pierwszy wiersz stanowią litery alfabetu, a kolejne wiersze powstają na podstawie poprzedniego wiersza w ten sposób, że pierwsza litera przenoszona jest na koniec wiersza. Kluczem szyfrowania jest dowolny tekst złożony z liter występujących w tabeli. Każdej literze tekstu szyfrowanego przyporządkowujemy literę znajdującą się na przecięciu wiersza zaczynającego się od tej litery i kolumny rozpoczynającej się od kolejnej litery klucza. Klucz jest cyklicznie powielany.
1 https://logia.oeiizk.waw.pl/strony/archiwalne/L19SP_zadania_e2.pdf
67
Cyfrowa edukacja
67
Nauczanie informatyki
67
Nauczanie informatyki
Jarosław Biszczuk, Agnieszka Samulska
Rysunek 2. Aplikacja szyfrująca
W tym przypadku należy przemyśleć ułożenie kontrolek na kratownicy. Rysunek 3 przedstawia schemat ich ułożenia.
Rysunek 3. Rozmieszczenie kontrolek na kratownicy Kod odzwierciadlający schemat z rysunku 3 wygląda tak:
lbl_tabela.grid(row = 0, column = 1, rowspan = 5) lbl_t1.grid(row = 0, column = 0, sticky = 'S') txt_jawny.grid(row = 1, column = 0)
lbl_t2.grid(row = 2, column = 0, sticky = 'S') txt_klucz.grid(row = 3, column = 0)
lbl_wynik.grid(row = 4, column = 0, sticky = 'S')
btn_szyfruj.grid(row = 5, column = 0, columnspan = 2, pady = 10)
Standardowo widżety są wyśrodkowane, ale można to zmienić, ustalając opcję sticky na jedną z wielu wartości. Oznaczenia przylegania związane są z kierunkami stron świata – w tym wypadku S oznacza dolną krawędź. Na uwagę zasługuje również grupowanie komórek rowspan (w ramach wierszy) i columnspan (w ramach kolumn).
Należy pamiętać o utworzeniu kontrolek przed ich rozmieszczeniem w kratownicy. Szczególnie na uwagę zasługuje etykieta zawierająca tablicę kodową.
68
Cyfrowa edukacja
68
Nauczanie informatyki
68
Nauczanie informatyki
Okienka w Pythonie
lbl_tabela = Label(window, font = 'TkFixedFont', bg = 'white') tekst_tabeli = ['\n']
for a in range(26):
for b in range(26):
tekst_tabeli.append(chr(ord('A') + (a + b) % 26) + ' ') tekst_tabeli.append('\n')
tekst_tabeli="".join(tekst_tabeli) lbl_tabela['text'] = tekst_tabeli
W opcjach etykiety zmienione zostały krój czcionki (font) oraz kolor tła (bg).
Z punktu widzenia algorytmiki najciekawsza jest funkcja szyfrująca wielkie litery alfabetu łacińskiego podanym kluczem w oparciu o prezentowaną tablicę kodową.
def viginere():
w = txt_jawny.get() h = txt_klucz.get() pom = ''
lenh = len(h) wiadomosc = w
for i in range(len(wiadomosc)):
k = ord(h[i % lenh]) - ord('A') litera = wiadomosc[i]
litera = (ord(litera) - ord('A') + k) % 26 litera = chr(litera + ord('A'))
pom += litera lbl_wynik['text'] = pom
Kompletne programy obu opisanych aplikacji znajdują się w repozytorium GitHub2. Podsumowanie
Prezentowane przykłady nie wyczerpują możliwości związanych z programowaniem aplikacji okienkowych.
Służyły jedynie do zasygnalizowania możliwości programowania w oparciu o bibliotekę tkinter. W kolejnym numerze czasopisma W cyfrowej szkole zaprezentujemy aplikacje przygotowane w oparciu o bibliotekę kivy, które wyglądem przypominają projektowane na urządzenia mobilne.
2 https://github.com/jarekbis/CS/tree/main/tkinter_skrypt