ฟิลด์สี

ช่องสีจะเก็บสตริงเป็น value และสตริงเป็น text value คือสตริงที่มีรูปแบบ #rrggbb ในขณะที่ text อาจเป็นสตริงที่มีรูปแบบ #rgb หากเป็นไปได้

ฟิลด์สี

ช่องสีที่มีเครื่องมือแก้ไขเปิดอยู่

ช่องสีบนบล็อกที่ยุบอยู่

การสร้างวิดีโอ

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

เครื่องมือสร้างสีจะดำเนินการดังต่อไปนี้

• value (ไม่บังคับ)
• validatorที่ไม่บังคับ
• แผนที่ตัวเลือกที่ไม่บังคับ ได้แก่
  • colourOptions
  • colourTitles
  • columns

value ควรเป็นสตริงในรูปแบบ #rrggbb ถ้าไม่ได้ระบุ value หรือ value ที่ระบุไม่ถูกต้อง ระบบจะใช้รายการแรกในอาร์เรย์สีเริ่มต้น

นอกจากนี้คุณยังตั้งค่าตัวเลือกต่อไปนี้ในรูปแบบ JSON ได้อีกด้วย

• colourOptions
• colourTitles
• columns

หรือจะตั้งค่าโดยใช้ฮุก JavaScript ก็ได้

การทำให้เป็นอนุกรม

JSON

JSON สำหรับช่องสีจะมีลักษณะดังนี้

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

โดย FIELDNAME เป็นสตริงที่อ้างอิงช่องสี และค่าคือค่าที่จะนำไปใช้กับช่องสี ค่าดังกล่าวเป็นไปตามกฎเดียวกันกับค่าตัวสร้าง

XML

XML สำหรับฟิลด์สีจะมีลักษณะดังนี้

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

แอตทริบิวต์ name ของโหนด field มีสตริงที่อ้างอิงช่องสี และข้อความภายในของโหนดคือค่าที่จะนำไปใช้กับช่องนี้ ค่าข้อความภายในเป็นไปตามกฎเดียวกันกับค่าของตัวสร้าง

โปรดทราบว่าหลังจากทำการดีซีเรียลไลซ์และรีซีเรียลแล้ว ค่าข้อความภายในทั้งหมดจะอยู่ในรูปแบบ #rrggbb บางครั้งการดำเนินการนี้ก็มีความสำคัญเมื่อแยกพื้นที่ทำงาน

การปรับแต่งช่อง

ตัวเลือกของเครื่องมือแก้ไข

ใช้ฟังก์ชัน setColours เพื่อตั้งค่าตัวเลือกสีของช่องสี กระบวนการนี้จะเป็นอาร์เรย์ของสตริงสี ซึ่งต้องกำหนดในรูปแบบ #rrggbb และอาร์เรย์ตัวเลือกเคล็ดลับเครื่องมือ หากไม่ได้ระบุอาร์เรย์เคล็ดลับเครื่องมือ ระบบจะใช้อาร์เรย์เคล็ดลับเครื่องมือเริ่มต้น

ระบบจะจับคู่เคล็ดลับเครื่องมือและสีตามดัชนีอาร์เรย์ โดยไม่อิงตามค่า หากอาร์เรย์สียาวกว่าอาร์เรย์เคล็ดลับเครื่องมือ เคล็ดลับเครื่องมือสำหรับสีเพิ่มเติมจะเป็นค่า #rrggbb

ฟังก์ชัน setColumns จะกำหนดจำนวนคอลัมน์ในตัวเลือกสี

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

โดยใช้ส่วนขยาย 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');
  }
};

คุณเลือกลบล้างสี เคล็ดลับเครื่องมือ และคอลัมน์เริ่มต้นได้ทั่วโลก (ไม่บังคับ) ซึ่งหมายความว่าจะส่งผลต่อช่องสีทั้งหมด ไม่ใช่ช่องใดช่องหนึ่ง

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;

การสร้างเครื่องมือตรวจสอบสี

หมายเหตุ: โปรดดูข้อมูลเกี่ยวกับโปรแกรมตรวจสอบโดยทั่วไปที่ผู้ตรวจสอบ

ค่าของช่องสีเป็นสตริงรูปแบบ #rrggbb ดังนั้นโปรแกรมตรวจสอบจะต้องยอมรับสตริงรูปแบบ #rrggbb และแสดงสตริงรูปแบบ #rrggbb, null หรือ undefined

นี่คือตัวอย่างของโปรแกรมตรวจสอบที่เปลี่ยนสีบล็อกให้ตรงกับสีของฟิลด์

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

บล็อกการเปลี่ยนสีตามช่องสี