اللوحات والتنسيقات

Panels

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، فإنّ الميزة الوحيدة الأخرى الخاصة بالخريطة التلقائية هي أنّها تتضمّن أدوات لتعديل الأشكال الهندسية. للحصول على لوحة فارغة لإنشاء واجهة المستخدم، clear() الخريطة التلقائية من ui.root:

محرِّر الرموز البرمجية (JavaScript)

ui.root.clear();

بدلاً من ذلك، يمكنك تعديل الخريطة التلقائية في اللوحة الجذر عن طريق إضافة التطبيقات المصغّرة إليها. على وجه التحديد، يمكنك اعتبار الخريطة لوحة ذات تصميم مطلق (اطّلِع على قسم "التصاميم" لمعرفة التفاصيل). يوضّح المثال التالي تعديلًا على الخريطة التلقائية:

محرِّر الرموز البرمجية (JavaScript)

// 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، يمكنك التحكّم في كيفية استخدام المستخدمين الآخرين لسكريبتك.

التنسيقات

تتحكّم التنسيقات في كيفية ترتيب التطبيقات المصغّرة في لوحة لعرضها. هناك خياران لتنسيق المحتوى موضَّحان أدناه: تنسيق التدفق والتنسيق المطلق. يتم تحديد التنسيقات باستخدام فئة ui.Panel.Layout. اضبط تنسيق اللوحة إما في العنصر المنشئ أو باستخدام setLayout(). يحدِّد ترتيب إضافة التطبيقات المصغّرة كيفية ترتيب التطبيقات المصغّرة في لوحة ذات تنسيق تدفق. السمة position وstyle لكل أداة حدد كيفية ترتيب الأداة في لوحة بتنسيق مطلق. إذا كان النمط المُستخدَم في التطبيق المصغّر غير ملائم للتنسيق الذي تم وضع التطبيق المصغّر فيه، يتم تجاهله.

تدفق

يعرض تنسيق التدفق التطبيقات المصغّرة في صف ('horizontal') أو عمود ('vertical'). ويتم ترتيب التطبيقات المصغّرة وفقًا للترتيب الذي تمت إضافتها به إلى اللوحة. على سبيل المثال، فكِّر في الأزرار التالية التي تمت إضافتها إلى لوحة:

محرِّر الرموز البرمجية (JavaScript)

// 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 على 'horizontal' باستخدام السمة style. تنطبق سمة التصميم stretch على التطبيقات المصغّرة في لوحة ذات تنسيق تدفق. على سبيل المثال، يعني الرمز {stretch: 'horizontal'} أنّ التطبيق المصغّر سيتم توسيعه لملء المساحة الأفقية المتاحة داخل اللوحة. في المثال السابق، يمكنك تغيير نوع تنسيق التدفق إلى 'horizontal' لعرض الأزرار مرتبة في صف بدلاً من عمود.

في لوحة العرض الأفقي، يتم توسيع التطبيق المصغّر الموسّع أفقيًا لملء المساحة المتاحة بعد أن تشغل جميع التطبيقات المصغّرة الأخرى عرضها الطبيعي. إذا تم تمديد أكثر من تطبيقات مصغّرة واحدة أفقيًا، سيتم تقسيم المساحة الأفقية المتاحة بينها. يتم توسيع التطبيق المصغّر الموسَّع عموديًا لملء ارتفاع اللوحة.

في لوحة العرض العمودي، يتم توسيع التطبيق المصغّر الموسّع عموديًا لملء المساحة المتاحة بعد أن تشغل جميع التطبيقات المصغّرة الأخرى ارتفاعاتها الطبيعية. إذا تم تمديد أكثر من تطبيق مصغّر واحد عموديًا، سيتم хувّأ المساحة الرأسية المتاحة بينها. يتم توسيع التطبيق المصغّر الموسَّع أفقيًا لملء عرض اللوحة.

صيغة مطلقة

يضع التنسيق المطلق التطبيقات المصغّرة وفقًا لمواضعها في اللوحة. على عكس تنسيق التدفق، يتم تحديد موضع التطبيق المصغّر من خلال سمة position لسمة style للتطبيق المصغّر، وليس من خلال الترتيب الذي تمت إضافته به إلى اللوحة. يوضّح المثال التالي استخدام لوحة root.ui مع تصميم مطلق (يكون تصميم اللوحة الجذر تدفقًا أفقيًا تلقائيًا، ولكن يمكن ضبطه باستخدام ui.root.setLayout()):

محرِّر الرموز البرمجية (JavaScript)

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 الذي يمكنك استخدامه للتعامل مع التطبيقات المصغّرة في اللوحة. راجِع المثال التالي الذي يضيف تطبيقات مصغّرة إلى لوحة، ويضيف اللوحة إلى اللوحة الجذر، ثم يعدّل رسمًا بيانيًا عندما ينقر المستخدم على الخريطة:

محرِّر الرموز البرمجية (JavaScript)

// 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 بمرور الوقت. اطّلِع على مزيد من المعلومات عن دوالّ معالجة الأحداث في صفحة "الأحداث".