שדות צבע

שדה צבע שומר מחרוזת בתור value שלה, ומחרוזת בתור text שלה. הערך value הוא מחרוזת בפורמט #rrggbb, ואילו text יכול להיות מחרוזת בפורמט #rgb אם אפשר.

שדה צבע

שדה צבע עם עורך פתוח

שדה צבע בבלוק מכווץ

יצירה

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "FIELDNAME",
      "colour": "#ff4040",
      "colourOptions":
        ['#ff4040', '#ff8080', '#ffc0c0',
         '#4040ff', '#8080ff', '#c0c0ff'],
      "colourTitles":
        ['dark pink', 'pink', 'light pink',
         'dark blue', 'blue', 'light blue'],
      "columns": 3
    }
  ]
}

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(new Blockly.FieldColour('#ff4040',
            {
                "colourOptions":
                  ['#ff4040', '#ff8080', '#ffc0c0',
                   '#4040ff', '#8080ff', '#c0c0ff'],
                "colourTitles":
                  ['dark pink', 'pink', 'light pink',
                   'dark blue', 'blue', 'light blue'],
                "columns": 3
            }), 'FIELDNAME');
  }
};

בנאי הצבעים לוקח את הדברים הבאים:

• שדה value אופציונלי
• validator אופציונלי
• מפה אופציונלית של אפשרויות, כולל:
  • colourOptions
  • colourTitles
  • columns

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

ניתן להגדיר את האפשרויות הבאות גם ב-JSON:

• colourOptions
• colourTitles
• columns

לחלופין, אפשר להגדיר אותם באמצעות JavaScript hooks.

עריכה טורית

JSON

ה-JSON של שדה צבע נראה כך:

{
  "fields": {
    "FIELDNAME": "#ff0000"
  }
}

כאשר FIELDNAME הוא מחרוזת שמפנה לשדה צבע, והערך הוא הערך שיש להחיל על השדה. הערך פועל לפי אותם כללים כמו הערך של ה-constructor.

XML

קוד ה-XML של שדה צבע נראה כך:

<field name="FIELDNAME">#ff0000</field>

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

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

התאמה אישית

אפשרויות עריכה

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

התאמת הסברים וצבעים מבוססת על אינדקס מערך, ולא על ערך. אם מערך הצבעים ארוך ממערך ההסבר הקצר, הערך של #rrggbb בהסברים הקצרים על הצבעים הנוספים יהיה הערך שלהם.

הפונקציה setColumns קובעת את מספר העמודות בבוחר הצבעים.

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "COLOUR",
      "colour": "#ff4040"
    }
  ],
  "extensions": ["set_colours_extension"]
}

Blockly.Extensions.register('set_colours_extension',
  function() {
    var field = this.getField("COLOUR");
    field.setColours(
      ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
      ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
  });

הפעולה הזו מתבצעת באמצעות תוסף JSON.

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    var field = new Blockly.FieldColour('#ff4040');
    field.setColours(
        ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
        ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(field, 'COLOUR');
  }
};

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

Blockly.FieldColour.COLOURS = [
    '#ff4040', '#ff8080', '#ffc0c0',
    '#4040ff', '#8080ff', '#c0c0ff'];
Blockly.FieldColour.TITLES = [
    'dark pink', 'pink', 'light pink',
    'dark blue', 'blue', 'light blue'];
Blockly.FieldColour.COLUMNS = 3;

יצירת כלי לתיקוף צבעים

הערה: מידע כללי על מאמתים זמין במאמר מאמתים.

הערך של שדה צבע הוא מחרוזת בפורמט #rrggbb, כך שכל כלי התיקוף צריכים לקבל את המחרוזת של פורמט #rrggbb ולהחזיר את המחרוזת של פורמט #rrggbb, null או undefined.

לפניכם דוגמה לכלי תיקוף שמשנה את צבע הבלוק כך שיתאים לצבע השדה.

function(newValue) {
  this.getSourceBlock().setColour(newValue);
  return newValue;
}

לחסום שינוי צבע על סמך שדה הצבע שלו