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

אפשר לציין ערכי צבעים בפורמט HSV או RGB או באמצעות שם של צבע.

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

הדרך הפשוטה ביותר להגדיר צבע היא מספר בין 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.

RGB

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

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

שמות של צבעים

אפשר גם לציין צבעים באמצעות שמות הצבעים שמוגדרים על ידי W3C.

הפניות לצבעים

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

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. בנוסף, היא מאפשרת לעבד את הצבעים בהתאם לשוק, אם יש צורך.