Couleur du bloc

La plupart des applications Blockly utilisent différentes couleurs de bloc pour regrouper visuellement les blocs. en catégories. Les blocs fournis avec Blockly incluent plusieurs catégories, dont les couleurs sont reflétées par les différentes catégories de barre d'outils dans les démonstrations :

Les autres couleurs du bloc sont dérivées de la couleur principale. Par exemple, les blocs d'ombre sont une version désaturée de la couleur principale, et les couleurs de bordure sont une version plus sombre.

Conseil : Si vous souhaitez contrôler davantage les couleurs du bloc d'ombre ou de la bordure, découvrez comment définir un thème.

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 est généré.

Formats de couleurs

La valeur colour peut être indiquée au format HSV ou hexadécimal.

Valeur des teintes

La manière la plus simple de définir la couleur d'un bloc est un nombre compris entre 0 et 360, définissant la teinte du bloc dans couleur tee-saturation-value (HSV) du modèle.

L'utilisation de la technologie HSV avec une saturation et une valeur fixe pour toutes les couleurs de bloc vous permet de sélectionner couleur de bloc tout en s'assurant que tous les blocs partagent une palette cohérente.

La saturation et les valeurs peuvent être adaptées à 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 couleurs proposent l'espace colorimétrique HSV, comme le sélecteur HSV. Entrer dans Blockly les constantes de saturation et de valeur (les valeurs par défaut sont respectivement 45% et 65 %), puis faire glisser la teinte vers la couleur choisie. Utilisez ce numéro de teinte comme valeur colour.

Hexadécimal

L'utilisation de l'espace de couleur HSV est vivement recommandée, mais Blockly accepte les couleurs de bloc spécifiées en tant que valeurs hexadécimales #RRGGBB. Bien que cela puisse faciliter coordonnent les couleurs avec d'autres couleurs (par exemple, les styles en CSS) et le design de l'application. (par exemple, Photoshop), il s'agit d'un risque de conception qui peut entraîner des blocs non coordonnés s'il n'est pas choisi avec soin.

À moins que vous n'ayez des ressources de conception visuelle dédiées, nous vous recommandons d'appliquer les contraintes de l'espace colorimétrique HSV. Si vous essayez de redéfinir toutes les couleurs de cette manière, consultez les ressources Material Design de Google couleur.

Références de couleurs

Souvent, plusieurs blocs partagent la même couleur et centralise cette dernière les définitions facilitent la gestion des couleurs et l'ajout de nouveaux blocs de la bonne couleur. Les couleurs de bloc peuvent utiliser des références de table de chaînes pour ce faire.

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 il est pratique, car la notation JSON est déjà compatible avec les références. Il 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 bloc de couleurs, le daltonisme doit être pris en compte.

Blockly fournit plusieurs thèmes dans un effort pour soigner certains types de déficience de la vision des couleurs. Ce contient les exemples de couleurs 7, 12 et 15. palettes qui tentent de maximiser la distinction entre les formes les plus courantes de le daltonisme. Notez que cela ne correspond pas à 7, 12 ou 15 catégories de blocages. dans Blockly, car certaines nuances doivent être réservées aux blocs et aux champs Shadow.