Rack de couleurs Web
June 16, 2009 | Snippets | fr | en
InDesign n'est résolument pas un outil de choix pour les webdesigners. Il n'est que d'observer la palette Nuancier pour s'en convaincre : rien n'est prévu pour créer facilement des « couleurs Web » au format hexadécimal #rrvvbb (comme sous Photoshop). Heureusement, les composants ScriptUI offrent un moyen pratique d'intégrer à InDesign un panneau dédié aux couleurs hexa et de le faire interagir avec le nuancier.
Si vous avez la curiosité de fouiner dans le sous-dossier ExtendScript Toolkit CS4/SDK/Samples/ de l'installation des Adobe Utilities, vous y dénicherez d'excellents squelettes de scripts pour une utilisation avancée. Un bon exemple est le script nommé ColorPicker.jsx. Il affiche dans une palette flottante un éditeur de couleurs RVB assorti de trois glissières (une pour chaque canal) :
Ce script est un modèle idéal pour une application plus créative. Au départ, je me suis contenté de customiser la classe RGBPickerComponent
de façon à la faire travailler avec des valeurs hexadécimales. J'ai alors ajouté une case à cocher « strict mode » qui permet de réduire l'intervalle [#00-#FF] aux couleurs Web strictes (#00, #33, #66, #99, #FF, #FF pour chaque canal). Tout cela est implémenté au sein de la classe TWebColorSlider
.
Aspects JavaScript
La classe principale, TWebColorPicker
, contrôle les trois instances de TWebColorSlider
et reflète la couleur spécifiée dans le bouton rgbSwatch
. J'utilise ici la technique mise en œuvre dans le script original d'Adobe : « L'échantillon RVB (RGB swatch) est implémenté comme un Group
[au sens ScriptUI] dont l'espace est totalement occupé par un simple bouton (Button
). Nous utilisons un Group
parce que sa propriété graphics.backgroundColor
peut être définie : nous lui affectons la couleur RVB sélectionnée. Nous plaçons un bouton à l'intérieur de ce Group
pour rendre l'échantillon actif et illustrer un procédé [ingénieux!] grâce auquel le bouton restera essentiellement transparent : on définit pour cela la méthode onDraw
de façon à ce qu'elle ne redessine pas le fond (background
) du bouton, mais uniquement ses bordures... »
Dans mon script WebColorPicker.js, j'ai préféré privatiser de nombreuses propriétés et méthodes qu'il ne me semblait pas pertinent d'exposer dans l'interface des classes TWebColorSlider
et TWebColorPicker
. C'est pourquoi le code s'éloigne quand même beaucoup de celui fourni par Adobe. En JavaScript, les membres dits privés sont simulés par de simples variables (données ou fonctions) déclarées à l'intérieur du constructeur de la classe. Lorsque le besoin s'en fait sentir, on peut alors entr'ouvrir l'accès à ces membres privés via des méthodes publiques (de la forme this.maMethode
) qui sont définies elles aussi à l'intérieur du constructeur. Elles peuvent ainsi manipuler les variables internes. Il s'agit là en quelque sorte d'une passerelle sécurisée (elle ne pourrait pas être construite de l'extérieur, ni même au niveau des déclarations prototype
).
À noter en passant une petite méthode utilitaire greffée sur l'objet Number
et retournant la représentation hexadécimale (String
) du nombre considéré :
/*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.