Color mixer aneb míchátko

Právě jsem vytvořil dvě jednoduchá míchátka barev. Jsou určena pro uživatele webových aplikací (nikoliv webdesignéry, jako třeba Pixyho generátor schémat). Slouží tedy k interaktivní volbě barvy. Dávám je volně k dispozici pod licencí GPL.

Download ColorMixer Michatko:

Míchátka používají několik fikaných kouzel pro manipulaci s barvami. Díky nim jsem v DHTML dosáhl podobné funkčnosti, jaká je známá spíše z desktopových aplikací. Tedy nechci se tu naparovat, jen že jsem nic podobného na webu zatím neviděl.

Míchátko s barevným proužkem

Připomíná „Color Picker“ z Adobe Photoshopu. Funguje pod IE 6, Mozillou a Operou (ostatní prohlížeče jsem neměl možnost ověřit, můžete zkusit sami a poslat report). (odkaz)

(aktualizováno: s míchátkem na stejném principu přišel už o měsíc dříve Dalton Lloyd, patří mi tedy krásné druhenství)

Míchátko s barevným prstencem

Ovšem tady si snad prvenství obhájím. Co ty na to, Daltone?

Implementace

Pro implementaci stačí nalinkovat do stránky příslušný CSS a JS soubor (viz jednotlivé příklady) a poté vytvořit a nakonfigurovat objekt mixéru.

<link rel="stylesheet" type="text/css"
   href="dgxcolormixer.css" />

<script type="text/javascript"
   src="dgxcolormixer.js"></script>

<script type="text/javascript">

// definujeme obsluhu událostí
function myChangeColorHandler(mixer) { ... }
function myConfirmHandler(mixer) { ... }

// vytvoříme objekt
var mixer = new DGXColorMixer();

// nastavíme handlery
// pro změnu barvy
mixer.onChange = myChangeColorHandler;
// pro povrzení změny
mixer.onConfirm = myConfirmHandler;

// barva
mixer.setColor('FF0030');
// nebo
mixer.setColor(new RGBColor(10, 20, 30));
// nebo
mixer.setColor(new HSVColor(280, 100, 50));

// případně včlenit do existujícího elementu
mixer.setParent('main1');
// nebo
el = document.getElementById('main1');
mixer.setParent(el);

// dosud je mixér skrytý, tak jej zobrazíme
mixer.show();

</script>

Mixér lze propojit s editačním políčkem input a také nastavit, zda bude fungovat jako vyskakovací okénko (automaticky se umístí hned vedle editačního políčka). Tady se můžete podívat na příklad.

// create mixer
mixer = new DGXColorMixer();

// propoj s prvkem s id 'color1'
// druhý parametr nastavuje popup režim
mixer.attachInput('color1', true);

Ovládání přes URL

V URL můžete zadat barvu. Pro RGB lze použít tří nebo šestiznakový HEX formát, dekadický zápis nebo dokonce slovní označení:

• stripe.php?EEE
• stripe.php?2970E8
• stripe.php?127,127,250
• stripe.php?gold

Podporován je též HSV (HSB) vstup, kde Hue je v rozsahu 0..360 a Saturation + Brightness v rozsahu 0..100

• stripe.php?hsv=350,50,20