angle-uparrow-clockwisearrow-counterclockwisearrow-down-uparrow-leftatcalendarcard-listchatcheckenvelopefolderhouseinfo-circlepencilpeoplepersonperson-fillperson-plusphoneplusquestion-circlesearchtagtrashx

Créer une classe de couleurs et un mappeur de couleurs pour votre application

La classe colors utilise 147 couleurs nommées recommandées par le W3C et il est facile d'ajouter des attributs supplémentaires aux couleurs.

27 novembre 2021
Dans Autre
post main image
https://pixabay.com/users/engin_akyurt-3656355/

J'implémentais des graphiques avec Chart.js et j'avais besoin de passer les couleurs de mon application Flask au modèle.
Le graphique est un graphique linéaire et le nombre de lignes peut varier. Avec le graphique, je montre également un tableau avec les valeurs (numériques) utilisées dans le graphique.

Les lignes ont des couleurs différentes, je les choisis dans une liste de couleurs. Le tableau des valeurs des lignes comporte une colonne pour chaque ligne. Je veux que la cellule d'en-tête d'une colonne soit de la même couleur que celle de la ligne.

C'est à ce moment que j'ai pensé à créer une classe de couleur.

Couleur et noms de couleurs

Lorsque j'ai commencé, j'ai simplement choisi quelques couleurs à partir d'un exemple que j'avais trouvé. Mais à un certain moment, j'ai voulu plus de flexibilité. Sur Internet, il y a la spécification 'CSS Color Module Level 3', voir les liens ci-dessous, qui vous donne une liste de 147 couleurs nommées, comme :

  • aliceblue
  • blanc antique
  • aqua
  • aigue-marine
  • azur
  • beige
  • bisque
  • noir
  • etc.

Agréable.

La classe CSSColor

Je voulais que mes couleurs soient des objets comme :

  • css_colors.red
  • css_colors.skyblue

ayant des attributs :

  • hex_code
  • rgb_code

Dans le code Python la couleur est utilisée comme :

css_colors.red.hex_code
css_colors.skyblue.hex_code

Les deux classes sont :

class CSSColor:
    
    def __init__(
        self,
        name=None,
        hex_code=None,
        rgb_code=None,
    ):
        self.name = name
        self.hex_code = hex_code
        self.rgb_code = rgb_code

    def __repr__(self):
        return 'CSSColor({}, {}, {})'.format(self.name, self.hex_code, self.rgb_code)


class CSSColors:

    def __init__(
        self,
    ):
        self.colors = [
            # we put the colors here
            CSSColor( ... ),
            CSSColor( ... ),
            # more colors
            CSSColor( ... ),
        ]

        for color in colors:
            setattr(self, color.name, color)

Obtenir les couleurs de notre classe

Allez sur la page web mentionnée ci-dessus et copiez les 147 lignes de couleur, en faisant glisser la souris sur la liste. Puis collez ceci dans votre éditeur préféré. Cela ressemble à :

        aliceblue     #f0f8ff     240,248,255
        antiquewhite     #faebd7     250,235,215
        aqua     #00ffff     0,255,255
        aquamarine     #7fffd4     127,255,212
        ...
        yellow     #ffff00     255,255,0
        yellowgreen     #9acd32     154,205,50 

Maintenant, dans votre éditeur, utilisez des expressions régulières pour créer les classes de couleurs. Mon éditeur est Geany et j'utilise ce qui suit :

Rechercher :

^\s+(.*?)\s+(.*?)\s+(\d+),(\d+),(\d+)$

Remplacer par :

CSSColor(name='\1', hex_code='\2', rgb_code='rgb(\3, \4, \5)'),

Le résultat :

CSSColor(name='aliceblue', hex_code='#f0f8ff', rgb_code='rgb(240, 248, 255)'),
CSSColor(name='antiquewhite', hex_code='#faebd7', rgb_code='rgb(250, 235, 215)'),
CSSColor(name='aqua', hex_code='#00ffff', rgb_code='rgb(0, 255, 255)'),
CSSColor(name='aquamarine', hex_code='#7fffd4', rgb_code='rgb(127, 255, 212)'),
...
CSSColor(name='yellow', hex_code='#ffff00', rgb_code='rgb(255, 255, 0)'),
CSSColor(name='yellowgreen', hex_code='#9acd32', rgb_code='rgb(154,205,50)'),

Maintenant on copie ça dans la classe CSSColors :

class CSSColors:

    def __init__(
        self,
    ):
        self.colors = [
            CSSColor(name='aliceblue', hex_code='#f0f8ff', rgb_code='rgb(240, 248, 255)'),
            CSSColor(name='antiquewhite', hex_code='#faebd7', rgb_code='rgb(250, 235, 215)'),
            CSSColor(name='aqua', hex_code='#00ffff', rgb_code='rgb(0, 255, 255)'),
            CSSColor(name='aquamarine', hex_code='#7fffd4', rgb_code='rgb(127, 255, 212)'),
            # more colors
            CSSColor(name='yellow', hex_code='#ffff00', rgb_code='rgb(255, 255, 0)'),
            CSSColor(name='yellowgreen', hex_code='#9acd32', rgb_code='rgb(154,205,50)'),
        ]
        for color in self.colors:
            # make color an attribute of this object
            setattr(self, color.name, color)

C'est tout. Pour utiliser les couleurs, nous instancions l'objet :

css_colors = CSSColors()

Bien sûr, nous n'instancions cet objet qu'une seule fois dans notre application. Maintenant nous pouvons utiliser les couleurs comme :

css_colors.red
css_colors.red.hex_code

Un graphique avec des couleurs de ligne

Mais nous devons faire plus. Je veux plus de flexibilité et aussi ajouter mes propres noms de couleurs et attributs de couleurs. Au lieu d'utiliser le rouge, le bleu, etc., je veux des noms de couleurs comme :

  • ligne1
  • ligne2
  • ...
  • ligne9

Et je veux ajouter des noms de classe auxquels je peux me référer dans mes modèles Jinja HTML . Pour cela, j'utilise une classe de base :

css-class-background-<color>

et j'y ajoute ensuite le nom de la couleur. Le nom de la classe devient dans ce cas :

css-class-background-line1

La classe AppColors

Pour notre application, nous créons les classes AppColor et AppColors. Dans la classe AppColors, nous créons des couleurs de ligne pour les graphiques et nous ajoutons également l'attribut css_class_background_color aux couleurs de ligne.

class AppColor(CSSColor):

    def __repr__(self):
        return 'AppColor({}, {}, {}, {})'.\
        format(self.name, self.hex_code, self.rgb_code, getattr(self, 'css_class_background_color', None))


class AppColors(CSSColors):

    def __init__(
        self,
        css_class_background_color_template=None,
    ):
        CSSColors.__init__(self)

        # use specified css_class or use default
        self.css_class_background_color_template = css_class_background_color_template or 'css-class-background-'

        # here we can change / add colors
        self.chart_line_colors = [
            self.new_app_color(name='line1', color=self.aqua),
            self.new_app_color(name='line2', color=self.yellow),
            # more colors
            self.new_app_color(name='line3', color=self.antiquewhite),
        ]

        # add the new colors to object
        for color in self.chart_line_colors:
            # add css class attribute to color
            setattr(color, 'css_class_background_color', self.css_class_background_color_template + color.name)
            # make color an attribute of this object
            setattr(self, color.name, color)

    def new_app_color(
        self,
        name=None,
        color=None,
    ):
        return AppColor(
            name=name or color.name,
            hex_code=color.hex_code,
            rgb_code=color.rgb_code,
        )

Il n'y a pas vraiment de magie ici.

Utilisation des couleurs

Exemples d'utilisation des couleurs :

  • une couleur css
  • la liste des couleurs
  • une couleur de ligne
  • la liste des couleurs de ligne
app_colors = AppColors()

print('\nuse a css color:')
print('app_colors.aqua.hex_code = {}'.format(app_colors.aqua.hex_code))
print('app_colors.yellow.hex_code = {}'.format(app_colors.yellow.hex_code))

print('\nuse the colors list:')
for color in app_colors.colors:
    print('{}'.format(color))

print('\nuse a line color:')
print('app_colors.line2.hex_code = {}'.format(app_colors.line2.hex_code))
print('app_colors.line2.css_class_background_color = {}'.format(app_colors.line2.css_class_background_color))

print('\nuse the line colors list:')
for color in app_colors.chart_line_colors:
    print('{}'.format(color))

Et le résultat est :

use a css color:
app_colors.aqua.hex_code = #00ffff
app_colors.yellow.hex_code = #ffff00

use the colors list:
CSSColor(aliceblue, #f0f8ff, rgb(240, 248, 255))
CSSColor(antiquewhite, #faebd7, rgb(250, 235, 215))
CSSColor(aqua, #00ffff, rgb(0, 255, 255))
CSSColor(aquamarine, #7fffd4, rgb(127, 255, 212))
CSSColor(yellow, #ffff00, rgb(255, 255, 0))
CSSColor(yellowgreen, #9acd32, rgb(154,205,50))

use a line color:
app_colors.line2.hex_code = #ffff00
app_colors.line2.css_class_background_color = css-class-background-line2

use the line colors list:
AppColor(line1, #00ffff, rgb(0, 255, 255), css-class-background-line1)
AppColor(line2, #ffff00, rgb(255, 255, 0), css-class-background-line2)
AppColor(line3, #faebd7, rgb(250, 235, 215), css-class-background-line3)

Notez que les couleurs de ligne ont un attribut supplémentaire.

Pour générer les classes de style CSS dans le modèle Jinja HTML , nous devons passer app_colors.chart_line_colors au modèle :

return = render_template(
    ...
    chart_line_colors=app_colors.chart_line_colors    
)

Dans le template nous itérons les couleurs :

<style>
{%- for color in chart_line_colors -%}
.{{ color.css_class_background_color }} {
    background-color: {{ color.hex_code }};
{%- endfor -%}
</style>

Le résultat :

.css-class-background-line1 {
    background-color: #00ffff;
}
.css-class-background-line2 {
    background-color: #ffff00;
}
.css-class-background-line3 {
    background-color: #faebd7;
}

Et enfin, dans notre code, lorsque nous générons les données du tableau graphique pour les ensembles de données de ligne, nous ajoutons les classes CSS des couleurs de ligne aux en-têtes de colonne.

Utilisation de la classe de couleur dans Flask

Pour utiliser cette classe dans Flask , nous modifions notre classe AppColors et ajoutons une méthode init_app().

class AppColors:

    def __init__(
        self,
        app=None,
    ):
        self.css_class_background_color_template = 'css-class-background-'

    def init_app(
        self,
        app=None,
        css_class_background_color_template=None,
    ):
    ...

Ensuite, dans factory.py , nous faisons quelque chose comme ça :

app_colors = AppColors()

def create_app():

    app = Flask()
    ...
    app_colors.init_app(app)

Maintenant nous pouvons utiliser l'objet app_colors dans notre application (vous pouvez faire de l'objet app_colors un attribut de l'objet app).

Bleu n'est pas bleu

Vous pouvez utiliser la classe AppColors pour d'autres choses, comme tous vos menus. Vous avez alors une couleur d'arrière-plan, une couleur de texte, une couleur de bordure, etc. Habituellement, vous organisez cela en CSS mais vous pouvez également le faire avec la classe AppColor.

Au lieu d'utiliser des valeurs codées en dur, vous définissez les couleurs comme ci-dessus :

  • menu_text_color
  • menu_background_color
  • menu_border_color

Vous pouvez commencer avec une couleur de texte noire et la changer plus tard en rouge. Dans la classe AppColor, nous adaptons les couleurs à notre goût.

Résumé

Pour mon application avec des graphiques, je voulais des couleurs de ligne qui peuvent être modifiées facilement et qui peuvent aussi être exportées vers le modèle Jinja HTML . Tout d'abord, j'ai récupéré 147 couleurs sur la page web 'CSS Color Module Level 3' et j'ai créé une classe CCSColors. L'étape suivante consistait à créer une classe AppColors pour mon application. Ici, j'ai ajouté de nouvelles couleurs nommées basées sur les couleurs CSSClass . J'ai également ajouté un attribut (css_class) aux nouvelles couleurs.

Liens / crédits

CSS Color Module Level 3
https://www.w3.org/TR/css-color-3

En savoir plus...

Colors

Laissez un commentaire

Commentez anonymement ou connectez-vous pour commenter.

Commentaires

Laissez une réponse

Répondez de manière anonyme ou connectez-vous pour répondre.