4. diel - Reakcia na kliknutie / dotyk a aplikácie Maľovanie v Kivy

Zdravím vás u ďalšej lekcie Kivy frameworku pre Python. V minulej lekcii, Dynamické pozíciovanie widgetov v Kivy , sme si ukázali ako dynamicky pozicový widgety a upevnili sme si vedomosti ohľadom Kivy language. V dnešnom Python tutoriálu si predstavíme reakciu na kliknutie a pohyb myši a potom si vytvoríme jednoduchú aplikáciu Maľovanie.

Reakcia na pohyb

Najskôr sa musíme naučiť reagovať na kliknutie a pohyb myši, aby sme si mohli sľubovanú aplikáciu Maľovanie vytvoriť. Ako príklad nám poslúži upravená aplikácie z predchádzajúcej lekcie, ktorá zobrazovala Label y na nami uvedenej pozícii, pretože sme nepoužívali žiadny layout.

Z nášho .kv súboru programu zmažeme iba Label2 a zvyšok ponecháme:

#:kivy 1.10.1
#:import math math

<Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

<MujWidget>:

    label1: label1

    Label:
        id: label1
        text: str(round(math.pi, 5))
        pos: root.width - self.width, root.top - self.height

Aby sme mohli reagovať na kliknutie alebo pohyb myši v Kivy frameworku, musíme si vytvoriť 3 metódy:

• on_touch_down(touch) - reakcia na kliknutie
• on_touch_up(touch) - reakcia na opak kliknutie (pustení tlačidla myši / zdvihnutie prsta)
• on_touch_move(touch) - reakcia na pohyb myši / prsta

Parameter touch v sebe skrýva pozícii kliknutia / dotyku. My budeme chcieť presúvať náš Label1 na aktuálnu pozíciu myši, preto využijeme touch.x a touch.y. Nevyužijeme touch.pos keďže vracia tuple s pozíciou a my potrebujeme od týchto pozícií odpočítať veľkosť Labelu. Samozrejme možno odpočítať od seba tuple a tuple, ale je to zbytočné:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.app import App

class MujWidget(Widget):

    def on_touch_down(self, touch):
        self.label1.pos = (touch.x - self.label1.width/2, touch.y - self.label1.height/2)

    def on_touch_move(self, touch):
        self.label1.pos = (touch.x - self.label1.width/2, touch.y - self.label1.height/2)

    def on_touch_up(self, touch):
        print("Uživatel pustil tlačítko")

class MainApp(App):

    def build(self):
        return MujWidget()

MainApp().run()

Teraz môžeme náš Label presúvať myšou po okne aplikácie:

Než sa pustíme do samotnej aplikácie Maľovanie, ukážeme si grafiku v Kivy.

Grafika v Kivy

V Kivy frameworku sa kreslí na canvas, ktorý má každý widget alebo layout. Ak by sme chceli kresliť do hlavného layoutu, v Pythone použijeme funkciu self.canvas.add(), napr. Takto:

self.canvas.add((Rectangle(pos=(x, y), size=(x, y))))

My si to však ukážeme v Kivy language na jednoduchom príklade. Najskôr si vytvoríme prázdny widget a triedu App, ktorá tento prázdny widget vracia:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.app import App

class MujWidget(Widget):
    pass

class KresleniPrikladApp(App):

    def build(self):
        return MujWidget()

KresleniPrikladApp().run()

V návrhu GUI, teda súboru .kv, do canvas u vložíme Rectangle, obdĺžnik, ktorému nastavíme veľkosť a pozíciu. Nasledujúci súbor pomenujeme ako kreslenipriklad.kv, pretože trieda sa volá KresleniPrikladApp a už sme si hovorili, že .kv súbor by sa mal volať rovnako. Obsah súboru bude nasledujúci:

#:kivy 1.10.1

<MujWidget>:
    canvas:
        Rectangle:
            size: 100, 100
            pos: root.center_x - 50, root.center_y - 50

Zobrazí sa nám štvorec uprostred okna.

Teraz zmeníme farbu štvorca pridaním Color pred Rectangle:

#:kivy 1.10.1

<MujWidget>:
    canvas:
        Color:
            rgba: .2, .4, .7, 1
        Rectangle:
            size: 100, 100
            pos: root.center_x - 50, root.center_y - 50

Štvorec už nemá bielu farbu, ale má jeden z odtieňov modrej.

Teraz sa môžeme vrhnú na samotnú aplikáciu Maľovanie.

Aplikácie Maľovanie

Ako prvý si vytvoríme Widget, ktorému pridáme reakciu na kliknutie a pohyb, aby sme mohli maľovať. Musíme si tiež importovať Line, pri posune myši budeme pridávať body do našej čiary a tú budeme ukladať do touch.ud, čo je úložisko, kam si môžeme uložiť ľubovoľné dáta súvisiace s dotykom:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.graphics import Line
from kivy.app import App

class MujWidget(Widget):

    def on_touch_down(self, touch):
        touch.ud["line"] = Line(points=(touch.x, touch.y))
        self.canvas.add(touch.ud["line"])

    def on_touch_move(self, touch):
        touch.ud['line'].points += [touch.x, touch.y]

    def on_touch_up(self, touch):
        print("Uživatel pustil tlačítko")

class MainApp(App):

    def build(self):
        return MujWidget()

MainApp().run()

A máme hotovo, ťahom myši môžeme kresliť!

Zdrojový kód nájdete na stiahnutie v prílohe článku. V budúcej lekcii, Aplikácie Čítačka Kníh v Kivy a Pythone , si vytvoríme aplikáciu Čítačka kníh. Využijeme ScreenManager, ktorý nám dovoľuje knihy prepínať podľa ľubovôle.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.