Web Color Picker
June 16, 2009 | Snippets | en | fr
InDesign is definitely not a solution for web designers. For example, look at the Swatches panel, isn't it the worst tool to select or create “web colors” in the #rrggbb hexadecimal format? Fortunately, the ScriptUI elements bring a way to build our own “Web Color Picker”, interacting with the swatches.
The subfolder ExtendScript Toolkit CS4/SDK/Samples/ of the Adobe Utilities installation gives some really good snippets for advanced scripting. You'll find here a script named ColorPicker.jsx, which simply displays a Color Picker floating palette with three RGB sliders linked to three text fields:
This script provides a perfect pattern for a more creative implementation. Basically, I customized the RGBPickerComponent
for it to work with hexadecimal entries. I also added a strict mode checkbox, which limits the range [#00-#FF] to the strict web colors (#00, #33, #66, #99, #FF, #FF for each channel). All this is implemented in the TWebColorSlider
class.
JavaScript Pieces
The master class, TWebColorPicker
, controls the three TWebColorSlider
instances and reflects the specified color in the rgbSwatch
button. Here I use the technique demonstrated in the Adobe original script: “The RGB swatch is implemented as a Group
element with a Button
that completely fills it. We use a Group
because a Group's graphics.backgroundColor
can be set, so we set it to the currently selected RGB color. We put a Button
inside this Group
to demonstrate making the swatch ‘active’, and to show a technique for making the Button
be essentially transparent, by defining an onDraw
handler for it that does not draw the background
of the button, but only its borders...”
In the script WebColorPicker.js, many properties and methods are emulated as private, because there was no reason to leave those features in the interface of TWebColorSlider
and TWebColorPicker
. This is the reason why the code is so different from the one from Adobe. With JavaScript, it is possible to simulate private members with variables (data or functions) declared inside the constructor. When you need to set some access for a private member, you only need to define a public method —in the form this.myMethod
— inside the constructor. This way, myMethod
can handle the internal variables, like a bridge.
Another interesting (small) piece of code is the toHexa
method added to the Number
prototype. It returns the hexadecimal representation (String
) of the considered number:
/*str*/Number.prototype.toHexa = function(/*int*/digits) //-------------------------------------- // Outputs this number as an hexadecimal string // containing at least <digits> digits (zero-filled) { var r = this.toString(16).toUpperCase(); while (r.length < digits) r = '0'+r; return(r); }
WebColorPicker Demo
Comments
Ahhhhhh ! L'incroyable surprise de voir enfin, de mes yeux vus, le nouveau site de Marc…! C'est beau, pro, riche, bien écrit…!
Et pratique !!!!!!!
Je te souhaite 1000 années de bonheur…! Et quelques picaillons…!!
Merci Jean-Christophe pour ce coup d'envoi. On va tâcher d'être à la hauteur.
Encore une fois, j'ai trouvé le tuyau sur Urbanbike. Hop, dans mes flux RSS ;-). Et je ne peux qu'abonder dans le sens de J.-C. : beau, pro, riche, bien écrit, pratique, indispensable… un bonheur. 1000 choses aussi de ma part.
Je me suis aussi souvenu qu'il y avait des scripts sur BlogNot!, entre autres. Je viens, enfin (oui, je mérite des baffes !), d'essayer EANDesign. Pourquoi si tard ? Je pensais qu'il ne fonctionnait pas sous CS4.
Vraiment génial, trop band… (si je peux me permettre).
Merci infiniment Marc (et merci J.-C.)
C'est bon de se sentir accueilli comme ça!
Pour info, les scripts publiés sur BlogNot! vont migrer progressivement vers Indiscripts, au gré de leur mises à jour. Ce sera le cas d'EANDesign, qui attend quelques améliorations de la mort, quoique déjà fonctionnel sous ID CS4.
Merci pour ces encouragements!
Marc,
Je viens de regarder ton script.
J'ai pas de mot.
Incroyable la différence entre le dialogue qui paraît simple et la pofondeur de ton script.
Bravo.
Décidément, c'est la fête cette semaine: Indiscripts a reçu un total de presque dix commentaires tous sujets confondus, et rien que des compliments!
Merci Loïc. Bonne route à toi à et OTODesign.
@+
Marc
"InDesign is definitely not a solution for web designers." Well, the issue of web-safe RGB colors aside, it's actually a great solution for web designers!
Here's how: Make your visual design in ID, screengrab it, export the slices from PS, and export slick, polished XHTML from ID. Then, all you need is some custom CSS to make it all hang together.
I have made several websites this way, I have recommended it to some of my students who have made their websites this way -- it's slick, fast and easy, and beats doing awkward, slow design-coding in Dreamweaver in countless ways.
Oh, and thanks for your neat RGB web-safe color-picker script! But now most users have 24-bit screen setups, so the old web-safe 8-bit palette just isn't important any longer, IMHV.
Thanks for such an interesting article here. Picking colors is not an easy thing and sometimes you can sit by the computer for hours till you pick the superb color for your website. Despite the fact that this article is written in French, I have understood almost everything using my vocabulary. Thanks one more time and keep publishing such great articles in the future too.