Colour fields

A colour field stores a string as its value, and a string as its text. Its value is a string with the format #rrggbb, while its text may be a string with the format #rgb if possible.

Colour field

Colour field with editor open

Colour field on collapsed block

Creation

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "FIELDNAME",
      "colour": "#ff0000"
    }
  ]
}

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(new Blockly.FieldColour('#ff0000'), 'FIELDNAME');
  }
};

The colour field constructor takes in an optional value and an optional validator. The value should be a string in the format '#rrggbb'. If no value is given or the given value is invalid, the first entry in the default colours array will be used.

Serialization and XML

The XML for a colour field looks like so:

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

The field node's name attribute contains a string referencing a colour field, and the node's inner text is the value to apply to the field. The inner text value follows the same rules as the constructor value.

Note that after being deserialized and reserialized all of the inner text values will be in the format #rrggbb. This is sometimes important when diff-ing workspaces.

Customization

Editor options

The setColours function can be used to set the colour options of a colour field. It takes in an array of colour strings, which must be defined in #rrggbb format, and an optional array of tooltips. If the tooltip array is not provided, the default tooltip array will be used.

Tooltips and colours are matched based on array index, not based on value. If the colours array is longer than the tooltip array, the tooltips for the extra colours will be their #rrggbb value.

The setColumns function sets the number of columns in the colour picker.

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

This is done using a JSON extension.

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

Customized colour field editor

Optionally, the default colours, tooltips, and columns can be overridden globally. This means they will affect all colours fields, rather than a specific field.

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;

Creating a colour validator

A colour field's value is a #rrggbb format string, so any validators must accept a #rrggbb format string, and return a #rrggbb format string, null, or undefined.

Here is an example of a validator that changes the colour of the block to match the colour of the field.

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

Block changing colour based on its colour field