Pola kolorów

Pole koloru zawiera ciąg znaków jako value, a ciąg znaków jako text. Jej value jest ciągiem znaków w formacie #rrggbb, a jego text może być ciągiem znaków w formacie #rgb, jeśli to możliwe.

Pole koloru

Pole koloru z otwartym edytorem

Pole koloru w zwiniętym bloku

na podstawie trendów

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

Konstruktor kolorów pobiera te informacje:

  • opcjonalnie value
  • opcjonalny validator.
  • opcjonalną mapę opcji, w tym:
    • colourOptions
    • colourTitles
    • columns

Pole value powinno być ciągiem znaków w formacie #rrggbb. Jeśli nie podano value lub wartość value jest nieprawidłowa, używana jest pierwsza pozycja z domyślnej tablicy kolorów.

W formacie JSON możesz też ustawić te opcje:

  • colourOptions
  • colourTitles
  • columns

Można też ustawić je za pomocą zaczepów JavaScript.

Serializacja

JSON

Kod JSON pola koloru wygląda tak:

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

Gdzie FIELDNAME to ciąg znaków odwołujący się do pola koloru, a wartość to wartość do zastosowania do pola. Wartość podlega tym samym regułom co wartość konstruktora.

XML

Kod XML pola koloru wygląda tak:

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

Atrybut name węzła field zawiera ciąg znaków odwołujący się do pola koloru, a wewnętrzny tekst węzła to wartość do zastosowania do pola. Wartość tekstu wewnętrznego podlega tym samym regułom co wartość konstruktora.

Pamiętaj, że po deserializacji i ponownym przekształceniu wszystkie wartości tekstu wewnętrznego będą miały format #rrggbb. Jest to niekiedy ważne, gdy występują różnice między obszarami roboczymi.

Personalizacja

Opcje edytora

Funkcja setColours może służyć do ustawiania opcji koloru pola koloru. Wykorzystuje tablicę ciągów kolorów, które należy zdefiniować w formacie #rrggbb, oraz opcjonalną tablicę etykiet. Jeśli tablica etykiet nie zostanie podana, zostanie użyta domyślna tablica etykiet.

Etykietka i kolory są dopasowywane na podstawie indeksu tablicy, a nie na podstawie wartości. Jeśli tablica kolorów jest dłuższa niż tablica etykiet, etykietki dodatkowych kolorów będą wartością #rrggbb.

Funkcja setColumns określa liczbę kolumn w selektorze kolorów.

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

Użyjesz do tego rozszerzenia 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');
  }
};

Niestandardowy edytor pól koloru

Opcjonalnie domyślne kolory, etykietki i kolumny mogą zostać zastąpione globalnie. Oznacza to, że będą one miały wpływ na wszystkie pola kolorów, a nie tylko na jedno pole.

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;

Tworzenie walidatora kolorów

Wartość pola koloru jest ciągiem znaków formatu #rrggbb, więc wszystkie walidatory weryfikacji muszą zaakceptować ciąg formatu #rrggbb i zwrócić ciąg formatu #rrggbb, null lub undefined.

Oto przykład walidatora, który zmienia kolor bloku, by dopasować go do koloru pola.

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

Bloki, które zmieniają kolor w zależności od pola koloru