لون الحظر

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

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

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

ضبط لون القطعة

يمكن تحديد لون المربّع باستخدام أسلوب كتابة JSON أو JavaScript:

JSON

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

JavaScript

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

يُرجى مراعاة طريقة الكتابة البريطانية. يؤدي عدم ضبط اللون إلى ظهور مربّع أسود.

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

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

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

إنّ أبسط طريقة لتحديد لون المربّع هي رقم يتراوح بين 0 و360، ما يحدّد تدرّج لون المربّع في نموذج hue-saturation-value (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 ما لم تكن لديك موارد مخصّصة للتصميم المرئي. إذا كنت تحاول إعادة تعريف جميع الألوان بهذه الطريقة، ننصحك بالاطّلاع على موارد Material Design من Google حول الألوان.

مراجع الألوان

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

تتضمّن Blockly تسعة ثوابت ألوان في جدول السلاسل، تتوافق مع فئات صندوق الأدوات، بالإضافة إلى لون مميز للمتغيّرات الديناميكية:

'%{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 يتيح استخدام المراجع. أُنشأها جون هنتر، الذي كان متخصصًا أيضًا يسمح بأن تكون الألوان مترجَمة، إذا لزم الأمر.

المخاوف المتعلّقة بتسهيل الاستخدام

تستخدِم Blockly اللون كإشارة قوية حول دور كلّ مربّع، ولجمع المربّعات معًا. بالنسبة للكتل المضمنة، تعد هذه الوظيفة الثانوية أو نص على الجزء، وبالتالي ليست تصنيفًا مهمًا. ومع ذلك، عند اختيار لوحة ألوان الكتل، يجب مراعاة عمى الألوان.

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