Vybarvi si sám

Naším dalším úkolem bude vytvoření jednoduchých omalovánek umožňujících vybarvování připravených kreslených obrázků. Uživatel může mezi obrázky listovat a vyléváním ploch je vybarvovat. Černá barva je přitom rezervována pro obrysy obrázků.

Nejdříve založte nový program s názvem Vybarvi.

Upravíme velikost plochy. Máme představu, že budeme editovat obrázky se standardní velikostí 20 x 15 políček (640 x 480 grafických bodů). Na volbu barvy a obrázku potřebujeme dole v okně pás o výšce 1 políčka. Nastavte proto velikost hlavní plochy programu na 20 x 16 políček. Vymažte prázdné políčko průhlednou barvou, tím zajistíte zviditelnění grafické plochy.

Vytvořte dva nové předměty - šipka vlevo a šipka vpravo. Nakreslete do nich obrázky ovládacích tlačítek pro listování vlevo a vpravo, podklad bude šedý. Položte předměty vedle sebe do pravého dolního rohu plochy.

Vytvořte hlavní smyčku programu - nekonečný podmíněný cyklus (v podmínce cyklu bude prvek ano). V těle cyklu bude jeden příkaz čekání.

Před hlavní smyčku připravte skupinu s názvem inicializace programu. Skupina bude obsahovat přípravné operace nutné pro běh programu.

Prvním příkazem bude nastavení textu nápovědy do stavové lišty na spodním okraji okna. Neobsahuje-li stavová lišta žádný text, je vypnutá. Chceme-li používat v programu stavovou lištu, je dobré ji zapnout ihned na začátku programu. Prázdnou stavovou lištu bychom zajistili zobrazením znaku mezera.

Druhým příkazem je funkce příprava obsluhy volby barvy. Nadefinuje použité barvy pro kreslení a zobrazí políčka s barvami. Funkce naplnění seznamu obrázků připraví seznam obrázků. Funkce zobrazení vybraného obrázku obrázek zobrazí. Zatím připravte jen prázdné funkce. Poslední čtyři příkazy slouží k předefinování vzhledu kurzoru myši, o nich také až později.

Spustíte-li teď program, uvidíte černou plochu, vpravo dole dvě tlačítka a nápisy v nadpisu okna a ve stavové liště. A Petříka koukajícího vlevo dole. Zatím nic moc, ale jsme teprve na začátku.

V okně Společných proměnných a funkcí vytvořte nový seznam s názvem seznam barev. Velikost seznamu nastavte na 36, to bude počet barev použitých v editoru. Ukazatel v seznamu přejmenujte na index barvy a automatický přírůstek na inkrementace indexu barvy. Do seznamu přidejte jeden číselný datový prvek barva.

Vytvoříme obsah funkce příprava obsluhy volby barvy. Přepněte se do ní dvojklikem myší na ikonu funkce. Úplný obsah funkce vidíte na následujícím obrázku. Po pravé straně je rozvinutý cyklus pro vytvoření políček barev. Funkci si postupně podrobně popíšeme.

Nejdříve naplníme seznam barev. Nastavte index barvy na 0 a inkrementaci indexu barvy na 1. Tím zajistíme, že se barvy budou do seznamu ukládat od začátku a po každém nastavení barvy se ukazatel seznamu automaticky zvýší o 1. Následují příkazy nastavení barev. Zvolte 36 barev dle vlastního výběru (ne černou, tu používáme pro obrysy). Proč zrovna 36? Pro volbu barvy budeme mít k dispozici 18 políček a na každém políčku budou 2 barvy.

Políčka volby barev budeme realizovat pomocí předmětů. Předměty jsou v této chvíli vhodnější než grafické vykreslení, protože při vylévání ploch by nám zřejmě mohlo natéct i do okének s barvami. Namísto ručního kreslení předmětů použijeme vytvoření programové. Je to snazší než upravovat 36 okének a především lze snadněji udržet soulad mezi okénky a skutečnými barvami, pokud barvy v programu někdy změníme.

Vytvořte si ve Společných proměnných a funkcích obrázek (ne předmět) okénko volby barev o velikosti 1x1 políčko. Nakreslete do něj okénka pro volbu 2 barev, asi takto:

Předměty budeme vytvářet tak, že obrázek okénka volby barev vykreslíme do okna programu, vyplníme barvami, sejmeme z okna jako předmět a uložíme do plochy. K ukládání do plochy použijeme Lucku. Proto ji nastavíme na první políčko (horizontálně na 0) a otočíme doprava. Následuje cyklus pro všechny předměty barev (polovina počtu barev).

Prvním příkazem v cyklu je vykreslení obrázku okénka volby barev. V příkazu uvedeme pouze jediný parametr - obrázek k vykreslení. Nejsou-li ostatní parametry uvedeny, vykreslí se obrázek v levém dolním rohu okna.

Druhým příkazem je vylití levého okénka barvou ze seznamu barev. Souřadnice místa volíme ve středu okénka (tj. X = 0.25). Stejně tak vylijeme pravé okénko druhou barvou, opět do středu druhého okénka (X = 0.75). Ukazatel barev se posouvá automaticky.

Vytvořený obrázek předmětu sejmeme z okna funkcí úschova výřezu z plochy jako předmět a uložíme ho ihned na pozici s Luckou. Potom Lucka popojde na další políčko.

Po vytvoření všech políček barev změňte inkrementaci indexu barvy na 0, od této chvíle již automatickou inkrementaci nebudeme v programu používat.

Připadá vám, že děláme v okně příliš mnoho operací a že snad takové operace musí být viditelné? Ve skutečnosti jsou tyto přípravné vykreslovací operace velmi rychlé a my máme dost času, než se obsah okna vykreslí na displeji prvním příkazem čekání. Vykreslený obrázek zůstane skryt pod prvním předmětem volby barev, takže se dokonce ani nemusíme starat o závěrečné vymazání obrázku.

Teď můžete program spustit. Je-li vše v pořádku, objeví se na spodní straně okna pás s barevnými okénky volby barev. Zatím stále ještě s Petříkem.

Nyní připravíme obrázky. Na konci lekce si stáhněte vzorové obrázky a rozbalte je do knihovny Picture. Obrázky přetáhněte z knihovny do programu včetně složky ve které jsou umístěné. V okně Společných proměnných a funkcí připravte seznam obrázků. Obrázků je 25. Seznam bude mít textovou položku jméno obrázku a obrázkové položky obrázek a původní obrázek.

Naplňte seznam obrázků ve funkci naplnění seznamu obrázků. Klasickým způsobem - nastavením inkrementace indexu obrázku na 1, naplněním seznamu jmen obrázků (podle jmen souborů) a naplněním obrázků v seznamu vzory obrázků načtenými z knihovny. Mezi plněním jmen obrázků a obrázků není třeba nulovat index obrázku, nuluje se automaticky přetečením přes konec. Poté ještě pomocí cyklu uchovejte obrázky do proměnné původní obrázek. Protože přistupujeme ke 2 položkám seznamu, nemůžeme použít automatickou inkrementaci a musíme používat programové zvyšování indexu.

Přistoupíme k funkci zobrazení vybraného obrázku. Jak vidíte na obrázku niže, nejdříve se zobrazí vybraný obrázek v seznamu na souřadnici Y=1 (protože dole je pás volby barvy). Poté se zobrazí informace v titulku okna - jméno obrázku, číslo obrázku a celkový počet obrázků. Výsledkem bude text jako například "Vybarvi - Domeček (obrázek 4 z 25)". Na obrázku to není patrné, ale nezapomeňte na patřičných místech v textech oddělovací mezery.

Opět můžete program spustit - měli byste vidět zobrazený první obrázek seznamu.

V programu budeme používat Petříka jako indikátor, která barva je právě zvolená. Vyvolejte editaci sprajtu Petříka. Změňte parametry sprajtu na následující hodnoty: prodleva mezi fázemi = 110, fází na krok = 0, fází pro klid = 4, fází pro pohyb = 0, směrů = 1, šířka obrázku = 0.5. Vyhoďte obrázky Petříka ze sprajtu a dvojklikem do prvního obrázku vyvolejte editaci obrázku. Do obrázku nakreslete rámeček indikátoru, využijte střídající se barvy bílá-šedá-černá-šedá. Zkopírujte obrázek do dalších políček sprajtu a posuňte body vždy o 1 bod ve směru hodinových ručiček. Při zkoušce sprajtu uvidíte, jak rámeček "teče" po obvodě.

Lucku použijeme jako indikátor barvy pod kurzorem myši. Vyvolejte editaci sprajtu Lucky a změňte parametry sprajtu: fází na krok = 0, fází pro pohyb = 0, směrů = 1, šířka obrázku = 0.5. Překreslete obrázek ve sprajtu tak, aby vytvořil dojem vyvýšeného okénka volby barvy. Střed přitom ponechejte průhledný.

V hlavní smyčce programu (před příkazem čekání) připravte skupinu s názvem zjištění a test platnosti barvy pod kurzorem. Zde budeme průběžně testovat barvu pod kurzorem myši, abychom mohli pro příslušnou barvu zapnout indikaci. Zjištěnou barvu budeme používat v programu i u dalších obsluh.

Ve Společných proměnných připravte dvě číselné proměnné: barva pod kurzorem myši a index barvy pod kurzorem. Na začátku skupiny tyto dvě proměnné nastavte na hodnotu -1 k indikaci, že pod kurzorem myši není platná barva. Následuje podmíněný příkaz testující, zda se nachází kurzor myši nad plochou obrázku. Test zajistíme prvkem test myši v oblasti s nastavenými parametry podle obrázku v okně. Je-li kurzor myši nad obrázkem, načteme barvu pod kurzorem funkcí načtení barvy bodu. Barvu uchováme v proměnné barva pod kurzorem myši. Souřadnice bodu k načtení barvy převezmeme ze souřadnic myši pozice myši v horizontálním směru a pozice myši ve vertikálním směru. V programech systému Petr je zajištěno, že informace o myši se až do další obsluhy čekání nezmění.

Po načtení bodu se pokusíme barvu vyhledat v tabulce barev. Cyklus vyhledání barvy vidíte na obrázku vpravo. Cyklus prochází celou tabulku barev, každou barvu porovnává se zjištěnou barvou pod kurzorem. Nalezne-li odpovídající barvu, uschová její index do proměnné index barvy pod kurzorem, nastaví Lucku (jako indikátor barvy pod kurzorem) nad okénko s barvou a zapne viditelnost Lucky.

Všimněte si blíže, jak jsme cyklus použili. Index barvy v seznamu barev určuje současně barvu aktuálně vybranou uživatelem. Cyklus projede celý seznam barev jednou dokola, po ukončení cyklu bude mít index barvy přesně stejnou hodnotu, jakou měl před zahájením cyklu. Proto cyklus nesmíme ukončit po nalezení barvy. Využili jsme přitom automatického návratu ukazatele seznamu na začátek po překročení konce seznamu.

Pozastavme se u Lucky. V celém programu ponecháváme vertikální souřadnici Lucky trvale na výchozí hodnotě 0. Horizontální souřadnici nastavujeme na poloviční hodnotu indexu barvy pod kurzorem, protože okénka barev jsou široká polovinu políčka. Pokud vás zaráží, že Lucka může stát i mezi políčky, tak je tomu skutečně tak. Při nastavování pozice Lucky zadáním souřadnic můžeme používat libovolné hodnoty, včetně hodnot mimo plochu okna, neboť Lucka je běžným sprajtem. Pouze při pohybování Lucky pomocí příkazu krok se Lucka (stejně i Petřík) omezuje na plochu okna a cílová souřadnice je zarovnána na nejbližší políčko.

Za podmíněným příkazem pro načtení barvy následuje podmíněný příkaz zajišťující vypnutí indikátoru barvy, není-li pod kurzorem myši platná barva. To může nastat nejen v případech, kdy je kurzor myši mimo plochu obrázku, ale také je-li pod kurzorem myši černá (nebo nějaká neznámá) barva.

Program spusťte a vyzkoušejte. Měla by již být funkční indikace barvy pod kurzorem myši. Najedete-li myší v obrázku nad nějakou barvu, okénko s příslušnou barvou vystoupí nad povrch okna.

Začneme s ovládáním, a to nejdříve s ovládáním pomocí klávesnice. Doplňte za skupinu pro zjištění barvy prvek vícestupňové větvení příkazů se jménem obsluha kláves. V testované hodnotě použijeme funkci vstup klávesy (nečeká na stisk).

Nejdříve si ještě připravíme pomocnou funkci úschova obrázku. Její obsah je jednoduchý - sejme obsah okna do aktuálně vybraného obrázku. Tuto funkci budeme volat vždy před změnou na nový obrázek.

První větev větvicí konstrukce vytvoříme pro klávesu Esc. Jako obsluhu větve použijeme příkaz přeruš opakování, který přeruší hlavní smyčku programu a tím ukončí celý program.

V druhé větvi obsloužíme klávesu vlevo. V obsluze větve uveďte funkci předešlý obrázek, předtím funkci vytvořte (zatím prázdnou). Podobně obsloužíme klávesu vpravo, jen použijeme funkci další obrázek. Za funkce uveďte příkaz vyprázdnění zásobníku kláves. Klávesy mohou být generovány rychleji než je rychlost průchodu hlavní smyčkou, program by měl při listování setrvačnost, což není příjemné.

Můžete ještě obsloužit další listovací klávesy, jako například Home pro skok na první obrázek, End pro skok na poslední obrázek. Poslední klávesou bude Back Space. S její pomocí může uživatel obnovit obrázek do původní podoby jako před editací. Tyto další klávesy už nepoužívají funkce, protože pouze operace vlevo/vpravo se vykonávají jak z klávesnice, tak v obsluze myši.

Obsah funkcí vlevo/vpravo je velmi jednoduchý, vidíte je na následujících obrázcích. Pouze se uschová obsah obrázku, posune se index obrázku a zajistí vykreslení nového vybraného obrázku. Není třeba obsluhovat přetečení indexu přes začátek či konec seznamu, protože to řeší systém Petr automaticky.

Program vyzkoušejte. Pomocí šipek vlevo a vpravo na klávesnici byste měli být schopni listovat obrázky. Klávesa Esc program ukončí.

Nyní vytvoříme obsluhu ovládání myší. Do hlavní smyčky za obsluhu kláves přidejte podmíněný příkaz s názvem kliknutí levým tlačítkem myši. Do testu podmínky vložte prvek klik levým tlačítkem myši. Je to logický příznak a je nastaven vždy, když uživatel klikne levým tlačítkem myši do okna programu. Vypnutí příznaku se provede jeho čtením, například použitím v podmínce. Proto budete-li někdy chtít příznak testovat vícekrát, musíte si ho uschovat v logické proměnné.

Pokud v testu podmínky zjistíme, že uživatel kliknul myší, rozlišíme v dalším podmíněném příkazu podle vertikální souřadnice myši, zda se jednalo o kliknutí do obrázku nebo do pásu s barvami a tlačítky. Hranicí rozlišení je 1, protože pás je vysoký 1 políčko.

Pro obsluhu volby barvy připravíme novou funkci s názvem volba barvy. Do vstupních proměnných funkce dáme číselnou proměnnou pozice kurzoru myši X. S její pomocí budeme funkci předávat horizontální souřadnici myši v poli volby barev.

Ve funkci převezmeme hodnotu vstupní proměnné, vynásobením číslem 2 souřadnici převedeme na číslo barvy, funkcí celočíselná část odstraníme nepotřebnou desetinnou část a výsledek použijeme k nastavení nového indexu barvy. Nastavíme horizontální souřadnici Petříka na poloviční hodnotu indexu barvy, což odpovídá souřadnici okénka s barvou. Petříka v programu používáme jako indikátor vybrané barvy. Jeho vertikální souřadnice zůstává trvale nastavena na 0, proto si jí nemusíme všímat.

Zjistíme-li z vertikální souřadnice myši, že uživatel kliknul do pásu tlačítek a volby barev, rozlišíme dále podle horizontální souřadnice myši, zda kliknul do volby barev nebo na tlačítka. Pro horizontální souřadnici menší než 18 je obsloužena volba barvy. Zavoláme funkci volba barvy s horizontální souřadnicí myši jako parametr. Jinak se jedná o tlačítka přepínání obrázků. Pro horizontální souřadnici menší než 19 je to tlačítko vlevo, voláme funkci předešlý obrázek, jinak voláme funkci další obrázek. Celou obsluhu volby barvy nebo tlačítek vidíte zde na obrázku:

Opět program vyzkoušejte. Levým tlačítkem myši je možné přepínat obrázky a v pásu volby barev měnit vybranou barvu.

Nyní obsloužíme případ, kdy uživatel kliknul levým tlačítkem myši do oblasti obrázku. Základem obsluhy bude podmíněný příkaz vylití obrázku barvou (na dalším obrázku). V testu podmínky ověříme, zda pod kurzorem myši není černá barva. Černou barvu používáme pro obrysy obrázků a nesmíme ji vylít. Barvu pod kurzorem myši jsme si uschovali do pomocné proměnné na začátku hlavní smyčky programu.

V obsluze vylití obrázku barvou použijeme příkaz Výplň. Barvu určí proměnná barva ze seznamu barev. Souřadnice výplně převezmeme ze souřadnic myši.

Program spusťte. Vyzkoušejte vylévání obrázku vybranou barvou a ověřte, že nelze vylít černý obrys obrázku.

Pravé tlačítko myší bude sloužit k nabrání barvy pod kurzorem myši z obrázku. Obsluhu vidíte na dalším obrázku. Je-li stisknuto pravé tlačítko myši a je-li kurzor myši nad obrázkem a je-li barva pod kurzorem myši platná, nastaví se barva jako vybraná barva. Opět vyzkoušejte.

Poslední úpravou programu bude předefinování kurzoru myši podle toho, ve kterém místě plochy se nachází. V okně Společné proměnné a funkce si připravte 4 předměty s obrázky kurzorů - šipky, kapátko a výplň.

Obrázky mají černý obrys, okolí je průhledné a vnitřek vyplněn bílou barvou. Na vrcholy kurzorů kapátka a výplně doplníme žlutou tečku coby ukazovací místo kurzoru (s inverzí barev). U ostatních kurzorů zůstane ukazovací místo implicitně uprostřed obrázku.

Ve skupině inicializace programu určíme pomocí příkazů nadefinování vzhledu kurzoru myši, jaký vzhled ve které části okna bude kurzor myši mít. Pro pole výběru barvy nadefinujeme kapátko, pro ovládací tlačítka šipky vlevo a vpravo, pro plochu obrázku kurzor výplně.

Abychom si ujasnili funkci příkazu pro definování vzhledu kurzoru myši, můžeme si představit oblasti definice vzhledu myši jako obdélníky, které postupným přidáváním překrývají staré definice. Platí vždy definice nejvíce na vrcholu. Nezadáme-li žádný obrázek myši, použije se standardní vzhled myši v okně, určený systémem. Nezadáme-li rozměry oblasti, předefinuje se kurzor myši pro celé okno. Všechny definice můžeme zrušit uvedením příkazu bez jakýchkoliv parametrů.