Převody barev z RGB do hexadecimální definice

V tomto článku si ukážeme skript, s jehož pomocí lze snadno vybírat barvy pro WWW stránky. Ve skriptu je možno zadávat barvy interaktivně, tj. změnou podílu jednotlivých barevných složek. Dále skript podporuje oboustranné převody z/do formátu RGB a z/do hexadecimální definice.

V předchozím odstavci popsaný skript najdete zde. Tlačítky plus a mínus v horní částu tabulky lze měnit zastoupení červené, zelené a modré složky ve výsledné barvě. Velikost přírůstku, po jakém se mění hodnota barevných složek, lze ovlivnit přepínači na dalším řádku. Hodnotu libovolné ze tří složek (v rozsahu 0..255) lze přímo nastavit ve třetím řádku tabulky (po vypsání nové hodnoty stiskněte tlačítko „Přepočítat“). Ve čtvrtém řádku můžete přímo zadat HEXA hodnotu, konečně tlačítko na pátém řádku nastaví barvu zpět na výchozí (což je zde tmavě šedá). Každá z provedených úprav se ihned promítá do všech zobrazených polí, přičemž aktuálně nastavená barva je zobrazena jako barva pozadí stránky.

Použitý kód není složitý, je ale poměrně dlouhý. Z tohoto důvodu se pro úsporu místa omezím pouze na popis samotného JavaScriptu; HTML kód použité tabulky a formuláře nezasluhuje zvláštního vysvětlení – každý čtenář, který má zájem, jej snadno získá z příkladu. Grafika tabulky ostatně není právě úchvatná – předpokládám že ji většina z vás bude chtít modifikovat podle svého vkusu.

Většina skriptu je umístěna v hlavičce stránky. Nejprve je třeba definovat globální proměnné. Tříprvkové pole gRGB uchovává právě nastavenou barvu, pole hexStr plní úlohu „tabulky konstant“ pro převod mez hexa a dekadickým vyjádřením v dalších funkcích:

Pomocná funkce Redraw je volána z obslužných funkcí jednotlivých tlačítek vždy, když dojde ke změně nastavení aktuální barvy. Funkce vezme aktuální barvu z pole gRGB a zobrazí ji jako barvu pozadí stránky, dále pak v textových políčkách R,G a B formuláře a také ve formulářovém poli s HEXA hodnotou. Z fukce Redraw jsou pěkně vidět vazby na jméno formuláře (jmenuje se „calc„) i na jména jednotlivých polí. Pro převod mezi RGB hodnotou uloženou v poli gRGB a HEXA vyjádřením je použita pomocná funkce getHex:

Nyní je potřeba zadefinovat výše zmíněné obslužné funkce pro všech devět tlačítek formuláře – jinými slovy kód, volaný při události onClick na každém jednotlivém tlačítku. Prvních šest tlačítek (jsou to ta s nápisy plus a mínus v prvním řádku tabulky) je obslouženo společnou funkcí changeRGB. Její první parametr, iIndex, určuje index do globálního pole gRGB – tedy vlastně barvu, jejíž hodnotu měníme. Druhý parametr fUp určuje směr, jímž se barva mění – zda je hodnota v aktuální barevné složce inkrementována (true) či opačně. Interval, o nějž se mění hodnota barevné složky, bere funkce changeRGB z aktuálního nastavení přepínačů (alias radiobutonů) pojmenovaných amount. Protože dochází ke změně barvy, je na závěr funkce volána výše popsaná překreslovací procedura Redraw:

Zde udělám výjimku a uvedu HTML kód aspoň první dvojice tlačítek plus a mínus – zatímco u všech ostatních tlačítek mimo první šestici je volání obslužné funkce ve stylu onclick=“volejFunkci()“, zde je díky dvojici parametrů handler události onClick maličko složitější. Takto je volána funkce changeRGB pro první dvě tlačítka (červená barevná složka):

Jednoduchá obslužná funkce resetForm je volána po stisku tlačítka „Vynulovat formulář“ a má za úkol pouze nastavit editovanou barvu zpět na výchozí:

Po stisku tlačítka „Přepočítat“ na třetím řádku tabulky se do debaty vloží funkce recountRGB, jež zkontroluje hodnotu ve trojici editačních polí R,G a B a podle jejich obsahu spočítá výslednou barvu. Pokud má některé z editačních polí „nelegální hodnotu“, je nastaveno na výchozí hodnotu 128. Ke kontrole numerických údajů používá funkce recountRGB kontrolní proceduru validateNumber:

Totéž, ale pro HEXA hodnotu na čtvrtém řádku, dělá funkce recountHEX za podpory kontrolní procedury validateHEX. Protože jednotlivé barevné složky v šestimístném hexa čísle (jinými slovy: jednotlivé dvojice znaků) jsou kontrolovány odděleně, může občas dojít k zajímavému chování, kdy je z evidentně chybného řetězce typu dfkjasad vyextrahována jedna či dvě složky, které jsou v pořádku – v tomto případě třeba úvodní „červená“ dvojice DF. Domnívám se, že toto chování není na závadu, komu by nicméně vadilo, může funkci recountHEX snadno rozšířit o kontrolu na celé šesticiferné hexa číslo:

No a to je vše. Nezapomeňte ještě v HTML stránce po definici formuláře zavolat poprvé funkci

aby došlo k nastavení barvy pozadí stránky a textů ve formuláři na výchozí hodnoty. Pokud vás tato jednoduchá RGB kalkulačka zaujala, můžete se těšit v některém dalším článku na její rozšíření o sofistikovanější funkce.

Přeji vám příjemný den.