Farbfelder

In einem Farbfeld werden ein String als value und ein String als text gespeichert. Sein value ist ein String im Format #rrggbb, während seine text ein String im Format #rgb sein kann.

Farbfeld

Farbfeld bei geöffnetem Editor

Farbfeld in minimiertem Block

Erstellung

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

Der Color-Konstruktor übernimmt Folgendes:

  • value (optional)
  • einen optionalen validator
  • Optionale Übersicht mit Optionen, darunter:
    • colourOptions
    • colourTitles
    • columns

value sollte ein String im Format #rrggbb sein. Wenn kein value angegeben wird oder der angegebene value-Wert ungültig ist, wird der erste Eintrag des Standard-Farbarrays verwendet.

Die folgenden Optionen können auch in JSON festgelegt werden:

  • colourOptions
  • colourTitles
  • columns

Sie können aber auch mithilfe von JavaScript-Hooks festgelegt werden.

Serialisierung

JSON

Der JSON-Code für ein Farbfeld sieht so aus:

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

Dabei ist FIELDNAME ein String, der auf ein Farbfeld verweist, und der Wert ist der Wert, der auf das Feld angewendet werden soll. Der Wert folgt denselben Regeln wie der Konstruktorwert.

XML

Der XML-Code für ein Farbfeld sieht so aus:

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

Das Attribut name des field-Knotens enthält einen String, der auf ein Farbfeld verweist. Der innere Text des Knotens ist der Wert, der auf das Feld angewendet werden soll. Der innere Textwert folgt denselben Regeln wie der Konstruktorwert.

Nach der Deserialisierung und Reserialisierung haben alle inneren Textwerte das Format #rrggbb. Das ist manchmal beim Unterteilen von Arbeitsbereichen wichtig.

Anpassbare

Editor-Optionen

Mit der Funktion setColours können die Farboptionen eines Farbfelds festgelegt werden. Sie verwendet ein Array von Farbstrings, die im Format #rrggbb definiert sein müssen, und ein optionales Array mit Kurzinfos. Wenn kein Array mit Kurzinfos angegeben ist, wird das Standardarray für Kurzinfos verwendet.

Kurzinfos und Farben werden anhand des Arrayindex und nicht anhand des Werts abgeglichen. Wenn das Farbarray länger ist als das Array mit Kurzinfo, entsprechen die Kurzinfos für die zusätzlichen Farben dem jeweiligen #rrggbb-Wert.

Mit der Funktion setColumns wird die Anzahl der Spalten in der Farbauswahl festgelegt.

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

Dies geschieht mithilfe einer JSON-Erweiterung.

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

Benutzerdefinierter Farbfeldeditor

Optional können die Standardfarben, Kurzinfos und Spalten global überschrieben werden. Sie wirken sich also auf alle Farbfelder und nicht nur auf ein bestimmtes Feld aus.

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;

Farbvalidierung erstellen

Der Wert eines Farbfelds ist ein #rrggbb-Formatstring. Alle Validierungen müssen daher einen #rrggbb-Formatstring akzeptieren und einen #rrggbb-Formatstring, null oder undefined zurückgeben.

Hier sehen Sie ein Beispiel für eine Validierung, die die Farbe des Blocks so ändert, dass sie mit der Farbe des Felds übereinstimmt.

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

Blockieren der Farbänderung basierend auf dem Farbfeld