থিম হলো Blockly-এর চেহারা ও অনুভূতি নিজের মতো করে সাজানোর একটি উপায়। আপনি Themes ক্লাসের মাধ্যমে ব্লকের রঙ, ক্যাটাগরির রঙ এবং নির্দিষ্ট কিছু কম্পোনেন্ট নিজের মতো করে সাজাতে পারেন। আপনি যদি অতিরিক্ত কম্পোনেন্ট নিজের মতো করে সাজাতে চান, তাহলে আমরা injection 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
}
স্টার্ট হ্যাটস
যদি আপনি সরাসরি একটি থিম অবজেক্টে startHats: true সেট করেন, তাহলে পূর্ববর্তী বা আউটপুট সংযোগ নেই এমন সমস্ত ব্লকে একটি হ্যাট যুক্ত হবে। ঠিক কোন ব্লকগুলিতে হ্যাট যুক্ত হবে তার উপর যদি আপনি আরও বেশি নিয়ন্ত্রণ চান, তাহলে আপনি এর পরিবর্তে ব্লক স্টাইল প্রপার্টি ব্যবহার করতে পারেন।
কাস্টম থিম
আপনার Blockly অ্যাপ্লিকেশনে একটি থিম যোগ করার জন্য, আপনাকে নিম্নলিখিত কাজগুলো করতে হবে:
- একটি থিম তৈরি করুন
- স্টাইলের নাম যোগ করুন
- আপনার ওয়ার্কস্পেসে থিম সেট করুন
একটি থিম তৈরি করুন
কনস্ট্রাক্টর ব্যবহার করে অথবা 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-কে এটাও জানাতে হবে যে কোন থিমটি ব্যবহার করতে হবে। একই ব্লক স্টাইল এবং ক্যাটাগরির নাম ব্যবহার করে একাধিক থিম নির্ধারণ করার মাধ্যমে, আপনি ব্যবহারকারীকে তার জন্য সবচেয়ে উপযুক্ত থিমটি বেছে নেওয়ার সুযোগ দিতে পারেন এবং ব্লক ডেফিনিশনগুলো পরিবর্তন না করেই গতিশীলভাবে তা পরিবর্তন করতে পারেন।
প্রাথমিক থিম
প্রাথমিক থিম সেট করার সবচেয়ে ভালো উপায় হলো Blockly.inject কল করার সময় theme কনফিগারেশন অপশনটি অন্তর্ভুক্ত করা। আপনি JSON অথবা জাভাস্ক্রিপ্টে থিমটি সরবরাহ করতে পারেন।
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) কল করতে পারেন।
ব্লক স্টাইল স্ক্রিপ্ট তৈরি করুন
ব্লকলি একটি স্ক্রিপ্ট প্রদান করে যা হিউ বা হেক্স ভ্যালুর একটি ম্যাপ গ্রহণ করে সেগুলোর জন্য সেকেন্ডারি এবং টারশিয়ারি রঙ গণনা করবে। স্ক্রিপ্টটি scripts/themes ফোল্ডারে পাওয়া যাবে।
অন্তর্নির্মিত থিম
ব্লকলি অ্যাক্সেসিবিলিটির জন্য বেশ কিছু থিম প্রদান করে, বিশেষত নির্দিষ্ট ধরণের বর্ণান্ধতার ক্ষেত্রে:
আমাদের আরও আছে: