لون الحظر

تستخدم معظم تطبيقات Blockly مجموعة متنوعة من ألوان الكتل لتجميع القوالب بصريًا في فئات. تتضمن الكتل التي يتم شحنها باستخدام Blockly عدة فئات، مع انعكاس الألوان على فئات شريط الأدوات المختلفة في العروض التوضيحية:

يتم اشتقاق ألوان إضافية على القطعة من اللون الرئيسي. على سبيل المثال، كتل الظل هي نسخة غير مشبّعة من اللون الرئيسي، وألوان الحدود هي نسخة أغمق.

نصيحة: إذا كنت تريد مزيدًا من التحكّم في ألوان قوالب الظل أو الحدود، يمكنك التعرّف على تحديد مظهر.

ضبط لون الكتلة

ويمكن تحديد لون الكتلة إما من خلال رموز JSON أو JavaScript:

JSON

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

JavaScript

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

دوِّن التهجئة البريطانية. يؤدي تعذّر ضبط اللون إلى ظهور كتلة سوداء.

تنسيقات الألوان

يمكن تقديم قيمة colour بتنسيق HSV أو Hex.

قيمة تشبع اللون

إنّ أبسط طريقة لتحديد لون الكتلة هي استخدام رقم يتراوح بين 0 و360، ويتم تحديد تدرج لون الكتلة في نموذج لون قيمة تشبع اللون (HSV).

يتيح لك استخدام 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

توفِّر العديد من منتقي الألوان مساحة لون HSV، مثل أداة اختيار الألوان HSV. أدخل تشبع اللون وثابت القيمة لـ Blockly (القيم الافتراضية هي 45% و65% على التوالي)، ثم مرر تدرج اللون إلى اللون المختار. استخدِم رقم تدرّج اللون هذا كقيمة colour.

نظام العد الستة عشري

ويُنصَح بشدة باستخدام مساحة لون HSV، مع العِلم بأنّ تطبيق Blockly يتوافق مع ألوان الكتلة المحدَّدة على أنّها أرقام #RRGGBB سداسية عشرية. ويمكن أن يسهّل ذلك التنسيق مع ألوان التطبيقات الأخرى (مثل الأنماط في CSS) وتطبيقات التصميم (مثل Photoshop)، فإن هذا يمثل خطرًا على التصميم قد يؤدي إلى كتل غير منسقة إذا لم يتم اختياره بعناية.

ما لم يكن لديك موارد تصميم مرئي مخصصة، يوصى بالعمل ضمن قيود مساحة لون HSV. وفي حال محاولة إعادة تعريف كل الألوان بهذه الطريقة، ننصحك بالاطّلاع على موارد التصميم المتعدد الأبعاد من 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 يتوافق بالفعل مع المراجع. ويسمح أيضًا بترجمة الألوان، عند الحاجة.

مخاوف بشأن إمكانية الوصول

يستخدم Bluely الألوان كتلميح قوي عن دور كل قطعة ولتجميع القطع معًا. بالنسبة إلى الوحدات المضمّنة، تكون هذه السمة ثانوية بالنسبة إلى النص في الكتلة، لذا فهي ليست سمة مهمة. ومع ذلك، عند اختيار لوحة ألوان كتلة، ينبغي أن يكون عمى الألوان في الاعتبار.

تقدّم قناة Blockly مواضيع متعدّدة في محاولة لاستيعاب بعض أنواع نقص رؤية الألوان. تحتوي هذه الصفحة على أمثلة 7 و12 و15 لوحة ألوان تحاول زيادة التمييز إلى أقصى حد عبر أكثر أشكال عمى الألوان شيوعًا. لاحظ أن هذا لن يتم تعيينه لـ 7 أو 12 أو 15 فئة حظر في Blockly، لأن بعض الظلال يجب حجزها لكتل الظل والحقول.