ธีม

ธีมเป็นวิธีปรับแต่งรูปลักษณ์ของ Blockly คุณสามารถปรับแต่งสีบล็อก สีหมวดหมู่ และคอมโพเนนต์บางอย่างผ่านคลาส Themes หากต้องการปรับแต่งคอมโพเนนต์เพิ่มเติม เราจะระบุชื่อธีมเป็นคลาสใน div ของการแทรก ซึ่งจะช่วยให้ผู้ใช้เปลี่ยนรูปลักษณ์ของคอมโพเนนต์ที่ไม่รองรับผ่าน CSS ได้ เป้าหมายหลักของเราในการสร้างธีมคือการช่วยให้นักพัฒนาแอปสร้างประสบการณ์การใช้งาน Blockly ที่เข้าถึงได้มากขึ้น

หมายเหตุ: วิธีที่ง่ายที่สุดในการจัดรูปแบบ Blockly คือการใช้ธีม หากต้องการการควบคุมแบบละเอียดยิ่งขึ้น ให้ใช้ CSS

หมายเหตุ: หากต้องการควบคุมสีหลักของบล็อกเท่านั้น แทนที่จะควบคุมลักษณะที่ปรากฏแบบละเอียดมากขึ้น คุณสามารถตั้งค่าสีในการ กำหนดบล็อก แทนการสร้างธีม หากต้องการเปลี่ยนรูปร่างของบล็อกแทน สี ให้ดูข้อมูลเพิ่มเติมเกี่ยวกับ ตัวแสดงผล

พร็อพเพอร์ตี้ของธีม

ธีมคือออบเจ็กต์ที่มีพร็อพเพอร์ตี้หลายรายการ ได้แก่ ธีมฐานที่จะขยาย สไตล์ออบเจ็กต์สำหรับบล็อก หมวดหมู่ คอมโพเนนต์ และแบบอักษร รวมถึงจะใช้หมวกสำหรับบล็อกเริ่มต้นหรือไม่

สำคัญ: โค้ดใน Blockly ใช้การสะกดคำว่า colour แบบที่ไม่ใช่ภาษาอังกฤษแบบอเมริกัน คุณกำหนดพร็อพเพอร์ตี้สีทั้งหมดได้ทั้งในค่าสีหรือค่า Hex

สไตล์บล็อก

สไตล์บล็อกประกอบด้วยช่อง 4 ช่อง ดังนี้

• 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: สีพื้นหลังของ Flyout
• flyoutForegroundColour: สีข้อความป้ายกำกับของ Flyout
• flyoutOpacity: ความทึบของ Flyout
• scrollbarColour: สีแถบเลื่อน
• scrollbarOpacity: ความทึบของแถบเลื่อน
• insertionMarkerColour: สีตัวทำเครื่องหมายการแทรก (ไม่รับชื่อสี)
• insertionMarkerOpacity: ความทึบของตัวทำเครื่องหมายการแทรก
• markerColour: สีของตัวทำเครื่องหมายที่แสดงในโหมดการนำทางด้วยแป้นพิมพ์
• cursorColour: สีของเคอร์เซอร์ที่แสดงในโหมดการนำทางด้วยแป้นพิมพ์

คุณสามารถเปลี่ยนคอมโพเนนต์อื่นๆ ส่วนใหญ่ได้โดยใช้ชื่อธีมใน CSS อย่างไรก็ตาม หากมีคอมโพเนนต์ที่ต้องการเปลี่ยนซึ่งยังไม่ได้เป็นส่วนหนึ่งของรายการนี้และไม่สามารถเปลี่ยนได้โดยใช้ CSS โปรดรายงานปัญหาพร้อมข้อมูลเพิ่มเติม

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

สไตล์แบบอักษร

สไตล์แบบอักษรคือออบเจ็กต์ที่เก็บชุดแบบอักษร ความหนา และขนาดของแบบอักษร

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

หมวกเริ่มต้น

เคล็ดลับ: ดูข้อมูลเพิ่มเติมเกี่ยวกับกรณีการใช้งานหมวกเริ่มต้นใน หน้าการออกแบบแอปพลิเคชัน

หากตั้งค่า startHats: true โดยตรงในออบเจ็กต์ธีม ระบบจะเพิ่มหมวกให้กับบล็อกทั้งหมดที่ไม่มีการเชื่อมต่อก่อนหน้าหรือการเชื่อมต่อเอาต์พุต หากต้องการควบคุมบล็อกที่จะได้รับหมวกอย่างแม่นยำ คุณสามารถใช้ พร็อพเพอร์ตี้สไตล์บล็อกแทน

ธีมที่กำหนดเอง

หากต้องการเพิ่มธีมลงในแอปพลิเคชัน Blockly คุณจะต้องทำดังนี้

1. สร้างธีม
2. เพิ่มชื่อสไตล์
3. ตั้งค่าธีมในพื้นที่ทำงาน

สร้างธีม

คุณสร้างธีมได้โดยใช้เครื่องมือสร้างหรือใช้ 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

เพิ่มชื่อสไตล์

เมื่อสร้างธีมแล้ว เราต้องเพิ่มชื่อสไตล์ลงในการกำหนดบล็อกและหมวดหมู่

หมวดหมู่

หากต้องการใช้สไตล์หมวดหมู่ที่กำหนดไว้ใน categoryStyles ของธีม ให้เพิ่มสไตล์ดังกล่าวลงในการกำหนดหมวดหมู่ ดังนี้

JSON

{
 "kind": "category",
 "name": "Logic",
 "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

บล็อก

หากต้องการใช้สไตล์บล็อกที่กำหนดไว้ใน blockStyles ของธีม ให้เพิ่มสไตล์ดังกล่าวลงในการกำหนดบล็อก ดังนี้

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

ตั้งค่าธีม

นอกจากนี้ คุณยังต้องบอก Blockly ว่าจะใช้ธีมใด การกำหนดธีมหลายรายการที่ใช้ชื่อสไตล์บล็อกและชื่อหมวดหมู่เดียวกันจะช่วยให้ผู้ใช้เลือกธีมที่เหมาะกับตนเองมากที่สุดและเปลี่ยนธีมแบบไดนามิกได้โดยไม่ต้องเปลี่ยนการกำหนดบล็อกเอง

ธีมเริ่มต้น

วิธีที่ดีที่สุดในการตั้งค่าธีมเริ่มต้นคือการรวมตัวเลือกการกำหนดค่า theme ไว้ในการเรียก Blockly.inject คุณสามารถระบุธีมใน JSON หรือ JavaScript

JSON

Blockly.inject('blocklyDiv', {
  theme: {
     "blockStyles" : {
        "list_blocks": {
           "colourPrimary": "#4a148c",
           "colourSecondary":"#AD7BE9",
           "colourTertiary":"#CDB6E9"
        }
     },
     "categoryStyles" : {
        "list_category": {
           "colour": "#4a148c"
        }
     },
     "componentStyles" : {
        "workspaceBackgroundColour": "#1e1e1e"
     }
  },
  ...
});

JavaScript

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

หากไม่ได้ระบุธีม ระบบจะใช้ธีม คลาสสิกเป็นค่าเริ่มต้น

ธีมแบบไดนามิก

หากต้องการเปลี่ยนธีมแบบไดนามิก (เช่น ในกรณีที่อนุญาตให้ผู้ใช้เลือกธีมจากเมนูแบบเลื่อนลง) คุณสามารถเรียก yourWorkspace.setTheme(theme)

สร้างสคริปต์สไตล์บล็อก

Blockly มีสคริปต์ที่จะรับข้อมูลการแมปค่าสีหรือค่า Hex และคำนวณสีรองและสีระดับที่ 3 ให้ คุณดูสคริปต์ได้ ใน โฟลเดอร์ scripts/themes

ธีมในระบบ

Blockly มีธีมจำนวนหนึ่งสำหรับการช่วยเหลือพิเศษ โดยเฉพาะอย่างยิ่งสำหรับภาวะบกพร่องในการมองเห็นสีบางประเภท ดังนี้

• คอนทราสต์สูง
• ภาวะตาบอดสีเขียว/ภาวะตาบอดสีแดง
• ภาวะตาบอดสีน้ำเงิน

นอกจากนี้ เรายังมีธีมต่อไปนี้

• ธีมคลาสสิก
• สมัยใหม่
• โหมดมืด