Champs de couleur

Un champ de couleur stocke une chaîne en tant que value et une chaîne en tant que text. Son value est une chaîne au format #rrggbb, tandis que son text peut être une chaîne au format #rgb si possible.

Champ de couleur

Champ de couleur avec l'éditeur ouvert

Champ de couleur du bloc réduit

Création

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "FIELDNAME",
      "colour": "#ff4040",
      "colourOptions":
        ['#ff4040', '#ff8080', '#ffc0c0',
         '#4040ff', '#8080ff', '#c0c0ff'],
      "colourTitles":
        ['dark pink', 'pink', 'light pink',
         'dark blue', 'blue', 'light blue'],
      "columns": 3
    }
  ]
}

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(new Blockly.FieldColour('#ff4040',
            {
                "colourOptions":
                  ['#ff4040', '#ff8080', '#ffc0c0',
                   '#4040ff', '#8080ff', '#c0c0ff'],
                "colourTitles":
                  ['dark pink', 'pink', 'light pink',
                   'dark blue', 'blue', 'light blue'],
                "columns": 3
            }), 'FIELDNAME');
  }
};

Le constructeur de couleur utilise les éléments suivants:

  • un value facultatif
  • un validator facultatif
  • Un mappage facultatif d'options, y compris :
    • colourOptions
    • colourTitles
    • columns

L'élément value doit être une chaîne au format #rrggbb. Si aucune valeur value n'est indiquée ou si l'value donnée n'est pas valide, la première entrée du tableau de couleurs par défaut est utilisée.

Les options suivantes peuvent également être définies au format JSON:

  • colourOptions
  • colourTitles
  • columns

Vous pouvez également les définir à l'aide de hooks JavaScript.

sérialisation

JSON

Le code JSON d'un champ de couleur se présente comme suit:

{
  "fields": {
    "FIELDNAME": "#ff0000"
  }
}

Où FIELDNAME est une chaîne faisant référence à un champ de couleur, et la valeur est la valeur à appliquer au champ. La valeur suit les mêmes règles que la valeur du constructeur.

XML

Le code XML d'un champ de couleur se présente comme suit:

<field name="FIELDNAME">#ff0000</field>

L'attribut name du nœud field contient une chaîne faisant référence à un champ de couleur. Le texte interne du nœud est la valeur à appliquer au champ. La valeur de texte interne suit les mêmes règles que la valeur du constructeur.

Notez qu'après avoir été désérialisées et resérialisées, toutes les valeurs de texte interne sont au format #rrggbb. C'est parfois important lors de la vérification diff. des espaces de travail.

Fonctionnalités

Options de l'éditeur

La fonction setColours permet de définir les options de couleur d'un champ de couleur. Elle se compose d'un tableau de chaînes de couleurs, qui doit être défini au format #rrggbb, et d'un tableau d'info-bulles facultatif. Si le tableau d'info-bulles n'est pas fourni, le tableau d'info-bulles par défaut est utilisé.

Les info-bulles et les couleurs sont mises en correspondance en fonction de l'index du tableau et non en fonction de la valeur. Si le tableau de couleurs est plus long que le tableau d'info-bulles, les info-bulles des couleurs supplémentaires correspondront à leur valeur #rrggbb.

La fonction setColumns définit le nombre de colonnes dans le sélecteur de couleur.

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "COLOUR",
      "colour": "#ff4040"
    }
  ],
  "extensions": ["set_colours_extension"]
}

Blockly.Extensions.register('set_colours_extension',
  function() {
    var field = this.getField("COLOUR");
    field.setColours(
      ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
      ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
  });

Pour ce faire, utilisez une extension JSON.

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    var field = new Blockly.FieldColour('#ff4040');
    field.setColours(
        ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
        ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(field, 'COLOUR');
  }
};

Éditeur de champ de couleur personnalisé

Si vous le souhaitez, vous pouvez remplacer les couleurs, les info-bulles et les colonnes par défaut de manière globale. Cela signifie qu'elles affecteront tous les champs de couleur, plutôt qu'un champ spécifique.

Blockly.FieldColour.COLOURS = [
    '#ff4040', '#ff8080', '#ffc0c0',
    '#4040ff', '#8080ff', '#c0c0ff'];
Blockly.FieldColour.TITLES = [
    'dark pink', 'pink', 'light pink',
    'dark blue', 'blue', 'light blue'];
Blockly.FieldColour.COLUMNS = 3;

Créer un outil de validation de couleurs

La valeur d'un champ de couleur est une chaîne au format #rrggbb. Tous les validateurs doivent donc accepter une chaîne de format #rrggbb et renvoyer une chaîne de format #rrggbb, null ou undefined.

Voici un exemple de programme de validation qui modifie la couleur du bloc pour qu'elle corresponde à la couleur du champ.

function(newValue) {
  this.getSourceBlock().setColour(newValue);
  return newValue;
}

Bloc change de couleur en fonction de son champ de couleur