Erstellen einer Farbklasse und eines Farbmappers für Ihre Anwendung
Die Klasse colors verwendet 147 benannte Farben, die vom W3C empfohlen werden, und es ist einfach, zusätzliche Attribute zu den Farben hinzuzufügen.
Ich habe einige Diagramme mit Chart.js implementiert und musste Farben aus meiner Anwendung Flask an die Vorlage übergeben.
Das Diagramm ist ein Liniendiagramm und die Anzahl der Linien kann variieren. Mit dem Diagramm zeige ich auch eine Tabelle mit den (numerischen) Werten, die im Diagramm verwendet werden.
Die Linien haben verschiedene Farben, die ich aus einer Liste von Farben auswähle. Die Tabelle der Zeilenwerte hat eine Spalte für jede Zeile. Ich möchte, dass die Kopfzelle einer Spalte die gleiche Farbe hat wie die Farbe der Zeile.
Das war der Moment, in dem ich daran dachte, eine Farbklasse zu erstellen.
Farbe und Farbnamen
Zu Beginn habe ich einfach ein paar Farben aus einem Beispiel genommen, das ich gefunden hatte. Aber ab einem bestimmten Punkt wollte ich mehr Flexibilität. Im Internet gibt es die 'CSS Color Module Level 3' Spezifikation, siehe Links unten, die eine Liste von 147 benannten Farben enthält, wie z.B.:
- aliceblue
- antiquewhite
- aqua
- aquamarin
- azurblau
- beige
- Biskuit
- schwarz
- usw.
Schön.
Die CSSColor-Klasse
Ich wollte, dass meine Farben Objekte sind wie:
- css_colors.red
- css_colors.skyblue
mit Attributen:
- hex_code
- rgb_code
In dem Code Python wird die Farbe wie folgt verwendet:
css_colors.red.hex_code
css_colors.skyblue.hex_code
Die beiden Klassen sind:
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)
Holen Sie sich die Farben in unserer Klasse
Gehen Sie auf die oben genannte Webseite und kopieren Sie alle 147 Farbzeilen, indem Sie die Maus über die Liste ziehen. Fügen Sie diese dann in Ihren bevorzugten Editor ein. Das sieht dann so aus:
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
Verwenden Sie nun in Ihrem Editor reguläre Ausdrücke, um die Farbklassen zu erstellen. Mein Editor ist Geany und ich verwende den folgenden:
Suchen Sie nach:
^\s+(.*?)\s+(.*?)\s+(\d+),(\d+),(\d+)$
Ersetzen durch:
CSSColor(name='\1', hex_code='\2', rgb_code='rgb(\3, \4, \5)'),
Das Ergebnis:
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)'),
Nun kopieren wir dies in die CSSColors-Klasse:
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)
Das war's. Um die Farben zu verwenden, instanziieren wir das Objekt:
css_colors = CSSColors()
Natürlich instanziieren wir dieses Objekt nur einmal in unserer Anwendung. Nun können wir die Farben wie folgt verwenden:
css_colors.red
css_colors.red.hex_code
Ein Diagramm mit Linienfarben
Aber wir müssen noch mehr tun. Ich möchte mehr Flexibilität und auch meine eigenen Farbnamen und Farbattribute hinzufügen. Anstatt rot, blau, etc. zu verwenden, möchte ich Farbnamen wie:
- Linie1
- Linie2
- ...
- Zeile9
Und ich möchte Klassennamen hinzufügen, auf die ich in meinen Jinja HTML Vorlagen verweisen kann. Hierfür verwende ich eine Basisklasse:
css-class-background-<color>
und füge ihr dann den Farbnamen hinzu. Der Klassenname wird in diesem Fall:
css-class-background-line1
Die Klasse AppColors
Für unsere Anwendung erstellen wir die Klassen AppColor und AppColors. In der Klasse AppColors erstellen wir Linienfarben für die Diagramme und fügen das Attribut css_class_background_color zu den Linienfarben hinzu.
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,
)
Hier gibt es nicht wirklich viel Magie.
Verwendung der Farben
Beispiele für die Verwendung der Farben:
- eine css-Farbe
- die Farbenliste
- eine Linienfarbe
- die Liste der Linienfarben
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))
Und das Ergebnis ist:
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)
Beachten Sie, dass die Linienfarben ein zusätzliches Attribut haben.
Um die CSS-Stilklassen in der Vorlage Jinja HTML zu erzeugen, müssen wir app_colors.chart_line_colors an die Vorlage übergeben:
return = render_template(
...
chart_line_colors=app_colors.chart_line_colors
)
In der Vorlage iterieren wir die Farben:
<style>
{%- for color in chart_line_colors -%}
.{{ color.css_class_background_color }} {
background-color: {{ color.hex_code }};
{%- endfor -%}
</style>
Das Ergebnis:
.css-class-background-line1 {
background-color: #00ffff;
}
.css-class-background-line2 {
background-color: #ffff00;
}
.css-class-background-line3 {
background-color: #faebd7;
}
Und schließlich fügen wir in unserem Code beim Generieren der Diagrammtabellendaten für die Zeilendatensätze die CSS-Klassen der Zeilenfarben zu den Spaltenüberschriften hinzu.
Verwendung der Farbklasse in Flask
Wenn wir dies in Flask verwenden, ändern wir unsere AppColors-Klasse und fügen eine init_app()-Methode hinzu.
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,
):
...
Dann machen wir in factory.py etwas wie:
app_colors = AppColors()
def create_app():
app = Flask()
...
app_colors.init_app(app)
Jetzt können wir das app_colors-Objekt in unserer Anwendung verwenden (vielleicht möchten Sie das app_colors-Objekt zu einem Attribut des app-Objekts machen).
Blau ist nicht blau
Vielleicht möchten Sie die Klasse AppColors auch für andere Dinge verwenden, z. B. für alle Ihre Menüs. Dann haben Sie eine Hintergrundfarbe, eine Textfarbe, eine Rahmenfarbe, usw. Normalerweise regeln Sie dies in CSS, aber Sie können dies auch mit der AppColor-Klasse tun.
Anstatt fest kodierte Werte zu verwenden, definieren Sie die Farben wie oben beschrieben:
- menu_text_color
- menu_background_color
- menu_border_color
Sie können mit der Textfarbe Schwarz beginnen und diese später in Rot ändern. In der Klasse AppColor ordnen wir die Farben nach unserem Geschmack zu.
Zusammenfassung
Für meine Anwendung mit Diagrammen wollte ich Linienfarben, die leicht geändert werden können und auch in die Vorlage Jinja HTML exportiert werden können. Zuerst habe ich 147 Farben von der Webseite 'CSS Color Module Level 3' gekratzt und eine CCSColors-Klasse erstellt. Der nächste Schritt bestand darin, eine AppColors-Klasse für meine Anwendung zu erstellen. Hier fügte ich neue benannte Farben hinzu, die auf den CSSClass -Farben basieren. Außerdem fügte ich ein (css_class)-Attribut für die neuen Farben hinzu.
Links / Impressum
CSS Color Module Level 3
https://www.w3.org/TR/css-color-3
Mehr erfahren
Colors
Neueste
- Ausblenden der Primärschlüssel der Datenbank UUID Ihrer Webanwendung
- Don't Repeat Yourself (DRY) mit Jinja2
- SQLAlchemy, PostgreSQL, maximale Anzahl von Zeilen pro user
- Anzeige der Werte in den dynamischen Filtern SQLAlchemy
- Sichere Datenübertragung mit Public Key Verschlüsselung und pyNaCl
- rqlite: eine hochverfügbare und distverteilte SQLite -Alternative
Meistgesehen
- Verwendung von Pythons pyOpenSSL zur Überprüfung von SSL-Zertifikaten, die von einem Host heruntergeladen wurden
- Verwendung von UUIDs anstelle von Integer Autoincrement Primary Keys mit SQLAlchemy und MariaDb
- Verbindung zu einem Dienst auf einem Docker -Host von einem Docker -Container aus
- PyInstaller und Cython verwenden, um eine ausführbare Python-Datei zu erstellen
- SQLAlchemy: Verwendung von Cascade Deletes zum Löschen verwandter Objekte
- Flask RESTful API Validierung von Anfrageparametern mit Marshmallow-Schemas