Lekce 4 - Reakce na kliknutí/dotek a aplikace Malování v Kivy

V předchozí lekci, Dynamické pozicování widgetů v Kivy, jsme si ukázali, jak dynamicky pozicovat widgety v Kivy frameworku pro Python.

Zdravím vás u další lekce Kivy frameworku pro Python. V minulé lekci, Dynamické pozicování widgetů v Kivy, jsme si ukázali jak dynamicky pozicovat widgety a upevnili jsme si znalosti ohledně Kivy language. V dnešním Python tutoriálu si představíme reakci na kliknutí a pohyb myši a poté si vytvoříme jednoduchou aplikaci Malování.

Reakce na pohyb

Nejdříve se musíme naučit reagovat na kliknutí a pohyb myši, abychom si mohli slibovanou aplikaci Malování vytvořit. Jako příklad nám poslouží upravená aplikace z předchozí lekce, která zobrazovala Labely na námi uvedené pozici, jelikož jsme nepoužívali žádný layout.

Z našeho .kv souboru aplikace smažeme pouze Label2 a zbytek 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

Abychom mohli reagovat na kliknutí nebo pohyb myši v Kivy frameworku, musíme si vytvořit 3 metody:

• on_touch_down(touch) - reakce na kliknutí
• on_touch_up(touch) - reakce na opak kliknutí (puštění tlačítka myši/zvednutí prstu)
• on_touch_move(touch) - reakce na pohyb myši/prstu

Parametr touch v sobě skrývá pozici kliknutí/doteku. My budeme chtít přesouvat náš Label1 na aktuální pozici myši, proto využijeme touch.x a touch.y. Nevyužijeme touch.pos jelikož vrací tuple s pozicí a my potřebujeme od těchto pozic odečíst velikost Labelu. Samozřejmě lze odečíst od sebe tuple a tuple, ale je to zbyteč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()

Nyní můžeme náš Label přesouvat myší po okně aplikace:

Než se pustíme do samotné aplikace Malování, ukážeme si grafiku v Kivy.

Grafika v Kivy

V Kivy frameworku se kreslí na canvas, který má každý widget nebo layout. Pokud bychom chtěli kreslit do hlavního layoutu, v Pythonu použijeme funkci self.canvas.add(), např. takto:

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

My si to však ukážeme v Kivy language na jednoduchém příkladu. Nejdříve si vytvoříme prázdný widget a třídu App, která tento prázdný widget vrací:

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, tedy souboru .kv, do canvasu vložíme Rectangle, obdélník, kterému nastavíme velikost a pozici. Následující soubor pojmenujeme jako kreslenipriklad.kv, jelikož třída se jmenuje KresleniPrikladApp a již jsme si říkali, že .kv soubor by se měl jmenovat stejně. Obsah souboru bude následující:

#:kivy 1.10.1

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

Zobrazí se nám čtverec uprostřed okna.

Nyní změníme barvu čtverce přidáním Color před 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

Čtverec už nemá bílou barvu, ale má jeden z odstínů modré.

Nyní se můžeme vrhnou na samotnou aplikaci Malování.

Aplikace Malování

Jako první si vytvoříme Widget, kterému přidáme reakci na kliknutí a pohyb, abychom mohli malovat. Musíme si také importovat Line, při posunu myši budeme přidávat body do naší čáry a tu budeme ukládat do touch.ud, což je úložiště, kam si můžeme uložit libovolná data související s dotekem:

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, tahem myši můžeme kreslit!

Zdrojový kód najdete ke stažení v příloze článku. V příští lekci, Aplikace Čtečka Knih v Kivy a Pythonu, si vytvoříme aplikaci Čtečka knih. Využijeme ScreenManager, který nám dovoluje knihy přepínat dle libosti.

V další lekci, Aplikace Čtečka Knih v Kivy a Pythonu, vytvoříme jednoduchou aplikaci Čtečka knih v Kivy frameworku.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.