থিম হল Blockly-এর চেহারা ও অনুভূতি কাস্টমাইজ করার একটি উপায়। আপনি Themes ক্লাসের মাধ্যমে ব্লক কালার, ক্যাটাগরির রং এবং নির্দিষ্ট কিছু উপাদান কাস্টমাইজ করতে পারেন। আপনি যদি অতিরিক্ত উপাদানগুলি কাস্টমাইজ করতে চান, আমরা ইনজেকশন div একটি ক্লাস হিসাবে থিমের নাম প্রদান করি। এটি ব্যবহারকারীদের CSS-এর মাধ্যমে কোনো অসমর্থিত উপাদানের চেহারা পরিবর্তন করতে দেয়। থিম তৈরি করার ক্ষেত্রে আমাদের প্রধান লক্ষ্য হল ডেভেলপারদের আরও অ্যাক্সেসযোগ্য ব্লকলি অভিজ্ঞতা তৈরি করার ক্ষমতা দেওয়া।
থিম বৈশিষ্ট্য
একটি থিম হল একটি অবজেক্ট যার বিভিন্ন বৈশিষ্ট্য রয়েছে: বেস থিম যা থেকে প্রসারিত হবে, ব্লক, বিভাগ, উপাদান এবং ফন্টগুলির জন্য একটি স্টাইল অবজেক্ট এবং স্টার্ট ব্লকের জন্য হ্যাট ব্যবহার করবেন কি না।
ব্লক স্টাইল
একটি ব্লক শৈলী চারটি ক্ষেত্র নিয়ে গঠিত:
-
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: Flyout লেবেল টেক্সট রঙ -
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 সেট করেন, কোনো পূর্ববর্তী বা আউটপুট সংযোগ ছাড়াই সমস্ত ব্লকে একটি হ্যাট যোগ করা হবে। আপনি যদি ঠিক কোন ব্লকগুলি একটি টুপি পেতে চান তার উপর আরও নিয়ন্ত্রণ চান, আপনি পরিবর্তে ব্লক শৈলী বৈশিষ্ট্য ব্যবহার করতে পারেন।
কাস্টম থিম
আপনার ব্লকলি অ্যাপ্লিকেশনে একটি থিম যুক্ত করার জন্য, আপনাকে নিম্নলিখিতগুলি করতে হবে:
- একটি থিম তৈরি করুন
- শৈলী নাম যোগ করুন
- একটি কর্মক্ষেত্রে আপনার থিম সেট করুন
একটি থিম তৈরি করুন
কনস্ট্রাক্টর ব্যবহার করে বা 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"
}
এক্সএমএল
<category name="Logic" categorystyle="logic_category"></category>
ব্লক
আপনার থিমের blockStyles সংজ্ঞায়িত ব্লক শৈলীগুলির একটি ব্যবহার করতে, এটিকে আপনার ব্লক সংজ্ঞাতে যুক্ত করুন:
JSON
"style":"logic_blocks"
জাভাস্ক্রিপ্ট
this.setStyle('logic_blocks');
আপনার থিম সেট করুন
কোন থিম ব্যবহার করতে হবে তাও আপনাকে ব্লকলি বলতে হবে। একই ব্লক শৈলী এবং বিভাগের নাম ব্যবহার করে এমন বেশ কয়েকটি থিম সংজ্ঞায়িত করে, আপনি ব্যবহারকারীকে তাদের জন্য সবচেয়ে ভালো কাজ করে এমন থিম বেছে নেওয়ার অনুমতি দিতে পারেন এবং ব্লকের সংজ্ঞা পরিবর্তন না করেই গতিশীলভাবে পরিবর্তন করতে পারেন।
প্রাথমিক থিম
একটি প্রাথমিক থিম সেট করার সর্বোত্তম উপায় হল Blockly.inject এ আপনার কলে theme কনফিগারেশন বিকল্পটি অন্তর্ভুক্ত করা। আপনি JSON বা JavaScript এ থিম সরবরাহ করতে পারেন।
JSON
Blockly.inject('blocklyDiv', {
theme: {
"blockStyles" : {
"list_blocks": {
"colourPrimary": "#4a148c",
"colourSecondary":"#AD7BE9",
"colourTertiary":"#CDB6E9"
}
},
"categoryStyles" : {
"list_category": {
"colour": "#4a148c"
}
},
"componentStyles" : {
"workspaceBackgroundColour": "#1e1e1e"
}
},
...
});
জাভাস্ক্রিপ্ট
Blockly.inject('blocklyDiv', {
theme: Blockly.Theme.defineTheme('themeName', {
'blockStyles': blockStyles,
'categoryStyles': categoryStyles,
'componentStyles': componentStyles
}),
...
});
যদি কোন থিম প্রদান করা না হয় তাহলে এটি ক্লাসিক থিমে ডিফল্ট হবে।
গতিশীল থিম
আপনি যদি গতিশীলভাবে আপনার থিম পরিবর্তন করতে চান (উদাহরণস্বরূপ ব্যবহারকারীদের একটি ড্রপডাউন মেনু থেকে একটি থিম চয়ন করার অনুমতি দেওয়ার ক্ষেত্রে) তাহলে আপনি কল করতে পারেন yourWorkspace.setTheme(theme) ।
ব্লক স্টাইল স্ক্রিপ্ট তৈরি করুন
ব্লকলি একটি স্ক্রিপ্ট প্রদান করে যা হিউজ বা হেক্স মানগুলির একটি মানচিত্র গ্রহণ করবে এবং তাদের জন্য গৌণ এবং তৃতীয় রঙের গণনা করবে। স্ক্রিপ্টটি স্ক্রিপ্ট/থিম ফোল্ডারে পাওয়া যাবে।
অন্তর্নির্মিত থিম
ব্লকলি অ্যাক্সেসিবিলিটির জন্য বেশ কয়েকটি থিম প্রদান করে, বিশেষত নির্দিষ্ট ধরণের রঙের দৃষ্টি ঘাটতি:
আমাদের এছাড়াও আছে: