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

پانل ها

ui.Panel یک ظرف رابط کاربری سطح بالایی است که در آن ابزارک ها را مرتب می کند. هر ui.Panel دارای یک شی ui.Panel.Layout است که نحوه چیدمان ویجت های آن روی صفحه را کنترل می کند. در بخش Layouts بیشتر بیاموزید. پانل‌ها همچنین فهرستی از ویجت‌ها (که می‌تواند شامل سایر پانل‌ها باشد) که به آن‌ها اضافه شده است را نیز حفظ می‌کنند. برای مدیریت ویجت‌ها در پانل، آن‌ها add() یا remove() یا با فراخوانی widgets() در پنل، فهرست ابزارک‌ها را بازیابی کنید. لیست ویجت ها نمونه ای از ui.data.ActiveList است، به این معنی که می توانید پانل را با دستکاری لیست و ویجت های موجود در آن پیکربندی کنید.

ui.root

ui.root یک نمونه ثابت از یک ui.Panel برای هر چیزی در ویرایشگر کد زیر نوار افقی است. به طور پیش فرض، فقط شامل یک ویجت است: نقشه پیش فرض. به طور خاص، مورد در ui.root.widgets().get(0) شی Map (نمونه ای از ui.Map ) است که به طور پیش فرض در ویرایشگر کد نمایش داده می شود. علاوه بر نام مستعار Map ، تنها ویژگی خاص دیگر نقشه پیش فرض این است که ابزارهای ویرایش هندسه در آن وجود دارد. برای به دست آوردن یک بوم خالی که در آن رابط کاربری خود را بسازید، نقشه پیش‌فرض clear() را از ui.root پاک کنید:

ویرایشگر کد (جاوا اسکریپت)

ui.root.clear();

همچنین، می‌توانید نقشه پیش‌فرض را در پنل ریشه با افزودن ویجت‌ها به آن تغییر دهید. به طور خاص، یک نقشه را به عنوان یک پانل با یک طرح مطلق در نظر بگیرید (برای جزئیات به بخش Layouts مراجعه کنید). مثال زیر اصلاح نقشه پیش فرض را نشان می دهد:

ویرایشگر کد (جاوا اسکریپت)

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

وقتی پیوند ویرایشگر کد را با کاربر دیگری به اشتراک می گذارید، به طور پیش فرض ui.root بیشتر پنجره را اشغال می کند و ویرایشگر متن، پانل اسناد و کنسول پنهان می شوند. با کنترل طرح‌بندی ui.root ، می‌توانید نحوه تجربه سایر کاربران از اسکریپت خود را کنترل کنید.

طرح بندی ها

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

،

پانل ها

ui.Panel یک ظرف رابط کاربری سطح بالایی است که در آن ابزارک ها را مرتب می کند. هر ui.Panel دارای یک شی ui.Panel.Layout است که نحوه چیدمان ویجت های آن روی صفحه را کنترل می کند. در بخش Layouts بیشتر بیاموزید. پانل‌ها همچنین فهرستی از ویجت‌ها (که می‌تواند شامل سایر پانل‌ها باشد) که به آن‌ها اضافه شده است را نیز حفظ می‌کنند. برای مدیریت ویجت‌ها در پانل، آن‌ها add() یا remove() یا با فراخوانی widgets() در پنل، فهرست ابزارک‌ها را بازیابی کنید. لیست ویجت ها نمونه ای از ui.data.ActiveList است، به این معنی که می توانید پانل را با دستکاری لیست و ویجت های موجود در آن پیکربندی کنید.

ui.root

ui.root یک نمونه ثابت از یک ui.Panel برای هر چیزی در ویرایشگر کد زیر نوار افقی است. به طور پیش فرض، فقط شامل یک ویجت است: نقشه پیش فرض. به طور خاص، مورد در ui.root.widgets().get(0) شی Map (نمونه ای از ui.Map ) است که به طور پیش فرض در ویرایشگر کد نمایش داده می شود. علاوه بر نام مستعار Map ، تنها ویژگی خاص دیگر نقشه پیش فرض این است که ابزارهای ویرایش هندسه در آن وجود دارد. برای به دست آوردن یک بوم خالی که در آن رابط کاربری خود را بسازید، نقشه پیش‌فرض clear() را از ui.root پاک کنید:

ویرایشگر کد (جاوا اسکریپت)

ui.root.clear();

همچنین، می‌توانید نقشه پیش‌فرض را در پنل ریشه با افزودن ویجت‌ها به آن تغییر دهید. به طور خاص، یک نقشه را به عنوان یک پانل با یک طرح مطلق در نظر بگیرید (برای جزئیات به بخش Layouts مراجعه کنید). مثال زیر اصلاح نقشه پیش فرض را نشان می دهد:

ویرایشگر کد (جاوا اسکریپت)

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

وقتی پیوند ویرایشگر کد را با کاربر دیگری به اشتراک می گذارید، به طور پیش فرض ui.root بیشتر پنجره را اشغال می کند و ویرایشگر متن، پانل اسناد و کنسول پنهان می شوند. با کنترل طرح‌بندی ui.root ، می‌توانید نحوه تجربه سایر کاربران از اسکریپت خود را کنترل کنید.

طرح بندی ها

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