Paneller ve Düzenler

Panels

ui.Panel, widget'ların düzenlendiği üst düzey bir kullanıcı arayüzü kapsayıcısıdır. Her ui.Panel, widget'larının ekranda nasıl düzenlendiğini kontrol eden bir ui.Panel.Layout nesnesine sahiptir. Daha fazla bilgi için Düzenler bölümünden yararlanabilirsiniz. Paneller, kendilerine eklenen widget'ların (diğer panelleri içerebilir) listesini de tutar. Paneldeki widget'ları yönetmek için panelde add() veya remove()'yi çağırın ya da panelde widgets()'yi çağırarak widget'ların listesini alın. Widget listesi, ui.data.ActiveList örneğidir. Yani listeyi ve içindeki widget'ları değiştirerek paneli yapılandırabilirsiniz.

ui.root

ui.root, yatay çubuğun altındaki Kod Düzenleyici'deki her şey için ui.Panel'un sabit bir örneğidir. Varsayılan olarak yalnızca tek bir widget içerir: varsayılan harita. Daha açık belirtmek gerekirse, ui.root.widgets().get(0) alanındaki öğe, varsayılan olarak Kod Düzenleyici'de görüntülenen Map nesnesi (ui.Map örneği) olur. Varsayılan Harita'nın Map takma adının yanı sıra, geometri düzenleme araçları da vardır. Kullanıcı arayüzünüzü oluşturabileceğiniz boş bir tuval elde etmek için ui.root içindeki varsayılan harita olan clear():

Kod Düzenleyici (JavaScript)

ui.root.clear();

Alternatif olarak, kök paneldeki varsayılan haritaya widget ekleyerek de haritayı değiştirebilirsiniz. Daha açık belirtmek gerekirse, haritaları mutlak düzene sahip bir panel olarak düşünün (ayrıntılar için Düzenler bölümüne bakın). Aşağıdaki örnekte, varsayılan haritanın değiştirilmesi gösterilmektedir:

Kod Düzenleyici (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);
});

Örnekte, varsayılan haritanın (Map) panel olarak ele alınıp widget eklenerek değiştirildiğine dikkat edin. Haritalar mutlak düzene sahip olduğundan, bir widget'ın haritada konumu, widget'ın style özelliğinin position özelliği tarafından belirlenir. Ayrıntılar için mutlak düzen bölümüne bakın.

Kod Düzenleyici bağlantısını başka bir kullanıcıyla paylaştığınızda varsayılan olarak ui.root pencerenin büyük bir kısmını kaplar ve metin düzenleyici, dokümanlar paneli ve konsol gizlenir. ui.root düzenini kontrol ederek diğer kullanıcıların komut dosyanızı nasıl deneyimleyeceğini belirleyebilirsiniz.

Düzenler

Düzenler, bir paneldeki widget'ların görüntüleme için nasıl düzenlendiğini kontrol eder. Aşağıda açıklanan iki düzen seçeneği vardır: akış düzeni ve mutlak düzen. Düzenler ui.Panel.Layout sınıfıyla belirtilir. Panelin düzenini oluşturucuda veya setLayout() ile ayarlayın. Widget'ların eklenme sırası, akış düzenine sahip bir panelde widget'ların nasıl düzenleneceğini belirler. Her widget'ın position mülkü, widget'ın mutlak düzene sahip bir panelde nasıl düzenleneceğini belirler.style Bir widget'ın stili, widget'ın yerleştirildiği düzenle alakalı değilse yoksayılır.

Akış

Akış düzeninde widget'lar bir satırda ('horizontal') veya sütunda ('vertical') gösterilir. Widget'lar panele eklendikleri sıraya göre düzenlenir. Örneğin, bir panele eklenen aşağıdaki düğmeleri ele alalım:

Kod Düzenleyici (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);

Dikey düzen aşağıdaki gibi görünmelidir:

Panelin width özelliğinin 300 piksel, stretch özelliğinin ise style ile 'horizontal' olarak ayarlandığını unutmayın. stretch stil özelliği, akış düzenine sahip bir paneldeki widget'lar için geçerlidir. Örneğin, {stretch: 'horizontal'}, widget'ın paneldeki mevcut yatay alanı dolduracak şekilde genişleyeceğini belirtir. Önceki örnekte, düğmelerin sütun yerine satır halinde düzenlendiğini görmek için akış düzeni türünü 'horizontal' olarak değiştirin.

Yatay akış panelinde, yatay olarak gerilmiş bir widget, diğer tüm widget'lar doğal genişliklerini aldıktan sonra mevcut alanı dolduracak şekilde genişler. Birden fazla widget yatay olarak genişletilirse mevcut yatay alan bunlar arasında bölünür. Dikey olarak gerilmiş bir widget, panelin yükseklik değerini dolduracak şekilde genişler.

Dikey akış panelinde, dikey olarak gerilmiş bir widget, diğer tüm widget'lar doğal yüksekliklerine ulaştıktan sonra mevcut alanı dolduracak şekilde genişler. Birden fazla widget dikey olarak genişletilirse mevcut dikey alan bunlar arasında bölünür. Yatay olarak gerilmiş bir widget, panelin genişliğini dolduracak şekilde genişler.

Mutlak

Mutlak düzen, widget'ları paneldeki konumlara göre yerleştirir. Akışı düzeninin aksine, bir widget'ın konumu panele eklenme sırasına göre değil, widget'ın style özelliğinin position özelliğine göre belirlenir. Aşağıdaki örnekte, root.ui panelinin mutlak bir düzenle (kök panelin düzeni varsayılan olarak yatay bir akıştır ancak ui.root.setLayout() ile ayarlanabilir) kullanımı gösterilmektedir:

Kod Düzenleyici (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'));

Mutlak düzen paneli aşağıdaki gibi görünmelidir:

widgets()

Bir panele eklediğiniz widget, panelin widget listesine eklenir. Panelde widgets() çağrıldığında, paneldeki widget'ları yönetmek için kullanabileceğiniz ui.data.ActiveList döndürülür. Aşağıdaki örneği inceleyin. Bu örnekte, bir panele widget eklenip panel kök panele eklendikten sonra kullanıcı haritayı tıkladığında bir grafik güncellenmektedir:

Kod Düzenleyici (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);

Bu örnekte, önce add() kullanılarak panele widget'ların eklendiğini görebilirsiniz. Tıklamaları eşlemeye kaydedilen geri çağırma işlevinde, bunun yerine panel'nin widget listesi değiştirilir. Daha açık belirtmek gerekirse, üçüncü widget (mevcut Etkinlikler sayfasında etkinlik işleme işlevleri hakkında daha fazla bilgi edinin.