Lekce 5 - Aplikace Čtečka Knih v Kivy a Pythonu

V předchozí lekci, Reakce na kliknutí/dotek a aplikace Malování v Kivy, jsme si představili reakci na kliknutí a pohyb myši v Kivy frameworku. Vytvořili jsme také jednoduchou aplikaci Malování.

Zdravím vás u další lekce Pythonu a frameworku Kivy. V té minulé jsme si vytvořili jednoduché Malování, představili jsme si grafiku na canvas a reakci na kliknutí a pohyb myši nebo dotek. V dnešní lekci si ukážeme jak používat PageLayout a vytvoříme si aplikaci Čtečka knih.

Tuto aplikaci již budu psát pouze v Pythonu, jelikož osobně nejsem fanda Kivy language. Když v Pythonu přidáváme widget do widgetu/layoutu, použijeme funkci muj_widget.add_widget(muj_widget_cislo2). Jaký způsob zvolíte vy záleží na vás.

PageLayout

Nejdříve si ukážeme jak funguje PageLayout. Jedná se o layout jako BoxLayout, ale widgety jsou rozděleny na jednotlivé stránky jako v knize. Pro ukázku si na začátek vytvoříme jednoduchou aplikaci.

Nejdříve si musíme importovat samotný PageLayout a Label pro zobrazení textu na samotné stránce, poté si importujeme Color a Rectangle z grafiky a nakonec App pro spuštění aplikace:

import kivy
kivy.require("1.10.1")
from kivy.uix.pagelayout import PageLayout
from kivy.uix.button import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.graphics import Color, Rectangle
from kivy.app import App

Vytvoříme si třídu Kniha, která dědí z třídy PageLayout. Tato třída bude pro ukázku obsahovat 2 stránky a každá z nich bude barevně odlišena:

class Kniha(PageLayout):

    def __init__(self, *args):
        super(Kniha, self).__init__(*args)
        #Vytvoříme si stránku
        strana1 = BoxLayout(orientation = "vertical")
        #Přidáme barvu do canvasu
        strana1.canvas.add(Color(rgba = (0.5, 0, 0.5, 1)))
        #Přidáme čtverec do canvasu
        strana1.canvas.add(Rectangle(size = self.size, pos = self.pos))
        #Přidáme Label, který se zobrazí na stránce
        strana1.add_widget(Label(text = "Strana1"))

        strana2 = BoxLayout(orientation = "vertical")
        strana2.canvas.add(Color(rgba = (0.5, 0.5, 0, 1)))
        strana2.canvas.add(Rectangle(size = self.size, pos = self.pos))
        strana2.add_widget(Label(text = "Strana2"))

        self.add_widget(strana1)
        self.add_widget(strana2)

class PageLayoutPrikladApp(App):

    def build(self):
        return Kniha()

PageLayoutPrikladApp().run()

Spustíme aplikaci a podíváme se, výsledek je následující:

Když spustíme aplikaci, můžeme si všimnou toho, že čtverec není stejně velký jako okno. Stalo se to, protože když se okno inicializuje, má velikost pouze 100x100 a tudíž náš čtverec má tuto velikost. Pokud používáte Kivy language, na tento problém nenarazíte, jelikož se o to Kivy postará. Pokud děláme v čistém Pythonu, musíme si vytvořit takzvaný bind/event, který se bude volat vždy při změně velikosti našich layoutů. Kód upravíme následujícím způsobem:

class Kniha(PageLayout):

    def __init__(self, *args):
        super(Kniha, self).__init__(*args)
        #Vytvoříme si stránku
        self.strana1 = BoxLayout(orientation = "vertical")
        #Přidáme barvu do canvasu
        self.strana1.canvas.before.add(Color(rgba = (0.5, 0, 0.5, 1)))
        #Přidáme čtverec do canvasu
        self.ctverec1 = Rectangle(size = self.strana1.size, pos = self.strana1.pos)
        self.strana1.canvas.before.add(self.ctverec1)
        #Přidáme Label, který se zobrazí na stránce
        self.strana1.add_widget(Label(text = "Strana1"))

        self.strana2 = BoxLayout(orientation = "vertical")
        self.strana2.canvas.before.add(Color(rgba = (0.5, 0.5, 0, 1)))
        self.ctverec2 = Rectangle(size = self.strana2.size, pos = self.strana2.pos)
        self.strana2.canvas.before.add(self.ctverec2)
        self.strana2.add_widget(Label(text = "Strana2"))

        self.add_widget(self.strana1)
        self.add_widget(self.strana2)

        self.strana1.bind(size = self.update, pos = self.update)
        self.strana2.bind(size = self.update, pos = self.update)

    def update(self, *args):
        self.ctverec1.size = self.size
        self.ctverec1.pos = self.strana1.pos

        self.ctverec2.size = self.size
        self.ctverec2.pos = self.strana2.pos

Aplikace nyní již funguje tak, jak má

Ukázali jsme si, jak funguje PageLayout. Nyní si konečně můžeme vytvořit slíbenou aplikaci Čtečka knih, která bude spravovat několik takovýchto knih.

Aplikace Čtečka Knih

Použijeme třídu Kniha, kterou jsme již vytvořili. Namísto PageLayoutu bude ovšem dědit ze třídy Screen. Dále provedeme menší úpravy a přidáme ovládací panel.

Jako první si tedy třídu Kniha přizpůsobíme:

class Kniha(Screen):

    def __init__(self, nazev, *args, **kwargs):
        super(Kniha, self).__init__(*args, **kwargs)

        #Vytvoříme obal, který bude vše držet pospolu
        self.obal_layout = BoxLayout(orientation = "vertical")

        #Vytvoříme si obal pro knížku
        self.layout = PageLayout(size_hint = (1, .9))
        #Vytvoříme si stránku
        self.strana1 = BoxLayout(orientation = "vertical")
        #Přidáme barvu do canvasu
        self.strana1.canvas.before.add(Color(rgba = (0.5, 0, 0.5, 1)))
        #Přidáme čtverec do canvasu
        self.ctverec1 = Rectangle(size = self.strana1.size, pos = self.strana1.pos)
        self.strana1.canvas.before.add(self.ctverec1)
        #Přidáme Label, který se zobrazí na stránce
        self.strana1.add_widget(Label(text = nazev))

        #Vytvoříme si stránku
        self.strana2 = BoxLayout(orientation = "vertical")
        #Přidáme barvu do canvasu
        self.strana2.canvas.before.add(Color(rgba = (0.5, 0.5, 0, 1)))
        #Přidáme čtverec do canvasu
        self.ctverec2 = Rectangle(size = self.strana2.size, pos = self.strana2.pos)
        self.strana2.canvas.before.add(self.ctverec2)
        #Přidáme Label, který se zobrazí na stránce
        self.strana2.add_widget(Label(text = "Strana"))

        #Přídáme strany do PageLayoutu a ten přídáme do obalu
        self.layout.add_widget(self.strana1)
        self.layout.add_widget(self.strana2)
        self.obal_layout.add_widget(self.layout)

        #ZDE BUDE OVLÁDACÍ PANEL

        self.add_widget(self.obal_layout)

        self.strana1.bind(size = self.update, pos = self.update)
        self.strana2.bind(size = self.update, pos = self.update)

    def update(self, *args):
        self.ctverec1.size = self.size
        self.ctverec1.pos = self.strana1.pos

        self.ctverec2.size = self.size
        self.ctverec2.pos = self.strana2.pos

Všimněte si komentáře, označujícího budoucí místo pro ovládací panel.

Ještě předtím, než si přidáme ovládací panel, si vysvětlíme, jak funguje ScreenManager. Do ScreenManageru si můžeme přidat více scén/screenů a mezi nimi podle jména/name přecházet. Přecházíme změnou proměnné ScreenManager.current, např. jako ScreenManager.current = "jmeno_screenu".

Vytvoříme si třídu, která dědí ze ScreenManager:

class MujManager(ScreenManager):

    def __init__(self, *args):
        super(MujManager, self).__init__(*args)
        #Přidáme screeny a nastavíme jim jména
        self.add_widget(Kniha("Harry Potter", name = "harry_potter"))
        self.add_widget(Kniha("Pan Prstenu", name = "pan_prstenu"))

    #Funkce pro přechod mezi screeny
    def change_current(self, value):
        self.current = value

Nyní přidáme ovládací panel na místo vyznačené komentářem v kódu ve tříde Kniha.

self.obal_tlacitka = BoxLayout(orientation = "horizontal", size_hint = (1, .1))
self.obal_tlacitka.add_widget(Button(text = "<--", on_press = lambda *args: root.sm.change_current("harry_potter")))
self.obal_tlacitka.add_widget(Button(text = "-->", on_press = lambda *args: root.sm.change_current("pan_prstenu")))
self.obal_layout.add_widget(self.obal_tlacitka)

Teď už stačí jen přidat třídu, která dědí z App a program jen spustit

class MainApp(App):
    def build(self):
        #Přídáme MujManager do proměnné, abychom na něj mohli odkazovat
        self.sm = MujManager()
        return self.sm

root = MainApp()
root.run()

Aplikace funguje následovně:

Zdrojový kód najdete ke stažení v příloze článku.

V příští lekci, Animace a ScatterLayout v Kivy a Pythonu, si představíme animace a ScatterLayout.

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š.