রঙের ক্ষেত্র

একটি রঙের ক্ষেত্র একটি স্ট্রিংকে তার 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 এর মত দেখাচ্ছে:

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

field নোডের name বৈশিষ্ট্যে একটি স্ট্রিং রয়েছে যা একটি রঙের ক্ষেত্রের উল্লেখ করে এবং নোডের অভ্যন্তরীণ পাঠ্যটি ক্ষেত্রে প্রয়োগ করার মান। অভ্যন্তরীণ টেক্সট মান কনস্ট্রাক্টর মান হিসাবে একই নিয়ম অনুসরণ করে।

মনে রাখবেন যে ডিসিরিয়ালাইজড এবং পুনঃক্রমিককরণের পরে ভিতরের সমস্ত পাঠ্য মান #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;
}

তার রঙ ক্ষেত্রের উপর ভিত্তি করে রঙ পরিবর্তন ব্লক করুন