Panneaux et mises en page

Panneaux

Un ui.Panel est un conteneur d'UI de niveau supérieur dans lequel organiser les widgets. Chaque ui.Panel possède un objet ui.Panel.Layout qui contrôle la disposition de ses widgets à l'écran. Pour en savoir plus, consultez la section Mises en page. Les panneaux gèrent également une liste des widgets (qui peuvent inclure d'autres panneaux) qui y ont été ajoutés. Pour gérer les widgets dans le panneau, add() ou remove()-les depuis le panneau, ou récupérez la liste des widgets en appelant widgets() sur le panneau. La liste des widgets est une instance de ui.data.ActiveList, ce qui signifie que vous pouvez configurer le panneau en manipulant la liste et les widgets qu'elle contient.

ui.root

ui.root est une instance fixe d'un ui.Panel pour tout ce qui se trouve dans l'éditeur de code sous la barre horizontale. Par défaut, il ne contient qu'un seul widget: la carte par défaut. Plus précisément, l'élément situé à ui.root.widgets().get(0) est l'objet Map (une instance de ui.Map) qui s'affiche par défaut dans l'éditeur de code. En plus de l'alias Map, la seule autre particularité de la carte par défaut est qu'elle contient des outils de modification de la géométrie. Pour obtenir un canevas vide dans lequel créer votre UI, clear() la carte par défaut de ui.root:

Éditeur de code (JavaScript)

ui.root.clear();

Vous pouvez également modifier la carte par défaut dans le panneau racine en y ajoutant des widgets. Plus précisément, considérez une carte comme un panneau avec une mise en page absolue (pour en savoir plus, consultez la section Mises en page). L'exemple suivant illustre une modification de la carte par défaut:

Éditeur de code (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);
});

Notez que l'exemple modifie la carte par défaut (qui est Map) en la considérant comme un panneau et en y ajoutant des widgets. Étant donné que les cartes ont une mise en page absolue, la position d'un widget sur une carte est déterminée par une propriété position de la propriété style du widget. Pour en savoir plus, consultez la section Mise en page absolue.

Lorsque vous partagez un lien vers l'éditeur de code avec un autre utilisateur, ui.root occupe la majeure partie de la fenêtre, et l'éditeur de texte, le panneau de documents et la console sont masqués. En contrôlant la mise en page ui.root, vous pouvez contrôler l'expérience des autres utilisateurs avec votre script.

Mises en page

Les mises en page contrôlent la disposition des widgets d'un panneau pour l'affichage. Il existe deux options de mise en page, décrites ci-dessous: la mise en page en flux et la mise en page absolue. Les mises en page sont spécifiées avec la classe ui.Panel.Layout. Définissez la mise en page d'un panneau dans le constructeur ou avec setLayout(). L'ordre dans lequel les widgets sont ajoutés détermine la façon dont ils sont disposés dans un panneau avec une mise en page en flux. La propriété position de chaque style de widget détermine la manière dont un widget sera disposé dans un panneau avec une mise en page absolue. Si le style d'un widget n'est pas pertinent pour la mise en page dans laquelle il est placé, il est ignoré.

Flow

Une mise en page en flux affiche les widgets sur une ligne ('horizontal') ou dans une colonne ('vertical'). Les widgets sont organisés selon l'ordre dans lequel ils sont ajoutés au panneau. Prenons l'exemple des boutons suivants ajoutés à un panneau:

Éditeur de code (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);

La mise en page verticale devrait se présenter comme suit:

ui_flow_layout.png

Notez que le width du panneau est défini sur 300 pixels et que le stretch est défini sur 'horizontal' avec la propriété style. La propriété de style stretch s'applique aux widgets d'un panneau avec mise en page en flux. Par exemple, {stretch: 'horizontal'} signifie que le widget se développera pour occuper l'espace horizontal disponible dans le panneau. Dans l'exemple précédent, définissez le type de mise en page en flux sur 'horizontal' pour voir les boutons disposés sur une ligne au lieu d'une colonne.

Dans un panneau de flux horizontal, un widget étiré horizontalement se développe pour occuper l'espace disponible une fois que tous les autres widgets ont pris leur largeur naturelle. Si plusieurs widgets sont étirés horizontalement, l'espace horizontal disponible est réparti entre eux. Un widget étiré verticalement se développe pour remplir la hauteur du panneau.

Dans un panneau de flux vertical, un widget étiré verticalement se développe pour occuper l'espace disponible une fois que tous les autres widgets ont pris leur hauteur naturelle. Si plusieurs widgets sont étirés verticalement, l'espace vertical disponible est réparti entre eux. Un widget étiré horizontalement se développe pour occuper la largeur du panneau.

Absolue

Une mise en page absolue positionne les widgets en fonction de leur position dans le panneau. Contrairement à la mise en page en flux, la position d'un widget est déterminée par la propriété position de la propriété style du widget, et non par l'ordre dans lequel il est ajouté au panneau. L'exemple suivant montre comment utiliser le panneau root.ui avec une mise en page absolue (la mise en page du panneau racine est un flux horizontal par défaut, mais peut être définie avec ui.root.setLayout()):

Éditeur de code (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'));

Le panneau de mise en page absolue devrait se présenter comme suit:

ui_absolute_layout.png

widgets()

Lorsque vous ajoutez un widget à un panneau, il est ajouté à la liste des widgets du panneau. L'appel de widgets() sur le panneau renvoie le ui.data.ActiveList que vous pouvez utiliser pour manipuler les widgets du panneau. Prenons l'exemple suivant, qui ajoute des widgets à un panneau, ajoute le panneau au panneau racine, puis met à jour un graphique lorsque l'utilisateur clique sur la carte:

Éditeur de code (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);

Dans cet exemple, notez que les widgets sont d'abord ajoutés au panneau à l'aide de add(). Dans la fonction de rappel enregistrée pour mapper les clics, la liste de widgets de panel est modifiée à la place. Plus précisément, le troisième widget (qui peut ou non exister) est défini de sorte qu'un nouveau graphique de l'indice NDVI au fil du temps s'affiche. Pour en savoir plus sur les fonctions de gestion des événements, consultez la page "Événements".