Campi colore

Un campo colore memorizza una stringa come value e una stringa come suo text. value è una stringa nel formato #rrggbb, mentre text può essere una stringa nel formato #rgb, se possibile.

Campo del colore

Campo del colore con editor aperto

Campo colore su blocco compresso

Creazione

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');
  }
};

Il costruttore dei colori prende in considerazione quanto segue:

  • un value facoltativo
  • Uno validator facoltativo
  • una mappa facoltativa di opzioni, tra cui:
    • colourOptions
    • colourTitles
    • columns

value deve essere una stringa nel formato #rrggbb. Se non viene specificato alcun valore value o se il valore value non è valido, verrà utilizzata la prima voce nell'array di colori predefinito.

Le seguenti opzioni possono essere impostate anche in JSON:

  • colourOptions
  • colourTitles
  • columns

In alternativa, possono essere impostate utilizzando hook JavaScript.

Serializzazione

JSON

Il codice JSON per un campo colore ha il seguente aspetto:

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

Dove FIELDNAME è una stringa che fa riferimento a un campo colore e il valore è il valore da applicare al campo. Il valore segue le stesse regole del valore del costruttore.

XML

L'XML per un campo colore ha il seguente aspetto:

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

L'attributo name del nodo field contiene una stringa che fa riferimento a un campo colore e il testo interno del nodo è il valore da applicare al campo. Il valore di testo interno segue le stesse regole del valore del costruttore.

Tieni presente che, dopo la deserializzazione e la riceralizzazione, tutti i valori di testo interni saranno nel formato #rrggbb. A volte è importante quando si diffondono aree di lavoro.

Funzionalità di

Opzioni dell'editor

La funzione setColours può essere utilizzata per impostare le opzioni di colore di un campo colore. Prevede un array di stringhe di colori, che devono essere definite nel formato #rrggbb, e un array facoltativo di descrizioni comando. Se l'array della descrizione comando non viene fornito, verrà utilizzato l'array della descrizione comando predefinito.

Le descrizioni comando e i colori vengono abbinati in base all'indice dell'array, non in base al valore. Se l'array di colori è più lungo dell'array della descrizione comando, le descrizioni comando per i colori aggiuntivi corrisponderanno al valore #rrggbb.

La funzione setColumns imposta il numero di colonne nel selettore colori.

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);
  });

Per farlo, usa un'estensione 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');
  }
};

Editor del campo colore personalizzato

Facoltativamente, puoi eseguire l'override di colori, descrizioni comando e colonne predefiniti a livello globale. Ciò significa che avranno effetto su tutti i campi dei colori, piuttosto che su un campo specifico.

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;

Creazione di uno strumento di convalida dei colori

Il valore di un campo colore è una stringa di formato #rrggbb, pertanto qualsiasi convalidatore deve accettare una stringa di formato #rrggbb e restituire una stringa di formato #rrggbb, null o undefined.

Ecco un esempio di uno strumento di convalida che cambia il colore del blocco in modo che corrisponda al colore del campo.

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

Blocco che cambia colore in base al relativo campo