Erstellen einer Farbklasse und eines Farbmappers für Ihre Anwendung

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