এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

প্যানেল এবং লেআউট, প্যানেল এবং লেআউট

প্যানেল

একটি ui.Panel হল একটি উচ্চ-স্তরের UI কন্টেনার যাতে উইজেটগুলি সাজানো হয়৷ প্রতিটি ui.Panel একটি ui.Panel.Layout অবজেক্ট থাকে যা স্ক্রীনে কীভাবে এর উইজেটগুলি সাজানো হয় তা নিয়ন্ত্রণ করে৷ লেআউট বিভাগে আরও জানুন। প্যানেলগুলি তাদের সাথে যুক্ত করা উইজেটগুলির একটি তালিকা (যা অন্যান্য প্যানেল অন্তর্ভুক্ত করতে পারে) বজায় রাখে। প্যানেলে উইজেটগুলি পরিচালনা করতে, হয় প্যানেল থেকে add() বা remove() , অথবা প্যানেলে widgets() কল করে উইজেটগুলির তালিকা পুনরুদ্ধার করুন৷ উইজেট তালিকা হল ui.data.ActiveList এর একটি উদাহরণ, যার অর্থ হল আপনি তালিকা এবং এর মধ্যে থাকা উইজেটগুলিকে ম্যানিপুলেট করে প্যানেল কনফিগার করতে পারেন৷

ui.root

অনুভূমিক বারের নীচে কোড এডিটরের সবকিছুর জন্য ui.root হল একটি ui.Panel এর একটি নির্দিষ্ট উদাহরণ। ডিফল্টরূপে, এতে শুধুমাত্র একটি উইজেট থাকে: ডিফল্ট মানচিত্র। বিশেষ করে, ui.root.widgets().get(0) এ থাকা আইটেমটি হল Map অবজেক্ট ( ui.Map এর একটি উদাহরণ) যা কোড এডিটরে ডিফল্টরূপে প্রদর্শিত হয়)। Map উপনাম ছাড়াও, ডিফল্ট মানচিত্রের একমাত্র অন্য বিশেষ জিনিসটি হল এটিতে জ্যামিতি সম্পাদনা সরঞ্জাম রয়েছে। আপনার UI তৈরি করার জন্য একটি খালি ক্যানভাস পেতে, ui.root থেকে ডিফল্ট মানচিত্রটি clear() :

কোড এডিটর (জাভাস্ক্রিপ্ট)

ui.root.clear();

বিকল্পভাবে, রুট প্যানেলে উইজেট যোগ করে ডিফল্ট মানচিত্র পরিবর্তন করা সম্ভব। বিশেষভাবে, একটি মানচিত্রকে একটি পরম বিন্যাস সহ একটি প্যানেল হিসাবে ভাবুন (বিশদ বিবরণের জন্য লেআউট বিভাগটি দেখুন)। নিম্নলিখিত উদাহরণটি ডিফল্ট মানচিত্রের একটি পরিবর্তনকে চিত্রিত করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Load a VIIRS surface reflectance image and display on the map.
var image = ee.Image('NOAA/VIIRS/001/VNP09GA/2022_06_05').select('M.*');
Map.addLayer(image, {bands: ['M5', 'M4', 'M3'], min: 0, max: 4e3, gamma: 1.5});

// Create the title label.
var title = ui.Label('Click to inspect');
title.style().set('position', 'top-center');
Map.add(title);

// Create a panel to hold the chart.
var panel = ui.Panel();
panel.style().set({
  width: '400px',
  position: 'bottom-right'
});
Map.add(panel);

// Register a function to draw a chart when a user clicks on the map.
Map.style().set('cursor', 'crosshair');
Map.onClick(function(coords) {
  panel.clear();
  var point = ee.Geometry.Point(coords.lon, coords.lat);
  var chart = ui.Chart.image.regions(image, point, null, 30);
  chart.setOptions({title: 'Band values'});
  panel.add(chart);
});

উল্লেখ্য যে উদাহরণটি ডিফল্ট মানচিত্র (যা Map ) পরিবর্তন করে এটিকে প্যানেল হিসাবে বিবেচনা করে এবং এতে উইজেট যোগ করে। যেহেতু মানচিত্রের সম্পূর্ণ বিন্যাস রয়েছে, তাই একটি মানচিত্রে একটি উইজেটের অবস্থান উইজেটের style বৈশিষ্ট্যের position বৈশিষ্ট্য দ্বারা নির্ধারিত হয়। বিস্তারিত জানার জন্য পরম বিন্যাস বিভাগ দেখুন.

আপনি যখন অন্য ব্যবহারকারীর সাথে একটি কোড এডিটর লিঙ্ক শেয়ার করেন, ডিফল্টরূপে ui.root উইন্ডোটির বেশিরভাগ অংশ নেয় এবং টেক্সট এডিটর, ডক্স প্যানেল এবং কনসোল লুকানো থাকে। ui.root লেআউট নিয়ন্ত্রণ করে, আপনি অন্য ব্যবহারকারীরা আপনার স্ক্রিপ্টের অভিজ্ঞতা কেমন তা নিয়ন্ত্রণ করতে পারেন।

বিন্যাস

বিন্যাস নিয়ন্ত্রণ করে কিভাবে একটি প্যানেলে উইজেটগুলি প্রদর্শনের জন্য সাজানো হয়। দুটি লেআউট বিকল্প রয়েছে, নীচে বর্ণিত: প্রবাহ বিন্যাস এবং পরম বিন্যাস। লেআউট ui.Panel.Layout ক্লাসের সাথে নির্দিষ্ট করা হয়। কনস্ট্রাক্টর বা setLayout() দিয়ে একটি প্যানেলের লেআউট সেট করুন। যে ক্রমে উইজেটগুলি যোগ করা হয় তা নির্ধারণ করে কিভাবে ফ্লো লেআউট সহ একটি প্যানেলে উইজেটগুলি সাজানো হয়। position বৈশিষ্ট্য প্রতিটি উইজেটের style নির্ধারণ করে কিভাবে একটি উইজেট পরম বিন্যাস সহ একটি প্যানেলে সাজানো হবে। যদি উইজেটের স্টাইলটি যে লেআউটে উইজেটটি স্থাপন করা হয় তার জন্য অপ্রাসঙ্গিক হয় তবে এটি উপেক্ষা করা হয়।

প্রবাহ

একটি ফ্লো লেআউট একটি সারিতে ( 'horizontal' ) বা একটি কলাম ( 'vertical' ) উইজেটগুলি প্রদর্শন করে। উইজেটগুলি প্যানেলে যুক্ত করা ক্রম অনুসারে সাজানো হয়। উদাহরণস্বরূপ, একটি প্যানেলে যোগ করা নিম্নলিখিত বোতামগুলি বিবেচনা করুন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Create a panel with vertical flow layout.
var panel = ui.Panel({
  layout: ui.Panel.Layout.flow('vertical'),
  style: {width: '300px'}
});

// Add a bunch of buttons.
for (var i = 0; i < 30; i++) {
  panel.add(ui.Button({label: 'Button ' + i, style: {stretch: 'horizontal'}}));
}

ui.root.clear();
ui.root.add(panel);

উল্লম্ব বিন্যাসটি এমন কিছু হওয়া উচিত:

মনে রাখবেন যে প্যানেলের width 300 পিক্সেলে সেট করা হয়েছে এবং style বৈশিষ্ট্যের সাথে stretch 'horizontal' সেট করা হয়েছে। stretch শৈলী বৈশিষ্ট্য প্রবাহ বিন্যাস সহ একটি প্যানেলে উইজেটগুলিতে প্রযোজ্য। উদাহরণস্বরূপ, {stretch: 'horizontal'} মানে প্যানেলের মধ্যে উপলব্ধ অনুভূমিক স্থান পূরণ করতে উইজেটটি প্রসারিত হবে। পূর্ববর্তী উদাহরণে, একটি কলামের পরিবর্তে একটি সারিতে সাজানো বোতামগুলি দেখতে ফ্লো লেআউটের ধরনটিকে 'horizontal' এ পরিবর্তন করুন।

একটি অনুভূমিক প্রবাহ প্যানেলে, একটি অনুভূমিকভাবে প্রসারিত উইজেট অন্যান্য সমস্ত উইজেট তাদের স্বাভাবিক প্রস্থ গ্রহণ করার পরে উপলব্ধ স্থান পূরণ করতে প্রসারিত হয়। যদি একাধিক উইজেট অনুভূমিকভাবে প্রসারিত হয়, তাহলে উপলব্ধ অনুভূমিক স্থান তাদের মধ্যে বিভক্ত হয়। একটি উল্লম্বভাবে প্রসারিত উইজেট প্যানেলের উচ্চতা পূরণ করতে প্রসারিত হয়।

একটি উল্লম্ব প্রবাহ প্যানেলে, একটি উল্লম্বভাবে প্রসারিত উইজেট অন্যান্য সমস্ত উইজেট তাদের স্বাভাবিক উচ্চতা গ্রহণ করার পরে উপলব্ধ স্থান পূরণ করতে প্রসারিত হয়। যদি একাধিক উইজেট উল্লম্বভাবে প্রসারিত হয়, তাহলে উপলব্ধ উল্লম্ব স্থান তাদের মধ্যে বিভক্ত হয়। প্যানেলের প্রস্থ পূরণ করতে একটি অনুভূমিকভাবে প্রসারিত উইজেট প্রসারিত হয়।

পরম

প্যানেলের অবস্থান অনুযায়ী একটি পরম বিন্যাস পজিশন উইজেট। ফ্লো লেআউটের বিপরীতে, একটি উইজেটের অবস্থান উইজেটের style সম্পত্তির position বৈশিষ্ট্য দ্বারা নির্ধারিত হয়, প্যানেলে যে ক্রমে এটি যোগ করা হয়েছে তা নয়। নিম্নলিখিত উদাহরণটি একটি পরম বিন্যাস সহ root.ui প্যানেল ব্যবহার করে দেখায় (রুট প্যানেলের বিন্যাসটি ডিফল্টরূপে একটি অনুভূমিক প্রবাহ, কিন্তু ui.root.setLayout() দিয়ে সেট করা যেতে পারে):

কোড এডিটর (জাভাস্ক্রিপ্ট)

ui.root.clear();
ui.root.setLayout(ui.Panel.Layout.absolute());

// A function to make buttons labeled by position.
function makeButton(position) {
  return ui.Button({
    label: position,
    style: {position: position}
  });
}

// Add labeled buttons to the panel.
ui.root.add(makeButton('top-left'));
ui.root.add(makeButton('top-center'));
ui.root.add(makeButton('top-right'));
ui.root.add(makeButton('middle-left'));
ui.root.add(makeButton('middle-right'));
ui.root.add(makeButton('bottom-left'));
ui.root.add(makeButton('bottom-center'));
ui.root.add(makeButton('bottom-right'));

পরম লেআউট প্যানেলটি দেখতে এমন কিছু হওয়া উচিত:

`widgets()`

আপনি যখন একটি প্যানেলে একটি উইজেট যোগ করেন, তখন এটি উইজেটটিকে প্যানেলের উইজেটের তালিকায় যুক্ত করে। প্যানেলে widgets() কল করা ui.data.ActiveList ফেরত দেয় যা আপনি প্যানেলে উইজেটগুলি পরিচালনা করতে ব্যবহার করতে পারেন। নিম্নলিখিত উদাহরণটি বিবেচনা করুন, যা একটি প্যানেলে উইজেট যোগ করে, প্যানেলটিকে রুট প্যানেলে যোগ করে, তারপর ব্যবহারকারী মানচিত্রে ক্লিক করলে একটি চার্ট আপডেট করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Load and display NDVI data.
var ndvi = ee.ImageCollection('NOAA/VIIRS/001/VNP13A1')
    .filterDate('2021-01-01', '2022-01-01').select('NDVI');
Map.addLayer(
  ndvi.median(), {min: 0, max: 10000, palette: ['99c199', '006400']}, 'NDVI');

// Configure the map.
Map.setCenter(-94.84497, 39.01918, 8);
Map.style().set('cursor', 'crosshair');

// Create an empty panel in which to arrange widgets.
// The layout is vertical flow by default.
var panel = ui.Panel({style: {width: '400px'}})
    .add(ui.Label('Click on the map'));

// Set a callback function for when the user clicks the map.
Map.onClick(function(coords) {
  // Create or update the location label (the second widget in the panel)
  var location = 'lon: ' + coords.lon.toFixed(2) + ' ' +
                 'lat: ' + coords.lat.toFixed(2);
  panel.widgets().set(1, ui.Label(location));

  // Add a red dot to the map where the user clicked.
  var point = ee.Geometry.Point(coords.lon, coords.lat);
  Map.layers().set(1, ui.Map.Layer(point, {color: 'FF0000'}));

  // Create a chart of NDVI over time.
  var chart = ui.Chart.image.series(ndvi, point, ee.Reducer.mean(), 200)
      .setOptions({
        title: 'NDVI Over Time',
        vAxis: {title: 'NDVI'},
        lineWidth: 1,
        pointSize: 3,
      });

  // Add (or replace) the third widget in the panel by
  // manipulating the widgets list.
  panel.widgets().set(2, chart);
});

// Add the panel to the ui.root.
ui.root.add(panel);

এই উদাহরণে, লক্ষ্য করুন যে প্রথমে, add() ব্যবহার করে প্যানেলে উইজেট যোগ করা হয়। ম্যাপ ক্লিকের জন্য নিবন্ধিত কলব্যাক ফাংশনে, পরিবর্তে panel উইজেটের তালিকা পরিবর্তন করা হয়। বিশেষভাবে, তৃতীয় উইজেট (যা থাকতে পারে বা নাও থাকতে পারে) এমনভাবে সেট করা হয়েছে যাতে সময়ের সাথে সাথে NDVI-এর একটি নতুন চার্ট প্রদর্শিত হয়। ইভেন্ট পৃষ্ঠায় ইভেন্ট হ্যান্ডলিং ফাংশন সম্পর্কে আরও জানুন।