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.
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
Récent
- Masquer les clés primaires de la base de données UUID de votre application web
- Don't Repeat Yourself (DRY) avec Jinja2
- SQLAlchemy, PostgreSQL, nombre maximal de lignes par user
- Afficher les valeurs des filtres dynamiques SQLAlchemy
- Transfert de données sécurisé grâce au cryptage à Public Key et à pyNaCl
- rqlite : une alternative à haute disponibilité et dist distribuée SQLite
Les plus consultés
- Utilisation des Python's pyOpenSSL pour vérifier les certificats SSL téléchargés d'un hôte
- Utiliser UUIDs au lieu de Integer Autoincrement Primary Keys avec SQLAlchemy et MariaDb
- Connexion à un service sur un hôte Docker à partir d'un conteneur Docker
- Utiliser PyInstaller et Cython pour créer un exécutable Python
- SQLAlchemy : Utilisation de Cascade Deletes pour supprimer des objets connexes
- Flask RESTful API validation des paramètres de la requête avec les schémas Marshmallow