रंग के खेत

कलर फ़ील्ड में स्ट्रिंग, 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

कलर फ़ील्ड के लिए एक्सएमएल ऐसा दिखता है:

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

field नोड के name एट्रिब्यूट में कलर फ़ील्ड का रेफ़रंस देने वाली स्ट्रिंग होती है. नोड का अंदरूनी टेक्स्ट, फ़ील्ड पर लागू की जाने वाली वैल्यू है. इनर टेक्स्ट वैल्यू, कंस्ट्रक्टर की वैल्यू के समान नियमों का पालन करती है.

ध्यान दें कि डीसीरियलाइज़्ड (पार्स) होने और क्रम से लगाने के बाद, सभी अंदरूनी टेक्स्ट वैल्यू #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;
}

रंग को इसके रंग फ़ील्ड के आधार पर बदलने वाला रंग ब्लॉक करें