প্যানেল ও লেআউট

প্যানেল

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('NASA/VIIRS/002/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 প্রপার্টি দ্বারা। আরও জানতে অ্যাবসোলিউট লেআউট বিভাগ দেখুন।

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

লেআউট

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

Flow

ফ্লো লেআউট উইজেটকে সারি ('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 ৩০০ পিক্সেলে সেট করা আছে এবং stretch 'horizontal'-এ সেট করা আছে, সাথে style প্রপার্টি আছে। 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('NASA/VIIRS/002/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-এর নতুন চার্ট দেখানো হয়। ইভেন্ট পৃষ্ঠা থেকে ইভেন্ট হ্যান্ডলিং ফাংশন সম্পর্কে আরও জানুন।