حقول الألوان

يخزِّن حقل الألوان السلسلة بصفتها 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;
}

منع تغيير اللون بناءً على حقل اللون