Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

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í:

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

Komentáře

  1. Erix #1

    Moc hezký!
    Jenom mě teď napadá, na co míchátka potřebuje uživatel webu?

    před 11 lety | reagoval [2] MiPo [4] Lukáš
  2. MiPo http://www.mipo.ssag.sk/zapisnik/ #2

    #1 Erixi, Presne to isté som sa chcel spýtať.

    před 11 lety | reagoval [4] Lukáš
  3. Tomáš Kučera http://www.tvorba-www-stranek.com #3

    Nooo…sam nevim kdy jsem jeste jako uzivatel potreboval vedet kod barvy :-) To prislo az v dobach blueboardu :-))

    před 11 lety
  4. Lukáš #4

    #1 Erixi, #2 MiPo třeba do nějakýho CMSka

    před 11 lety
  5. Aleš Janda http://www.svice.cz #5

    avatar

    Super. Kdybys to chtěl úplně „vytunit“, mohl by se ještě do schránky sám kopírovat HTML kód barvy ;-)

    před 11 lety | reagoval [23] ondra
  6. ofr #6

    avatar

    prstenec v Opeře – nevidím rozdíl mezi Operou(8.50) a IE 6

    před 11 lety | reagoval [13] sloper [14] David Grudl
  7. Petr Václavek http://petr.vaclavek.com #7

    avatar

    No já bych o jednom použití věděl. Občas mi zadavatel řekne, že chce aby výsledný web měl nějaké základní barvy. Třeba naposledy chtěl sytě žlutou a bordó… nic bližšího jsem z něj nevymáčknul… ode dneška ho jednoduše pošlu do… na tento web, aby si vybral a poslal mi hexa kód. Je to jednodušší, než mu vysvětlovat, jak ve Windows zobrazí podobné míchátko a která tři čísla potřebuji.

    Takže díky za nástroj!

    před 11 lety | reagoval [24] David Grudl [32] Skic
  8. rony #8

    a take michatko, ked ti niekto povie, ze chce slabulinko marhulkovu farbu, svetlo hraskovu, ci farbu melty s cukrom? to by sa mi velmi vyrazne hodilo :-)

    před 11 lety
  9. rony http://spravodaj.madaj.net/ #9

    na http://spravodaj.madaj.net/ najdes v pravom stlpci dalsi dobry nastroj: zadas meno farby alebo hex, rgb kod a ono to zobrazi v prehliadaci – ked chces niekomu ukazat konkretnu farbu, aby si to nemusel robit sam, posles mu priamo url… napriklad takto http://barva.pidiweb.cz/?…

    před 11 lety | reagoval [14] David Grudl [16] Petr Václavek
  10. Petr Krontorad http://www.whoa-framework.org #10

    avatar

    V Safari 2.0 (Tiger) to jede uplne v klidu, coz neni ani divu, v podpore javascriptu je obvykle nejslabsi (a nejpomalejsi) Opera.

    před 11 lety
  11. pixy #11

    avatar

    Hezké…

    Ale stejně je to zajímavé, jak jsou si některé JS kódy neuvěřitelně podobné, že? :o)

    před 11 lety | reagoval [14] David Grudl
  12. wiki #12

    před 11 lety | reagoval [22] Mirda [24] David Grudl
  13. sloper http://www.slosar.sk/weblog/ #13

    #6 ofre, Takisto potvrdzujem v Opere 8.50 plnu funkcnost…

    před 11 lety
  14. David Grudl http://davidgrudl.com #14

    avatar

    #11 pixy, narážíš na dragging v Tvém udělátku? Vždyť ten jsem psal také… ;)

    #6 ofre, V Opeře se prstenec nezesvětluje a pravý gradient se neztmavuje.

    Jinak případné testéry bych chtěl upozornit, že v Standalone verzích IE to fungovat nemusí, ale přesto nemusí jít o chybu.

    #9 rony, aj, zapomněl jsem připsat dokumentaci k URL. Ve tři ráno mi to už nemyslí… Doplním.

    před 11 lety
  15. Medhi http://blueboard.cz #15

    Z dob Blueboardu… tak to vypadá, že bych měl asi nějaká podobná míchátka na BlueBoard.cz přidat. Ale asi mnohem jednodušší.

    před 11 lety
  16. Petr Václavek http://petr.vaclavek.com #16

    avatar

    #9 rony, díky za další zajímavý tip, na oplátku posílám odkaz na jednu sekci ve svých záložkách, která pojednává jen a jen o barvách a takovýchto míchátkách: http://petr.vaclavek.com/odkazy.php#43

    před 11 lety
  17. juneau #17

    avatar

    Zajimalo by me, zda je v poradku stahnout si michatko i s obrazky a vlozit jako uzitecny nastroj do systemu, tedy nemirit na nej odkaz, ale mit jej primo zabudovan. S tvym copyrightem, samozrejme.

    A taky mi prijde, ze posledni dobou uticha cinnost kolem Texy!

    před 11 lety | reagoval [41] Tuzticzka
  18. pinus http://linux.fjfi.cvut.cz/~pinus/ #18

    Musim se pridat k tem, kteri moc nechapou, k cemu se to muze hodit. Jako hracka je to fantasticke a programatorsky zmaknute. Ale jinak? Ten, kdo neco takoveho potrebuje, to ma davno na desktopu. Pro ladeni barevnosti webu to neni, protoze to nenabizi zadne barevne kombinace. To treba pixyho michatko mi naopak prijde extremne uzitecne, protoze to nabizi primo barevne kombinace, pomoci kterych se clovek muze dobre inspirovat – hned vidi, co k sobe ladi a co ne.

    před 11 lety | reagoval [19] carnero [24] David Grudl
  19. carnero http://www.carnero.info #19

    To se hodí, moc díky za míchátko…

    #18 pinusi, Mě se to hodí třeba k tomu, abych nemusel spouštět Photoshop kvůli změně barvy písma v CSS.

    před 11 lety | reagoval [32] Skic
  20. Bohumír Bednařík (BoboCop) http://www.bobocop.cz/blog/ #20

    Je to určitě zajímavá aplikace, ale chtělo by to doplnit nějaké tlačítko (nebo něco), kterým by se vybraná barva přenesla do linku, aby se dala zkopírovat do schránky a někomu poslat (nebo přímo zavést takovou funkčnost – odelání barvy na e-mail). Dalo by se to využít právě pro ty případy, kdy bych řekl „zákazníkovi“ jdi tam, vyber si barvu a pošli mi ji.

    před 11 lety
  21. myf #21

    DGX, ještě zbývá poslední věc: vymyslet tomu unikátní pojmenování. Nevím jestli to víš (asi ano) : tvoje fontotéka je užitečná i tím, že k jejímu dosažení stačí znát zmíněný nadpis (tedy viz pozn).
    Tvůj Color mixer je bezesporu neméně užitečná věc – a to i v porovnání s ostatními podobnými utilitkami jinde na webu, ať si říká kdo chce co chce. Ale jak míchátko tak i Color mixer jsou pohříchu dost poobsazované

    Pozn: Určité prohlížeče si zvykly na podivná slova v adresovém řádku línému uživateli vracet (podle googlu) nejrelevantnější stránku pro dané podivné slovo.

    před 11 lety | reagoval [25] myf
  22. Mirda #22

    #12 wiki, haha… vždyť to je úplně stejný princip…

    před 11 lety
  23. ondra http://ondras.praha12.net/ #23

    #5 Aleši Jando, Automaticky to do schránky jde zkopírovat jen v Exploreru, a hádám že se současnou IE-paranoiou to asi beztak bude na většině strojů vypnuté :( ono by totiž nebylo moc vhodné, aby www stránka mohla nic netušícímu člověku manipulovat pod rukou se schránkou…

    před 11 lety
  24. David Grudl http://davidgrudl.com #24

    avatar

    #12 wiki, ufff, je to úplně to stejné jako míchátko s proužkem! Žasnu. Je vidět, že stejné nápady se kumulují v prostoru nebo čase: přišli s tím na druhém konci zeměkoule, ale v rozdílu pouhého měsíce. Za půl roku bude míchátka fungující na tomto principu obsahovat každé CMS.

    #18 pinusi, Přečti si prosím první odstaveček nebo #7 Petr Václavek

    před 11 lety
  25. myf #25

    #21 myfe, … a sám si i odpovím: Jé, už to není třeba, backlinky a co já vím co všechno zafungovalo. Google už jako nejmíchátkovější míchátko bere tento článek (sice by bylo lepší, kdyby tak bral přímo ten nástroj, ale zůstane-li to tak, taky dobře).

    před 11 lety
  26. Ebo #26

    ..hmm hmm .. míchátko.. hmm.. hezké .. a co takhle naprogramovat třeba takové šidítko ? :-D (funkci a provedení nechám zcela na fantazii autora ;-) )

    před 11 lety
  27. Leo #27

    Ja pouzivam univerzalni slovo, a to „udelatko“. Leo

    před 11 lety
  28. pykaso http://pykaso.net #28

    avatar

    opravdu zajimave udelatko.. uz jste si nekdo vsiml ze je prehozene poradi barev v prouzku ? ..

    ..kdyz jedu soupatkem po prouzku dolu tak vidim na prouzku červená, žlutá, zelená .. ve spodním okně to jde ale opačně .. červená, fialová, modrá ..

    to jsem už tak ospalý že mi něco uniká ??

    před 11 lety | reagoval [29] Ebo [30] David Grudl
  29. Ebo #29

    #28 pykaso, mno.. je .. místo zelené modrá a naopak.. prostě vzhůru nohama ..i rukama.. Malej bug.. to se stává i těm nejlepším :-) ..mno..

    před 11 lety
  30. David Grudl http://davidgrudl.com #30

    avatar

    #28 pykaso, asi tak, já si dnes nastudoval dokumentaci JavaScriptu, naučil se psát objekty a obě udělátka kompletně přepsal. Koukl ses na web zrovna ve chvíli, když jsem je odlaďoval.

    Implementace míchátek do hotových aplikací je teď mnohem, mnohem jednodušší, ať už v provedení popup nebo klasického vložení do stránky.

    Webového míchátko lze nově také volat s názvem barvy, tedy třeba stripe.php?AquaMarine nebo latrinní modř :-)

    před 11 lety
  31. aTeo ;) #31

    Tož díky! Tohle se mi bude opravdu hodit… dávám známku 1+ :)

    před 11 lety
  32. Skic http://skicak.chytrak.cz #32

    Moc pěkný a myslím že to i využiji…

    #19 carnero, Já píšu web v jednom nekomerčním programu a takové míchátko tam je taky, takže nepotřebuju fotošop, ale v tomto případě ani takovéto míchátko, ale určitě ho využiju způsobem aka #7 Petr Václavek

    před 11 lety
  33. mach #33

    avatar

    Pokud to dobre chapu, tak je to zalozeno na prolinani PNG souboru. Jste si jisti, ze ty barvy ruzne prohlizece mixuji opravdu stejne? Viz:

    http://wraith.iglu.cz/…p-alpha.html

    před 11 lety | reagoval [34] David Grudl
  34. David Grudl http://davidgrudl.com #34

    avatar

    #33 machu, bezpochyby ano.

    před 11 lety
  35. Leo http://ww #35

    K tomu prikladu pouziti (vlozeni do stranky), obecne vrele doporucuju deklarovat i globalni promenne pres klicove slovo var, takze

    var mixer = new Cosi;

    Leo

    před 11 lety | reagoval [36] David Grudl
  36. David Grudl http://davidgrudl.com #36

    avatar

    #35 Leo, to je dobrá připomínka. Ve všech příkladech také varpoužívám, jen ve článku chybí, neboť jde o zjednodušení. Stejně tak chyběly handlery myChangeColorHandler apod. Ale nejspíš to není dostatečně patrné, tak ten jsem ten kód doplnil.

    před 11 lety
  37. Leo #37

    Michatko je spatne – ve skutecnosti se tam z barev nic nemicha, je to vybiratko (jezdec vpravo), a pak ztmavovatko a nasycovatko :-) Leo

    před 11 lety
  38. pipik #38

    vyborna vec,chvalim :)<br /><br />
    pro ty co nevedi na co to pouzit: mam nastenku s prispevkama na listeckach,a kazdy uzivatel si muze zvolit barvu listecku.no a tak si kazdy muze hezky namichat tu svoji barvicku :)

    před 11 lety
  39. mike #39

    bomba!!! your mixer's coooooooooooooool!!!

    před 11 lety
  40. luka #40

    takato vec sa zide na spustu veci, teraz ma napada napr. grafove stlpce, alebo cms ako nejaky mixer pre zadavanie napdisu textu vo farbe a pod.. Chce to len fantaziu a nie kopirovanie.

    před 11 lety
  41. Tuzticzka http://www.kodovaneobrazky.profitux.cz #41

    avatar

    #17 juneau, Taky bych rád využil toto „míchátko“ využil jako součást webu a formou linku to je pro mne dost špatně využitelné, zvláště když se mi zatím nepodařilo si celé míchátko(vč. všech PNG) stáhnout.

    před 10 lety

Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.