থিম

থিম হল Blockly-এর চেহারা ও অনুভূতি কাস্টমাইজ করার একটি উপায়। আপনি Themes ক্লাসের মাধ্যমে ব্লক কালার, ক্যাটাগরির রং এবং নির্দিষ্ট কিছু উপাদান কাস্টমাইজ করতে পারেন। আপনি যদি অতিরিক্ত উপাদানগুলি কাস্টমাইজ করতে চান, আমরা ইনজেকশন ডিভিতে একটি ক্লাস হিসাবে থিমের নাম প্রদান করি। এটি ব্যবহারকারীদের CSS-এর মাধ্যমে কোনো অসমর্থিত উপাদানের চেহারা পরিবর্তন করতে দেয়। থিম তৈরি করার ক্ষেত্রে আমাদের প্রধান লক্ষ্য হল ডেভেলপারদের আরও অ্যাক্সেসযোগ্য ব্লকলি অভিজ্ঞতা তৈরি করার ক্ষমতা দেওয়া।

দ্রষ্টব্য: আপনি যদি শুধুমাত্র একটি ব্লকের প্রধান রঙ নিয়ন্ত্রণ করতে চান, চেহারার উপর আরও সূক্ষ্ম নিয়ন্ত্রণের পরিবর্তে, আপনি একটি থিম তৈরি করার পরিবর্তে ব্লকের সংজ্ঞায় রঙ সেট করতে পারেন। আপনি যদি একটি ব্লকের রঙের পরিবর্তে তার আকৃতি পরিবর্তন করতে চান, তাহলে রেন্ডারার সম্পর্কে আরও জানুন।

থিম বৈশিষ্ট্য

একটি থিম হল একটি অবজেক্ট যার বিভিন্ন বৈশিষ্ট্য রয়েছে: বেস থিম যা থেকে প্রসারিত হবে, ব্লক, বিভাগ, উপাদান এবং ফন্টগুলির জন্য একটি স্টাইল অবজেক্ট এবং স্টার্ট ব্লকের জন্য হ্যাট ব্যবহার করবেন কি না।

গুরুত্বপূর্ণ: Blockly-এ কোডটি colour অ-মার্কিন বানান ব্যবহার করে। সমস্ত রঙের বৈশিষ্ট্যগুলি রঙ বা হেক্স মানগুলির মধ্যে সংজ্ঞায়িত করা যেতে পারে।

ব্লক স্টাইল

একটি ব্লক শৈলী চারটি ক্ষেত্র নিয়ে গঠিত:

• 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 সেট করেন, কোনো পূর্ববর্তী বা আউটপুট সংযোগ ছাড়াই সমস্ত ব্লকে একটি হ্যাট যোগ করা হবে। আপনি যদি ঠিক কোন ব্লকগুলি একটি টুপি পেতে চান তার উপর আরও নিয়ন্ত্রণ চান, আপনি পরিবর্তে ব্লক শৈলী বৈশিষ্ট্য ব্যবহার করতে পারেন।

কাস্টম থিম

আপনার ব্লকলি অ্যাপ্লিকেশনে একটি থিম যুক্ত করার জন্য, আপনাকে নিম্নলিখিতগুলি করতে হবে:

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 ব্যবহার করার একটি উদাহরণ ।

শৈলী নাম যোগ করুন

এখন যেহেতু আমরা একটি থিম তৈরি করেছি আমাদের ব্লক এবং বিভাগের সংজ্ঞায় শৈলীর নাম যোগ করতে হবে।

ক্যাটাগরি

আপনি কীভাবে আপনার টুলবক্সকে সংজ্ঞায়িত করবেন তা নির্ধারণ করে যে আপনাকে কীভাবে শৈলীর নাম যোগ করতে হবে। আরও তথ্যের জন্য টুলবক্স পৃষ্ঠা দেখুন।

ব্লক

আপনি কীভাবে আপনার ব্লককে সংজ্ঞায়িত করবেন তা নির্ধারণ করে আপনাকে কীভাবে শৈলীর নাম যুক্ত করতে হবে। আপনি আমাদের কাস্টম ব্লক পৃষ্ঠায় ব্লক সংজ্ঞা সম্পর্কে আরও জানতে পারেন। আপনি আপনার ব্লকে থিমের blockStyles সম্পত্তিতে সংজ্ঞায়িত ব্লক শৈলীগুলির একটি বরাদ্দ করবেন।

JSON

"style":"logic_blocks"

জাভাস্ক্রিপ্ট

this.setStyle('logic_blocks');

আপনার থিম সেট করুন

কোন থিম ব্যবহার করতে হবে তাও আপনাকে ব্লকলি বলতে হবে। একই ব্লক শৈলী এবং বিভাগের নাম ব্যবহার করে এমন বেশ কয়েকটি থিম সংজ্ঞায়িত করে, আপনি ব্যবহারকারীকে তাদের জন্য সবচেয়ে ভালো কাজ করে এমন থিম বেছে নেওয়ার অনুমতি দিতে পারেন এবং ব্লকের সংজ্ঞা পরিবর্তন না করেই গতিশীলভাবে পরিবর্তন করতে পারেন।

প্রাথমিক থিম

একটি প্রাথমিক থিম সেট করার সর্বোত্তম উপায় হল আপনার ইনজেক্ট কলে options.theme অন্তর্ভুক্ত করা। আপনি JSON বা JavaScript এ থিম সরবরাহ করতে পারেন।

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

জাভাস্ক্রিপ্ট

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

বিকল্প সম্পর্কে আরও তথ্য আমাদের কনফিগারেশন পৃষ্ঠায় পাওয়া যাবে। যদি কোন থিম প্রদান করা না হয় তাহলে এটি ক্লাসিক থিমে ডিফল্ট হবে।

গতিশীল থিম

আপনি যদি গতিশীলভাবে আপনার থিম পরিবর্তন করতে চান (উদাহরণস্বরূপ ব্যবহারকারীদের একটি ড্রপডাউন মেনু থেকে একটি থিম চয়ন করার অনুমতি দেওয়ার ক্ষেত্রে) তাহলে আপনি কল করতে পারেন yourWorkspace.setTheme(theme) ।

ব্লক স্টাইল স্ক্রিপ্ট তৈরি করুন

ব্লকলি একটি স্ক্রিপ্ট প্রদান করে যা হিউজ বা হেক্স মানগুলির একটি মানচিত্র গ্রহণ করবে এবং তাদের জন্য গৌণ এবং তৃতীয় রঙের গণনা করবে। স্ক্রিপ্টটি স্ক্রিপ্ট/থিম ফোল্ডারে পাওয়া যাবে।

অন্তর্নির্মিত থিম

ব্লকলি অ্যাক্সেসিবিলিটির জন্য বেশ কয়েকটি থিম প্রদান করে, বিশেষত নির্দিষ্ট ধরণের রঙের দৃষ্টি ঘাটতি:

• উচ্চ বৈসাদৃশ্য
• Deuteranopia/Protanopia
• ট্রাইটানোপিয়া

আমরা আছে:

• ক্লাসিক থিম
• আধুনিক
• ডার্ক মোড