середу, 28 листопада 2018 р.

Tkinter




Бібліотека (модуль) Tkinter. Клас Tk 
 у версіях, починаючи з Python 3.0, бібліотека має назву tkinter (з малої літери).

 Перш ніж створити своє перше вікно, треба підключити бібліотеку (модуль).
Це робиться вже звичним для нас чином:
from Tkinter import *
Далі треба створити головне об'єкт головного вікна. Це робиться за допомогою класу Tk. Назвемо це вікно root.
root = Tk()
Наприкінці програми необхідно для нашого головного вікна root використати метод mainloop(), який говорить приблизно наступне: «ОК, я завершив роботу з настройки і тепер готовий до прийому та обробки подій».
root.mainloop()
Метод mainloop() забезпечує постійну роботу головного вікна і його об'єктів до моменту, коли воно буде закрито.

Остаточно найпростіша програма створення головного вікна виглядатиме так:
from Tkinter import *
root = Tk()
root.mainloop()

Збережемо її під іменем tk01.py. Результатом виконання цієї програми є
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/004.gif

Нічого вам не нагадує? Наприклад, вікно, в якому «повзала» черепашка. І назва така ж: «tk». Її можна змінити, для цього треба використати метод title(), всередині якого вказати власний заголовок, не забуваючи, що це текст, який потрібно взяти у одинарні лапки. Програма tk02.py  виглядатиме наступним чином:
from Tkinter import *
root = Tk()
root.title('My favourite title')
root.mainloop()
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/005.gif
Але, якщо пам'ятаєте, черепашка рухалася по білому екрану, та й розміри його були іншими. За ці та деякі інші параметри відповідає метод config()
root.config(background='steelblue', relief=RAISED, borderwidth=10)
Розглянемо можливі параметри вікна. Почнемо зі знайомих
height, width - розміри вікна
background(bg) - колір фону вікна
Але є і інші параметри, наприклад,
relief - вид рамки вікна. Може приймати значення

FLAT
(плоска рамка)
SUNKEN (увігнута рамка)
RAISED
(опукла рамка)
GROOVE
(у вигляді жолобу)
RIDGE
(у вигляді хребта)
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/007.gif
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/008.gif
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/009.gif
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/010.gif
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/011.gif
Ширину рамки можна також задати, для цього використовуємо borderwidth. По замовчуванню цей параметр дорівнює 0.
root.title('My favourite title')
root.mainloop()

Наприклад,
from Tkinter import *
root=Tk()

root.config(width=600, height=400, background='steelblue', borderwidth=10, relief=RAISED)

root.title('My favourite title')
root.mainloop()

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/006.gif
Параметри background та borderwidth  можна писати і скорочено як bg  та  bd відповідно. Наприклад, як у наступній програмі
from Tkinter import *
root = Tk()
root.config(bg="steelblue", relief=RAISED, bd=10)
root.title("My title")
root.mainloop()

Бібліотека Tkinter. Клас Label

У вікні можна розміщувати різні об'єкти. Наприклад, для розміщення тексту у вікні використаємо клас Label (з англ. ярлик).
Створимо конкретний об'єкт цього класу з іменем label
label = Label(root, text='Hello, world!')
У дужках необхідно вказати, у якому вікні буде розташований текст і який саме текст. Тому першою опцією є ім'я створеного вікна root, другий параметр text приймає значення  'Hello, world!'.
До об'єкту label треба застосувати метод pack()
label.pack()
!  Якщо цей метод не використати, текст у вікні не буде відображеним (не з'явиться).
Наступна програма tk04.py
from Tkinter import *
root = Tk()
root.title('My favourite title')
label = Label(root, text='Hello, world!')
label.pack()
root.mainloop()

створює вікно

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/012.gif

!  Зверніть увагу, що коли розміри вікна явно не задані, вікно стискується до розмірів об'єктів, що на йому розташовані.
Але текст написаний чорним кольором і маленьким шрифтом. Виявляється, існують параметри, які дозволяють це змінити.
label = Label(root, text="Hello, world!", fg="red", font="Times")
label.pack()

Ви вже здогадалися, що параметр fg задає колір текстуа параметр font задає тип шрифту.

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/014.gif

Якщо font прийме значення Ariel, то текст у вікні буде виглядати так:

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/013.gif

Програма в цілому буде виглядати так:
from Tkinter import *
root = Tk()
root.title('My favourite title')
label = Label(root, text="Hello, world!", fg="red", font="Ariel")
label.pack()
root.mainloop()

При зміні розмірів вікна за допомогою миші відбувається наступне:
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/015.gif
Для того, щоб текст розташовувався у всьому доступному просторі вікна можна використати опцію expand зі значенням 1 для метода pack. Створимо ще один текст у вікні:
from Tkinter import *
root=Tk()
label=Label(root, text='Hello, world!', fg='red', font='Ariel')
label.pack()
label2=Label(root, text='My name is Ivan', fg='blue', font='Times')
label2.pack(expand=1)
root.title('My favourite title')
root.mainloop()

Після запуску отримаємо вікно:
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/017.gif
Але при зміні розмірів вікна текст My name is Ivan буде займати положення посередині доступного простору (доступний простір визначається розмірами вікна після розміщення першого тексту):
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/018.gif

Якщо і до тексту Hello, world! застосувати опцію expand=1, то отримаємо:
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/019.gif
Вивчаючи HTML, ви взнали як змінювати розмір тексту, робити його напівжирним, курсивом, підкресленим. У бібліотеці Tkinter також передбачені такі параметри:
label2 = Label(root, text='My name is Ivan', fg='blue',
               font=('Comic Sans', 25, 'bold italic underline'),
               bg='green', width=20, height=10, relief=RAISED, bd=8)

Розглянемо по частинах:
fg='blue'   - задає колір тексту;
font=('Comic Sans', 25, 'bold italic underline')   -  параметри текста, а саме: Шрифт - Comic Sans, розмір - 25, bold - напівжирний, italic - курсив, underline - підкреслений;
bg='green'  -  колір фону мітки;
width=20, height=10 - відповідно ширину і довжину, але не у пікселях, а у символах;
relief=RAISED, bd=8  - вже знайомі тип і товжина рамки.

Остаточно отримуємо програму
from Tkinter import *
root = Tk()
root.title('My favourite title')
label1 = Label(root, text='Hello, world!')
label1.pack()

label2 = Label(root, text='My name is Ivan', fg='blue',
               font=('Comic Sans', 25, 'bold italic underline'),
               bg='green', width=20, height=10, relief=RAISED, bd=8)

label2.pack()
root.mainloop()
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/020.gif

Для того, щоб до кінця зрозуміти, що означає фраза «ширина і довжина у символах» поставимо ці параметри рівні width=3, height=4. Після запуску зміненої програми отримаємо:
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/021.gif



Практична робота 
1.  Створіть пурпурове вікно з назвою «My name is» з рамкою за смаком та товщиною 20 пікселів.
2.  Розмістіть у ньому три тексти: на червоному тлі – Ваше прізвище, на жовтому – ім’я, на зеленому – по батькові. Не забудьте змінити колір, розмір та формат шрифту.
3.  Змініть розміри текстів так, щоб вони були однакового розміру. Задайте вид рамки та товщину кожного тексту.
4. Змініть властивості текстів так, щоб при розтягуванні вікна тексти займали положення посередині.
5. Допишіть програму так, щоб вона створювала ЩЕ й друге вікно з назвою "I study in ... ". Розташуйте у ньому текст з вказівкою класу, у якому навчаєтесь. Задайте колір, розмір та вид рамки на власний смак.
https://disted.edu.vn.ua/media/images/porkhun/inf_8_2012_2013/tkinter_tk_label.jpg
 Бібліотека Tkinter. Клас Canvas
Цей клас застосовується для відображення діаграм, многокутників та інших типів графічних елементів. Ми будемо використовувати клас Canvas для створення полотна для малювання.

Спочатку створюємо головне вікно, у якому і розміщуємо полотно для малювання:
from Tkinter import *
root=Tk()
root.title('Windows for drawing')
canvas=Canvas(root)
canvas.pack()
root.mainloop()

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/022.gif

На цьому  полотні є система координат, але на відміну від вікна turtle, початок координат знаходиться завжди у лівому верхньому куті, додатня частина осі х спрямована звичайним чином вправо, а от додатня частина вісі y спрямована донизу (!).  Тобто у вікні видно лише першу координатну чверть - частина фігури, що не потрапляє у цю чверть просто не відображається.
https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/023.gif
Які ж фігури можна розташувати на полотні?
Для розміщення на полотні прямокутника і овалу застосуємо методи create_rectangle та create_oval.
Прямокутник задається координатами двох несусідніх вершин, наприклад, лівого верхнього та правого нижнього кутів.
canvas.create_rectangle(10, 10, 100, 200)
Якщо ці ж самі координати точок застосувати у методі create_oval
canvas.create_oval(10, 10, 100, 200)
то отримаємо таке вікно:

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/024.gif

Звідси можна зробити висновок, що при створенні овалу задається прямокутна область, у яку вписується овал. Ця область задається координатами двох несусідніх вершин.

У методах create_rectangle та create_oval  є однакові параметри:
fill відповідає за заливку фігури,
outline та width задають  колір та  ширину межі фігури.

Наступна програма малює червоний прямокутник з блакитною межею шириною 10 пікселів та жовтий овал із зеленою межею шириною 2 пікселі:
from Tkinter import *
root = Tk()
root.title('Window for drawing')
canvas = Canvas(root, bg='steelblue')
canvas.pack()
canvas.create_rectangle(10, 10, 100, 200, fill='red', outline='blue',width=10)
canvas.create_oval(150, 150, 160, 160, fill='yellow',  outline='green',width=2)
root.mainloop()

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/025.gif


Завдання:
1. Намалювати 5 квадратів по діагоналі з використанням Tkinter.
2. Намалювати світлофор з використанням Tkinter.

Клас Button (створення кнопок у вікні)

Створимо вікно з двома кнопками, що будуть розташовуватися одна під одною.
from Tkinter import *
root = Tk()
b1 = Button(root, text='My first button!')
b1.pack()
b2 = Button(root, text='Second!')
b2.pack()
root.mainloop()

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/030.gif

!     Якщо розміри кнопки не задані, то вони визначаються текстом на ній.
Ускладнимо завдання: Нехай при натисненні на першу кнопку видається повідомлення "Hello!".
По-перше, подія пов'язана з кнопкою, тому кнопка має містити атрибут, що обробляє цю подію. Цей атрибут носить назвуcommand. Яке ж може бути його значення? Яка нам знайома структура виконується лише тоді, коли ми її викликаємо? Це функція. Напишемо функцію, яка виводить дане повідомлення. Потім значенням атрибуту command поставимо ім'я функції. Вона буде викликатися лише при натисненні на кнопку.
from Tkinter import *
def hello():
    print 'Hello!'
root = Tk()
b1 = Button(root, text='My first button!', command=hello)
b1.pack()
root.mainloop()

Текст 'Hello!' виводиться не у нашому вікні, а у вікні Python Shell.
Результат запуску програми і п'яти натискувань кнопки:



https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/031.gif

Розгляньте ще один приклад, у якому при натисненні на першу кнопку виводиться "Hello!", друга кнопка дозволяє обрахувати суму двох чисел.
from Tkinter import *
def hello():
    print 'Hello!'
def sum():
    print 'Find the sum of two numbers a and b.'
    a = input('vvedi a: ')
    b = input('vvedi b: ')
    print a, '+' , b, '=', a+b
root = Tk()
b1 = Button(root, text='My first button!', command=hello)
b1.pack()
b2 = Button(root, text='Second button!', command=sum)
b2.pack()
root.mainloop()

Результат запуску програми і натискування спочатку на першу, потім на другу кнопку (при цьому вводяться два числа і виводиться результат), і  три рази на першу кнопку:

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/032.gif

Використаємо бібліотеку turtle для опрацювання натиснення на третю кнопку. Нехай при цьому в окремому вікні малюється n-кутник.

!  При підключенні модуля turtle повинен обов'язково йти перед модулем Tkinter, бо вікно turtle написане за допомогою Tkinter.
from turtle import *
from Tkinter import *
def hello():
    print 'Hello!'
def sum():
    print 'Find the sum of two numbers a and b.'
    a = input('vvedi a: ')
    b = input('vvedi b: ')
    print a, '+' , b, '=', a+b
def line():
    n = input("vvedi kilkist storin bagatokutnika: ")
    i = 1
    while i <= n:
        forward(20)
        left(360/n)
        i = i+1
root = Tk()
b1 = Button(root, text="My first button!", command=hello)
b1.pack()
b2 = Button(root, text="Second button", command=sum)
b2.pack()
b3 = Button(root, text="Use turtle", command=line)
b3.pack()
root.mainloop()

Результат послідовного натискування на першу, другу (введення двох чисел, виведення результату) і третю кнопки (введення кількості сторін):

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/033.gif


Завдання:
Створіть вікно з 4-ма кнопками однакового розміру. При натисненні на першу у вікні turtle черепашка малює червоний квадрат,  при натисненні на другу - черепашка малює зелений трикутник, третя кнопка дозволяє черепашці намалювати жовтий круг, четверта - пурпуровий шестикутник.



Створення кнопок очищення та закриття

Напишемо програму, яка створює вікно з полотном і кнопкою, при натисненні на яку з'являється довільний прямокутник довільного кольору.
Підключаємо бібліотеки Tkinter і whrandom.
from Tkinter import *
from whrandom import *
Зрозуміло, що треба написати функцію, що розташовує на полотні довільний прямокутник. Такий прямокутник ми вже створювали, лише треба виділити цю частину програми у вигляді функції.
def new_rectangle():
Визначимо координати несусідніх вершин прямокутника наступним чином:
         x1 = randint(0, 400)
         y1 = randint(0, 200)
         x2 = randint(0, 400)
         y2 = randint(0, 200)
Задамо колір. Його значення складемо у rgb-форматі. Відтінок червоного буде випадковим числом в межах від 0 до 255, тобто одним з 256 значень.
         red = randint(0, 255)
Аналогічно визначимо значення
         green = randint(0, 255)
         blue = randint(0, 255)
!      З трьох значень ми формуємо одне, використовуючи формат
          c = "#%02x%02x%02x" % (red, green, blue)
Колір, як і в HTML, береться у лапки, починається знаком дієза # і записується шестизначним шістнадцятковим числом.
Тут %x  означає подання числа у шістнадцятковій системі числення. Цифри 02 перед х визначають, що число має бути дворозрядним (двоцифровим). Якщо навіть якась компонента дорівнює, наприклад 11, то цей формат перетворить її на 0b,  а не просто у b.
Далі створюємо відповідний прямокутник
            canvas.create_rectangle(x1, y1, x2, y2, fill=c)
Тіло функції завершилось. Всі інші стрічки програми будуть йти без відступу.
Треба:
1. створити вікно розмірами 400х200, саме таких максимальних значень можуть набирати координати вершин прямокутника;
2. розмістити на ньому полотно для малювання під назвою canvas - саме таке ім'я застосовується у функції;
3. кнопку, при натискові на яку викликається написана функція new_rectangle.

Спробуйте самостійно дописати програму і перевірити її роботу.
Подамо результат виконання цієї програми після декількох натискувань кнопки.

https://disted.edu.vn.ua/media/images/porkhun/inf_8/l59_64/034.gif


Додамо до цієї програми частину коду, що створить ще дві кнопки: одна - очищує полотно, друга - закриває вікно.
Для очищення полотна напишемо функцію з іменем clear_all. У ній до полотна canvas застосуємо метод delete з параметром all:
def clear_all():
         canvas.delete("all")
Назвемо кнопку clear_button, на ній буде розміщено текст ‘Clean canvas!'при натискові буде викликатися функція clear_all.
Спробуйте самостійно написати створення такої кнопки, не забудьте застосувати метод, який розташує кнопку у вікні.

Є метод destroy, який ніби знищує об'єкт. Ми хочемо застосувати його для вікна root, отже у коді програми буде   
root.destroy()
Цей метод повинен виконатися при натисненні на кнопку. Нехай на кнопці буде написано "QUIT".

Спробуйте самостійно написати створення такої кнопки. Перевірте, чи працює ваша програма.



Завдання:
Напишіть програму, яка створює вікно з полотном, на якому вже розташовано по центру круг радіуса 50,  і трьома кнопками:
при натискуванні на першу - очищується полотно;
на другу -  зникає полотно для малювання;
третя - закривається вікно.


Немає коментарів:

Дописати коментар