סקר מחקר: נשמח לשמוע על החוויה שלך עם Blockly

דף זה תורגם על ידי Cloud Translation API.

עיצובים

עיצובים הם דרך להתאים אישית את המראה והתחושה של Blockly. אפשר להתאים אישית את צבעי הבלוק, צבעי הקטגוריות ורכיבים מסוימים באמצעות הכיתה Themes. אם רוצים להתאים אישית רכיבים נוספים, אנחנו מספקים את שם העיצוב בתור כיתה ב-div של ההזרקה. כך המשתמשים יכולים לשנות את המראה של רכיבים שלא נתמכים באמצעות CSS. המטרה העיקרית שלנו ביצירת עיצובים היא לעזור למפתחים ליצור חוויות ב-Blockly נגישות יותר.

מאפייני עיצוב

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

סגנון הבלוק

סגנון בלוק מורכב מארבעה שדות:

colourPrimary (חובה) – צבע הרקע של הבלוק.
colourSecondary (אופציונלי) – צבע הרקע אם הבלוק הוא בלוק צל.
colourTertiary (אופציונלי) - צבע הגבול או ההדגשה של הבלוק.
hat (אופציונלי) – הוספת כובע לבלוק, אם הערך מוגדר כ-cap. מידע נוסף על כובע

ריבוע עם חצים שמצביעים על צבע ראשי, צבע משני וצבע שלישי

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

עיצוב יכלול מיפוי של שם סגנון הבלוק לאובייקט של סגנון הבלוק:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

סגנון קטגוריה

סגנון קטגוריה מכיל רק מאפיין צבע.

צבע (חובה) – הצבע של הקטגוריה בכלי. בדרך כלל, הצבעים האלה צריכים להיות זהים ל-colourPrimary ברוב הבלוקסים בקטגוריה. כך המשתמשים יכולים לזהות בקלות אילו בלוקים שייכים לקטגוריה מסוימת.

צילום מסך של תיבת הכלים עם צבעים שונים של קטגוריות

const mathCategory = {
   'colour':'290'
}

עיצוב יכלול מיפוי של שם הקטגוריה לאובייקט של סגנון הקטגוריה:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

סגנונות רכיבים

העיצוב יכול להגדיר את הצבע או הערך של הרכיבים הבאים:

workspaceBackgroundColour: צבע הרקע של סביבת העבודה
toolboxBackgroundColour: צבע הרקע של ארגז הכלים
toolboxForegroundColour: צבע טקסט של קטגוריית ארגז כלים
flyoutBackgroundColour: צבע הרקע של התפריט הנפתח
flyoutForegroundColour: צבע הטקסט של התווית הנפתחת
flyoutOpacity: אטימות התפריט הנפתח
scrollbarColour: הצבע של סרגל הגלילה
scrollbarOpacity: אטימות של סרגל הגלילה
insertionMarkerColour: צבע סמן ההוספה (לא ניתן להזין שמות של צבעים)
insertionMarkerOpacity: שקיפות סמן ההוספה
markerColour: הצבע של הסמן שמוצג במצב הניווט של המקלדת
cursorColour: הצבע של הסמן שמוצג במצב הניווט במקלדת

אפשר לשנות את רוב הרכיבים האחרים באמצעות שם העיצוב ב-CSS. עם זאת, אם יש רכיב שאתם רוצים לשנות, והוא לא נכלל ברשימה הזו ולא ניתן לשנות אותו באמצעות CSS, תוכלו לשלוח דיווח על בעיה עם מידע נוסף.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

סגנונות גופן

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

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

כובעי Start

אם מגדירים את startHats: true ישירות באובייקט של העיצוב, יתווסף כובע לכל הבלוקים ללא חיבורי קלט או פלט קודמים. אם אתם רוצים לשלוט בדיוק באילו בלוקים יופיע הכובע, תוכלו להשתמש במקום זאת במאפיין block style.

עיצובים מותאמים אישית

כדי להוסיף עיצוב לאפליקציית Blockly, צריך לבצע את הפעולות הבאות:

יצירת עיצוב
הוספת שמות של סגנונות
הגדרת העיצוב בסביבת העבודה

יצירת עיצוב

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

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

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

דוגמה לשימוש ב-defineTheme

הוספת שמות של סגנונות

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

קטגוריות

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

חסימות

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

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

הגדרת העיצוב

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

העיצוב הראשוני

הדרך הטובה ביותר להגדיר נושא ראשוני היא לכלול את options.theme בקריאה להזרקה. אפשר לספק את העיצוב ב-JSON או ב-JavaScript.

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

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

עיצובים דינמיים

אם רוצים לשנות את העיצוב באופן דינמי (למשל, אם רוצים לאפשר למשתמשים לבחור עיצוב מתפריט נפתח), אפשר להפעיל את yourWorkspace.setTheme(theme).

יצירת סקריפט של סגנונות בלוקים

ב-Blockly יש סקריפט שמקבל מפה של גוונים או ערכים הקסדצימליים ומחשב את הצבעים המשניים והשלישונים שלהם. הסקריפט נמצא בתיקייה scripts/themes.

עיצובים מובנים

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

יש לנו גם:

עיצוב קלאסי
מודרני
מצב כהה