Panel dan Tata Letak

Panel

ui.Panel adalah penampung UI tingkat atas tempat mengatur widget. Setiap ui.Panel memiliki objek ui.Panel.Layout yang mengontrol cara widgetnya diatur di layar. Pelajari lebih lanjut di bagian Tata Letak. Panel juga menyimpan daftar widget (yang dapat mencakup panel lain) yang telah ditambahkan ke panel tersebut. Untuk mengelola widget di panel, add() atau remove() widget dari panel, atau ambil daftar widget dengan memanggil widgets() di panel. Daftar widget adalah instance ui.data.ActiveList, yang berarti Anda dapat mengonfigurasi panel dengan memanipulasi daftar dan widget di dalamnya.

ui.root

ui.root adalah instance tetap ui.Panel untuk semua yang ada di Editor Kode di bawah panel horizontal. Secara default, hanya berisi satu widget: peta default. Secara khusus, item di ui.root.widgets().get(0) adalah objek Map (instance ui.Map) yang ditampilkan secara default di Code Editor). Selain alias Map, satu-satunya hal khusus lainnya tentang Peta default adalah Peta default memiliki alat pengeditan geometri di dalamnya. Untuk mendapatkan kanvas kosong tempat membuat UI, clear() peta default dari ui.root:

Editor Kode (JavaScript)

ui.root.clear();

Atau, Anda dapat mengubah peta default di panel root dengan menambahkan widget ke peta. Secara khusus, anggap peta sebagai panel dengan tata letak absolut (lihat bagian Tata letak untuk mengetahui detailnya). Contoh berikut menggambarkan modifikasi peta default:

Editor Kode (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);
});

Perhatikan bahwa contoh ini mengubah peta default (yaitu Map) dengan memperlakukannya sebagai panel dan menambahkan widget ke dalamnya. Karena peta memiliki tata letak absolut, posisi widget pada peta ditentukan oleh properti position dari properti style widget. Lihat bagian tata letak absolut untuk mengetahui detailnya.

Saat Anda membagikan link Code Editor kepada pengguna lain, secara default ui.root akan menempati sebagian besar jendela, dan editor teks, panel dokumen, serta konsol akan disembunyikan. Dengan mengontrol tata letak ui.root, Anda dapat mengontrol pengalaman pengguna lain saat menggunakan skrip Anda.

Tata letak

Tata letak mengontrol cara widget di panel diatur untuk ditampilkan. Ada dua opsi tata letak, yang dijelaskan di bawah: tata letak alur dan tata letak absolut. Tata letak ditentukan dengan class ui.Panel.Layout. Tetapkan tata letak panel di konstruktor atau dengan setLayout(). Urutan penambahan widget menentukan cara widget diatur dalam panel dengan tata letak alur. Properti position style setiap widget menentukan cara widget akan diatur dalam panel dengan tata letak absolut. Jika gaya pada widget tidak relevan untuk tata letak tempat widget ditempatkan, gaya tersebut akan diabaikan.

Flow

Tata letak alur menampilkan widget dalam baris ('horizontal') atau kolom ('vertical'). Widget disusun sesuai urutan penambahannya ke panel. Misalnya, pertimbangkan tombol berikut yang ditambahkan ke panel:

Editor Kode (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);

Tata letak vertikal akan terlihat seperti ini:

Perhatikan bahwa width panel disetel ke 300 piksel dan stretch disetel ke 'horizontal' dengan properti style. Properti gaya stretch berlaku untuk widget di panel dengan tata letak alur. Misalnya, {stretch: 'horizontal'} berarti widget akan diperluas untuk mengisi ruang horizontal yang tersedia dalam panel. Pada contoh sebelumnya, ubah jenis tata letak alur menjadi 'horizontal' untuk melihat tombol yang diatur dalam baris, bukan kolom.

Di panel alur horizontal, widget yang diregangkan secara horizontal akan diperluas untuk mengisi ruang yang tersedia setelah semua widget lain menggunakan lebar alaminya. Jika lebih dari satu widget diregangkan secara horizontal, ruang horizontal yang tersedia akan dibagi di antara widget tersebut. Widget yang diregangkan secara vertikal akan diperluas untuk mengisi tinggi panel.

Di panel alur vertikal, widget yang diregangkan secara vertikal akan diperluas untuk mengisi ruang yang tersedia setelah semua widget lain menggunakan tinggi alaminya. Jika lebih dari satu widget diregangkan secara vertikal, ruang vertikal yang tersedia akan dibagi di antara widget tersebut. Widget yang diregangkan secara horizontal akan diperluas untuk mengisi lebar panel.

Absolut

Tata letak absolut memosisikan widget sesuai posisi di panel. Tidak seperti tata letak alur, posisi widget ditentukan oleh properti position dari properti style widget, bukan urutan penambahannya ke panel. Contoh berikut menunjukkan penggunaan panel root.ui dengan tata letak absolut (tata letak panel root adalah alur horizontal secara default, tetapi dapat disetel dengan ui.root.setLayout()):

Editor Kode (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'));

Panel tata letak absolut akan terlihat seperti ini:

widgets()

Saat Anda menambahkan widget ke panel, widget tersebut akan ditambahkan ke daftar widget panel. Memanggil widgets() di panel akan menampilkan ui.data.ActiveList yang dapat Anda gunakan untuk memanipulasi widget di panel. Pertimbangkan contoh berikut, yang menambahkan widget ke panel, menambahkan panel ke panel root, lalu memperbarui diagram saat pengguna mengklik peta:

Editor Kode (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);

Dalam contoh ini, amati bahwa pertama-tama, widget ditambahkan ke panel menggunakan add(). Dalam fungsi callback yang terdaftar untuk memetakan klik, daftar widget panel akan diubah. Secara khusus, widget ketiga (yang mungkin ada atau tidak ada) ditetapkan sedemikian rupa sehingga diagram baru ditampilkan dari NDVI dari waktu ke waktu. Pelajari lebih lanjut fungsi penanganan peristiwa di halaman Peristiwa.