ธีม

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

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

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

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

สำคัญ: โค้ดใน Blockly ใช้การสะกด colour แบบไม่ใช่สหรัฐอเมริกา คุณกำหนดค่าสีทั้งหมดเป็นค่าสีหรือค่าฐานสิบหกก็ได้

รูปแบบบล็อก

รูปแบบบล็อกประกอบด้วย 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: สีพื้นหลังของเมนูแบบเลื่อนลง
• 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
}

เริ่มหมวก

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

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

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

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

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

สร้างธีม

คุณสร้างธีมได้โดยใช้คอนสตรัคเตอร์หรือใช้ 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 มีสคริปต์ที่จะรับแผนที่ของสีหรือค่าฐานสิบหก และคำนวณสีรองและสีสามรอง สคริปต์จะอยู่ในโฟลเดอร์ สคริปต์/ธีม

ธีมในระบบ

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

• คอนทราสต์สูง
• ตาบอดสีเขียว/ตาบอดสีแดง
• Tritanopia

นอกจากนี้ เรายังมี

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