In den meisten Blockly-Apps werden die Blöcke in verschiedenen Farben verwendet, um die Blöcke visuell in Kategorien zu gruppieren. Die mit Blockly gelieferten Blöcke enthalten mehrere Kategorien, wobei die Farben von den verschiedenen Symbolleistenkategorien in den Demos gespiegelt werden:
Die zusätzlichen Farben auf dem Block leiten sich aus der Hauptfarbe ab. Schattenblöcke sind beispielsweise eine entsättigte Version der Hauptfarbe und Rahmenfarben eine dunklere Version.
Blockfarbe festlegen
Die Blockfarbe kann in JSON- oder in JavaScript-Notation definiert werden:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Beachten Sie die britische Schreibweise. Wird keine Farbe festgelegt, erscheint ein schwarzer Block.
Farbformate
Der Wert colour kann im HSV- oder Hex-Format angegeben werden.
Farbton-Sättigungswert
Die einfachste Möglichkeit, die Farbe eines Blocks zu definieren, ist eine Zahl zwischen 0 und 360. Dabei wird der Farbton des Blocks im Farbmodell hue-saturation-value (HSV) definiert.
Wenn Sie HSV verwenden, bei dem die Sättigung und der Wert für alle Blockfarben festgelegt sind, können Sie eine Blockfarbe auswählen und gleichzeitig dafür sorgen, dass alle Blöcke eine zusammenhängende Palette haben.
Die Sättigung und die Werte können durch Aufrufen der folgenden Funktionen für jede Anwendung angepasst werden:
Blockly.utils.colour.setHsvSaturation(0.45) // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.utils.colour.setHsvValue(0.65) // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
Der HSV-Farbraum kann mithilfe mehrerer Farbauswahlen festgelegt werden, z. B. mit der HSV-Auswahl. Geben Sie die Sättigungs- und Wertkonstanten von Blockly ein (die Standardwerte sind 45% bzw. 65 %) und ziehen Sie dann den Farbton in eine ausgewählte Farbe. Verwenden Sie diese Farbtonnummer als colour-Wert.
Hexadezimal
Die Verwendung des HSV-Farbraums wird dringend empfohlen, aber Blockly unterstützt Blockfarben, die als #RRGGBB-Hexadezimalwerte angegeben werden. Dies kann zwar die Koordination mit anderen Anwendungsfarben (z.B. Stilen in CSS) und Designanwendungen (z.B. Photoshop). Dies ist ein Designrisiko, das bei nicht sorgfältiger Auswahl zu unkoordinierten Blöcken führen kann.
Sofern Sie keine speziellen visuellen Designressourcen haben, wird empfohlen, im Rahmen des HSV-Farbraums zu arbeiten. Wenn Sie alle Farben auf diese Weise neu definieren möchten, sollten Sie sich die Material Design-Ressourcen von Google zu Farben ansehen.
Farbreferenzen
Oft haben mehrere Blöcke die gleiche Farbe. Durch die zentrale Farbdefinition wird die Verwaltung der Farben und das Hinzufügen neuer Blöcke der richtigen Farbe vereinfacht. Bei Blockfarben können Sie auf Stringtabellenreferenzen zurückgreifen.
Blockly fügt in die String-Tabelle neun Farbkonstanten ein, die den Toolbox-Kategorien entsprechen, sowie eine eindeutige Farbe für dynamische Variablen:
'%{BKY_LOGIC_HUE}'
'%{BKY_LOOPS_HUE}'
'%{BKY_MATH_HUE}'
'%{BKY_TEXTS_HUE}'
'%{BKY_LISTS_HUE}'
'%{BKY_COLOUR_HUE}'
'%{BKY_VARIABLES_HUE}'
'%{BKY_VARIABLES_DYNAMIC_HUE}'
'%{BKY_PROCEDURES_HUE}'
Diese Stringwerte können sowohl in den JSON-Definitionen als auch in block.setColour(..) verwendet werden.
Sie können eigene Farbkonstanten hinzufügen, indem Sie Blockly.Msg hinzufügen:
// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Das Speichern der Farben in der Lokalisierungsstringtabelle mag ungewöhnlich erscheinen, ist aber praktisch, da die JSON-Notation bereits Verweise auf die Verweise unterstützt. Bei Bedarf können damit auch Farben lokalisiert werden.
Bedenken hinsichtlich der Barrierefreiheit
Blockly setzt Farben als starken Hinweis auf die Rolle der einzelnen Blöcke und zur Gruppierung von Blöcken. Bei den enthaltenen Blöcken ist diese Angabe unter dem Text des Blocks und daher kein kritisches Attribut. Bei der Auswahl einer Farbpalette für den Block sollte jedoch die Farbblindheit berücksichtigt werden.
Blockly bietet mehrere Themes zur Behebung bestimmter Arten von Farbblindheit an. Auf dieser Seite finden Sie Farbpaletten mit den Beispielen 7, 12 und 15, mit denen versucht wird, die Unterscheidung zwischen den häufigsten Formen der Farbenblindheit zu maximieren. Beachten Sie, dass dies keinen 7-, 12- oder 15-Blockkategorien in Blockly zugeordnet werden würde, da einige Schattierungen für Schattenblöcke und -felder reserviert sein sollten.