צבע הבלוק

ברוב האפליקציות Blockly משתמשים במגוון צבעי בלוקים כדי לקבץ באופן חזותי את הבלוקים לקטגוריות. הבלוקסים שכלולים ב-Blockly מחולקים לכמה קטגוריות, והצבעים שלהם תואמים לצבעים של הקטגוריות השונות בסרגל הכלים במודעות הדגמה:

צבעים נוספים בבלוק נגזרים מהצבע הראשי. לדוגמה, בלוקים של צללים הם גרסה לא רוויה של הצבע הראשי וצבעי הגבולות הם גרסה כהה יותר.

טיפ: אם אתם רוצים יותר שליטה בצבעי הגוון או הגבולות, כדאי לקרוא על איך מגדירים עיצוב.

הגדרת צבע הבלוק

ניתן להגדיר את צבע הבלוק בסימון JSON או JavaScript:

JSON

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

JavaScript

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

שימו לב לאיות הבריטי. אם לא תגדירו את הצבע, יופיע בלוק שחור.

פורמטים של צבעים

אפשר לתת את הערך colour בפורמט HSV או הקסדצימלי.

ערך גוון-רוויה

הדרך הפשוטה ביותר להגדיר את הצבע של בלוק היא מספר בין 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 picker. מזינים את הערכים הקבועים של הרוויה והערך ב-Blockly (ברירת המחדל היא 45% ו-65%, בהתאמה), ואז מחליקים את הגוון לצבע הרצוי. משתמשים במספר הגוון הזה בתור הערך של colour.

הקסדצימלי

מומלץ מאוד להשתמש במרחב הצבעים HSV, אבל Blockly תומך בצבעים של בלוקים שצוינו כערכים הקסדצימליים #RRGGBB. אומנם זה יכול להקל על תיאום עם צבעים אחרים של אפליקציות (למשל, סגנונות ב-CSS) ועיצוב. (למשל Photoshop), זהו סיכון עיצוב שעלול להוביל בלוקים לא מתואמים, אם לא נבחרו בקפידה.

אם אין לכם משאבים ייעודיים לעיצוב חזותי, מומלץ לעבוד במסגרת המגבלות של מרחב הצבעים HSV. אם אתם מנסים להגדיר מחדש את כל הצבעים באופן הזה, כדאי לעיין במשאבי העיצוב של 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 כבר תומך בהפניות. הוא מאפשרת גם להוסיף צבעים localized, במקרה הצורך.

בעיות שקשורות לנגישות

הבלוק משתמש בצבע כרמז ברור לגבי התפקיד של כל בלוק ולקיבוץ בלוקים שלמים. בבלוקים הכלולים, האפשרות הזו משנית לטקסט בבלוק, ולכן היא לא מאפיין קריטי. עם זאת, כשבוחרים לוח צבעים של ריבועים, חשוב להביא בחשבון עיוורון צבעים.

ב-Blockly יש כמה נושאים כדי להתאים לחלק מסוגי הלקות בראיית צבעים. זה דף כולל דוגמאות 7, 12 ו-15 צבעים לוחות בניסיון למקסם את ההבחנה בין הצורות הנפוצות ביותר של עיוורון צבעים. חשוב לשים לב שהפעולה הזו לא תמפה ל-7, 12 או 15 קטגוריות של חסימות ב-Blockly, כי חלק מהגוונים צריכים להיות שמורים לבלוקים של צללים ולשדות.