Python має безліч фреймворків з графічним інтерфейсом, але Tkinter - єдиний фреймворк, вбудований у стандартну бібліотеку Python. Tkinter має кілька сильних сторін. Він кроссплатформенний, тому один і той же код працює в Windows, macOS і Linux. Візуальні елементи візуалізуються з використанням власних елементів операційної системи, тому програми, створені за допомогою Tkinter, виглядають так, ніби вони належать платформі, де вони виконуються.

На перший погляд в складі бібліотек Tkinter не так вже багато віджетов, тобто, графіних елементів GUI для розробки інтерфейсів у додатках. Але треба зауважити, що практично для всіх додатків технічного спрямування, таких віджетів більш ніж достатньо.

Tkinter надає віджети у двох варіантах: віджети, які розміщуються безпосередньо в пакеті tkinter, та віджети з пакету tkinter.ttk. З одного боку, обидва пакети надають практично ті самі віджети, наприклад, віджет Button є в обох пакетах. Але з іншого боку, ttk надає трохи більше функціональності налаштування віджетів, зокрема, їх стилізації. І вважається, що віджети з ttk дещо сучасніші, ніж стандартні, в той же час з ttk, можливо, трохи складніше працювати. Що використовувати залишається на вибір розробника.

На початок 2023 року найбільш стабільною вважається весія Python 3.7 яка включає в себе Tkinter версії Tcl/Tk 8.6, а саме:

• Tk - базовий пакет віджетов
• ttk - додаткоий пакет віджетов, команд та властивостей
• Tcl - вбудовану бібліотеку команд (Tool Command Language)

Зауважимо, всі приклади, що наведені на цій сторінці, веріфіковані саме в версії Python 3.7, тобто, Tkinter версії Tcl/Tk 8.6. та операційній системі Windows 10

Сьогоді в інтернеті можа знайти дуже багато сторінок, що посвячені самостійному опануванню Tkinter, але більшисть з них має дуже спрощену або неповну інформацію. Після тривалого серфінгу по таким сторінкам, на мій погляд, можна рекомендувати такі сторінки:

• W3Schools
  Для початку бажано ознайомитися с дуже зручним довідником з Python (та не лише Python) від W3Schools. Взагалі W3Schools це учбовий курс, але як довідник він дуже зручний. Зауважимо, що W3Schools спирається лише на офіційні можливості засобів програмування, тому в ньому марно шукати недокументованих фішек. Та мабуть це добре, бо все що там наведено буде гарантовано працювати.


• TkDocs home
  Розширений підручник зі створення інтерфейсів користувача за допомогою Tkinter Пояснює ключові концепції та ілюструє рекомендовані підходи за допомогою сучасного API.


• Довідник Tkinter 8.5: графічний інтерфейс для Python
  Довідкова документація для Tkinter 8.5 із детальним описом доступних класів, методів і параметрів. Може в повному обсязі використовуватися для версії 8.6


• Tk команди
  Вичерпне посилання на кожну з базових команд Tcl/Tk, що використовуються в Tkinter.


• Домашня сторінка Tcl/Tk
  Додаткова документація та посилання на розробку ядра Tcl/Tk.

На сьогодні довідкова документація для Tkinter 8.5 із детальним описом доступних класів, методів і параметрів (атрибутів), що може в повному обсязі використовуватися для версії 8.6, є найбільш повною документацією по системі Tkinter. Саме тому нижче приведено посилання на завантаження цього документу у pdf-форматі:

  Завантажити довідник з Tkinter 8.5 (.pdf)

Вікна Tkinter це основні носії графічного інтерфейсу користувача. Взагалі більшисть додатків застосовують лише одно вікно з типовим ім'ям root. Для створення вікна достатньо виконати наступний код:

# Імпортуємо все що має tkinter
from tkinter import *
# Створюємо об'єкт вікна
root = Tk()
# ----------------------
# Область розміщення віджетів та програмного коду
# ----------------------
# Останньою інструкцією викликаємо метод
# взаємодії вікна з користувачем
root.mainloop()

• books.ico
  Іконка (типовий розмір 32х32 пікселі для маркування в заголовку вікна


• win_01_simple.py
  Приклад оформлення заголовка вікна, кольору та розміру вікна


• win_02_geometry.py
  Приклад керування геометричними параметрами вікна.
  Параметр resizable дозволяє або забороняє розтягувати вікно по X та Y.
  Параметри minsize та maxsize фіксують мінімальний та максимальний розміри вікна. Футкції winfo_screenwidth() та winfo_screenheight() дозволяють дізнатися поточний розмір екрану.


• win_03_GetSize_01.py
  Цей приклад відповідає на питання - як дізнатися розміри віка у RunTime (тобто, під час виконання програми). Це можливо зробити завдяки коду:
  
  root.update_idletasks() # Оновимо дані геометрії вікна
wStr = str(root.geometry()) # Прочитаємо геометрию як строку
wTxt = wStr.split("+") # Розділемо строку на список строк

  Далі перший елемент списку застосовується для відображення габаритів вікна


• win_03_GetSize_02.py
  Приклад розширеної реалізації модуля win_03_GetSize_01.


• win_04_ReSize.py
  Приклад зміни геометрії вікна кодом у RunTime. Зміна розміру виконується методом root.geometry(wStr) до якого попередньо формуеться строка, наприклад wStr='600x200'

• win_05_close.py
  В цілому ряді додатків дуже важливо контролювати небажанне завершення додатку. Для цього треба в відповідному вікну (як павило, root) додати прослуховування системної події знищення вікна та процедури обробки такої події, тобто, root.protocol("WM_DELETE_WINDOW", finish)
  Даний приклад ілюструє діалог в процедурі finish, що виконується методами askyesno та showinfo віджету messagebox для RunTime завершення додатку методом root.destroy()


• win_06_alpha.py
  Приклад випливаючого полупрозорого вікна.
  Необхідно також зазначити, що вікна мають декілька цікавих атрибутів, в тому числі атрибути:
  
  
  • root.attributes("-fullscreen", True)
    виконує перехід вікна в повоеканний режим (True) та назад (False)
  • root.attributes("-alpha", 0.5)
    задає рівень прозорості вікна (0.1 ... 1.0), 1.0 не прозоро.
  • root.attributes("-toolwindow", True)
    дозволяє ховати кнопки (True) у заголовку вікна, або повертати ці кнопки (False). Атрибут не змінює відображення кнопки 'x' та відображення title
  
  Наведений приклад практично не стосується технічних додатків. Скоріше він має ілюстративний характер до застосування атрибутів


• win_06_alpha.pyw
  Модуль, що дозволяє запускати інші модулі (в даному випадку win_06_alpha.py) та приховує консоль, яка супроводжуе працюючи модулі типу *.py. Застосовуєтся для запуску готових додатків.


• win_07_two_win.py
  Приклад створення додатку с баготьма вікнами. Для створення додаткового вікна застосовується функція Toplevel, наприклад win1 = Toplevel() Всі створені вікна будут працювати в одному потоку, але імена, що застосовані в таких вікнах будуть ізольовані, тобто, невідомі для сусідніх вікон.

  Завантажити приклади (архів .7z)

  Фрейми (Frames) це наступний (слідом за вікнами) рівень структурізації графічного інтерфейсу користувача. Фрейми можна умовно розглядати як вбудовані в реальне вікно віджети-контейнери, що подібні до вікон.

  Фрейми здатні бути контейнерами для інших фреймів, тобто в одному фреймі можна розмістити необхідну кількість додаткових фреймів.

  Як віджети, фрейми також належить пакувати. Тобто, до фреймов необхідно застосовувати пакувальники place або pack або grid.

  Окремо ми не розглядали дію пакувальників на віджети, бо така дїя має безліч варіантів, особливо з урахуванням параметрів пакувальників та вплив на пакування оточуючих віджетів. Як вихід з такого різноманіття можна обрати окремі варіанти та в подальшому застосовувати їх подібно шаблонам.

  Саме такі приклади-шаблони запропануємо і до фреймів. Додатково наведемо швидкі посилання на документацію. Зауважимо, що окремі параметри віджетів мають свої властні параметри. Тому в документації головні параметри віджету мають назву "атрибути". Тобто, параметри атрибуту це йго властні параметри.

• Документація по Frame від TkDocs


• Документація по ttk.Frame від TkDocs

• f01.py
  Два фрейма в place упаковці, що призначені для надання загальної інформації з їх параметрів.


• f02_place.py
  Чотири фрейма в place упаковці, що ілюструють вільне розміщення віджетів в графічному інтерфесі користувача


• f03_grid.py
  Шаблон фрейма з grid пакуванням групи тітульних надписів та відповідних їм кнопок. Окрему увагу зверніть на параметр command в процедурі btnCreate(butNum)


• f04_dialer.py
  Шаблон фрейма в place упаковці для grid - групи кнопок, що призначені для формування чисел. В даному прикладі цей шаблон застосовується як частино набирача телефоного номеру.

• f01_pack_place.py
  Шаблон три фрейма (один горизонтальний, два вертикальних). У горизонтальному та лівому вертикальному фреймах віджети розміщені у пакуванні pack. У правому вертикальному фреймі віджети розміщені у пакуванні place


• f02_1h2v.py
  Шаблон три фрейма (один горизонтальний, два вертикальних). У правому вертикальному фреймі розміщені ще два горизонтальних фрейма. Віджети, що розміщені у всіх фрейсах мають пакування pack або grid


• f03_1h2v.py
  Теж саме що і f02_1h2v.py, але з іншою еластичністю фреймів


• f04_3h_text.py
  Шаблон три горизонтальних фрейма. Середній фрейм еластичний як по горизонталі, так і по вертикалі. Зручно використовувати в ретакторах тексту або репортерах.


• f05_3h_menu.py
  Теж саме що і f04_3h_text.py, але з вбудованим головним меню


• f06_3h_grid.py
  Шаблон три горизонтальних фрейма. Середній фрейм еластичний, як по горизонталі, так і по вертикалі. У середній фрейм вбудовані за алгоритмом "стрічка" віджети в пакуванні grid.

• pn01.py
  Приклад двох панелей (вкладок) з вбудованими фреймами, що перемикаються завдяки заголовкам


• atributes01.py
  Малий довідник з актуальних атрибутів в складі популярних віджетів

  Завантажити приклади (архів .7z)

Події, це основний засіб ініціювати спілкування програм як поміж собою, так і з кінцевим користувачем. Зазвичай джерела подій умовно поділяють на апаратні (фізичні) та програмні, але (з зазначеного нижче) всі події мабуть можна позначити як апаратно-програмні події, або просто події.

До апаратних подій відносять такі події, що ініціюють або вузли материнської плати (процесор, таймер, контролери відеокарт, HDD, контролери мережевого обладнання, та інші контролери), або периферійні вузли комп'ютера (клавіатура, мишка, принтер, сканер та інші). До джерел програмних подій відносять спеціальні команди (інструкції), що може застосовувати програміст при кодуванні програми.

Операційна система “прослуховує” всі зазначені джерела апаратних подій, частково подій програмних та розпочинає їх програмну обробку та маршрутизацію до системних або прикладних програм. Програмні надбудови практично всіх сучасних систем програмування повідомляють операційну систему на які із зазначених подій вони також повинні реагувати.

Tkinter, як програмна надбудова Python, також (за допомогою ядра Python) реєструє в операційній системі події на які необхідно реагувати. В першу чергу до таких подій відносяться події клавіатури та мишки. В свою чергу, Tkinter збирає список необхідних подій від віджетів, що застосував програміст в своїй програмі, та виконує маршрутизацію таких подій відповідним віджетам для внутрішньої обробки та подальшої маршрутизації до програм, що кодує програміст, тобто обробників подій

Підключення обробників подій, що кодує програміст, виконується (як правило) за допомогою двох програмних інтерфейсів. Це інструкція bind або атрибут command (якщо він входить до складу атрибутів віджета, наприклад: Button, Checkbutton, Radiobutton, Spinbox, Scrollbar, Scale)

Підключення (привязка) обробника подій інструкцією bind

Наведемо простий приклад:

В цьому прикладі код програми підключає обробник події MyEventHandler підключений на подію "клік на лівій кнопці мишки", яка виникає якщо курсор знаходиться на надпису Lb01. Відповідно обробник MyEventHandler роздруковує всі доступні властивості (property) об'єкта event, що конкретний віджет передає обробнику як параметр.

Проте Tkinter дозволяє застосовувати значну кількість подій (та їх модифікацій), що кодуються програмістом як конкретна строка "<ім'я_події>".

• События и привязки в Tkinter (.pdf) Приклади та довідки


• Справка по классу Event в модуле Tkinter (.pdf)


• Справка по составлению ім'я_події (.pdf) . Приклад наведено у програмі event_03_patterns.py

Варіанти підключення та відповідного синтаксису інструкції bind

1) Підключення події та передача обробнику крім об'єкта event ще однрго або декілька додаткових параметрів. Параметри можна кодувати константами або іменами змінних (в обробник передається значення змінної). Вибір імен у вигляді ev, x та y не є обов'язковим, але ім'я Event треба кодувати так, як показано в синтаксисі

2) Підключення двох обробників на одну подію. Звичайно ми маємо можливість викликати з обробника_1 (як функцію) обробник_2, та якщо наведені обробники планується незалежно викликати з інших подій, то така можливість стає обгрунтованою.

3) Підключення обробника на віртуальну подію. Віртуальна подія об'єднуе декілька звичайних подій та якщо обробник підключен на віртуальну подію, то кожна з реальних поді (в складі віртуальної) ініціює виклик такого обробника.

Щоб використовувати віртуальну подію їі з початку треба створити. Для цього застосовується інструкція event_add

Відключення обробника інструкцією unbind

Звичайну або віртуальну подію можна також відключити від обробника на конкретному віджиті. для цього застосовується така інструкція:

Для уникнення помилок слідкуйте щоб відключення виконувалось відповідним unbind, тобтоо якщо підключення виконувалося bind_all, то відключення також повинно виконуватися unbind_all.

Підключення обробника інструкцією tag_bind

tag_bind це специфічне підключення обробника поії до графічних об'єктів на canvas, таких як лінія, прямокутник, еліпс тощо. Коли на canvas створюється графічний єлемент, метод створення .create_елемент повертає число-ідентифікатор єлементу в зарезервовану змінну з ім'ям id. Взагалі ім'я id не є обов'язковим але краще притримуватися його. Наведемо простий приклад:

  canvas = Canvas(root, bg="white", width=250, height=150)
  canvas.pack(fill=BOTH, expand=1)
  id = canvas.create_rectangle(60, 60, 150, 150, fill="red")
  # привязка событий к элементу с идентификатором id
  canvas.tag_bind(id, "<Enter>", Handler_1)
  canvas.tag_bind(id, "<Leave>", Handler_2)

Зауважимо, що підключення за допомогою tag_bind не вичерпується лише єлементами на canvas, в окремих (частіше системних програмах) його можна зустріти на віджетах text та treeview, але розгляд таких застосувань вже виходить за межи наших задач. В нашому випадку tag_bind на canvas це зручний засіб для розробки інтерактивних мап конструкторського, технічного та географічноо напрямку. Але для професійного застосування тегів треба детально опанувати значну кількість інструментів, шо наведнені за наступним посиланням:

    Методы Canvas виджетов

Простий приклад наведено у програмі event_08_tag_bind.py

ПРИКЛАДИ

• event_01_bind_unbind.py
  Приклад підключення та відключення події (тобто клік лівою кнокою мишки) на верхній кнопці вікна.


• event_02_bind_all_key.py
  Приклад підключення та відключення події Key (тобто натискання клавіш на клавіатурі) до головного вікна root. Клавіатурні події мають високу залежнысть ввід платформи та операційної системи. В нашому випадку розглянуто приклад для систем Windows:
  
  
  • KeyPress - При утриманні клавіши генеруються повтори.
  • KeyRelease - При утриманні клавіши повтори НЕ генеруються, але ігноруються киріличні символи.
  
  Зазвичай (у Windows) комбінації з клавішою Alt Tkinter перехоплює та блокуе як доступні події, також окремі комбінації з клавішою Ctrl (особливо для подій, які застасовує сам Pyton або операційна система) здатні неприємно здивувати програміста. В цьому сенсі, особливо коли ви плануєте кросплатформину програму, краще уникати застосування означених подій або бути готовим до глибокого занурення у цю проблему.


• event_03_patterns.py
  Приклад застосування модифікаторов події. В певному сенсі цей приклад відповідає на потребу кодувати реакції програми на складні комбінації, як то Alt-F1, Ctrl-F1 або Shift-F1.


• event_04_samples.py
  Наведено чотири приклади роботи з різними подіями. Приклади ілюструють роботу з подіями зі списку, який формує Tkinter, прослуховуючи події операційної системи. В свою чергу різні віджети можуть використовувати власні вибірки подій з такого списоку. Про те, що дозволяє використовувати конкретний віджет, можна з'ясувати виконавши HelpEvent.py
  У прикладах 1 і 3 зв'язування конкретної події здійснюється методом bind на віджет.
  У прикладах 2 і 4 зв'язування подій з обробником виконується або атрибутом command у тих віджетах, для яких такий атрибут передбачений (приклад 2), або використовується спеціальне зв'язування, що надається імпортованим модулем (приклад 4)
  Всі написані приклади незалежні один від одного і можуть використовуватись як самостійні шаблони.


• event_04_samples_FrmFix.py
  Теж саме що і event_04_samples.py, але з фреймами фіксованого розміру.


• event_05_bind_lambda.py
  Якщо ви використовуєте простий синтаксіс bind, тобто:
    ім'я_віджета.bind("<ім'я_події>", ім'я_обробника)
  то в обробник події передається лише обьєкт event. Досить часто цього для програміста не є недостатнім. Даний приклад показує як можна вирішити цю проблему (див. похідний код)


• event_06_bind_add.py
  В окремих випадках програмісту необхідно викликати декілька обробників при вниникні певної події, в той же час, такі оборобники мають незалежно викликатися іншими подіями. В такому разі зручно застосовувати наступний синтаксіс bind:
   ім'я_віджета.bind("<ім'я_події>", ім'я_обробника_1)
 ім'я_віджета.bind("<ім'я_події>", ім'я_обробника_2, add="+")



• event_07_bind_virtual.py
  Даний приклад якби відзеркалюе задачу розглянуту в event_06_bind_add.py. Тобто, ілюструє яким чином можна викликати один обробник при виникнені різних подій, а також ілюструє як можна керувати списком таких подій.


• event_08_tag_bind.py
  Приклад підключення обробників інструкцією tag_bind к графічним елементам на canvas


• HelpEvent.py
  Help on class Event in module tkinter

 

  Завантажити приклади (архів .7z)

 

Сьгодні практично всі операційні системи та алгоритмічні мови високого рівня використовують графичні інтерфеси для взаємодії з кінцевим користувачем. Найчастіше графіка в складі алгоритмічних мов високого рівня реалізується через проміжні програмні інтерфейси засобами що вбудовані в операційні системи. Така архитектура графіки значно розширює кросплатформені якості мов програмування. В той же час, окремі високорівні мови програмування (в тому числі і Python) створені як консольні інтепритарори та для работи з графікою потребують додаткових програмних надбудов - IDLE (Integrated Development and Learning Environment) для програміста на надбудов для реалізації програм (в нашому випадку це надбудова Tkinter, яку ми розглядаємо).

Відомою особливістю Python, є його об'ектна архитектура. Тобто кожна окрема одиниця з якою оперує Python це об'ект що мае свій тип, а також може мати свої методи та властивості. Ця особливость підкреслюється во всіх офіційних документах Python. Що це означає з точки зору комп'ютерної графіки? - Поперше необхідність створити об'ект canvas (полотно), який буде основою для інших графічних елементів зображення. Подруге, кожен графічний елемент зображення (далі фігура) також має бути створений як об'ект, тобто ліния, прямокутник, еліпс та інші фігури це об'екти що мають свои властивості та свої методи. Для прикладного програміста така архитектура значно спрощує створення програм. Наприклад, метод move видаляє фигуру на старому місці, відновлює зображення що перекривала фігура та малює фігуру на новому місці. Тобто для переміщення фігури достатьньо однієї інструкції (див. canvas_03_ElasticFigure.py).

Почнемо зі створення об'екта canvas. Canvas це окремий віджет Tkinter та створюється подібно іншим віджетам:

Тепер ми маємо змогу створювати та малювати фигури на цьому полотні

До складу фігур, що можна створити в canvas Tkinter входять:

• .create_arc()
• .create_bitmap()
• .create_image()
• .create_line()
• .create_oval()
• .create_polygon()
• .create_rectangle()
• .create_text()
• .create_window()

The Canvas widget

Значна кількість атрибутів, що входять до складу canvas та фігур не дозволяє в рамках обсягу цієї сторінки надати детальні пояснення або приклади. Тому зосередимося лише на прикладах що орієнтовані на технічні задачі.

• Папка canvas_01_Trigonometry
  Приклад відображення 2D - графіку для окремих тригонометричних функцій. Цей приклад в першу чергу цікавий тим, що він ілюструє застосування власної (створеної програмістом) бібліотеки. Така бібліотека розташована в додатковій папці Tools та має назву GraphXY.py. В основну програму з цієї бібліотеки імпортуються наступні функції:
  
  from Tools.GraphXY import CnvSize, CnvClean, CnvShowFunc
  
  Відповідно імпортовані фунції дозволяють:
  
  
  • CnvSize - змінювати висоту та ширіну створенного програмою canvas
  • CnvClean - повністю очитити canvas та видалити всі фігури
  • CnvShowFunc - намалювати 2D - графік по даним, що попередньо розраховані як список [x1,y1, x2,y2, x3,y3, . . . , xN,yN]
  
  Звістно, бібліотека GraphXY.py дуже проста, тому ії похідний код не повинен, при читанні, задати занадто клопоту.


• Папка canvas_02_Polinom
  Приклад відображення 2D - графіку для степеневого багаточлена. Цей прикалд також використовує бібліотеку GraphXY.py. Вочевидь його можна було помістити в одну папку з canvas_01_Trigonometry, але він відокремлен як самостійне рішення для уникнення клопоту з переносом програми в інші папки або диски.


• canvas_03_ElasticFigure.py
  Приклад малювання еластичними фігурами. Цей приклад є ілюстрацією початкової фази розробки графічного редактору. Похідний код пикладу щільно прокоментований, тому додаткових коментарів наводити не будемо.


• Папка canvas_04_Bridge
  Цей приклад можно віднести до маленького жарту з приводу архітектури моста що планується на масиві Обольнь в Києві. Маю надію, що закінчуючи сторінку жатром, додам вам оптімізму в опануванні матеріалу сторінки.

  Завантажити приклади (архів .7z)