Kolom warna

Kolom warna menyimpan string sebagai value, dan string sebagai text. value adalah string dengan format #rrggbb, sedangkan text-nya mungkin berupa string dengan format #rgb jika memungkinkan.

Kolom warna

Kolom warna dengan editor terbuka

Kolom warna di blok yang diciutkan

yang Dipicu oleh Tren

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 warna mengambil hal berikut:

  • value opsional
  • validator opsional
  • peta opsi opsional, termasuk:
    • colourOptions
    • colourTitles
    • columns

value harus berupa string dalam format #rrggbb. Jika tidak ada value yang diberikan atau value yang diberikan tidak valid, entri pertama dalam array warna default akan digunakan.

Opsi berikut juga dapat disetel di JSON:

  • colourOptions
  • colourTitles
  • columns

Atau dapat disetel menggunakan hook JavaScript.

Serialisasi

JSON

JSON untuk kolom warna terlihat seperti berikut:

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

Dengan FIELDNAME adalah string yang merujuk ke kolom warna, dan nilainya adalah nilai yang akan diterapkan ke kolom tersebut. Nilai ini mengikuti aturan yang sama dengan nilai konstruktor.

XML

XML untuk kolom warna terlihat seperti berikut:

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

Atribut name node field berisi string yang merujuk ke kolom warna, dan teks dalam node adalah nilai yang akan diterapkan ke kolom. Nilai teks bagian dalam mengikuti aturan yang sama dengan nilai konstruktor.

Perlu diketahui bahwa setelah di-deserialisasi dan diserialisasi ulang, semua nilai teks bagian dalam akan memiliki format #rrggbb. Hal ini terkadang penting saat membedakan ruang kerja.

Penyesuaian

Opsi editor

Fungsi setColours dapat digunakan untuk menyetel opsi warna kolom warna. Fungsi ini memerlukan array string warna, yang harus ditentukan dalam format #rrggbb, dan array tooltip opsional. Jika array tooltip tidak disediakan, array tooltip default akan digunakan.

Tooltip dan warna dicocokkan berdasarkan indeks array, bukan berdasarkan nilai. Jika array warna lebih panjang dari array tooltip, tooltip untuk warna tambahan akan menjadi nilai #rrggbb.

Fungsi setColumns menetapkan jumlah kolom di pemilih warna.

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

Hal ini dilakukan menggunakan ekstensi 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 kolom warna yang disesuaikan

Secara opsional, warna, tooltip, dan kolom default dapat diganti secara global. Ini berarti mereka akan memengaruhi semua kolom warna, bukan kolom tertentu.

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;

Membuat validator warna

Nilai kolom warna adalah string format #rrggbb, sehingga setiap validator harus menerima string format #rrggbb, dan menampilkan string format #rrggbb, null, atau undefined.

Berikut adalah contoh validator yang mengubah warna blok agar sesuai dengan warna kolom.

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

Blok yang berubah warna berdasarkan kolom warnanya