زمینه های رنگی

یک فیلد رنگی یک رشته را به عنوان 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
    }
  ]
}

جاوا اسکریپت

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 اختیاری
  • یک اعتبار سنجی اختیاری
  • یک نقشه اختیاری از گزینه ها، از جمله:
    • colourOptions
    • colourTitles
    • columns

value باید یک رشته با فرمت #rrggbb باشد. اگر value داده نشود یا value داده شده نامعتبر باشد، اولین ورودی در آرایه رنگ های پیش فرض استفاده خواهد شد.

گزینه های زیر را نیز می توان در JSON تنظیم کرد:

  • colourOptions
  • colourTitles
  • columns

یا می توان آنها را با استفاده از قلاب های جاوا اسکریپت تنظیم کرد.

سریال سازی

JSON

JSON برای یک فیلد رنگی به این صورت است:

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

جایی که FIELDNAME رشته ای است که به یک فیلد رنگی ارجاع می دهد و مقدار آن مقداری است که باید به فیلد اعمال شود. مقدار از همان قوانین ارزش سازنده پیروی می کند.

XML

XML برای یک فیلد رنگی به این صورت است:

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

ویژگی name گره field شامل رشته ای است که به یک فیلد رنگی ارجاع می دهد و متن درونی گره مقداری است که باید به فیلد اعمال شود. مقدار متن داخلی از قوانینی مشابه با مقدار سازنده پیروی می کند.

توجه داشته باشید که پس از سریال‌زدایی و سریال‌سازی مجدد، تمام مقادیر متن داخلی با فرمت #rrggbb خواهد بود. این گاهی اوقات هنگام ایجاد تفاوت در فضاهای کاری مهم است.

سفارشی سازی

گزینه های ویرایشگر

تابع setColors را می توان برای تنظیم گزینه های رنگ یک فیلد رنگی استفاده کرد. آرایه‌ای از رشته‌های رنگی را می‌گیرد، که باید در قالب #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 انجام می شود.

جاوا اسکریپت

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

تغییر رنگ را بر اساس میدان رنگ آن مسدود کنید