01. UI a první aplikace

Poznámky pro učiteleJak celou hodinu vést1. Část pro učitele

Tenhle blok je jen pro vás — dětem ho nepromítejte. Je to plán, podle kterého se řídíte.

Fáze	Co se děje	Čas
Instalace	Všichni rozjedou Python a Streamlit	20 min
První spuštění	`streamlit run`, hot-reload, okna vedle sebe	15 min
Výklad + ukázky	Bloky 4–10, střídáte mluvení a promítání kódu	45 min
Cvičení	Děti pracují samy, vy obcházíte	55 min
Závěr	Kdo chce, ukáže svůj výsledek	5 min

Hlavní pedagogický cíl

Dnešní hodina nemá naučit programovat. Má vytvořit zážitek „změnil jsem číslo a obrazovka se změnila". Všechno ostatní (proměnné, podmínky, cykly) staví na tomhle pocitu moci nad obrazovkou. Pokud dítě odchází a chce doma pokračovat, hodina se povedla, i kdyby nerozumělo ani slovu ze slova „funkce".

Tři věci, které dnes NEVYSVĚTLUJTE

Co je proměnná. Používejte je, pojmenovávejte je, ale nedefinujte. To je 2. hodina.
Že se skript spouští celý znovu. Uvidí to sami, až narazí. To je 5. hodina.
Co je funkce a co vrací. Říkejte „příkaz" a „nastavení v závorce".

Jak pracovat se smíšenou úrovní. Každé cvičení má tři stupně: Minimum, Rozšíření, Výzva. Slabším řekněte, že stačí Minimum a je to úspěch. Rychlíkům dejte hned Výzvu a pak je posaďte jako pomocníky k někomu, kdo se trápí. Vysvětlování je nejlepší způsob, jak se něco naučit — a vám to ušetří půl hodiny běhání.

Poznámky pro učiteleInstalace na hodině1. Část pro učitele

Tohle je úplně první věc, kterou uděláte. Dokud nemá každý běžící Streamlit, nemá smysl začínat s výkladem. Napište příkazy na tabuli a obcházejte.

python --version

Ověření, že Python vůbec je. Musí vypsat něco jako Python 3.11.5. Číslo musí být 3.9 nebo vyšší.

Když příkaz vypíše chybu nebo se otevře Microsoft Store, Python není nainstalovaný — stáhněte ho z python.org a při instalaci na Windows zaškrtněte „Add Python to PATH". Tohle políčko je nejčastější příčina toho, že pak nic nefunguje.

python3 --version

Na Macu a Linuxu je potřeba psát python3. Samotné python tam buď neexistuje, nebo ukazuje na starou verzi 2.7.

Řekněte dětem rovnou: „Kdo má Mac, píše všude python3 místo python." Ušetříte si tím deset stejných dotazů.

python -m pip install streamlit pillow

Instalace obou knihoven naráz. Trvá to jednu až tři minuty a vypíše to spoustu řádků — to je normální, děti se toho leknou.

Proč python -m pip a ne jen pip? Když má někdo v počítači víc Pythonů, samotné pip může instalovat do toho špatného. Zápis python -m pip říká „nainstaluj to do tohohle Pythonu, kterým to spouštím". Je to spolehlivější.

python -m pip install --user streamlit pillow

Záložní varianta, když instalace selže na právech. Na školních počítačích běžné. Přepínač --user nainstaluje knihovny do domovské složky uživatele, kde má právo zapisovat vždycky.

Když ani tohle nezabere, je na vině nejspíš antivirus nebo firewall školy.

streamlit hello

Kontrola, že to funguje. Otevře se prohlížeč s ukázkovou aplikací přímo od tvůrců Streamlitu.

Tohle je zároveň skvělý motivační moment: nechte děti minutu klikat na ukázky v levém menu (hlavně Plotting Demo a Mapping Demo) a řekněte: „Tohle všechno je napsané v Pythonu. Za dvě hodiny budete umět udělat něco podobného."

Zastavíte to v terminálu klávesami Ctrl+C.

Zálohy, které mějte připravené předem

USB s .zip obsahujícím hotové soubory demo/, cviceni/ a reseni/.
Účet na replit.com — běží v prohlížeči, nic se neinstaluje. Pokud selže instalace u víc než tří dětí, přejděte na Replit hromadně, ať netrávíte hodinu laděním cizích notebooků.
Tato stránka. Kód v ukázkách a cvičeních jde spustit rovnou tady v prohlížeči tlačítkem Spustit — funguje to i bez nainstalovaného Pythonu.

Poznámky pro učiteleSpuštění a hot-reload ve VS Code1. Část pro učitele

Tohle je největší motivační trik celé hodiny. Postup si předem vyzkoušejte, ať před dětmi neváháte.

streamlit run app.py

Takhle se spouští Streamlit aplikace — a jenom takhle.

V VS Code otevřete složku projektu (File → Open Folder), pak terminál (Ctrl+` nebo Terminal → New Terminal) a napíšete tenhle příkaz. Otevře se prohlížeč na adrese http://localhost:8501.

Zdůrazněte dětem: python app.py nefunguje. Vypíše to varování nebo prázdno. Musí to být streamlit run.

VS Code                  Prohlížeč
┌──────────────┐        ┌──────────────┐
│ app.py       │        │  PyQuest     │
│              │  Ctrl+S│              │
│ st.title(    │───────►│  ⚔️ PyQuest  │
│   "PyQuest") │        │              │
│              │        │              │
└──────────────┘        └──────────────┘

Okna dejte vedle sebe. Tohle je klíčové.

Na Windows: Win + ← na VS Code, Win + → na prohlížeč. Na Macu: přetáhněte okna nebo použijte Split View.

Dokud dítě přepíná mezi okny Alt+Tab, nevidí souvislost mezi kódem a výsledkem. Jakmile je má vedle sebe, souvislost je okamžitá a samozřejmá. Obejděte třídu a zkontrolujte, že to tak má opravdu každý.

Prohlížeč → ⋮ (vpravo nahoře)
          → Settings
          → ☑ Run on save

Zapnutí automatického překreslení.

Bez tohohle se po uložení souboru objeví vpravo nahoře jen tlačítko Rerun a hláška „Source file changed". Funguje to taky, ale dítě musí pokaždé kliknout.

Se zapnutým Run on save stačí Ctrl+S a stránka se překreslí sama. Rozdíl v zážitku je obrovský.

Jak to předvést dramaticky.

Napište na projektoru tenhle kód. Uložte. Ukažte výsledek. Pak před zraky dětí změňte text na "🔥 AHOJ SVĚTE 🔥" a znovu Ctrl+S.

Stránka se změní během sekundy. Tady většinou nastane ten moment, kdy si děti uvědomí, že mají nad obrazovkou moc.

Nechte je pak deset vteřin jenom přepisovat ten text. Vyplatí se to.

Na co se připravit

Server běží pořád, dokud ho nezastavíte Ctrl+C. Děti budou zavírat křížkem prohlížeče a divit se, že to pořád běží. Nebo naopak spustí streamlit run podruhé a dostanou hlášku Port 8501 is already in use.

Naučte je jednu větu: „Zavřít stránku nestačí. Server se vypíná v terminálu klávesami Ctrl+C."

Blok 1Co je Streamlit1. Část pro učitele

Zapamatuj si:

Když napíšeš program v Pythonu, normálně se výsledek vypíše jen jako text do černého okna. To je nudné a nikdo jiný to nepoužije. Streamlit je nástroj, který vezme tvůj Python kód a udělá z něj webovou stránku. Pořád píšeš obyčejný Python, ale místo textu v okně vidíš tlačítka, posuvníky a barvy — v prohlížeči, přesně jako opravdové aplikace.

Jednoduchá představa:

Streamlit je kuchař. Ty mu dáš recept (soubor app.py) a on podle něj uvaří stránku. Kdykoliv recept změníš, uvaří ji znovu.

app.py  ──►  Streamlit  ──►  webová stránka
(recept)     (kuchař)        (hotové jídlo)

Proč zrovna Streamlit a ne „opravdový" web?

Klasická webová stránka potřebuje tři jazyky najednou: HTML na obsah, CSS na vzhled a JavaScript na chování. To je pro dvanáctileté dítě příliš.

Streamlit tuhle bariéru odstraní. Píšeš jeden jazyk, jeden soubor, a přesto vidíš skutečnou webovou aplikaci v prohlížeči. Tu složitost si přidáme později a jenom po kouscích — kousek CSS uvidíš ještě dneska u barevných boxů.

Blok 2Knihovna a co znamená import1. Část pro učitele

import streamlit as st

Tenhle jediný řádek stojí za to pochopit pořádně.

Python sám o sobě neumí dělat webové stránky. Umí počítat, porovnávat a pracovat s textem — a to je všechno. Když chceš něco navíc, půjčíš si knihovnu: hotovou sadu nástrojů, kterou už napsal někdo jiný.

import streamlit znamená „přines mi bednu s nářadím na weby". as st znamená „a budu jí říkat zkráceně st, ať to nemusím psát pořád celé".

Od té chvíle každý příkaz začíná st. — a ta tečka znamená „z týhle bedny mi podej tenhle nástroj".

import streamlit as st
from PIL import Image, ImageDraw
import random

Knihoven můžeš použít více a všechny se importují podobně.

streamlit — dělá webovou stránku
PIL (Pillow) — kreslí obrázky, použijeme na konci hodiny
random — náhodná čísla, přijde v 11. hodině

Rozdíl mezi import X a from X import Y si představ takhle:

import PIL je „přines celou bednu". from PIL import Image je „z bedny mi podej jenom kladivo, celou ji sem netahej".

Tohle ti dneska úplně stačí.

Častá otázka dětí

„Odkud se ty knihovny berou?" — Odpověď: ze stejného místa, odkud jsme je před chvílí instalovali příkazem pip install. Je to obrovská online knihovna hotového kódu, kterou zdarma sdílí programátoři z celého světa. Jmenuje se PyPI a je v ní přes půl milionu knihoven.

Blok 3Tři skupiny příkazů1. Část pro učitele

Skupina 1 — příkazy, které ukazují.

Berou text a namalují ho na stránku. Nic nevracejí, nic se jich neptáte.

Nejdůležitější rozdíl, který se plete nejčastěji:

Příkaz	K čemu
`st.title`	jen jednou nahoře, jméno aplikace
`st.header`	nadpis sekce
`st.write`	cokoliv — text, číslo, seznam
`st.markdown`	text s formátováním (`tučně`)

st.write je „univerzální vypisovač" — zvládne i čísla a seznamy. Když nevíš, co použít, sáhni po st.write.

Barevné zprávy a ukazatele.

Každý příkaz zobrazí jiný typ informace. Změň texty, čísla i hodnotu delta a sleduj, jak se výsledek mění.

st.metric udělá „statistiku jako v aplikaci": velké číslo a pod ním zelená nebo červená šipka se změnou. Parametr delta=25 znamená „o 25 víc než minule", delta=-2 udělá červenou šipku dolů.

st.progress bere číslo od 0 do 1, ne od 0 do 100. Tohle je klasický zdroj chyb: st.progress(70) spadne, správně je st.progress(0.7).

Skupina 2 — příkazy, které se ptají.

Nakreslí ovládací prvek a vrátí zpátky hodnotu, kterou uživatel nastavil. Proto je vždycky vidíte se znaménkem = a jménem vlevo.

Všimni si vzoru u všech: první parametr je popisek, další jsou nastavení:

st.slider("Úroveň", 1, 20, 3) → od 1 do 20, na začátku 3
st.text_input("Jméno", "Arkon") → předvyplněné „Arkon"
st.selectbox("Povolání", [...]) → seznam možností v hranatých závorkách

Ten seznam v hranatých závorkách je mimochodem pole — přesně to, co se budeme učit v 6. hodině. Teď ho jen používáme.

Skupina 3 — příkazy, které rozdělují.

Nemalují nic viditelného, jen říkají, kam se má další obsah dát.

Zatím jsme psali všechno pod sebe jako nákupní seznam. Tyhle příkazy stránku rozdělí na police — a ty si vybereš, na kterou polici co položíš.

Zápis with neco: znamená „všechno, co je odteď odsazené, patří dovnitř". Jakmile odsazení skončí, jsi zase venku.

Je to stejná logika jako u if — odsazení říká, co patří dovnitř. V Pythonu odsazení určuje strukturu, ne jen vzhled.

Tyhle dva zápisy dělají totéž:

with st.sidebar:
    st.header("Nastavení")

st.sidebar.header("Nastavení")

První bývá přehlednější, protože je hned vidět, kde blok začíná a končí.

Blok 4Prvek vrací hodnotu — nejdůležitější myšlenka hodiny1. Část pro učitele

Důležitá myšlenka: některé prvky na stránce vracejí hodnotu, se kterou můžeš dál pracovat.

Zkus, co se stane s hodnotou z okénka.

Tenhle jediný řádek dělá dvě věci najednou.

Zaprvé nakreslí na stránku okénko, do kterého se dá psát. Zadruhé vrátí zpátky to, co uživatel napsal — a my si to uložíme pod jméno jmeno.

Od té chvíle s tím můžeš dělat cokoliv.

Šipka směřuje zprava doleva: nejdřív se stane to napravo, a výsledek se uloží do jména nalevo. Tohle může být nezvyklé, protože normálně čteš zleva doprava.

Zkus s hodnotou z okénka něco udělat.

Zkus různá jména a sleduj, jak se mění všechny řádky pod okénkem.

Zatím neřeš, co přesně len() nebo .upper() dělají. To jsou další nástroje a pořádně je probereme v sedmé hodině. Teď sleduj hlavně to, že okénko něco vrátilo a my s tím počítáme.

Zápis [::-1] je trik na otočení textu. Pořádně ho probereme, až budeme dělat řetězce.

U tlačítka je to trochu jinak — a je to důležité.

st.button() vrací ano/ne. Vrátí „ano" jenom v tu jedinou chvíli, kdy na něj někdo klikl. Jinak vrací „ne".

Proto ho dáváme do if — což se čte jako „jestliže".

Podmínkám se budeme pořádně věnovat ve 4. hodině. Dneska stačí, když pochopíš tenhle jeden vzor a umíš ho opsat:

if st.button("Text na tlačítku"):
    (odsadit o 4 mezery)
    co se má stát

Nejčastější chyba dneška: když zapomeneš odsadit řádek pod if, text se ukazuje pořád. Pokud se ti to stane, zkontroluj, že řádek pod if začíná čtyřmi mezerami.

Blok 5Barvy — tři úrovně od nejjednodušší1. Část pro učitele

Vyzkoušej tři úrovně barev — od nejjednoduššího zápisu až po barvu, která se mění podle hodnoty.

Úroveň 1 — vestavěné barvy. Začni tady.

Žádné HTML, žádné parametry navíc. Zápis je :barva[text].

Dostupné barvy: red, orange, green, blue, violet, gray, rainbow. Každá má i variantu -background pro zvýraznění pozadí.

Tohle zvládne úplně každý a je to okamžitá odměna. Zkoušej chvíli různé kombinace barev a sleduj, co všechno jde.

Pozor na jednu věc

Barvy fungují jenom v st.markdown() a st.write(), ne v st.title(). Když chceš barevný nadpis, použij st.markdown("# :red[Nadpis]") — mřížka na začátku dělá velikost nadpisu.

Úroveň 2 — vlastní rámeček. Tady se dělá dojem.

style je seznam pravidel oddělených středníkem:

Pravidlo	Co dělá
`background-color`	barva pozadí
`color`	barva písma
`padding: 20px`	mezera uvnitř rámečku
`border-radius: 12px`	kulaté rohy
`border: 3px solid gold`	rámeček
`text-align: center`	text na střed
`font-size: 28px`	velikost písma

K čemu je unsafe_allow_html=True? Streamlit se normálně brání tomu, aby se text bral jako HTML — je to bezpečnostní pojistka. Tímhle parametrem mu říkáme „věř mi, tenhle text je opravdu HTML a chci ho tak zobrazit".

U školního projektu je to v pohodě, protože si HTML píšeš sám. Nebezpečné by to bylo hlavně tehdy, kdybys do něj vkládal cizí text z internetu.

#RRGGBB
 └┬┘└┬┘└┬┘
  │  │  └── modrá  00-FF
  │  └───── zelená 00-FF
  └──────── červená 00-FF

#FF0000  čistě červená
#00FF00  čistě zelená
#000000  černá
#FFFFFF  bílá
#FFD166  zlatá

Jak přemýšlet o zápisu barvy.

Každá barva na obrazovce se míchá ze tří světel: červeného, zeleného a modrého. Zápis #RRGGBB říká, kolik každého z nich přidat.

Čísla jsou v šestnáctkové soustavě: jdou od 00 (žádné světlo) po FF (naplno). Proto #FF0000 je červená naplno a nic jiného, a #FFFFFF je všechno naplno, což dá bílou.

Nemusíš to chápat do hloubky. Stačí, když víš, že si barvu můžeš vybrat myší na htmlcolorcodes.com a zkopírovat ten kód s mřížkou.

Úroveň 3 — barva se počítá z dat.

Táhni posuvníkem pomalu dolů a sleduj, jak box mění barvu ze zelené přes oranžovou do červené.

Tady se poprvé sejde všechno dohromady:

prvek se zeptal (slider vrátil číslo),
kód se rozhodl (if / elif / else vybral barvu),
stránka se překreslila podle výsledku.

Tomuhle se říká, že aplikace reaguje na data. Přesně takhle fungují všechny hry a aplikace, které znáš.

Písmeno f před uvozovkami

f"""...""" znamená, že se do textu můžou vkládat hodnoty ve složených závorkách. Dnes to jen používej. Pořádně to probereme v 7. hodině u řetězců — teď stačí vědět, že f dovolí vložit proměnnou do textu ve složených závorkách.

Blok 6Rozložení stránky1. Část pro učitele

Sloupce — nejpoužívanější rozdělení.

Analogie:

Zatím jsme skládali věci pod sebe jako talíře na sebe. st.columns je police vedle sebe — vyberete si, do které přihrádky co položíte.

Řádek levy, pravy = st.columns(2) si přečti jako: „Rozděl stránku na dvě části a tu první nazvi levy, tu druhou pravy."

Jména si volíš ty. Klidně a, b nebo hrdina, prisera — hlavně ať jich je tolik, kolik je sloupců.

levy, pravy = st.columns(2)
# ├──────────┤├──────────┤   stejně široké

levy, pravy = st.columns([2, 1])
# ├───────────────┤├──────┤   levý dvakrát širší

a, b, c = st.columns([3, 1, 3])
# ├────────┤├──┤├────────┤    prostřední úzký

a, b, c, d = st.columns(4)
# ├─────┤├─────┤├─────┤├─────┤

Různé šířky — změň čísla a sleduj, co se stane.

Číslo v závorce = kolik sloupců. Seznam v hranatých závorkách = poměr šířek.

[3, 1, 3] neznamená pixely, ale poměr: první a třetí jsou třikrát širší než prostřední. Když napíšeš [300, 100, 300], dopadne to úplně stejně — protože jde jenom o poměr.

Poměr [2, 1, 2] je super na obrazovku souboje: vlevo hrdina, uprostřed úzký sloupec s velkým VS, vpravo příšera. Tenhle poměr se bude hodit ve cvičení 3.

Zbylá tři rozdělení — všechna fungují podobně.

Příkaz	Vypadá jako	Kdy použít
`st.sidebar`	postranní lišta vlevo	nastavení, které nemá překážet
`st.tabs`	záložky jako v prohlížeči	víc obrazovek na jedné stránce
`st.expander`	rozbalovací šuplík	nápověda, detaily, řešení
`st.container(border=True)`	rámeček kolem skupiny	vizuálně oddělit část

Sidebar je hodně atraktivní — hned to vypadá jako opravdová aplikace. Je to nejlepší místo pro všechna nastavení hry.

Všimni si, že všechny používají stejný vzor with ...: a odsazení. Když jednou pochopíš tenhle vzor, umíš je všechny.

Blok 7Souřadnice a kreslení1. Část pro učitele

Souřadnice určují, kde se prvek objeví. Tuto myšlenku později použiješ v erbu i v herním poli projektu.

      0 ─────────────────► X (doprava)
      │
      │   [0,0] je vlevo NAHOŘE
      │
      │        ● [150, 80]
      │
      ▼
      Y (DOLŮ!)


   [50,50] ┌────────┐
           │        │  rectangle([50, 50, 150, 100])
           └────────┘ [150,100]

Tohle si představ přesně takhle.

V matematice roste Y nahoru. V počítačové grafice roste Y dolů. Je to proto, že obrazovka se odjakživa kreslila po řádcích shora dolů, jako když čtete knihu.

Zapamatuj si to, jinak ti bude všechno vzhůru nohama.

Zkus bez počítače určit: „Kde je bod [0,0]? A kde [200,0]? A [0,200]?" Jestli si tohle srovnáš v hlavě hned, ušetříš si spoustu zmatku.

Pět základních tvarů. Víc jich dneska nepotřebujeme.

Postup je vždycky stejný:

Vezmi plátno — Image.new("RGB", (šířka, výška), "barva")
Vezmi štětec — ImageDraw.Draw(platno)
Kresli — stetec.neco(...)
Ukaž — st.image(platno)

Analogie, která funguje:

Je to jako malování na papír. Nejdřív si vezmeš papír, pak štětec, pak maluješ, a nakonec ho pověsíš na stěnu, aby ho ostatní viděli. Když zapomeneš na ten poslední krok, obrázek zůstane v šuplíku.

Zapomenutý st.image() je nejčastější chyba tohohle bloku. Máš hotový obrázek, ale stránka je prázdná, protože jsi ho ještě neukázal.

# ŠPATNĚ - takhle to často svádí napsat
stetec.rectangle([50, 50, 100, 50])
#                 x   y   šířka výška   ← NE!

# SPRÁVNĚ - zadávají se dva rohy
stetec.rectangle([50, 50, 150, 100])
#                 ├levý horní┤ ├pravý dolní┤
#  výsledek: široký 100 px, vysoký 50 px

Tady se chybuje úplně nejčastěji.

Obdélník se nezadává jako „kde a jak velký". Zadávají se dva rohy: levý horní a pravý dolní.

[50, 50, 150, 100] znamená: „začni na [50,50] a skonči na [150,100]". Ten obdélník je tedy 100 pixelů široký (150 − 50) a 50 vysoký (100 − 50).

Když chceš obdélník široký 100 od bodu [50,50], musíš napsat [50, 50, 50+100, 50+50]. Klidně to tak napiš — Python to spočítá.

Kruh: Pillow nemá „nakresli kruh se středem a poloměrem". Kreslí se elipsa vepsaná do obdélníku. Když je ten obdélník čtverec, vyjde z toho kruh. Proto ellipse([300, 20, 370, 90]) dá kruh o průměru 70.

Vyvrcholení bloku: souřadnice přijdou z posuvníků.

Spusť ukázku a táhni posuvníky. Obrázek se překresluje okamžitě. Stejným principem se pohybují prvky ve hrách.

Všimni si té elegance: [x, y, x + velikost, y + velikost]. Levý horní roh je tam, kde je hrdina, a pravý dolní je o velikost dál doprava a dolů. Změnou jednoho čísla se mění velikost i pozice zároveň.

Zkus si odpovědět: „Co se stane, když napíšu x - velikost místo x + velikost?" Pak to rovnou vyzkoušej. (Odpověď: Pillow si rohy prohodí nebo nenakreslí nic — a právě proto má pořadí rohů význam.)

Druhý způsob pozicování: emoji v HTML místo kreslení.

Stejná myšlenka souřadnic, ale místo Pillow se používá HTML. Má to tři výhody, kvůli kterým se ti to v projektu bude hodit:

emoji vypadají líp než nakreslené kolečko,
linear-gradient udělá nebe a trávu jedním řádkem,
nepotřebuje knihovnu Pillow.

Klíčová dvojice je position:absolute a left / top.

position:absolute znamená „tenhle prvek si stoupne přesně tam, kam mu řeknu, a je mu jedno, co je kolem". A left s top říkají kam — zase v pixelech od levého horního rohu.

Vnější div musí mít position:relative, jinak se prvky umísťují podle celé stránky místo podle herního pole. Ber to jako pravidlo, bez kterého se to rozsype.

Poznámky pro učiteleTechnické pozadí — jen pro vás1. Část pro učitele

Tenhle blok dětem nepromítejte. Je to zázemí, díky kterému budete umět odpovědět na nečekané otázky.

Jak Streamlit doopravdy funguje. Spustí lokální webový server (výchozí port 8501) postavený na Tornadu. Váš .py soubor není klasická webová aplikace s routami — Streamlit ho spouští celý shora dolů při každé interakci. Každé volání st.něco() přidá prvek do fronty vykreslení, ta se serializuje přes Protobuf a pošle do prohlížeče přes WebSocket, kde ji vykreslí React.

Skript se spustí odshora dolů. Pokaždé znovu. Kdykoliv uživatel na cokoliv klikne.

Tohle je nejdůležitější mentální model celého kurzu. Právě proto budete v 5. hodině potřebovat session_state — jinak se všechno při každém kliknutí vrátí do původního stavu. Dnes to ale dětem neříkejte. Nechte je nejdřív zažít, že to funguje.

Analogie pro později: Streamlit je kuchař, který při každé změně objednávky nevaří dál od poloviny, ale zahodí talíř a uvaří celé jídlo znovu od začátku — jen s novou ingrediencí.

Proč to nevadí, že se to spouští pořád dokola? Protože naše skripty jsou drobné a Python je zvládne za milisekundy. U velkých aplikací se to řeší cachováním (@st.cache_data), ale to je daleko za obzorem tohohle kurzu.

Co se stane, když dvě děti otevřou stejnou adresu? Každý prohlížeč dostane vlastní session s vlastními hodnotami. Pokud budou chtít hrát spolu po síti, řekněte, že to jde, ale až po nasazení do cloudu — k tomu se dostaneme v 18. hodině.

Bezpečnost unsafe_allow_html. Riziko je jen tehdy, když do HTML vložíte text, který přišel od cizího uživatele z internetu (XSS). V našem případě text zadává sám autor stránky do vlastního prohlížeče, takže riziko je nulové. Až budeme v 18. hodině nasazovat aplikaci veřejně, zmíníme to jednou větou — teď to řešit nemusíte.

Ukázka	Co ukazuje	Čas
1	Nadpisy, text, barevné zprávy, tlačítko	8 min
2	Barevný markdown, HTML box, barva podle hodnoty	10 min
3	Sidebar, sloupce, metriky, taby	10 min
4	Kreslení po souřadnicích, obrázek řízený posuvníky	10 min
5	Herní pole s prvky na přesných pozicích	7 min

Blok 8Ukázka 1 — První stránka2. Ukázky pro projekci

demo/demo1_prvni_stranka.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Studenti zkuste změnit

Přepiš st.title("PyQuest") na název vlastní hry a spusť to znovu. Tohle je první pořádný „aha" moment.
Smaž řádek st.balloons() a všimni si, že tlačítko teď jen vypíše text. Pak ho vrať zpátky. Každý řádek dělá právě jednu věc.
Prohoď pořadí st.error a st.success — všimni si, že se stránka kreslí přesně v pořadí, v jakém jsou příkazy napsané.
Vymaž odsazení u řádku st.success(f"Vítej...") a nech to spadnout. Přečti si hlášku IndentationError. Pak odsazení vrať. Tohle je dobrý způsob, jak se naučit nebát se chyb.

Blok 9Ukázka 2 — Barvy a velikosti2. Ukázky pro projekci

demo/demo2_barvy_velikosti.py

import streamlit as st

st.title("Barvy a velikosti")

# 1) Barevný text přímo ve Streamlitu
st.markdown(":red[Červený text] a :blue[modrý text] a :green[zelený text]")
st.markdown(":orange[**Oranžový a tučný**] :violet[fialový]")

# 2) Zvýraznění pozadí textu
st.markdown("Nebezpečí: :red-background[Drak je blízko!]")

# 3) Velikost písma pomocí nadpisů
st.markdown("# Největší")
st.markdown("### Střední")
st.markdown("###### Nejmenší")

st.divider()

# 4) Vlastní styl pomocí HTML a CSS
st.markdown(
    """
    <div style="
        background-color: #1f2a44;
        color: #ffd166;
        padding: 20px;
        border-radius: 12px;
        border: 3px solid #ffd166;
        text-align: center;
        font-size: 28px;
        font-family: monospace;
    ">
        ⚔️ KARTA HRDINY ⚔️
    </div>
    """,
    unsafe_allow_html=True,
)

st.write("")

# 5) Barva se dá počítat z hodnoty - UI reaguje na data
zivoty = st.slider("Životy", 0, 100, 100)

if zivoty > 60:
    barva = "#2e933c"
elif zivoty > 25:
    barva = "#e08c00"
else:
    barva = "#c1121f"

st.markdown(
    f"""
    <div style="
        background-color: {barva};
        color: white;
        padding: 12px;
        border-radius: 8px;
        font-size: 22px;
        text-align: center;
    ">
        Životy: {zivoty}/100
    </div>
    """,
    unsafe_allow_html=True,
)

st.progress(zivoty / 100)

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Studenti zkuste změnit

Táhni posuvníkem životů pomalu dolů. Sleduj ty tři barvy. Zeptej se sám sebe: „Kde v kódu je napsáno, kdy má být oranžová?" Najdi řádek elif zivoty > 25:.
Změň hranice z 60 a 25 na 90 a 80. Znovu táhni. Teď je skoro pořád červená. Tady krásně vidíš, že ta čísla určuješ ty.
Změň border-radius: 12px na 0px a pak na 50px. Rámeček se změní z kulatého na hranatý a pak na ovál.
Změň padding: 20px na 60px. Box se nafoukne. Tohle je nejjasnější způsob, jak pochopit, co padding je.
Smaž unsafe_allow_html=True u prvního boxu. Objeví se HTML jako text. Takhle nejlíp uvidíš, k čemu ten parametr je.

Blok 10Ukázka 3 — Rozložení stránky2. Ukázky pro projekci

demo/demo3_rozlozeni.py

import streamlit as st

st.set_page_config(page_title="PyQuest", page_icon="⚔️", layout="wide")

st.title("Rozložení stránky")

# 1) Boční panel
with st.sidebar:
    st.header("Nastavení hry")
    obtiznost = st.radio("Obtížnost", ["Lehká", "Střední", "Těžká"])
    zvuk = st.checkbox("Zapnout zvuk", value=True)

st.write("Zvolená obtížnost:", obtiznost)

st.divider()

# 2) Sloupce vedle sebe
levy, pravy = st.columns(2)

with levy:
    st.subheader("🧙 Hráč")
    st.write("Životy: 100")
    st.progress(1.0)

with pravy:
    st.subheader("👹 Příšera")
    st.write("Životy: 60")
    st.progress(0.6)

st.divider()

# 3) Tři sloupce s různou šířkou
a, b, c = st.columns([2, 1, 1])
a.metric("Zlato", 120, delta=25)
b.metric("Úroveň", 3)
c.metric("Síla", 14, delta=-2)

st.divider()

# 4) Karty (taby)
karta1, karta2, karta3 = st.tabs(["Postava", "Inventář", "Mapa"])

with karta1:
    st.write("Jméno: Arkon")
    st.write("Povolání: Kouzelník")

with karta2:
    st.write("- meč")
    st.write("- lektvar")

with karta3:
    st.write("Les → Jeskyně → Věž")

st.divider()

# 5) Rozbalovací část a ohraničený box
with st.expander("Nápověda k ovládání"):
    st.write("Klikni na tlačítko Útok a sniž příšeře životy.")

with st.container(border=True):
    st.write("Tohle je box s rámečkem.")
    st.button("Tlačítko uvnitř boxu")

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Studenti zkuste změnit

Změň st.columns(2) na st.columns([3, 1]). Levý sloupec se roztáhne. Pak zkus [1, 3] a nakonec [1, 1, 1] — to spadne, protože vlevo jsou jen dvě jména. Přečti si hlášku: „not enough values to unpack" znamená „je málo přihrádek na to, kolik jmen chceš".
Přesuň st.metric("Zlato", ...) dovnitř with levy:. Všimni si, že se stejný příkaz může objevit kdekoliv a poslouchá to, kde je odsazený.
Změň layout="wide" na layout="centered". Stránka se zúží. wide se hodí, když chceš víc místa vedle sebe, centered když má být obsah užší.
Přidej čtvrtou kartu do st.tabs([...]) a nech ji prázdnou. Uvidíš, že karta existuje, i když v ní nic není.
Smaž border=True u kontejneru. Rámeček zmizí a hned uvidíš, že True je tady vypínač.

Blok 11Ukázka 4 — Kreslení po souřadnicích2. Ukázky pro projekci

demo/demo4_kresleni.py

import streamlit as st
from PIL import Image, ImageDraw

st.title("Kreslíme mapu dobrodružství")

# 1) Vytvoříme prázdné plátno (šířka, výška) a barvu pozadí
platno = Image.new("RGB", (400, 300), "#87ceeb")
stetec = ImageDraw.Draw(platno)

# 2) Obdélník: [x1, y1, x2, y2] = levý horní a pravý dolní roh
stetec.rectangle([0, 200, 400, 300], fill="#4a7c1f")   # tráva

# 3) Kruh se kreslí do čtverce, do kterého se vejde
stetec.ellipse([300, 20, 370, 90], fill="#ffd166")     # slunce

# 4) Trojúhelník = seznam bodů [(x, y), (x, y), (x, y)]
stetec.polygon([(60, 200), (120, 90), (180, 200)], fill="#6b705c")   # hora
stetec.polygon([(150, 200), (210, 60), (270, 200)], fill="#5a5f4d")  # hora

# 5) Čára a text
stetec.line([0, 250, 400, 250], fill="#2d5016", width=6)             # cesta
stetec.text((20, 20), "Mapa: Zelene udoli", fill="black")

# 6) Hrad postavený z několika obdélníků
stetec.rectangle([230, 150, 300, 210], fill="#8d99ae")
stetec.rectangle([225, 130, 245, 160], fill="#6c757d")
stetec.rectangle([285, 130, 305, 160], fill="#6c757d")

st.image(platno, caption="Nakresleno kódem, ne myší")

st.divider()

# 7) Souřadnice můžou přijít z ovládacích prvků - obrázek se hned mění
st.subheader("Posuň hrdinu po mapě")

x = st.slider("Pozice X", 0, 380, 40)
y = st.slider("Pozice Y", 0, 280, 220)
velikost = st.slider("Velikost", 5, 60, 20)
barva = st.color_picker("Barva hrdiny", "#ff006e")

platno2 = Image.new("RGB", (400, 300), "#f1faee")
stetec2 = ImageDraw.Draw(platno2)
stetec2.rectangle([0, 240, 400, 300], fill="#a8dadc")
stetec2.ellipse([x, y, x + velikost, y + velikost], fill=barva)
stetec2.text((10, 10), f"Hrdina je na [{x}, {y}]", fill="black")

st.image(platno2)

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Studenti zkuste změnit

Změň barvu pozadí plátna z #87ceeb na #000000. Z dne se stane noc. Pak zkus "red" — všimni si, že jdou psát i anglické názvy barev.
Změň [0, 200, 400, 300] na [0, 100, 400, 300]. Tráva zabere půl obrázku. Zkus najít, které číslo za to může.
Posuň slunce z [300, 20, 370, 90] na [20, 20, 90, 90]. Přesune se doleva. Všimni si, že se změnila obě X a obě zůstala stejně daleko od sebe, takže velikost je pořád stejná.
Zakomentuj řádek st.image(platno) (dej před něj #). Obrázek zmizí, i když se pořád kreslí. Bez st.image se nic neukáže.
Prohoď pořadí kreslení trávy a hor. Hory zmizí pod trávou. Kreslí se jako vrstvy — co je později, je navrchu.

Blok 12Ukázka 5 — Pozicování v herním poli2. Ukázky pro projekci

demo/demo5_pozice_html.py

import streamlit as st

st.title("Herní pole a pozice prvků")

hrdina_x = st.slider("Hrdina X", 0, 460, 40)
hrdina_y = st.slider("Hrdina Y", 0, 260, 200)
prisera_x = st.slider("Příšera X", 0, 460, 380)

st.markdown(
    f"""
    <div style="
        position: relative;
        width: 500px;
        height: 300px;
        background: linear-gradient(#87ceeb 70%, #4a7c1f 70%);
        border: 4px solid #333;
        border-radius: 10px;
        overflow: hidden;
    ">
        <div style="position:absolute; left:{hrdina_x}px; top:{hrdina_y}px; font-size:40px;">🧙</div>
        <div style="position:absolute; left:{prisera_x}px; top:200px; font-size:40px;">👹</div>
        <div style="position:absolute; left:20px;  top:20px;  font-size:36px;">☁️</div>
        <div style="position:absolute; left:200px; top:40px;  font-size:36px;">☁️</div>
        <div style="position:absolute; left:420px; top:15px;  font-size:44px;">☀️</div>
        <div style="position:absolute; left:250px; top:190px; font-size:44px;">🏰</div>
        <div style="position:absolute; left:10px;  top:250px; color:white; font-family:monospace;">
            Hrdina: [{hrdina_x}, {hrdina_y}]
        </div>
    </div>
    """,
    unsafe_allow_html=True,
)

st.caption("Vše je umístěné pomocí left a top v pixelech.")

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Studenti zkuste změnit

Táhni oběma posuvníky. Hrdina chodí po louce. Zeptej se sám sebe, co by se muselo změnit, aby chodil i nahoru a dolů (odpověď: top, a to už tam je jako hrdina_y).
Přidej další emoji — zkopíruj řádek se stromem a změň left. Zkus si vymyslet vlastní souřadnice a hned je zapsat.
Změň 70% v gradientu na 40%. Obzor se posune, trávy je víc.
Smaž overflow: hidden. Posuň hrdinu na kraj — teď vyleze z pole ven. overflow:hidden funguje jako „ořezávátko".
Změň font-size:40px u hrdiny na 100px. Hned uvidíš, že velikost emoji se řídí velikostí písma.

Blok 13Když se něco pokazí2. Ukázky pro projekci

Než se pustíš do cvičení, mrkni na tuhle tabulku. Chyby jsou normální součást programování a často stačí vědět, kam se podívat.

Hláška nebo příznak	Příčina	Co udělat
`ModuleNotFoundError: streamlit`	Knihovna není nainstalovaná	`python -m pip install streamlit`
`command not found: streamlit`	Není v cestě	Zkusit `python -m streamlit run app.py`
Stránka se nemění	Neuložený soubor	`Ctrl+S`, zapnout Run on save
`Port 8501 is already in use`	Server už běží z minula	`Ctrl+C` ve starém terminálu
Vidí HTML jako obyčejný text	Chybí `unsafe_allow_html=True`	Doplnit parametr
Prázdná stránka, divné hlášky	Spustili `python app.py`	Musí být `streamlit run app.py`
`IndentationError`	Špatné odsazení pod `if` / `with`	Zkontrolovat, že odsazení jsou 4 mezery
Tlačítko „nefunguje"	Kód není odsazený uvnitř `if`	Totéž — odsazení
Obrázek je vzhůru nohama	Zapomněl jsi, že Y roste dolů	Vrátit se k nákresu souřadnic
Obrázek se nezobrazí vůbec	Chybí `st.image(platno)`	Doplnit poslední řádek
`SyntaxError` u `f"..."`	Chybí `f` před uvozovkami	Doplnit `f`
Barvy `:red[...]` nefungují	Použili `st.title` místo `st.markdown`	Přepsat na `st.markdown("# :red[...]")`

Jak číst chybovou hlášku

Použij tento postup:

Nezavírat to. Červený text není katastrofa, je to nápověda.
Číst od konce. Poslední řádek říká, co je špatně.
Najít číslo řádku. Předposlední část říká, kde to je.
Podívat se o řádek výš. Chyba je často na předchozím řádku (chybějící závorka, chybějící čárka).

Programátor není člověk, který nedělá chyby. Programátor je člověk, který je umí přečíst.

Blok 14Cvičení 1 — Vizitka hrdiny (15 min)3. Cvičení

Tvoje zadání:

Vytvoř webovou vizitku svého hrdiny. Musí obsahovat:

Nadpis se jménem hrdiny — st.title

Podnadpis s povoláním — st.header a st.subheader

Dvě věty o hrdinovi, kde alespoň jedno slovo je tučně — st.markdown a **text**

Všechny čtyři barevné zprávy: zelenou, modrou, oranžovou a červenou

Tlačítko „Vydat se na cestu", které po kliknutí něco vypíše

Úroveň	Co má zvládnout
Minimum	Body 1–3 fungují
Rozšíření	Přidat `st.divider()` mezi sekce a `st.caption()` s poznámkou
Výzva	Přidat `st.balloons()` nebo `st.snow()` po kliknutí a emoji do nadpisu

cviceni/cviceni1_vizitka.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: stránka s nadpisem, popisem, čtyřmi barevnými pruhy a funkčním tlačítkem.

Kde se zaseknou:

Odsazení pod if st.button(...). Zdaleka nejčastější problém dneška. Dítě napíše if st.button("Jdi"): a další řádek nechá u kraje. Python spadne na IndentationError. Ukažte, že za dvojtečkou musí následující řádek začínat o čtyři mezery dál.
Zapomenutá dvojtečka na konci řádku s if.
Uvozovky. Když v textu použijí apostrof ("Arkon's meč" nebo 'Arkonův meč'), rozbije se jim řetězec. Poraďte jim, ať používají všude dvojité uvozovky a apostrofy zatím nepoužívají.
Tučný text. **tučně** funguje jen v st.markdown, ne v st.write (respektive st.write to zvládne taky, ale nespoléhejte na to a učte je st.markdown).

Kdo je hotový dřív: ať přidá st.metric("Zlato", 120, delta=25) a st.progress(0.8). Obojí je jednořádkové a vypadá to profesionálně.

Otázka na závěr cvičení: „Kdo dokáže tlačítkem změnit něco jiného než jen text?" Odpověď je st.balloons(), st.snow(), st.toast("...").

Řešení 1 — jedna z možných variant

reseni/reseni1_vizitka.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 15Cvičení 2 — Barevná karta hrdiny (20 min)3. Cvičení

Tvoje zadání:

Vytvoř kartu hrdiny, která mění barvu podle jeho zdraví.

Napiš jméno hrdiny barevně pomocí :red[...], :blue[...] nebo :violet[...]

Přidej stav hrdiny se zvýrazněným pozadím :orange-background[Zraněný]

Vytvoř tmavý box s rámečkem pomocí st.markdown a unsafe_allow_html=True. Dej mu padding, border-radius a text-align: center

Přidej posuvník st.slider("Životy", 0, 100, 72)

Pomocí if / elif / else nastav barvu: nad 60 zelená, 26–60 oranžová, 25 a méně červená. Barvu použij v boxu a přidej st.progress()

Úroveň	Co má zvládnout
Minimum	Body 1–3
Rozšíření	Body 4–5, barva reaguje na posuvník
Výzva	Přidat textovou hlášku a `st.color_picker` na barvu rámečku

cviceni/cviceni2_barevna_karta.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: karta, u které tažením posuvníku dolů zeleň postupně přechází do oranžové a červené.

Kde se zaseknou:

Chybějící f před uvozovkami. Napíšou """<div style="background:{barva}">""" bez f a na stránce se objeví doslova {barva}. Tohle je nejčastější chyba tohoto cvičení. Naučte je pravidlo: „Jsou uvnitř složené závorky? Pak musí být před uvozovkami f."
st.progress(zivoty) místo st.progress(zivoty / 100). Spadne s hláškou, že hodnota musí být mezi 0 a 1.
Pořadí podmínek. Když napíšou if zivoty > 25: jako první, bude to oranžové i pro 100 životů. Vysvětlete, že se podmínky zkoušejí odshora a první, která platí, vyhrává. Tohle je skvělá příprava na 4. hodinu.
Zapomenutá dvojtečka u elif a else.

Rozdíl elif a druhého if ukažte na tabuli, když se někdo zeptá: při if / elif se vybere právě jedna větev, při dvou samostatných if můžou proběhnout obě.

Kdo je hotový dřív: ať přidá druhý posuvník na zlato a st.metric, který ukazuje rozdíl oproti minulé hodnotě. Nebo ať zkusí st.color_picker na barvu rámečku, jak je ve Výzvě.

Řešení 2 — jedna z možných variant

reseni/reseni2_barevna_karta.py

import streamlit as st

st.title("Barevná karta")

st.markdown("# :red[Arkon] :orange[Ohnivý]")
st.markdown("### :violet[Kouzelník] | :green[Úroveň 3]")
st.markdown("Stav: :red-background[Zraněný] :blue-background[Má lektvar]")

st.markdown(
    """
    <div style="
        background-color: #2b2d42;
        color: #edf2f4;
        padding: 24px;
        border-radius: 16px;
        border: 4px solid #ef233c;
        text-align: center;
        font-family: monospace;
    ">
        <div style="font-size: 34px;">🧙 ARKON</div>
        <div style="font-size: 18px; color: #ffd166;">Kouzelník • Úroveň 3</div>
        <div style="font-size: 16px; margin-top: 10px;">
            Životy 72 &nbsp;|&nbsp; Zlato 25 &nbsp;|&nbsp; Síla 14
        </div>
    </div>
    """,
    unsafe_allow_html=True,
)

st.write("")

zivoty = st.slider("Životy", 0, 100, 72)

if zivoty > 60:
    barva = "#2e933c"
    hlaska = "V dobré kondici"
elif zivoty > 25:
    barva = "#e08c00"
    hlaska = "Zraněný"
else:
    barva = "#c1121f"
    hlaska = "Kriticky zraněný"

st.markdown(
    f"""
    <div style="background-color:{barva}; color:white; padding:14px;
                border-radius:10px; text-align:center; font-size:22px;">
        {hlaska}: {zivoty}/100
    </div>
    """,
    unsafe_allow_html=True,
)

st.progress(zivoty / 100)

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 16Cvičení 3 — Obrazovka souboje (25 min)3. Cvičení

Tvoje zadání:

Postav rozhraní souboje, jaké znáš z her.

Přidej boční panel with st.sidebar: a v něm výběr obtížnosti

Rozděl stránku: levy, pravy = st.columns(2). Vlevo hráč, vpravo příšera. Každý má nadpis, emoji a st.progress()

Pod tím přidej řádek se čtyřmi st.metric — zlato, úroveň, síla, lektvary. U zlata použij delta=25

Přidej st.tabs(["Souboj", "Inventář", "Deník"])

Do karty Souboj dej tři tlačítka vedle sebe ve sloupcích: Zaútočit, Vypít lektvar, Utéct

Úroveň	Co má zvládnout
Minimum	Body 1–3
Rozšíření	Body 4–5
Výzva	`st.columns([2, 1, 2])` s velkým „VS" uprostřed, `st.container(border=True)`

cviceni/cviceni3_rozlozeni.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: obrazovka připomínající RPG hru — dva soupeři vedle sebe, statistiky, záložky, ovládací tlačítka.

Kde se zaseknou:

Počet jmen neodpovídá počtu sloupců. a, b = st.columns(3) spadne na ValueError: too many values to unpack. Přeložte tu hlášku nahlas: „Chceš rozdělit na tři, ale pojmenoval jsi jen dvě."
Zapomenuté with. Napíšou levy, pravy = st.columns(2) a pak normálně st.subheader(...) bez odsazení — všechno skončí pod sebou přes celou šířku. Ukažte oba zápisy (with levy: i levy.subheader(...)).
Míchání obou zápisů. with levy: levy.write("x") funguje, ale je matoucí. Řekněte, ať si vyberou jeden a drží se ho.
st.set_page_config musí být první příkaz Streamlitu v souboru. Když ho dají doprostřed, spadne to. Tohle je jediné místo v celém kurzu, kde na pořadí opravdu záleží.

Kdo je hotový dřív: Výzva se sloupci [2, 1, 2] a velkým „VS" uprostřed udělá největší dojem. Ukažte mu st.markdown("<h1 style='text-align:center'>VS</h1>", unsafe_allow_html=True).

Tip na atmosféru: Nechte tři děti ukázat svoji obrazovku souboje na projektoru. U tohohle cvičení bývají výsledky nejrozmanitější.

Řešení 3 — jedna z možných variant

reseni/reseni3_souboj_rozlozeni.py

import streamlit as st

st.set_page_config(page_title="Souboj", page_icon="⚔️", layout="wide")

with st.sidebar:
    st.header("⚙️ Nastavení")
    obtiznost = st.select_slider("Obtížnost", ["Lehká", "Střední", "Těžká"])
    hudba = st.checkbox("Hudba", value=True)
    st.caption("Nastavení zatím nic nedělá, jen vypadá.")

st.title("⚔️ Souboj ve Věži stínů")
st.caption(f"Obtížnost: {obtiznost}")

levy, stred, pravy = st.columns([2, 1, 2])

with levy:
    st.subheader("🧙 Arkon")
    st.progress(0.72)
    st.write("Životy: 72/100")

with stred:
    st.markdown("<h1 style='text-align:center;'>VS</h1>", unsafe_allow_html=True)

with pravy:
    st.subheader("👹 Skřet")
    st.progress(0.4)
    st.write("Životy: 12/30")

st.divider()

a, b, c, d = st.columns(4)
a.metric("Zlato", 120, delta=25)
b.metric("Úroveň", 3)
c.metric("Síla", 14, delta=-2)
d.metric("Lektvary", 2, delta=-1)

st.divider()

karta1, karta2, karta3 = st.tabs(["Souboj", "Inventář", "Deník"])

with karta1:
    k1, k2, k3 = st.columns(3)
    k1.button("Zaútočit", use_container_width=True)
    k2.button("Vypít lektvar", use_container_width=True)
    k3.button("Utéct", use_container_width=True)

with karta2:
    with st.container(border=True):
        st.write("- Hůl blesků")
        st.write("- Lektvar léčení x2")
        st.write("- Klíč od věže")

with karta3:
    with st.expander("Co se stalo dosud"):
        st.write("Arkon vstoupil do věže a potkal skřeta.")

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 17Cvičení 4 — Erb nakreslený kódem (25 min)3. Cvičení

Tvoje zadání:

Nakresli erb svého rodu. Nekreslíš myší, ale čísly — souřadnicemi. Plátno je 300 × 360 pixelů, bod [0,0] je vlevo nahoře a Y roste dolů.

Vytvoř plátno a nakresli štít: obdélník [40, 30, 260, 230]

Pod něj přidej špičku: stetec.polygon([(40,230), (150,330), (260,230)], fill=...)

Doprostřed přidej znak — kruh (ellipse), kříž (dva obdélníky) nebo trojúhelník

Přidej st.color_picker na barvu štítu a druhý na barvu znaku

Přidej st.selectbox s výběrem tvaru znaku a pomocí if/elif/else kresli podle výběru

Úroveň	Co má zvládnout
Minimum	Body 1–3, erb se zobrazí
Rozšíření	Body 4–5, barvy a tvar jdou měnit
Výzva	Hvězda pomocí `polygon` s deseti body, text se jménem rodu

cviceni/cviceni4_erb.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: erb, u kterého změna barvy v color_picker okamžitě překreslí obrázek.

Kde se zaseknou:

Znak se nakreslí pod štítem, ne na něm. Protože ho nakreslili dřív. Připomeňte pravidlo vrstev: „co je v kódu níž, je na obrázku navrchu."
Znak není vidět, protože má stejnou barvu jako štít. Ať zkusí kontrastní barvu, třeba zlatou #ffd166.
Špatné pořadí bodů u polygon. Body se spojují v tom pořadí, v jakém jsou napsané. Když je prohodí, vznikne přesýpací hodiny místo trojúhelníku. To je mimochodem hezký efekt — nechte je to zkusit.
Zapomenutý st.image(platno) na konci. Připomeňte to nahlas celé třídě hned na začátku cvičení.
Text se nevejde. stetec.text((60, 340), ...) je skoro u spodního okraje plátna vysokého 360. Když napíšou 370, text zmizí.

Znak uprostřed — nabídněte tyhle varianty, ať mají z čeho vybírat:

# Kruh
stetec.ellipse([110, 100, 190, 180], fill=barva)

# Kříž (dva obdélníky přes sebe)
stetec.rectangle([135, 80, 165, 200], fill=barva)
stetec.rectangle([100, 120, 200, 150], fill=barva)

# Trojúhelník
stetec.polygon([(150, 90), (200, 185), (100, 185)], fill=barva)

# Dva pruhy napříč
stetec.line([40, 100, 260, 100], fill=barva, width=12)
stetec.line([40, 160, 260, 160], fill=barva, width=12)

Kdo je hotový dřív: hvězda z deseti bodů (je v řešení) nebo druhý erb vedle prvního pomocí st.columns(2).

Řešení 4 — jedna z možných variant

reseni/reseni4_erb.py

import streamlit as st
from PIL import Image, ImageDraw

st.title("🛡️ Návrhář erbu")

barva_pozadi = st.color_picker("Barva štítu", "#1d3557")
barva_znaku = st.color_picker("Barva znaku", "#ffd166")
tvar = st.selectbox("Znak uprostřed", ["Kruh", "Trojúhelník", "Kříž", "Hvězda"])
jmeno = st.text_input("Jméno rodu", "Rod Mlznych hor")

platno = Image.new("RGB", (300, 360), "#f1faee")
stetec = ImageDraw.Draw(platno)

# Štít: obdélník nahoře + trojúhelník dole
stetec.rectangle([40, 30, 260, 230], fill=barva_pozadi)
stetec.polygon([(40, 230), (150, 330), (260, 230)], fill=barva_pozadi)

# Znak uprostřed
if tvar == "Kruh":
    stetec.ellipse([110, 100, 190, 180], fill=barva_znaku)
elif tvar == "Trojúhelník":
    stetec.polygon([(150, 90), (200, 185), (100, 185)], fill=barva_znaku)
elif tvar == "Kříž":
    stetec.rectangle([135, 80, 165, 200], fill=barva_znaku)
    stetec.rectangle([100, 120, 200, 150], fill=barva_znaku)
else:
    stetec.polygon([(150, 80), (170, 130), (220, 130), (180, 160),
                    (195, 210), (150, 180), (105, 210), (120, 160),
                    (80, 130), (130, 130)], fill=barva_znaku)

stetec.text((60, 340), jmeno, fill="black")

st.image(platno, caption=jmeno)

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 18Cvičení 5 — Úvodní obrazovka PyQuestu (25 min)3. Cvičení

Toto cvičení je první díl celoročního projektu. Ulož soubor jako app.py a od příští hodiny ho budeme jenom rozšiřovat.

Tvoje zadání:

Přidej st.set_page_config(page_title="PyQuest", page_icon="⚔️") a nadpis hry

Přidej st.text_input na jméno hrdiny

Přidej st.selectbox na povolání: Bojovník, Kouzelník, Lupič

Přidej st.radio s výběrem emoji postavy a parametrem horizontal=True

Přidej st.slider("Kde stojí hrdina?", 0, 440, 40) a použij jeho hodnotu jako left:{hrdina_x}px v herním poli. Nakonec přidej tlačítko „Začít dobrodružství"

Úroveň	Co má zvládnout
Minimum	Body 1–3, jméno se vypíše na stránku
Rozšíření	Body 4–5, postava se posouvá po herním poli
Výzva	Další prvky v poli (stromy, mraky) a výpis aktuální pozice

cviceni/cviceni5_pyquest_uvod.py

"""CVIČENÍ 5 - Úvodní obrazovka PyQuestu (25 min)
Tento soubor si ulož jako app.py - budeme ho rozšiřovat celý rok.

ÚKOL:
1. Přidej text_input na jméno hrdiny.
2. Přidej selectbox na povolání.
3. Přidej radio s emoji postavou.
4. Přidej slider, který posouvá hrdinu po herním poli.
5. Přidej tlačítko "Začít dobrodružství".
"""

import streamlit as st

st.set_page_config(page_title="PyQuest", page_icon="⚔️")
st.title("⚔️ PyQuest")

# TODO: jmeno = st.text_input(...)
# TODO: povolani = st.selectbox(...)
# TODO: postava = st.radio(...)
# TODO: hrdina_x = st.slider(...)

st.markdown(
    """
    <div style="position:relative; width:500px; height:260px;
                background:linear-gradient(#87ceeb 65%, #4a7c1f 65%);
                border:4px solid #333; border-radius:12px; font-size:40px;">
        <div style="position:absolute; left:40px; top:150px;">🧙</div>
        <div style="position:absolute; left:400px; top:150px;">🏰</div>
    </div>
    """,
    unsafe_allow_html=True,
)

# TODO: tlačítko

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: funkční úvodní obrazovka hry, kde tažením posuvníku postavička chodí po louce směrem k hradu.

Kde se zaseknou:

Zapomenuté f u trojitých uvozovek. Jakmile do HTML vloží {hrdina_x}, musí být f""". Bez toho se na stránce objeví doslova {hrdina_x} a postava se nehýbe. Tohle je nejčastější chyba tohoto cvičení — čekejte ji minimálně u poloviny třídy.
Postava se hýbe, ale hrad taky. Když omylem dají {hrdina_x} do obou divů.
st.set_page_config není první. Musí být hned po import.
Postava vyjede z pole. Slider má maximum 440 a pole je široké 500 — to sedí. Když maximum zvýší, postava zmizí za okrajem. Dobrá příležitost říct, proč je maximum zrovna 440.

Zdůrazněte, že tohle je start celoročního projektu. Ať si soubor uloží pod jménem app.py do složky, kterou si zapamatují. Nejlépe ať si hned vytvoří složku pyquest na ploše. Kdo pracuje na školním počítači, ať si soubor pošle e-mailem nebo uloží na flashku.

Poslední pět minut hodiny: promítněte tři až čtyři výsledky. Nejde o to najít nejlepší — jde o to, aby každý viděl, že ostatní mají něco jiného, a přesto to funguje.

Řešení 5 — jedna z možných variant

reseni/reseni5_pyquest_uvod.py

import streamlit as st

st.set_page_config(page_title="PyQuest", page_icon="⚔️")

st.title("⚔️ PyQuest")
st.caption("Tvoje první dobrodružství napsané v Pythonu")

jmeno = st.text_input("Jméno hrdiny", "Arkon")
povolani = st.selectbox("Povolání", ["Bojovník", "Kouzelník", "Lupič"])
postava = st.radio("Vzhled", ["🧙", "🗡️", "🥷"], horizontal=True)

hrdina_x = st.slider("Kde stojí hrdina?", 0, 440, 40)

st.markdown(
    f"""
    <div style="
        position: relative;
        width: 500px;
        height: 260px;
        background: linear-gradient(#87ceeb 65%, #4a7c1f 65%);
        border: 4px solid #333;
        border-radius: 12px;
        overflow: hidden;
        font-size: 40px;
    ">
        <div style="position:absolute; left:{hrdina_x}px; top:150px;">{postava}</div>
        <div style="position:absolute; left:400px; top:150px;">🏰</div>
        <div style="position:absolute; left:250px; top:160px;">🌲</div>
        <div style="position:absolute; left:180px; top:170px;">🌲</div>
        <div style="position:absolute; left:30px;  top:20px;  font-size:34px;">☁️</div>
        <div style="position:absolute; left:420px; top:15px;  font-size:44px;">☀️</div>
        <div style="position:absolute; left:10px; bottom:8px; font-size:14px;
                    color:white; font-family:monospace;">
            {jmeno} • {povolani} • pozice {hrdina_x}
        </div>
    </div>
    """,
    unsafe_allow_html=True,
)

st.write("")

if st.button("Začít dobrodružství", type="primary"):
    st.success(f"{jmeno} ({povolani}) vyráží k hradu!")
    st.balloons()

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 19Domácí úkol na příští hodinu4. Domácí úkol

Uprav svůj soubor app.py tak, aby úvodní obrazovka PyQuestu obsahovala:

alespoň pět různých prvků na herním poli (postava, hrad, stromy, mraky, slunce),

vlastní barevné schéma pozadí,

alespoň jeden color_picker nebo selectbox, kterým se dá vzhled změnit,

vlastní název hry místo „PyQuest".

Ulož snímek obrazovky a přines na příští hodinu.

Pro učitele

Úkol je schválně otevřený — nejde o správnou odpověď, ale o to, aby si dítě sedlo doma k počítači a znovu si otevřelo VS Code. Pokud to udělá, návyk je založený.

Na začátku příští hodiny si vyhraďte pět minut na promítnutí tří až pěti domácích úkolů. Nehodnoťte správnost, komentujte nápady. Kdo úkol nemá, nic se neděje — 2. hodina začíná od nuly u proměnných.

Zálohujte za ně. Řekněte jim, ať vám soubor app.py pošlou e-mailem nebo do sdílené složky. Za tři měsíce budete rádi, že máte zálohu, když někomu spadne notebook.

Zobrazit ukázkové řešení domácího úkolu

Toto je jedna z možných variant, jak mohl úkol dopadnout. Tvoje řešení se může lišit a to je v pořádku.

domaci/domaci_ukol01.py

import streamlit as st

st.set_page_config(page_title="🧭 Legendy mlžného lesa", page_icon="🧭")
st.title("🧭 Legendy mlžného lesa")
st.caption("Vítej v mojí vlastní verzi PyQuestu")

jmeno = st.text_input("Jméno hrdiny", "Ela")
povolani = st.selectbox("Povolání", ["Strážce", "Mág", "Průzkumník"])
postava = st.radio("Podoba postavy", ["🛡️", "🪄", "🏹"], horizontal=True)

hrdina_x = st.slider("Pozice hrdiny", 0, 440, 90)
barva_oblohy = st.color_picker("Barva oblohy", "#6f8dff")
styl_krajiny = st.selectbox("Styl krajiny", ["Podzimní stezka", "Noční bažina", "Jarní louka"])

if styl_krajiny == "Podzimní stezka":
    barva_zeme = "#6d4c41"
elif styl_krajiny == "Noční bažina":
    barva_zeme = "#2f4f4f"
else:
    barva_zeme = "#4a7c1f"

st.markdown(
    f"""
    <div style="
        position: relative;
        width: 500px;
        height: 260px;
        background: linear-gradient({barva_oblohy} 65%, {barva_zeme} 65%);
        border: 4px solid #2b2b2b;
        border-radius: 12px;
        overflow: hidden;
        font-size: 40px;
    ">
        <div style="position:absolute; left:{hrdina_x}px; top:150px;">{postava}</div>
        <div style="position:absolute; left:410px; top:145px;">🏰</div>
        <div style="position:absolute; left:260px; top:160px;">🌲</div>
        <div style="position:absolute; left:185px; top:170px;">🌳</div>
        <div style="position:absolute; left:40px; top:22px; font-size:34px;">☁️</div>
        <div style="position:absolute; left:350px; top:18px; font-size:40px;">☀️</div>
        <div style="position:absolute; left:10px; bottom:8px; font-size:14px;
                    color:white; font-family:monospace;">
            {jmeno} • {povolani} • styl: {styl_krajiny}
        </div>
    </div>
    """,
    unsafe_allow_html=True,
)

if st.button("Vstoupit do lesa", type="primary"):
    st.success(f"{jmeno} ({povolani}) vyráží na první výpravu!")

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 20Oficiální dokumentace4. Domácí úkol

Oficiální dokumentace je místo, kam se programátoři chodí podívat, když si chtějí něco ověřit nebo zjistit víc detailů. Je většinou v angličtině, ale to nevadí — zkus se orientovat podle názvu funkce, ukázkového kódu a obrázků.

Co jsme použili	Oficiální dokumentace	Co tam najdeš
`st.title`	`st.title`	velký nadpis stránky a parametry
`st.header`	`st.header`	nadpis sekce a ukázky použití
`st.write`	`st.write`	univerzální výpis textu, čísel i objektů
`st.markdown`	`st.markdown`	formátovaný text, Markdown a HTML
`st.success`	`st.success`	zelená stavová zpráva a možnosti
`st.info`	`st.info`	informační modrá hláška a příklady
`st.warning`	`st.warning`	varování a doporučené použití
`st.error`	`st.error`	chybová hláška a vzhled boxu
`st.metric`	`st.metric`	velké číslo, delta a formát
`st.progress`	`st.progress`	progress bar a očekávané hodnoty
`st.text_input`	`st.text_input`	textové pole a jeho nastavení
`st.slider`	`st.slider`	posuvník, minimum, maximum i výchozí hodnotu
`st.selectbox`	`st.selectbox`	rozbalovací výběr z možností
`st.checkbox`	`st.checkbox`	přepínač ano/ne a návratovou hodnotu
`st.radio`	`st.radio`	volbu jedné možnosti ze seznamu
`st.color_picker`	`st.color_picker`	výběr barvy a hex kód
`st.columns`	`st.columns`	rozdělení stránky do sloupců
`st.sidebar`	`st.sidebar`	postranní panel pro ovládací prvky
`st.tabs`	`st.tabs`	záložky a přepínání obsahu
`st.expander`	`st.expander`	rozbalovací sekci pro detaily
`st.container`	`st.container`	seskupení prvků do jednoho bloku
`st.button`	`st.button`	tlačítko a co vrací po kliknutí
`st.image`	`st.image`	zobrazení obrázku a popisek
`ImageDraw` (Pillow)	`PIL.ImageDraw`	kreslení čar, tvarů a výplní

Blok 21Navazující cvičení na Umíme informatiku5. Umíme informatiku

Pro rychlejší studenty, kteří dokončí cvičení dřív, nebo na posledních 10–15 minut.

Cvičení	Odkaz	Proč se hodí
Programování v Pythonu	umimeinformatiku.cz	Základní syntaxe, volání funkcí
Python želva	umimeinformatiku.cz	Souřadnice a kreslení — navazuje na cvičení 4
Želví grafika	umimeinformatiku.cz	Pořadí příkazů při kreslení

Želví grafika je zde obzvlášť vhodná, protože procvičuje přesně tu dovednost, kterou děti právě použily — přemýšlet o obrázku jako o posloupnosti souřadnic a příkazů.

Jak to zařadit

Nedávejte to celé třídě naráz. Použijte to jako záložní aktivitu pro tři až pět nejrychlejších dětí, aby nerušily ostatní. Mějte odkaz připravený v záložkách prohlížeče, ať ho nemusíte hledat.