থিম হল ব্লকলির চেহারা এবং অনুভূতি কাস্টমাইজ করার একটি উপায়। আপনি Themes ক্লাসের মাধ্যমে ব্লকের রঙ, বিভাগের রঙ এবং নির্দিষ্ট উপাদানগুলি কাস্টমাইজ করতে পারেন। আপনি যদি অতিরিক্ত উপাদানগুলি কাস্টমাইজ করতে চান, তাহলে আমরা ইনজেকশন div -এ ক্লাস হিসাবে থিমের নাম প্রদান করি। এটি ব্যবহারকারীদের CSS এর মাধ্যমে যেকোনো অসমর্থিত উপাদানের চেহারা পরিবর্তন করতে দেয়। থিম তৈরিতে আমাদের মূল লক্ষ্য হল ডেভেলপারদের ব্লকলি অভিজ্ঞতা তৈরি করার ক্ষমতা দেওয়া যা আরও অ্যাক্সেসযোগ্য।
থিম বৈশিষ্ট্য
থিম হলো এমন একটি অবজেক্ট যার বেশ কয়েকটি বৈশিষ্ট্য রয়েছে: যে বেস থিম থেকে এটি প্রসারিত করা হবে, ব্লক, বিভাগ, উপাদান এবং ফন্টের জন্য একটি স্টাইল অবজেক্ট, এবং স্টার্ট ব্লকের জন্য হ্যাট ব্যবহার করা উচিত কিনা।
ব্লক স্টাইল
একটি ব্লক স্টাইল চারটি ক্ষেত্র নিয়ে গঠিত:
-
colourPrimary(প্রয়োজনীয়) - ব্লকের পটভূমির রঙ। -
colourSecondary(ঐচ্ছিক) - যদি ব্লকটি একটি ছায়া ব্লক হয় তবে পটভূমির রঙ। -
colourTertiary(ঐচ্ছিক) - ব্লকের সীমানা বা হাইলাইট রঙ। -
hat(ঐচ্ছিক) - যদি মানcapএ সেট করা থাকে, তাহলে একটি ব্লকে একটি hat যোগ করে। hats সম্পর্কে আরও জানুন।
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 সেট করেন, তাহলে পূর্ববর্তী বা আউটপুট সংযোগ ছাড়াই সমস্ত ব্লকে একটি হ্যাট যোগ করা হবে। কোন ব্লকগুলি হ্যাট পাবে তার উপর যদি আপনি আরও নিয়ন্ত্রণ চান, তাহলে আপনি ব্লক স্টাইল বৈশিষ্ট্যটি ব্যবহার করতে পারেন।
কাস্টম থিম
আপনার ব্লকলি অ্যাপ্লিকেশনে একটি থিম যোগ করার জন্য, আপনাকে নিম্নলিখিতগুলি করতে হবে:
- একটি থিম তৈরি করুন
- স্টাইলের নাম যোগ করুন
- আপনার থিমটি একটি কর্মক্ষেত্রে সেট করুন
একটি থিম তৈরি করুন
কনস্ট্রাক্টর ব্যবহার করে অথবা 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) কল করতে পারেন।
ব্লক স্টাইল স্ক্রিপ্ট তৈরি করুন
ব্লকলি একটি স্ক্রিপ্ট প্রদান করে যা রঙ বা হেক্স মানের একটি মানচিত্র গ্রহণ করবে এবং তাদের জন্য গৌণ এবং তৃতীয় রঙ গণনা করবে। স্ক্রিপ্টটি স্ক্রিপ্ট/থিম ফোল্ডারে পাওয়া যাবে।
অন্তর্নির্মিত থিম
ব্লকলি অ্যাক্সেসিবিলিটির জন্য বেশ কয়েকটি থিম প্রদান করে, বিশেষ করে নির্দিষ্ট ধরণের রঙিন দৃষ্টির ঘাটতি:
আমাদের আরও আছে: