10. Udalosti v grafickej ploche

Naučíme sa v našich programoch využívať tzv. udalosti, ktoré vznikajú v bežiacej grafickej aplikácii, buď aktivitami používateľa (klikanie myšou, stláčanie klávesov), alebo operačného systému (tikanie časovača). Na úvod si pripomeňme, čo už vieme o grafickej ploche. Pomocou metód grafickej plochy Canvas (definovanej v module tkinter) kreslíme grafické objekty:

• canvas.create_line() - kreslí úsečku alebo krivku z nadväzujúcich úsečiek

• canvas.create_oval() - kreslí elipsu

• canvas.create_rectangle() - kreslí obdĺžnik

• canvas.create_text() - vypíše text

• canvas.create_polygon() - kreslí vyfarbený útvar zadaný bodmi na obvode

• canvas.create_image() - kreslí obrázok (prečítaný zo súboru .gif alebo .png)

Ďalšie pomocné metódy manipulujú s už nakreslenými objektmi:

• canvas.delete() - zruší objekt

• canvas.move() - posunie objekt

• canvas.coords() - zmení súradnice objektu

• canvas.itemconfig() - zmení ďalšie parametre objektu (napríklad farba, hrúbka, text, obrázok, …)

Ďalšie metódy umožňujú postupne zobrazovať vytváranú kresbu:

• canvas.update() - zobrazí nové zmeny v grafickej ploche

• canvas.after() - pozdrží beh programu o zadaný počet milisekúnd

Udalosť

Udalosťou (event) voláme akciu, ktorá vznikne mimo behu programu a program môže na túto situáciu reagovať. Najčastejšie sú to udalosti od pohybu a klikania myši, od stláčania klávesov, od časovača (vnútorných hodín OS), od rôznych zariadení, … V našom programe potom môžeme nastaviť, čo sa má udiať pri ktorej udalosti. Tomuto sa zvykne hovoriť udalosťami riadené programovanie (event-driven programming).

Používa sa na to mechanizmus obsluhy udalosti (ovládač udalosti, event handler), čo je funkcia v našej aplikácii, ktorá má na starosti spracovávanie príslušnej udalostí. Napríklad, ak budeme potrebovať v našom programe spracovávať udalosť kliknutie myšou do grafickej plochy, napíšeme ovládač udalosti (obyčajnú pythonovskú funkciu) a systému oznámime, aby ju zavolal vždy, keď vznikne táto udalosť. Takémuto nastaveniu (event handler) funkcie k nejakej udalosti budeme hovoriť zviazanie (binding).

Naučíme sa, ako v našich grafických programoch reagovať na udalosti od myši a klávesnice.

Aby grafická plocha reagovala na klikania myšou, musíme ju zviazať (bind) s príslušnou udalosťou (event).

metóda bind()

Táto metóda grafickej plochy slúži na zviazanie niektorej konkrétnej udalosti s nejakou funkciou, ktorá sa bude v programe starať o spracovanie tejto udalosti (event handler). Jej formát je:

canvas.bind(meno_udalosti, funkcia)

kde meno_udalosti je znakový reťazec s popisom udalosti (napríklad pre kliknutie tlačidlom myši) a funkcia je referencia na funkciu, ktorá by sa mala spustiť pri vzniku tejto udalosti. Táto funkcia, musí byť definovaná s práve jedným parametrom, v ktorom nám systém prezradí detaily vzniknutej udalosti.

Klikanie a ťahanie myšou

Ukážeme tieto tri „myšacie“ udalosti:

• kliknutie (zatlačenie tlačidla myši) - reťazec '<ButtonPress>'

• ťahanie (posúvanie myšou so zatlačeným tlačidlom alebo bez zatlačeného tlačidla) - reťazec '<Motion>'

• pustenie myši - reťazec '<ButtonRelease>'

Klikanie myšou

Kliknutie myšou do grafickej plochy vyvolá udalosť s menom '<ButtonPress>'. Ukážme ako vyzerá samotné zviazanie funkcie:

import tkinter

canvas = tkinter.Canvas()
canvas.pack()

canvas.bind('<ButtonPress>', print)

Druhý parameter metódy bind() musí byť referencia na funkciu, ale nie na hocijakú. Musí to byť funkcia, ktorá má jeden parameter. Tu sme použili štandardnú funkciu print a keďže do bind() treba poslať referenciu na túto funkciu, nesmieme za identifikátor print písať zátvorky ().

Keď teraz tento malý testovací program spustíte, objaví sa prázdne grafické okno a program čaká, čo sa bude diať (Ak budete tento program spúšťať mimo IDLE, nezabudnite na záver pripísať volanie mainloop(), napríklad canvas.mainloop()). Keďže sme grafickej ploche udalosť kliknutie myšou zviazali s funkciou print(), každé kliknutie do plochy automaticky vyvolá túto funkciu. Teda, pri klikaní dostávame takýto výpis (pri každom kliknutí do plochy sa vypíše jeden riadok):

<ButtonPress event state=Mod1 num=1 x=194 y=117>
<ButtonPress event state=Mod1 num=1 x=194 y=173>
<ButtonPress event state=Mod1 num=2 x=328 y=31>
<ButtonPress event state=Mod1 num=3 x=17 y=9>

Zviazanie udalosti s nejakou funkciou teda znamená, že každé vyvolanie udalosti (kliknutie tlačidlom myši do grafickej plochy) automaticky zavolá zviazanú funkciu. To, čo nám pritom vypisuje print(), je ten jeden parameter, ktorý tkinter posiela pri každom jeho zavolaní.

Vytvorme si teraz vlastnú funkciu, ktorú zviažeme s udalosťou kliknutia:

import tkinter

def klik(parameter):
    print('klik')

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

Vytvorili sme funkciu klik(), ktorá sa bude automaticky volať pri každom kliknutí do plochy. Nezabudli sme do hlavičky funkcie pridať jeden formálny parameter, inak by Python pri vzniku udalosti protestoval, že našu funkciu klik() chcel zavolať s jedným parametrom a my sme ho nezadeklarovali. Ak by sme tento program spustili, pri každom kliknutí do plochy by sa do textovej plochy shellu mal vypísať text 'klik'.

Teraz k samotnému parametru v našej funkcii klik(): tento parameter slúži na to, aby nám tkinter mohol nejakým spôsobom posielať informácie o udalosti. My vieme, že funkcia klik() sa zavolá vždy, keď sa niekam klikne, ale nevieme, kde presne do plochy sa kliklo. Práve na toto slúži tento parameter: z neho vieme vytiahnuť, napríklad x-ovú a y-ovú súradnicu kliknutého miesta. V nasledovnom príklade vidíme, ako sa to robí. Ešte sme tento parameter premenovali na event (t.j. „udalosť“ po anglicky), aby sme lepšie rozlíšili to, že s týmto parametrom prišla udalosť. Preto tieto súradnice získame ako event.x a event.y:

import tkinter

def klik(event):
    print('klik', event.x, event.y)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

V tomto programe sa pri každom kliknutí vypíšu do shellu aj súradnice kliknutého miesta.

V ďalšom príklade ukážeme, ako využijeme súradnice kliknutého bodu v ploche:

import tkinter

def klik(event):
    x, y = event.x, event.y
    canvas.create_oval(x-10, y-10, x+10, y+10, fill='red')

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

Teraz sa pri kliknutí nakreslí červený kruh a využijú sa pritom súradnice kliknutého miesta: stred kruhu je kliknuté miesto.

Akcia, ktorá sa vykoná pri kliknutí môže byť veľmi jednoduchá, napríklad spájanie kliknutého bodu s nejakým bodom grafickej plochy:

import tkinter

def klik(event):
    canvas.create_line(100, 200, event.x, event.y)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

Napríklad:

Ale môžu sa nakresliť aj komplexnejšie kresby, napríklad 10 sústredných farebných kruhov:

import tkinter
import random

def klik(event):
    x, y = event.x, event.y
    for r in range(50, 0, -5):
        farba = f'#{random.randrange(256**3):06x}'
        canvas.create_oval(x-r, y-r, x+r, y+r, fill=farba)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

Napríklad:

Vráťme sa k príkladu, v ktorom sme kreslili malé krúžky:

import tkinter

def klik(event):
    x, y = event.x, event.y
    canvas.create_oval(x-5, y-5, x+5, y+5, fill='red')

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

Do tohto programu chceme pridať takéto správanie: tieto kliknuté body (červené krúžky) sa budú postupne spájať úsečkami (zrejme sa bude úsečka kresliť až od druhého kliknutia). Pridáme dve globálne premenné xx a yy, v ktorých si budeme pamätať predchádzajúci kliknutý bod. Pred prvým kliknutím sme do xx priradili None, čo bude označovať, že predchádzajúci vrchol ešte nebol kliknutý:

import tkinter

xx = yy = None

def klik(event):
    x, y = event.x, event.y
    canvas.create_oval(x-5, y-5, x+5, y+5, fill='red')
    if xx != None:
        canvas.create_line(xx, yy, x, y)
    xx, yy = x, y

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

Žiaľ to nefunguje: po spustení a kliknutí sa dozvieme:

...
File ..., line 8, in klik
    if xx != None:
UnboundLocalError: local variable 'xx' referenced before assignment

Problémom sú tu globálne premenné. Používať globálne premenné vo vnútri funkcii môžeme, len dovtedy, kým ich nemeníme. Priraďovací príkaz vo funkcii totiž znamená, že vytvárame novú lokálnu premennú (v mennom priestore funkcie klik()). Takže Python to v tejto funkcii pochopil takto: do premenných xx a yy sa vo vnútri funkcie priraďuje nejaká hodnota, takže obe sú lokálne premenné. Keď ale príde vykonávanie funkcie na podmienený príkaz if  xx != None:, Python už vie, že xx je lokálna premenná, ktorá nemá zatiaľ priradenú žiadnu hodnotu. A preto nám oznámil túto chybovú správu: UnboundLocalError: local variable 'xx' referenced before assignment (chceme používať lokálnu premennú ‚xx‘ skôr ako sme do nej niečo priradili).

Takže s globálnymi premennými vo funkcii sa bude musieť pracovať nejako inak. Zrejme, kým do takejto premennej nepotrebujeme vo funkcii nič priradzovať, iba ju používať, problémy nie sú. Problém nastáva vtedy, keď chceme (pomocou priraďovacieho príkazu) meniť obsah globálnej premennej.

Toto nám pomôže vyriešiť nový príkaz global:

príkaz global

príkaz má tvar:

global premenná
global premenná, premenná, premenná, ...

Príkaz sa používa vo funkcii vtedy, keď v nej chceme pracovať s globálnou premennou (alebo aj s viac premennými), ale nechceme, aby ju Python vytvoril aj v lokálnom mennom priestore, ale ponechal len v globálnom.

Po doplnení tohto príkazu do predchádzajúceho príkladu všetko funguje tak, ako má:

import tkinter

xx = yy = -1

def klik(event):
    global xx, yy
    x, y = event.x, event.y
    canvas.create_oval(x-5, y-5, x+5, y+5, fill='red')
    if xx >= 0:
        canvas.create_line(xx, yy, x, y)
    xx, yy = x, y

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

Po spustení dostávame takýto obrázok:

Nebezpečné

Príkaz global umožňuje modifikovať globálne premenné vo funkciách, teda vlastne robiť tzv. vedľajší účinok (side effect) na globálnych premenných. Toto je ale veľmi nesprávny spôsob programovania (bad programming practice) a väčšinou svedčí o programátorovi začiatočníkovi, amatérovi.

Aj testovač domácich zadaní a riešení skúšok väčšinou tento príkaz vo vašich projektoch zakazuje.

Kým sa nenaučíme, ako to obísť, budeme to používať, ale veľmi opatrne. Neskôr to využijeme veľmi výnimočne, najmä pri ladení. Správne sa takéto problémy riešia definovaním vlastných tried a použitím atribútov tried.

Ťahanie myšou

Obsluha udalosti ťahanie myšou (pohyb myši bez zatlačeného alebo so zatlačeným tlačidlom) je veľmi podobná klikaniu. Udalosť má meno '<Motion>'. Pozrime, čo sa zmení, keď kliknutie '<ButtonPress>' nahradíme ťahaním '<Motion>':

import tkinter

def klik(event):
    x, y = event.x, event.y
    canvas.create_oval(x-10, y-10, x+10, y+10, fill='red')

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<Motion>', klik)      # '<Motion>' namiesto '<ButtonPress>'

Funguje to veľmi dobre: pri ťahaní sa na pozícii myši kreslia červené kruhy. Pri pomalom ťahaní sú kruhy nakreslené veľmi nahusto.

Ak vo funkcii klik pri ťahaní myšou zakaždým zmažeme grafickú plochu (zrušíme všetky nakreslené objekty), v ploche zostanú nakreslené len objekty, ktoré sa kreslili neskôr. Napríklad:

import tkinter

def klik(event):
    x, y = event.x, event.y
    canvas.delete('all')
    canvas.create_oval(x-10, y-10, x+10, y+10, fill='red')

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<Motion>', klik)

Tento program nakreslí červený krúžok, ktorý bude „prilepený“ na kurzor myši. Vyskúšajte namiesto krúžku vypisovať text:

canvas.create_text(x, y, text=(x, y))

Často budeme v našich programoch spracovávať obe udalosti: kliknutie aj ťahanie. Niekedy sa o to bude starať tá istá funkcia, inokedy budú rôzne a preto je dobre ich pomenovať zodpovedajúcimi názvami, napríklad:

import tkinter

def klik(event):
    x, y = event.x, event.y
    canvas.create_oval(x-10, y-10, x+10, y+10, fill='red')

def tahanie(event):
    x, y = event.x, event.y
    canvas.create_oval(x-5, y-5, x+5, y+5, fill='blue')

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)
canvas.bind('<Motion>', tahanie)

Pri posúvaní myši sa kreslia malé modré kruhy, pri kliknutí sa nakreslí jeden červený kruh:

Všimnite si, že ťahanie (kreslenie modrých kruhov) funguje aj so zatlačeným tlačidlom myši.

Veľmi často budeme potrebovať, aby sa funkcia na ťahanie (event handler tahanie) zavolala len v prípade, že je súčasne s ťahaním zatlačené aj tlačidlo myši. Vtedy do mena udalosti '<Motion>' na začiatok pripíšeme B1-, čo bude označovať, že funkcia tahanie si bude všímať len ťahania so zatlačeným ľavým tlačidlom myši. Otestujte, ako sa bude predchádzajúci program správať, keď namiesto canvas.bind('<Motion>', tahanie) zapíšeme canvas.bind('<B1-Motion>', tahanie).

Na podobnom princípe môžeme upraviť aj kreslenie lúčov z bodu (100, 200) do momentálnej pozície myši:

import tkinter

def klik(event):
    canvas.create_line(100, 200, event.x, event.y, fill='red', width=3)

def tahanie(event):
    canvas.create_line(100, 200, event.x, event.y)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)
canvas.bind('<Motion>', tahanie)

Pri posúvaní myši alebo ťahaní sa nakreslia čierne úsečky, pri každom kliknutí sa nakreslí červená úsečka:

Alebo malou zmenou kliknutím definujeme pozíciu (globálny bod (xx, yy)), z ktorého sa budú kresliť lúče:

import tkinter

def klik(event):
    global xx, yy
    xx, yy = event.x, event.y

def tahanie(event):
    canvas.create_line(xx, yy, event.x, event.y)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)
canvas.bind('<B1-Motion>', tahanie)

Všimnite si, že sme tu použili '<B1-Motion>'. Zamyslite sa, prečo by tu pri '<Motion>' bez B1- vznikla chyba. Po spustení dostávame takúto kresbu:

Ďalej nadviažeme na program, v ktorom sme postupne spájali kliknuté body. Pri tomto programe sme využili nový príkaz global, aby sme sa dostali ku globálnym premenným. Tento nie najvhodnejší príkaz môžeme obísť, keď využijeme meniteľný (mutable) typ zoznam.

Budeme ťahať (ťahaním myši so zatlačeným tlačidlom) jednu dlhú lomenú čiaru, pričom si budeme ukladať súradnice prijaté z udalosti do zoznamu čísel:

import tkinter

zoznam = []

def klik(event):
    zoznam[:] = [event.x, event.y]

def tahanie(event):
    zoznam.extend([event.x, event.y])
    canvas.coords(ciara, zoznam)

canvas = tkinter.Canvas()
canvas.pack()
ciara = canvas.create_line(0, 0, 0, 0)
canvas.bind('<ButtonPress>', klik)
canvas.bind('<B1-Motion>', tahanie)

Všimnite si, že v týchto dvoch funkciách používame 3 globálne premenné (okrem funkcií):

• canvas - referencia na grafickú plochu

• ciara - identifikátor objektu čiara, potrebujeme ho pre neskoršie menenie postupnosti súradníc príkazom coords()

• zoznam - zoznam súradníc je meniteľný objekt, teda môžeme meniť obsah zoznamu bez toho, aby sme do premennej zoznam priraďovali; v našich funkciách buď priraďujeme do rezu alebo voláme metódu extend() (táto prilepí nejakú postupnosť na koniec zoznamu)

  • aj modifikovanie zoznamu vo funkcii, v ktorej tento zoznam nie je parametrom funkcie, nie je najvhodnejším spôsobom programovania; aj v tomto prípade je to nevhodný vedľajší účinok podobne ako príkaz global, zatiaľ to inak robiť nevieme, tak je to dočasne akceptovateľné

Ťahanie čiary v predchádzajúcom príklade žiaľ kreslí jedinú čiaru: každé ďalšie kliknutie a ťahanie začne kresliť novú čiaru, pričom stará čiara zmizne. Vyriešime to tak, že pri kliknutí začneme kresliť novú čiaru a tú starú necháme tak:

import tkinter

zoznam = []

def klik(event):
    global ciara
    zoznam[:] = [event.x, event.y]
    ciara = canvas.create_line(0, 0, 0, 0)

def tahanie(event):
    zoznam.extend([event.x, event.y])
    canvas.coords(ciara, zoznam)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)
canvas.bind('<B1-Motion>', tahanie)

Poexperimentujeme:

Malou zmenou dosiahneme veľmi zaujímavý efekt. Vyskúšajte a poštudujte:

import tkinter
import random

zoznam = []

def klik(event):
    global poly
    zoznam[:] = [event.x, event.y]
    farba = f'#{random.randrange(256**3):06x}'
    poly = canvas.create_polygon(0, 0, 0, 0, fill=farba)

def tahanie(event):
    zoznam.extend([event.x, event.y])
    canvas.coords(poly, zoznam)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)
canvas.bind('<B1-Motion>', tahanie)

Udalosti od klávesnice

Aj každé zatlačenie nejakého klávesu na klávesnici môže vyvolať udalosť. Základnou univerzálnou udalosťou je '<Key>', ktorá sa vyvolá pri každom zatlačení nejakého klávesu. Môžeme otestovať:

import tkinter

def test(event):
    print(event.keysym)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind_all('<Key>', test)

Všimnite si, že sme museli zapísať bind_all() namiesto bind(). Každé zatlačenie nejakého klávesu vypíše jeho reťazcovú reprezentáciu, napríklad:

a
Shift_L
A
Left
Right
Up
Down
Next
Escape
Return
F1

Pritom každý jeden kláves môže vyvolať aj samostatnú udalosť. Ako meno udalosti treba uviesť meno klávesu (jeho reťazcovú reprezentáciu) v '<...>' zátvorkách alebo ako samostatný znak, napríklad:

import tkinter

def test_vlavo(event):
    print('šípka vľavo')

def test_a(event):
    print('stlačil si kláves a')

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind_all('a', test_a)
canvas.bind_all('<Left>', test_vlavo)

Tento program reaguje len na stláčanie klávesu 'a' a šípky vľavo. Všetky ostatné klávesy ignoruje.

Často sa samostatné udalosti pre jednotlivé šípky použijú podobne, ako v tomto príklade:

import tkinter

x, y = 200, 200
zoznam = [x, y]

def kresli(dx, dy):
    global x, y
    x += dx
    y += dy
    zoznam.extend((x, y))
    canvas.coords(ciara, zoznam)

def udalost_vlavo(event):
    kresli(-10, 0)

def udalost_vpravo(event):
    kresli(10, 0)

def udalost_hore(event):
    kresli(0, -10)

def udalost_dolu(event):
    kresli(0, 10)

canvas = tkinter.Canvas()
canvas.pack()

ciara = canvas.create_line(0, 0, 0, 0)        # zatiaľ prázdna čiara
canvas.bind_all('<Left>', udalost_vlavo)
canvas.bind_all('<Right>', udalost_vpravo)
canvas.bind_all('<Up>', udalost_hore)
canvas.bind_all('<Down>', udalost_dolu)

Kreslenie pomocou tohto programu môže pripomínať detskú hračku „magnetická tabuľka“:

Časovač

Pripomeňme si, ako by sme doteraz v grafickej ploche kreslili krúžky na náhodné pozície s nejakým časovým pozdržaním (napríklad 100 ms):

import tkinter
import random

def kresli():
    while True:
        x = radnom.randint(10, 370)
        y = radnom.randint(10, 250)
        canvas.create_oval(x-10, y-10, x+10, y+10, fill='red')
        canvas.update()
        canvas.after(100)

canvas = tkinter.Canvas()
canvas.pack()

kresli()
print('hotovo')

Použili sme tu nekonečný cyklus a preto sa príkaz print('hotovo') za volaním kresli() s nekonečným while-cyklom už nikdy nevykoná.

Metóda grafickej plochy after(), ktorá pozdrží výpočet o nejaký počet milisekúnd, je oveľa všestrannejšia: môžeme pomocou nej štartovať, tzv. časovač:

metóda after()

Metóda after() grafickej plochy môže mať jeden z týchto tvarov:

canvas.after(milisekundy)
canvas.after(milisekundy, funkcia)

Prvý parameter milisekundy už poznáme: výpočet sa pozdrží o príslušný počet milisekúnd. Lenže, ak je metóda zavolaná aj s druhým parametrom funkcia, výpočet sa naozaj nepozdrží, ale pozdrží sa vyvolanie zadanej funkcie (parameter funkcia musí byť referencia na funkciu, teda väčšinou bez okrúhlych zátvoriek). Táto vyvolaná funkcia musí byť definovaná bez parametrov.

S týmto druhým parametrom metóda after() naplánuje (niekedy v budúcnosti) spustenie nejakej funkcie a pritom výpočet pokračuje normálne ďalej na ďalšom príkaze za after() (bez pozdržania).

Tomuto mechanizmu hovoríme časovač (naplánovanie spustenia nejakej akcie), po anglicky timer. Najčastejšie sa používa takto:

def casovac():
    # príkazy
    canvas.after(cas, casovac)

V tomto prípade funkcia naplánuje spustenie samej seba po nejakom čase. Môžete si to predstaviť tak, že v počítači tikajú nejaké hodiny s udanou frekvenciou v milisekundách a pri každom tiknutí sa vykonajú príkazy v tele funkcie.

Najprv jednoduchý test:

import tkinter

def casovac():
    print('tik')
    canvas.after(1000, casovac)

canvas = tkinter.Canvas()
canvas.pack()
casovac()

Časovač každú sekundu vypíše do textovej plochy reťazec 'tik'.

Predchádzajúci program s náhodnými červenými krúžkami teraz prepíšeme s použitím časovača:

import tkinter
import random

def kresli():
    x = radnom.randint(10, 370)
    y = radnom.randint(10, 250)
    canvas.create_oval(x-10, y-10, x+10, y+10, fill='red')
    #canvas.update()
    canvas.after(100, kresli)

canvas = tkinter.Canvas()
canvas.pack()
kresli()             # naštartovanie časovača
print('hotovo')

Po spustení funkcie kresli() (tá nakreslí jeden kruh a zavolá after(), t. j. naplánuje ďalšie kreslenie) sa pokračuje ďalším príkazom, t. j. vypíše sa print('hotovo'), program končí a v shelli môžeme zadávať ďalšie príkazy. Pritom ale stále beží náš rozbehnutý časovač. V shelli by sme teraz mohli zapísať, napríklad:

>>> canvas.delete('all')

Tento príkaz vymaže grafickú plochu, ale bežiaci časovač (rozbehnutá funkcia kresli()) do nej bude pokračovať v kreslení červených krúžkov. Toto bude zrejme fungovať len v prostredí IDLE, keďže v ňom nemusíme na koniec programu písať tkinter.mainloop().

Keďže počas behu časovača môže program vykonávať ďalšie akcie, môže spustiť hoci aj ďalší časovač. Zapíšme:

import tkinter
import random

def kresli():
    x = radnom.randint(10, 370)
    y = radnom.randint(10, 250)
    canvas.create_oval(x-10, y-10, x+10, y+10, fill='red')
    canvas.after(100, kresli)

def kresli1():
    x = radnom.randint(10, 370)
    y = radnom.randint(10, 250)
    canvas.create_rectangle(x-10, y-10, x+10, y+10, fill='blue')
    canvas.after(300, kresli1)

canvas = tkinter.Canvas()
canvas.pack()
kresli()
kresli1()
print('hotovo')

Program teraz spustí oba časovače: kreslia sa červené krúžky a modré štvorčeky. Keďže druhý časovač má svoj interval 300 milisekúnd, teda „tiká“ 3-krát pomalšie ako prvý, kreslí 3-krát menej modrých štvorčekov ako prvý časovač červených krúžkov, napríklad:

Zastavovanie časovača

Na zastavenie časovača nemáme žiaden príkaz. Časovač môžeme zastaviť len tak, že on sám v svojom tele na konci nezavolá metódu canvas.after() a tým aj skončí. Upravíme predchádzajúci príklad tak, že zadefinujme dve globálne premenné, ktoré budú slúžiť pre oba časovače na zastavovanie:

import tkinter
import random

bezi = bezi1 = True

def kresli():
    x = radnom.randint(10, 370)
    y = radnom.randint(10, 250)
    canvas.create_oval(x-10, y-10, x+10, y+10, fill='red')
    if bezi:
        canvas.after(100, kresli)

def kresli1():
    x = radnom.randint(10, 370)
    y = radnom.randint(10, 250)
    canvas.create_rectangle(x-10, y-10, x+10, y+10, fill='blue')
    if bezi1:
        canvas.after(300, kresli1)

canvas = tkinter.Canvas()
canvas.pack()
kresli()
kresli1()
print('hotovo')

Teraz bežia oba časovače, ale stačí priradiť, napríklad:

>>> bezi = False

V tomto momente sa prvý časovač zastaví a beží iba druhý, teda sa kreslia len modré štvorčeky. Ak by sme chceli znovu naštartovať prvý časovač, nesmieme zabudnúť zmeniť premennú bezi a zavolať kresli():

>>> bezi = True
>>> kresli()

Opäť bežia súčasne oba časovače.

Globálne premenné môžeme využiť aj na iné účely: môžeme nimi meniť „parametre“ bežiacich príkazov. Napríklad farbu krúžkov, ale aj interval tikania časovača, napríklad:

import tkinter
import random

bezi = True
farba = 'red'
cas = 100
vel = 10

def casovac():
    x = radnom.randint(10, 370)
    y = radnom.randint(10, 250)
    canvas.create_oval(x-vel, y-vel, x+vel, y+vel, fill=farba)
    if bezi:
        canvas.after(cas, casovac)

canvas = tkinter.Canvas()
canvas.pack()
casovac()

Počas behu tohoto časovača ho môžeme nielen zastavovať, ale meniť mu rýchlosť (zmenou premennej cas), farbu aj veľkosť krúžkov, napríklad:

>>> vel, farba = 30, 'blue'

Od tohto momentu sa kreslia modré ale väčšie krúžky.

>>> cas = 30

Zrýchli časovač na 30 milisekúnd.

Ďalšia ukážka bude hýbať dvoma obrázkami autíčok (napríklad auto1.png a auto2.png) rôznou rýchlosťou:

import tkinter

def pohyb():
    canvas.move(auto1, 4, 0)
    canvas.move(auto2, -5, 0)
    canvas.after(30, pohyb)

canvas = tkinter.Canvas(width=600)
canvas.pack()

obr_auto1 = tkinter.PhotoImage(file='auto1.png')
obr_auto2 = tkinter.PhotoImage(file='auto2.png')

auto1 = canvas.create_image(0, 150, image=obr_auto1)
auto2 = canvas.create_image(600, 150, image=obr_auto2)

pohyb()

Program rozbehne dve autíčka proti sebe, ale nekontroluje, či sa zrazia:

Aby sa autá nerozbehli už pri štarte programu, ale až po kliknutí do plochy, zapíšeme:

import tkinter

def start(event):
    canvas.coords(auto1, 0, 150)
    canvas.coords(auto2, 600, 150)
    pohyb()

def pohyb():
    canvas.move(auto1, 4, 0)
    canvas.move(auto2, -5, 0)
    canvas.after(30, pohyb)

canvas = tkinter.Canvas(width=600)
canvas.pack()

obr_auto1 = tkinter.PhotoImage(file='auto1.png')
obr_auto2 = tkinter.PhotoImage(file='auto2.png')

auto1 = canvas.create_image(0, 150, image=obr_auto1)
auto2 = canvas.create_image(600, 150, image=obr_auto2)

canvas.bind('<ButtonPress>', start)

Teraz chceme pridať kontrolu, či sa už obe autá zrazili. Vtedy zastavíme časovač a vypíšeme nejakú správu. Keďže si nikde neuchovávame momentálnu pozíciu áut, využijeme metódu coords(), ktorá okrem zmeny súradníc grafického objektu, dokáže zistiť momentálne jeho súradnice. Napríklad ak počas behu časovača zapíšeme:

>>> canvas.coords(auto1)
[164.0, 150.0]
>>> canvas.coords(auto2)
[395.0, 150.0]

Vidíme, že táto funkcia nám vracia polohu autíčka (súradnice stredu obrázka), preto môžeme zastaviť časovač testovaním x-ových súradníc autíčok:

import tkinter

def start(event):
    canvas.coords(auto1, 0, 150)
    canvas.coords(auto2, 600, 150)
    pohyb()

def pohyb():
    canvas.move(auto1, 4, 0)
    canvas.move(auto2, -5, 0)
    x_auto1 = canvas.coords(auto1)[0]
    x_auto2 = canvas.coords(auto2)[0]
    if x_auto1 > x_auto2 - 140:
        canvas.create_text(200, 50, text='BUM', fill='red', font='arial 40 bold')
    else:
        canvas.after(30, pohyb)

canvas = tkinter.Canvas(width=600)
canvas.pack()

obr_auto1 = tkinter.PhotoImage(file='auto1.png')
obr_auto2 = tkinter.PhotoImage(file='auto2.png')

auto1 = canvas.create_image(0, 150, image=obr_auto1)
auto2 = canvas.create_image(600, 150, image=obr_auto2)

canvas.bind('<ButtonPress>', start)

Pri stretnutí autíčok dostávame:

Hoci tento program funguje dobre, má niekoľko malých nedostatkov:

• ak počas pohybu autíčok (beží časovač pohyb()) znovu klikneme do plochy (vyvoláme udalosť start()), autíčka skočia do svojich štartových pozícií a znovu sa vyvolá časovač pohyb(); teraz to ale vyzerá, že autíčka idú dvojnásobnou rýchlosťou - totiž teraz bežia naraz dva časovače pohyb() aj pohyb(), ktoré oba pohnú oboma autíčkami - hoci je to zaujímavé, budeme sa snažiť tomuto zabrániť

• ak autíčka do seba nabúrajú, vypíše sa text 'BUM', ktorý tam bude svietiť aj po opätovnom naštartovaní autíčok

Vylepšíme funkciu start() takto:

• keďže táto štartuje časovač pohyb(), zablokujeme opätovné kliknutie tým, že zrušíme zviazanie udalosti klik s funkciou start()

• ak svieti text 'BUM', tak ho vymažeme

Využijeme nový príkaz unbind(), pomocou ktorého vieme rozviazať nejakú konkrétnu udalosť s funkciou:

metóda unbind()

Metóda zruší zviazanie príslušnej udalosti:

canvas.unbind(meno_udalosti)

V časovači (vo funkcii) pohyb() pri výpise správy 'BUM', keďže zastavujeme časovač, opätovne zviažeme kliknutie do plochy s udalosťou start():

import tkinter

text = None

def start(event):
    canvas.unbind('<ButtonPress>')              # zruší klikaciu udalosť
    canvas.coords(auto1, 0, 150)
    canvas.coords(auto2, 600, 150)
    canvas.delete(text)
    pohyb()

def pohyb():
    global text
    canvas.move(auto1, 4, 0)
    canvas.move(auto2, -5, 0)
    x_auto1 = canvas.coords(auto1)[0]
    x_auto2 = canvas.coords(auto2)[0]
    if x_auto1 > x_auto2 - 140:
        text = canvas.create_text(200, 50, text='BUM', fill='red', font='arial 40 bold')
        canvas.bind('<ButtonPress>', start)     # obnoví klikaciu udalosť
    else:
        canvas.after(30, pohyb)

canvas = tkinter.Canvas(width=600)
canvas.pack()

obr_auto1 = tkinter.PhotoImage(file='auto1.png')
obr_auto2 = tkinter.PhotoImage(file='auto2.png')

auto1 = canvas.create_image(0, 150, image=obr_auto1)
auto2 = canvas.create_image(600, 150, image=obr_auto2)

canvas.bind('<ButtonPress>', start)

Zhrnutie udalostí od myši

Udalosť '<ButtonPress>' reprezentuje kliknutie ľubovoľným tlačidlom myši. Väčšinou má každá myš tri tlačidlá: ľavé, stredné a pravé. Priamo v názve udalosti môžeme určiť, aby sa udalosť vyvolala len pri konkrétnom tlačidle. Vtedy bude názov udalosti takýto:

• '<ButtonPress-1>' pre zatlačenie ľavého tlačidla

• '<ButtonPress-2>' pre zatlačenie stredného tlačidla

• '<ButtonPress-3>' pre zatlačenie pravého tlačidla

Môžeme zapísať napríklad:

import tkinter

def klik_lavy(event):
    canvas.create_text(event.x, event.y, text=1, font='Arial 30', fill='blue')

def klik_stredny(event):
    canvas.create_text(event.x, event.y, text=2, font='Arial 30', fill='green')

def klik_pravy(event):
    canvas.create_text(event.x, event.y, text=3, font='Arial 30', fill='red')

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress-1>', klik_lavy)
canvas.bind('<ButtonPress-2>', klik_stredny)
canvas.bind('<ButtonPress-3>', klik_pravy)

Každá funkcia sa stará o kliknutie svojho tlačidla. V parametri event okrem súradníc event.x a event.y dostávame aj poradové číslo tlačidla event.num, ktorým sme práve klikli. Predchádzajúci program môžeme zapísať aj takto:

import tkinter

def klik(event):
    farba = ['blue', 'green', 'red'][event.num-1]
    canvas.create_text(event.x, event.y, text=event.num, font='Arial 30', fill=farba)

canvas = tkinter.Canvas()
canvas.pack()
canvas.bind('<ButtonPress>', klik)

Je to na programátorovi, ktorú z týchto možností preferuje.

Meno udalosti '<ButtonPress-1>' existuje aj v skrátenej forme a to buď '<Button-1>' alebo dokonca '<1>' (zrejme to funguje aj s 2 aj 3). Opäť je na programátorovi, ktorý zápis preferuje a pritom neznižuje čitateľnosť kódu.

Už poznáme meno udalosti pre ťahanie myši '<Motion>'. Táto pomenovaná udalosť zavolá príslušnú funkciu so zatlačeným aj bez zatlačeného tlačidla. Poznáme aj variant mena udalosti '<B1-Motion>', vďaka čomu spracovávame len ťahanie so zatlačeným ľavým tlačidlom myši. Podobne ako pri klikaní môžeme špecifikovať zatlačené tlačidlo číslom od 1 do 3, bude to fungovať aj pri ťahaní, preto:

• '<B1-Motion>' ťahanie so zatlačeným ľavým tlačidlom

• '<B2-Motion>' ťahanie so zatlačeným stredným tlačidlom

• '<B3-Motion>' ťahanie so zatlačeným pravým tlačidlom

Neskôr uvidíme využitie udalosti aj od pustenia tlačidla myši '<ButtonRelease>'. Aj táto udalosť funguje pre varianty s konkrétnym tlačidlom myši, napríklad '<ButtonRelease-1>' spracováva len pustenie ľavého tlačidla myši.

Cvičenia

L.I.S.T.

• riešenia odovzdávaj na úlohový server https://list.fmph.uniba.sk/

• pozri si Riešenie 10. cvičenia

1. Napíš program, ktorý zabezpečí, že ťahanie myšou so zatlačeným ľavým tlačidlom kreslí farebné krúžky. Pritom, ak x < 190 budú červené inak zelené. Kliknutie do plochy pravým tlačidlom myši plochu vymaže.

2. Napíš program, ktorý zabezpečí, že ťahanie myšou so zatlačeným ľavým tlačidlom kreslí úsečku dĺžky 50 smerom nahor, ktorá má na konci má malý červený kruh. Kliknutie do plochy pravým tlačidlom myši plochu vymaže.

3. Napíš program, ktorý zabezpečí, že ťahanie myšou so zatlačeným ľavým tlačidlom kreslí malé modré krúžky a zároveň aj červené, ktoré sú ale umiestnené symetricky (zrkadlovo) podľa osi x=190. Kliknutie do plochy pravým tlačidlom myši plochu vymaže.

4. Napíš program, ktorý zabezpečí, že klikanie aj ťahanie myšou so zatlačeným ľavým tlačidlom kreslí farebné štvorčeky (bez obrysu) so stredom v pozícii myši a so stranou 16. Kresliť sa bude len ak x aj y budú v intervale <0, 255> (inak sa ignorujú). Farbu štvorčeka zvoľ ako RGB(x, y, 0).

5. Napíš program, ktorý bude robiť efekt spreja: ťahanie myšou so zatlačeným ľavým tlačidlom nakreslí 20 farebných bodiek (podľa globálnej premennej farba = 'blue') na náhodných pozíciách. Tieto náhodné bodky budú mať od kliknutého miesta vzdialenosť maximálne 30, teda x-ová súradnica bude z intervalu <x-30, x+30> a y-ová z <y-30, y+30>. Najlepšie je ich kresliť ako kruhy s polonerom 2 bez obrysu (width=0).

   • Do programu môžeš pridať spracovanie ľavého kliknutia myši: vtedy sa nastaví premenná farba na náhodnú farbu. Vďaka tomuto by každé ťahanie myšou sprejovalo inou farbou.

6. V globálnej premennej zoznam máme daný zoznam reťazcov. Napíš program, ktorý pri každom kliknutí do plochy z neho vyberie prvý reťazec a vypíše ho do grafickej plochy na kliknuté miesto. Tento reťazec potom ešte vloží na koniec zoznamu. Použi, napríklad takýto font 'arial 25'. Reťazec môžeš zvoliť, napríklad takto:

   zoznam = list('PYTHON')
   

   alebo

   zoznam = 'Python Java Pascal C++'.split()
   

7. Pri štarte programu sa nakreslí hrubá úsečka z bodu (10, 100) dĺžky 10, napríklad:

   ciara = canvas.create_line(10, 100, 20, 100, fill='blue', width=20, capstyle='round')
   

   Program by mal teraz reagovať na kliknutia myšou (hocikam) tak, že zakaždým túto úsečku predĺži o 5. Pomocou canvas.coords(ciara) zistíš momentálne súradnice úsečky (štvorica čísel) a opäť pomocou canvas.coords(ciara, ...nove súradnioce ...) túto štvoricu zmeníš. Pokús sa to vyriešiť tak, aby si okrem canvas a ciara nepoužil žiadne ďalšie globálne premenné.

8. Napíš program, ktorý bude na klikanie myšou do plochy reagovať takto: na pozícii myši sa nakreslí farebný kruh s polomerom 50 (stred kruhu je na pozícii myši a farba je náhodná). Každé ďalšie kliknutie (hocikam v ploche) zmenší polomer tohto kruhu o 5 (pomocou canvas.coords). Keď už bude polomer tohto kruhu 5, ďalej sa nebude zmenšovať, ale namiesto toho sa na momentálnej pozícii začne nový farebný kruh s polomerom 50. Takto postupne zostanú v ploche len malé farebné krúžky s polomerom 5. Na riešenie tejto úlohy môžeš použiť pomocné globálne premenné, ktoré budeš môcť vo funkcii meniť vďaka príkazu global.

9. Napíš program, ktorý najprv nakreslí vedľa seba 8 štvorcov 45x45 a potom každé kliknutie do niektorého zo štvorcov ho náhodne prefarbí. Poradové číslo štvorca v rade zistíš z x-ovej súradnice kliknutého bodu (event.x-x0) // 45. Odkontroluj, či aj event.y je v správnom intervale, t. j. či sa kliklo do vnútra niektorého štvorca a nie niekde mimo. Ľavý horný roh prvého štvorca nech je, napríklad x0, y0 = 10, 50. Identifikačné čísla nakreslených štvorcov (číslo, ktoré vráti canvas.create_rectangle) si ulož do 8-prvkového zoznamu. Potom zmenu farby štvorca urobíš pomocou:

   canvas.itemconfig(zoznam[i], fill=...náhodná farba...)
   

10. Napíš program, ktorý bude na klikanie myšou do plochy reagovať takto: na pozícii myši sa nakreslí farebný štvorec 50x50, pričom farba sa zvolí náhodne: jedna z farieb biela, modrá, červená. Pozíciu kresleného štvorca zvoľ tak, aby sa jeho ľavý horný roh nachádzal v myslenej sieti so štvorcami 50x50. Takže pri kliknutí myšou najprv vypočítaš súradnice ľavého horného vrcholu príslušného štvorčeka siete a podľa toho nakreslíš zafarbený štvorec. Uvedom si, že každé kliknutie nakreslí nový štvorec a teda na jednom mieste sa môže nakresliť aj viac štvorcov na sebe.

11. Pri šarte programu sa v strede plochy nakreslí číslo 0 nejakým zväčšeným fontom, napríklad:

    cislo = canvas.create_text(190, 130, text=x, font='arial 50', fill='navy')
    

    Pri kliknutí tlačidlom myši do plochy sa naštartuje časomiera: každých 0.1 sekundy sa toto číslo zväčší o 1. Opätovné zatlačenie myši túto časomieru pozastaví. Na zmenu vykresľovaného čísla použi canvas.itemconfig.

12. Napíš program, pomocou ktorého sa bude dať písať pomocou klávesnice do grafickej plochy: keď kliknem do plochy myšou, zapamätá sa táto pozícia a ďalšie stláčanie klávesov bude od tejto pozície vypisovať tieto znaky. Použi nejaký zväčšený font, napríklad font='arial 30' a po každom vypísaní znaku posuň pozíciu, napríklad o 30 vpravo. Program by mal vypisovať len klávesy s jednoznakovým event.keysym, prípadne by mal správne reagovať aj stlačenie medzery.

13. Na začiatku je v ploche na pozícii poz = [100, 100] nakreslený malý farebný krúžok. Pri každom tiknutí časovača sa pozícia posunie o 5 jedným zo štyroch smerov (na začiatku smerom na východ) a nakreslí sa ďalší krúžok. Pri zatlačení jednej zo šípok na klávesnici sa zmení smer pohybu kreslenia krúžkov. Program teda okrem časovača reaguje na klávesy šípok: vpravo, dole, vľavo a hore.

14. Napíš program, ktorý bude podobnou časomierou ako v (11) úlohe, ale namiesto čísla sa nakreslí jednoduchý ciferník: kruh, v ktorom sa dookola pohybuje ručička (úsečka od stredu kruhu). Stred kruhu nech je (150, 120), polomer a aj dĺžka ručičky nech je 100. Na posúvanie ručičky použi canvas.coords.