ब्लॉक का रंग

ब्लॉक किए गए ज़्यादातर ऐप्लिकेशन, ब्लॉक को कैटगरी में विज़ुअल तौर पर ग्रुप करने के लिए, कई तरह के ब्लॉक रंगों का इस्तेमाल करते हैं. Blockly के साथ भेजे गए ब्लॉक में कई कैटगरी होती हैं, जिनमें डेमो में अलग-अलग टूलबार कैटगरी के रंग दिखाए गए होते हैं:

फ़ाइल फ़ोल्डर का स्क्रीनशॉट, जिसमें ब्लॉक के हर रंग का उदाहरण दिया गया है.

ब्लॉक पर दूसरे रंग, मुख्य रंगों से ही लगाए जाते हैं. उदाहरण के लिए, शैडो ब्लॉक मुख्य रंग का फीका किया हुआ वर्शन होता है और बॉर्डर के रंग गहरे रंग के होते हैं.

ब्लॉक का रंग सेट करें

ब्लॉक के रंग को JSON या JavaScript नोटेशन में तय किया जा सकता है:

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

ब्रिटिश स्पेलिंग पर ध्यान दें. रंग सेट न कर पाने पर नतीजे काले रंग के ब्लॉक में दिखते हैं.

कलर फ़ॉर्मैट

colour वैल्यू, एचएसवी या हेक्स फ़ॉर्मैट में दी जा सकती है.

ह्यू-सैचुरेशन-वैल्यू

ब्लॉक का रंग तय करने का सबसे आसान तरीका है, 0 से 360 के बीच की कोई संख्या दिखाना. इससे hue-saturation-value (HSV) कलर मॉडल में ब्लॉक का कलर तय होता है.

एचएसवी कलर स्पेक्ट्रम

सभी ब्लॉक रंगों के लिए सैचुरेशन और तय वैल्यू के साथ एचएसवी का इस्तेमाल करने से ब्लॉक कलर चुना जा सकता है. साथ ही, यह पक्का किया जा सकता है कि सभी ब्लॉक एक ही पैलेट के साथ दिखें.

नीचे दिए गए फ़ंक्शन को कॉल करके, हर ऐप्लिकेशन के लिए सेचुरेशन और वैल्यू को अपनाया जा सकता है:

Blockly.utils.colour.setHsvSaturation(0.45) // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.utils.colour.setHsvValue(0.65) // 0 (inclusive) to 1 (exclusive), defaulting to 0.65

कई कलर पिकर में एचएसवी कलर स्पेस दिया जाता है. जैसे, एचएसवी पिकर. Blockly का सैचुरेशन और वैल्यू कॉन्सटेंट डालें (डिफ़ॉल्ट तौर पर यह क्रम 45% और वैल्यू कॉन्सटेंट 45% है). इसके बाद, रंग को चुने गए रंग पर स्लाइड करें. इस ह्यू नंबर को colour वैल्यू के तौर पर इस्तेमाल करें.

हेक्साडेसिमल

हमारा सुझाव है कि एचएसवी कलर स्पेस का इस्तेमाल करें. हालांकि, ब्लॉकली #RRGGBB हेक्साडेसिमल के तौर पर बताए गए कलर को ब्लॉक करती है. इससे, ऐप्लिकेशन के दूसरे रंगों (जैसे कि सीएसएस में स्टाइल) और डिज़ाइन ऐप्लिकेशन (जैसे, Photoshop) का एक डिज़ाइन है, जो ऐसे डिज़ाइन के जोखिम की वजह से हो सकता है. अगर ऐसा सावधानी से न चुना जाए, तो ब्लॉक का क्रम तय नहीं होगा.

खराब ढंग से चुने गए रंगों का उदाहरण.

अगर आपके पास खास तौर पर विज़ुअल डिज़ाइन वाले संसाधन न हों, तो हमारा सुझाव है कि एचएसवी कलर स्पेस की पाबंदियों को ध्यान में रखकर काम करें. अगर इस तरह से सभी रंगों के बारे में बताना है, तो रंगों के बारे में Google के मटीरियल डिज़ाइन वाले संसाधन देखें.

कलर रेफ़रंस

अक्सर, कई ब्लॉक में एक ही रंग होता है और कलर डेफ़िनिशन को एक ही जगह से तय करने से, कलर मैनेज करना और सही रंग के नए ब्लॉक जोड़ना आसान हो जाता है. ब्लॉक कलर ऐसा करने के लिए स्ट्रिंग टेबल के रेफ़रंस का इस्तेमाल कर सकता है.

ब्लॉक किए गए तरीके से, स्ट्रिंग टेबल में नौ कलर कॉन्स्टेंट शामिल होते हैं, जो टूलबॉक्स कैटगरी के हिसाब से होते हैं. साथ ही, डाइनैमिक वैरिएबल के लिए एक अलग रंग भी शामिल करते हैं:

'%{BKY_LOGIC_HUE}'
'%{BKY_LOOPS_HUE}'
'%{BKY_MATH_HUE}'
'%{BKY_TEXTS_HUE}'
'%{BKY_LISTS_HUE}'
'%{BKY_COLOUR_HUE}'
'%{BKY_VARIABLES_HUE}'
'%{BKY_VARIABLES_DYNAMIC_HUE}'
'%{BKY_PROCEDURES_HUE}'

स्ट्रिंग की इन वैल्यू का इस्तेमाल, JSON फ़ॉर्मैट और block.setColour(..), दोनों में किया जा सकता है.

Blockly.Msg में जोड़कर, कलर कॉन्स्टेंट जोड़े जा सकते हैं:

// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');

स्थानीय भाषा के मुताबिक बनाई गई स्ट्रिंग टेबल में रंगों को स्टोर करना असामान्य लग सकता है, लेकिन यह आसान है, क्योंकि JSON नोटेशन में पहले से ही रेफ़रंस मौजूद होते हैं. अगर ज़रूरी हो, तो रंगों की जानकारी स्थानीय भाषा में भी उपलब्ध कराई जा सकती है.

सुलभता से जुड़ी समस्याएं

ब्लॉक किए हुए ब्लॉक में, हर ब्लॉक के काम के बारे में साफ़ तौर पर बताने और ब्लॉक को एक साथ ग्रुप करने के लिए, कलर का इस्तेमाल किया जाता है. शामिल किए गए ब्लॉक के लिए, यह कीमत ब्लॉक पर मौजूद टेक्स्ट के मुकाबले सेकंडरी है, इसलिए यह ज़रूरी एट्रिब्यूट नहीं है. हालांकि, ब्लॉक कलर पटल चुनते समय, कलर ब्लाइंडनेस पर ध्यान देना चाहिए.

ब्लॉकी, रंगों की पहचान करने में कुछ तरह की कमी को पूरा करने की कोशिश के तहत कई थीम उपलब्ध कराता है. इस पेज में 7, 12, और 15 रंगों वाले पैलेट के उदाहरण दिए गए हैं. इनमें रंगों की पहचान करने के आम तरीकों के बारे में बताया गया है. ध्यान दें कि यह Blockly में 7, 12 या 15 ब्लॉक कैटगरी पर मैप नहीं होगा, क्योंकि कुछ शेड शैडो ब्लॉक और फ़ील्ड के लिए रिज़र्व होने चाहिए.