ธีม

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

ธีมเป็นวิธีปรับแต่งรูปลักษณ์ของ 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. ตั้งค่าธีมในพื้นที่ทำงาน

สร้างธีม

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

ธีมในระบบ

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

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

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

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