La plupart des applications Blockly utilisent différentes couleurs de bloc pour regrouper visuellement les blocs en catégories. Les blocs fournis avec Blockly comprennent plusieurs catégories, dont les couleurs sont mises en miroir par les différentes catégories de la barre d'outils dans les démonstrations:
Des couleurs supplémentaires sur le bloc proviennent de la couleur principale. Par exemple, les blocs d'ombres constituent une version désaturée de la couleur principale, tandis que les couleurs de bordure sont une version plus sombre.
Définir la couleur du bloc
La couleur du bloc peut être définie dans les notations JSON ou JavaScript:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Notez l'orthographe britannique. Si la couleur n'est pas définie, un bloc noir s'affiche.
Formats de couleurs
La valeur colour peut être indiquée au format HSV ou Hex.
Valeur de saturation des teintes
La manière la plus simple de définir la couleur d'un bloc est un nombre compris entre 0 et 360. La teinte du bloc est définie dans le modèle de couleur Tein-Saturation-Value (HSV).
L'utilisation de la HSV avec saturation et valeur fixes pour toutes les couleurs de bloc vous permet de sélectionner une couleur de bloc tout en vous assurant que tous les blocs partagent une palette cohérente.
Vous pouvez adapter la saturation et les valeurs à chaque application en appelant les fonctions suivantes:
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
Plusieurs sélecteurs de couleur offrent l'espace de couleur HSV, comme le sélecteur HSV. Saisissez les constantes de saturation et de valeur de Blockly (les valeurs par défaut sont respectivement de 45% et 65 %), puis faites glisser la teinte vers la couleur de votre choix. Utilisez ce nombre de teinte comme valeur colour.
Hexadécimal
Nous vous recommandons vivement d'utiliser l'espace colorimétrique HSV, mais Blockly accepte les couleurs de bloc spécifiées sous forme de valeurs hexadécimales #RRGGBB. Bien que cela puisse faciliter la coordination avec d'autres couleurs d'application (par exemple, les styles en CSS) et les applications de conception (par exemple, Photoshop), il s'agit d'un risque lié à la conception qui peut entraîner des blocs non coordonnés s'il n'est pas choisi avec soin.
Sauf si vous disposez de ressources de conception visuelle dédiées, il est recommandé de respecter les contraintes de l'espace de couleur HSV. Si vous essayez de redéfinir toutes les couleurs de cette manière, consultez les ressources Material Design de Google sur les couleurs.
Références de couleurs
Souvent, plusieurs blocs partagent la même couleur. Le fait de centraliser les définitions des couleurs simplifie la gestion des couleurs et l'ajout de nouveaux blocs de la couleur appropriée. Pour ce faire, les couleurs de bloc peuvent utiliser des références à un tableau de chaînes.
Blockly inclut neuf constantes de couleur dans le tableau de chaînes, correspondant aux catégories de la boîte à outils, ainsi qu'une couleur distincte pour les variables dynamiques:
'%{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}'
Ces valeurs de chaîne peuvent être utilisées à la fois dans les définitions JSON et dans block.setColour(..).
Vous pouvez ajouter vos propres constantes de couleur en les ajoutant à Blockly.Msg:
// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Le stockage des couleurs dans la table de chaînes de localisation peut sembler inhabituel, mais c'est pratique, étant donné que la notation JSON est déjà compatible avec les références. Elle permet également de localiser les couleurs, si nécessaire.
Problèmes d'accessibilité
Blockly utilise la couleur comme indice fort sur le rôle de chaque bloc et pour regrouper les blocs. Pour les blocs inclus, cette affordance est secondaire par rapport au texte du bloc et n'est donc pas un attribut critique. Toutefois, lorsque vous choisissez une palette de couleurs de blocs, vous devez tenir compte du daltonisme.
Blockly propose plusieurs thèmes afin de répondre à certains types de déficience de la vision des couleurs. Cette page inclut les exemples 7, 12 et 15 palettes de couleurs qui tentent de distinguer au maximum les formes de daltonisme les plus courantes. Notez que cela ne correspondrait pas à 7, 12 ou 15 catégories de blocs dans Blockly, car certaines nuances doivent être réservées aux blocs et aux champs Shadow.