पैनल और लेआउट

पैनल

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 उपनाम के अलावा, डिफ़ॉल्ट मैप के बारे में एक और खास बात यह है कि इसमें ज्यामिति में बदलाव करने वाले टूल मौजूद हैं. ui.root में से clear() को डिफ़ॉल्ट मैप के तौर पर सेट करके, अपना यूज़र इंटरफ़ेस (यूआई) बनाने के लिए खाली कैनवस पाएं:

कोड एडिटर (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 है) में बदलाव किया गया है. इसके लिए, मैप को पैनल के तौर पर इस्तेमाल किया गया है और उसमें विजेट जोड़े गए हैं. मैप का लेआउट तय होता है. इसलिए, मैप पर किसी विजेट की पोज़िशन, विजेट की style प्रॉपर्टी की position प्रॉपर्टी से तय होती है. ज़्यादा जानकारी के लिए, एब्सोलूट लेआउट सेक्शन देखें.

जब किसी दूसरे उपयोगकर्ता के साथ Code Editor का लिंक शेयर किया जाता है, तो डिफ़ॉल्ट रूप से 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 पिक्सल पर सेट है और style प्रॉपर्टी के साथ stretch को 'horizontal' पर सेट किया गया है. stretch स्टाइल प्रॉपर्टी, फ़्लो लेआउट वाले पैनल में मौजूद विजेट पर लागू होती है. उदाहरण के लिए, {stretch: 'horizontal'} का मतलब है कि पैनल में उपलब्ध हॉरिज़ॉन्टल स्पेस को भरने के लिए, विजेट बड़ा हो जाएगा. पिछले उदाहरण में, बटनों को कॉलम के बजाय पंक्ति में व्यवस्थित करने के लिए, फ़्लो लेआउट टाइप को 'horizontal' में बदलें.

हॉरिज़ॉन्टल फ़्लो पैनल में, हॉरिज़ॉन्टल तौर पर बड़ा किया गया विजेट, अन्य सभी विजेट के अपनी चौड़ाई ले लेने के बाद, उपलब्ध जगह को भरने के लिए बड़ा हो जाता है. अगर एक से ज़्यादा विजेट को हॉरिज़ॉन्टल तौर पर बड़ा किया जाता है, तो उपलब्ध हॉरिज़ॉन्टल स्पेस को उनके बीच बांटा जाता है. वर्टिकल तौर पर बड़ा किया गया विजेट, पैनल की ऊंचाई को भरने के लिए बड़ा हो जाता है.

वर्टिकल फ़्लो पैनल में, वर्टिकल तौर पर बड़ा किया गया विजेट, अन्य सभी विजेट के अपनी ऊंचाई ले लेने के बाद, उपलब्ध जगह को भरने के लिए बड़ा हो जाता है. अगर एक से ज़्यादा विजेट को वर्टिकल तौर पर बड़ा किया जाता है, तो उपलब्ध वर्टिकल स्पेस को उनके बीच बांटा जाता है. हॉरिज़ॉन्टल तौर पर स्ट्रेच किया गया विजेट, पैनल की चौड़ाई के हिसाब से बड़ा हो जाता है.

समुद्र तल के निरपेक्ष

ऐब्सोलूट लेआउट, पैनल में मौजूद जगहों के हिसाब से विजेट को पोज़िशन करता है. फ़्लो लेआउट के उलट, किसी विजेट की पोज़िशन को तय करने के लिए, विजेट की style प्रॉपर्टी की position प्रॉपर्टी का इस्तेमाल किया जाता है, न कि पैनल में जोड़े जाने के क्रम का. यहां दिए गए उदाहरण में, 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 के विजेट की सूची में बदलाव किया जाता है. खास तौर पर, तीसरा विजेट (जो मौजूद हो सकता है या नहीं) इस तरह सेट किया गया है कि समय के साथ एनडीवीआई का नया चार्ट दिखे. इवेंट पेज पर, इवेंट मैनेज करने वाले फ़ंक्शन के बारे में ज़्यादा जानें.