SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 188 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > Colorscope > Plugin Colorscope - Pour visualiser les codes couleur

Plugin Colorscope - Pour visualiser les codes couleur

17 février 2010 – par Cyril Marion – commentaires

11 votes

Fonctionnalités

Permet d’afficher un bloc coloré dans le texte d’un article SPIP, à la place du code hexadécimal d’une couleur. Par exemple, si on veut afficher en clair à quoi correspond le code #ffcc00, il suffit d’activer ce plugin, d’écrire le code de la couleur dans le texte, et la couleur apparaîtra.

Exemple pour la couleur #EF5522 : #EF5522

Autre exemple : #ff00ff ceci est le violet de Clèm.

Exemple avec un tableau de couleurs (exemple type d’utilisation pour échanger à propos des couleurs, avec un client ou un prestataire) représentant tout ou partie d’une charte web :

ÉlémentCouleurCode
fond nav bleu-vert #034F4F
Article survolé orange foncé #CFE25D
Article non survolé orange pale #CDEB8B
rubrique N1 non survolé bleu foncé #2C3449
rubrique N+1 non survolé bleu-vert moyen #259993
rubrique survolé bleu-vert pale #45AFA7

Fonctionnement

Seulement 2 fichiers dans le plugin :
-  plugin.xml
-  colorscope_pipelines.php

Le fichier plugin.xml appelle le pipeline « post_typo » :

        <pipeline>
                <nom>post_typo</nom>
                <inclure>colorscope_pipelines.php</inclure>
        </pipeline>

Le fichier colorscope_pipelines.php contient la fonction qui recherche le pattern « un dièse suivi de 6 caractères qui peuvent etre un chiffre ou des lettres comprises entre a et f en minuscules ou majuscules » et qui le remplace par un bloc de 90x20 avec en background la couleur souhaitée :

function colorscope_post_typo($texte) {
        $motif = '`(#[a-fA-F0-9]{6})`';
        $texte = preg_replace($motif, '<span style="display:inline-block;text-align:center;width:90px;height:20px;background-color:$1;color:white">$1</span>', $texte);
        return $texte;
}

Installation :

Installation classique par téléchargement du zip.

Version 0.4.2

Utilité ?

Remplace le code hexa d’une couleur (exemple le code #2f5e35) par une image (exemple : #2f5e35), forcément plus explicite... Sert lorsqu’on discute via des articles SPIP, de maquettes graphiques, évite les copies d’écran pour de tous petits exemples d’images...

Evolutions ?

Pouvoir mettre le code de la couleur, à l’intérieur de l’image, en noir ou en blanc en fonction de la luminance de la couleur. J’ai déja trouvé la fonction permettant de trouver la luminance en fonction de la couleur RVB :

$luminance = 0.2126*$r + 0.7152*$v + 0.0722*$b;

Reste à « découper » la couleur trouvée en ses 3 composantes, puis à décider si le texte sera marqué en noir ou en blanc selon que la luminance sera plus grande ou moins grande que 50%... => fait, merci Arno* !

Pouvoir régler, avec cfg, le style de l’image générée : alignement vertical, autre dispay que inline-block, autres dimensions...

Nota  : la révision [44675] corrige un défaut d’affichage des balise colorscope dans l’interface privée, faisant interpréter deux fois les 6 caractères placés derriere un #. Désormais le style du bloc est défini avec un parametre color exprimé en décimal plutot qu’en hexa.

Voir en ligne : http://plugins.spip.net/colorscope

Dernière modification de cette page le 11 juin 2012

Retour en haut de la page

Vos commentaires

  • Le 20 octobre 2011 à 21:42, par tetue En réponse à : Plugin Colorscope - Pour visualiser les codes couleur

    Chouette idée que ce plugin ! Je viens de l’activer sur mon blog et j’ai quelques soucis :

    -  Les codes couleurs présents dans le code sont parfois (mal) traités par ce plugin, comme par exemple ceux appliqués sur les balises <td> du tableau de cet article.
    -  Idem pour le lien fait dans ce commentaire, qui pète parce qu’il contient cette ancre « #c29381 » :D
    -  Les écritures raccourcies ne sont pas traitées, comme par exemple le #C30 de cet article.
    -  J’ai l’habitude de saisir les codes hexadécimaux entre balises <code>, puisqu’il s’agit de code ;) ce qui empêche ce plugin de les traiter, comme par exemple dans cet article, où il y a trois occurrence de code couleur (#ECE4D6, #8FA042 et #B4C626).
    -  Ce qui me fait penser qu’il faudrait plutôt générer une balise <code>, ce qui sera sémantiquement plus adapté que l’actuel <span>.
    -  Le style généré est contrariant car affecté inline sur l’élément (aïe !). Mieux vaudrait une class, par exemple « hexacolor » ou plutôt « colorcode ». Ou « spip_color » ?

    Par exemple, ce code généré :

    <span style="display:inline-block;text-align:center;width:90px;height:20px;background-color:rgb(210,56,44);color:white">#D2382C</span>

    gagnerait à être remplacé par :

    <code class="spip_color" style="background-color: rgb(210,56,44); color: #FFF;">#D2382C< /code>

    Je viens de faire quelques essais : il n’est pas nécessaire d’affecter davantage de style par défaut.

    De cette façon, il n’y a plus de style contrariant et ceusses qui le souhaitent peuvent facilement affecter le style de leur choix en personnalisant .spip_color dans leur feuille de style.

    Répondre à ce message

  • Le 16 février 2011 à 11:04, par Cyril Marion En réponse à : Plugin Colorscope - Pour visualiser les codes couleur

    Pour information, la révision [44675] du plugin colorscope corrige un défaut d’affichage des balises dans l’interface privée, faisant interpréter deux fois les 6 caractères placés derriere un #. Désormais le style du bloc est défini avec un parametre color exprimé en décimal plutot qu’en hexa.

    Répondre à ce message

  • Le 9 mars 2010 à 13:05, par ARNO* En réponse à : Plugin colorscope

    Salut Cyril,

    Les fonctions qui permettent de manipuler les couleurs, de façon à écrire du texte en blanc sur une couleur foncée, et du texte en noir sur une couleur claire sont déjà dans SPIP :

    • Le 9 mars 2010 à 16:46, par Cyril Marion En réponse à : Plugin colorscope

      Hello Arno*,
      Merci pour la suggestion !
      Je viens de l’intégrer au plugin (révision 35994).

      Le code modifié du fichier colorscope_pipeline.php donne :

      function colorscope_post_typo($texte) {
       $motif = '`(#[a-fA-F0-9]{6})`';
       $texte = preg_replace_callback($motif, 'bloc_colorscope', $texte);
       return $texte;
      }

      function bloc_colorscope($couleur) {
       $fond = '#'.couleur_inverser(couleur_extreme($couleur[0]));
       $bloc = '<span style="display:inline-block;text-align:center;width:90px;height:20px;background-color:'.$couleur[0].';color:'.$fond.'">'.$couleur[0].'</span>';
       return $bloc;
      }

      Bonne utilisation !

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Le Couteau Suisse

    4 mai 2007 – 1814 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • Enluminures typographiques V3

    25 juillet 2009 – 192 commentaires

    Les Enluminures typographiques V3 permettent d’ajouter au Porte plume les raccourcis typographiques présents dans le Plugin Barre Typographique Enluminée. C’est une extension du PortePlume. Pour la documentation d’usage, se reporter à celle du (...)

  • MathJax pour SPIP

    26 novembre 2010 – 46 commentaires

    La librairie MathJax est capable d’afficher des mathématiques (équations, fractions, ...) à la manière de Tex, mais sans image ! Tout en JavaScript ! Présentation de la librairie MathJax est une librairie très puissante permettant d’afficher des (...)

  • CKeditor 3.0

    4 octobre 2009 – 1226 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • spiPDF : générer des contenus sur mesure en PDF

    16 février 2011 – 224 commentaires

    Le plugin spiPDF génère des fichiers au format PDF d’article ou de tout autre élément SPIP, simplement à partir d’un squelette construit au format HTML 4 et facile à modifier. Avertissement de sécurité Ce plugin a fait l’objet d’une faille de (...)

Ça spipe par là