پانل‌ها و چیدمان‌ها

پانل‌ها

ui.Panel یک محفظه واسط کاربر سطح بالا است که ابزاره‌ها در آن چیده می‌شوند. هر 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، تنها ویژگی خاص دیگر Map پیش‌فرض این است که ابزارهای ویرایش هندسه در آن وجود دارد. برای به‌دست آوردن بوم خالی که در آن واسط کاربر خود را بسازید، نقشه پیش‌فرض را از 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 است) را با درنظر گرفتن آن به‌عنوان پانل و افزودن ابزاره‌ها به آن اصلاح می‌کند. چون نقشه‌ها چیدمان مطلق دارند، موقعیت ابزاره در نقشه با ویژگی position ویژگی style ابزاره تعیین می‌شود. برای جزئیات، بخش طرح‌بندی مطلق را ببینید.

وقتی پیوند «ویرایشگر کد» را با کاربر دیگری هم‌رسانی می‌کنید، به‌طور پیش‌فرض 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 با ویژگی style روی 'horizontal' تنظیم شده است. ویژگی سبک stretch برای ابزاره‌ها در پانلی با چیدمان جاری اعمال می‌شود. برای مثال، {stretch: 'horizontal'} یعنی ابزارک ازهم باز می‌شود تا فضای افقی دردسترس را در پانل پر کند. در مثال قبلی، نوع چیدمان جریان را به 'horizontal' تغییر دهید تا دکمه‌ها را به‌جای ستون، در یک ردیف ببینید.

در پانل جریان افقی، ابزاره‌ای که به‌صورت افقی کشیده شده است گسترش می‌یابد تا فضای موجود را پس‌از اینکه همه ابزاره‌های دیگر عرض طبیعی خود را اشغال کردند پر کند. اگر بیش‌از یک ابزاره به‌صورت افقی کشیده شود، فضای افقی دردسترس بین آن‌ها تقسیم می‌شود. ابزارک کشیده‌شده به‌صورت عمودی ازهم باز می‌شود تا ارتفاع پانل را پر کند.

در پانل جریان عمودی، ابزاره‌ای که به‌صورت عمودی کشیده شده است گسترش می‌یابد تا فضای دردسترس را پس‌از اینکه همه ابزاره‌های دیگر ارتفاع طبیعی خود را گرفتند پر کند. اگر بیش‌از یک ابزاره به‌صورت عمودی کشیده شود، فضای عمودی دردسترس بین آن‌ها تقسیم می‌شود. ابزارک کشیده‌شده به‌صورت افقی ازهم باز می‌شود تا عرض پانل را پر کند.

مطلق

چیدمان مطلق ابزاره‌ها را براساس موقعیت‌های موجود در پانل قرار می‌دهد. برخلاف چیدمان جریان، موقعیت ابزاره با ویژگی position ویژگی style ابزاره تعیین می‌شود، نه ترتیبی که به پانل اضافه می‌شود. مثال زیر استفاده از پانل 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 درطول زمان نمایش داده شود. درباره توابع مدیریت رویداد در صفحه رویدادها بیشتر بدانید.