विंडो मैनेजमेंट एपीआई की मदद से कई डिसप्ले मैनेज करना

कनेक्ट किए गए डिसप्ले और उन डिसप्ले से जुड़ी विंडो की स्थिति के बारे में जानकारी पाएं.

Thomas Steiner

विंडो मैनेजमेंट एपीआई

Window Management API की मदद से, अपनी मशीन से कनेक्ट किए गए डिसप्ले की गिनती की जा सकती है विंडो रखने के लिए किया जा सकता है.

इस्तेमाल के सुझाए गए उदाहरण

उन साइटों के उदाहरण जो इस एपीआई का इस्तेमाल कर सकते हैं:

• मल्टी-विंडो ग्राफ़िक एडिटर आ ला Gimp, सही जगह पर रखे गए विंडो में एडिटिंग टूल.
• वर्चुअल ट्रेडिंग डेस्क कई विंडो में बाज़ार के रुझान दिखा सकते हैं. इनमें से किसी भी विंडो को फ़ुलस्क्रीन मोड.
• स्लाइड शो ऐप्लिकेशन, अंदर की प्राइमरी स्क्रीन पर प्रज़ेंटर के नोट और किसी प्रज़ेंटेशन को बाहरी प्रोजेक्टर है.

विंडो मैनेजमेंट एपीआई को इस्तेमाल करने का तरीका

समस्या

विंडो को कंट्रोल करने का पुराना तरीका, Window.open(), माफ़ करें अतिरिक्त स्क्रीन के बारे में जानकारी न होने की वजह से. हालांकि इस एपीआई के कुछ पहलू थोड़े पुराने लगते हैं, जैसे कि windowFeatures DOMString पैरामीटर के तौर पर रिकॉर्ड कर लिया है, लेकिन इससे हमें कई सालों तक अच्छा फ़ायदा मिल रहा है. किसी विंडो की स्थिति, आप इसे पास कर सकते हैं left और top (या screenX और screenY) के रूप में निर्देशांक इस्तेमाल किए जाते हैं और size इस रूप में दें width और height (या क्रमश: innerWidth और innerHeight). उदाहरण के लिए, बाईं ओर से 50 पिक्सेल पर और ऊपर से 50 पिक्सेल पर 400×300 विंडो, यह वह कोड है जिसे इनका इस्तेमाल कर सकता है:

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

आप यहां दिए गए विकल्पों पर जाकर मौजूदा स्क्रीन के बारे में जानकारी पा सकते हैं window.screen प्रॉपर्टी, जिसमें यह Screen ऑब्जेक्ट दिखाता है. यह है मेरे MacBook Pro 13 “ पर आउटपुट:

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

टेक्नोलॉजी के क्षेत्र में काम करने वाले ज़्यादातर लोगों की तरह, मुझे काम की नई दुनिया के हिसाब से काम करना पड़ा. साथ ही, अपने निजी होम ऑफ़िस. मेरा नाम नीचे दी गई फ़ोटो में है (अगर आपकी दिलचस्पी है, तो सेटअप के बारे में पूरी जानकारी). मेरे MacBook के बगल में मौजूद iPad, लैपटॉप से इसके ज़रिए कनेक्ट किया गया है Sidecar, ताकि जब भी ज़रूरत हो, मैं तुरंत iPad को दूसरी स्क्रीन में जोड़ें.

अगर मुझे बड़ी स्क्रीन का फ़ायदा लेना है, तो कोड सैंपल, दूसरी स्क्रीन पर देखें. मैंने कर दिया इस तरह:

popup.moveTo(2500, 50);

यह एक अनुमान है, क्योंकि दूसरी स्क्रीन के डाइमेंशन को जानने का कोई तरीका नहीं है. जानकारी window.screen से सिर्फ़ बिल्ट-इन स्क्रीन कवर होती है, iPad स्क्रीन नहीं. width को शिकायत की गई बिल्ट-इन स्क्रीन का आकार 1680 पिक्सल था, इसलिए 2500 पिक्सल की जगह बदलने से हो सकता है पर जाना है, क्योंकि मुझे पता चला है कि यह मेरी MacBook की दाईं ओर मौजूद है. ऑफ़र कैसे दें क्या सामान्य मामले में ऐसा किया जा सकता है? बाद में पता चलता है कि अनुमान लगाने से बेहतर तरीका है. इस तरह से विंडो मैनेजमेंट एपीआई.

सुविधा की पहचान

विंडो मैनेजमेंट एपीआई काम करता है या नहीं, यह देखने के लिए इनका इस्तेमाल करें:

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

window-management की अनुमति

Windows Management API का इस्तेमाल करने से पहले, मुझे उपयोगकर्ता से ऐसा करने की अनुमति लेनी होगी. window-management की अनुमति के लिए, इनसे अनुरोध किया जा सकता है: अनुमतियां एपीआई का इस्तेमाल, जैसे:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

जब पुराने और नए नाम वाले ब्राउज़र इस्तेमाल किए जा रहे हों, तब भी अनुमति का अनुरोध करते समय सुरक्षा कोड का इस्तेमाल ज़रूर करें, जैसा कि नीचे दिए गए उदाहरण में बताया गया है.

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

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

window.screen.isExtended प्रॉपर्टी

यह पता लगाने के लिए कि मेरे डिवाइस से एक से ज़्यादा स्क्रीन कनेक्ट हैं या नहीं window.screen.isExtended प्रॉपर्टी. यह true या false दिखाता है. मेरे सेटअप के लिए, यह true दिखाता है.

window.screen.isExtended;
// Returns `true` or `false`.

getScreenDetails() तरीका

अब मुझे पता है कि मौजूदा सेटअप मल्टी-स्क्रीन है, इसलिए मैं इसके बारे में ज़्यादा जानकारी पा सकता हूं दूसरी स्क्रीन, Window.getScreenDetails() का इस्तेमाल कर रही है. इस फ़ंक्शन को कॉल करने पर, अनुमति का एक प्रॉम्प्ट दिखेगा, जो यह मुझसे पूछता है कि क्या साइट, विंडो खोलकर मेरी स्क्रीन पर प्लेस कर सकती है. फ़ंक्शन, प्रॉमिस देता है जो ScreenDetailed ऑब्जेक्ट के साथ रिज़ॉल्व हो जाता है. कनेक्ट किए गए iPad के साथ मेरे MacBook Pro 13 पर, इसमें दो ScreenDetailed ऑब्जेक्ट वाला एक screens फ़ील्ड शामिल है:

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

कनेक्ट की गई स्क्रीन के बारे में जानकारी, screens कलेक्शन में उपलब्ध है. नोट करें कि कैसे iPad के लिए left की शुरुआती कीमत 1680 है, जो डिवाइस में पहले से मौजूद डिसप्ले का width है. यह इससे मुझे यह तय करने में मदद मिलती है कि स्क्रीन को लॉजिक के हिसाब से कैसे व्यवस्थित किया गया है. (एक-दूसरे के बगल में, सभी स्क्रीन के ऊपर) एक-दूसरे से जुड़ी हैं वगैरह). अब हर स्क्रीन के लिए डेटा उपलब्ध है, ताकि यह दिखाया जा सके कि वह isInternal है या नहीं और क्या यह isPrimary वाला है. ध्यान दें कि बिल्टइन स्क्रीन ज़रूरी नहीं है कि वह मुख्य स्क्रीन हो.

currentScreen फ़ील्ड एक लाइव ऑब्जेक्ट है, जो मौजूदा window.screen से जुड़ा है. ऑब्जेक्ट क्रॉस-स्क्रीन विंडो प्लेसमेंट या डिवाइस में होने वाले बदलावों पर अपडेट होता है.

screenschange इवेंट

अब सिर्फ़ एक चीज़ की कमी है, जिससे यह पता चल पाता है कि मेरा स्क्रीन सेटअप कब बदलता है. एक नया इवेंट, screenschange, बिलकुल यही काम करता है: स्क्रीन तारामंडल में बदलाव होने पर यह ट्रिगर हो जाता है. (सूचना उन "स्क्रीन" को इवेंट के नाम में बहुवचन है.) इसका मतलब है कि इवेंट ट्रिगर होने पर जब भी कोई नई स्क्रीन या मौजूदा स्क्रीन (साइडकार के मामले में फ़िज़िकल या वर्चुअल तौर पर) प्लग-इन की गई या हटाई गई है.

ध्यान दें कि आपको नई स्क्रीन की जानकारी को एसिंक्रोनस रूप से, screenschange इवेंट खोजना होगा यह डेटा खुद नहीं देता. स्क्रीन की जानकारी देखने के लिए, कैश मेमोरी में मौजूद लाइव ऑब्जेक्ट का इस्तेमाल करें Screens इंटरफ़ेस.

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

currentscreenchange इवेंट

अगर मुझे सिर्फ़ मौजूदा स्क्रीन (यानी, लाइव ऑब्जेक्ट की वैल्यू) में बदलाव करने में दिलचस्पी है currentScreen), मैं currentscreenchange इवेंट सुन सकता हूं.

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

change इवेंट

आख़िर में, अगर मुझे सिर्फ़ कंक्रीट की स्क्रीन में बदलाव करना है, तो मैं उस स्क्रीन के change इवेंट.

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

फ़ुलस्क्रीन के नए विकल्प

अब तक, एलिमेंट को फ़ुलस्क्रीन मोड में दिखाने के लिए, सही नाम डालने का अनुरोध किया जा सकता था requestFullScreen() तरीका. इस तरीके में options पैरामीटर का इस्तेमाल होता है, जहां से पास किया जा सकता है FullscreenOptions. अब तक, इसकी एकमात्र प्रॉपर्टी navigationUI. विंडो मैनेजमेंट एपीआई, एक नई screen प्रॉपर्टी जोड़ता है. इससे आपको यह तय करने में मदद मिलती है कि किस स्क्रीन पर फ़ुलस्क्रीन व्यू देखना है. उदाहरण के लिए, अगर आपको मुख्य स्क्रीन फ़ुलस्क्रीन:

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

पॉलीफ़िल

Window Management API को पॉलीफ़िल नहीं किया जा सकता. हालांकि, इसके आकार को बदला जा सकता है तो आपके पास नए एपीआई के लिए खास तौर पर, कोड बनाने का विकल्प होता है:

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

एपीआई के दूसरे पहलू, जैसे कि अलग-अलग स्क्रीन में होने वाले बदलाव के इवेंट और इसकी screen प्रॉपर्टी FullscreenOptions को कभी भी फ़ायर या चुपचाप अनदेखा नहीं किया जाएगा इस्तेमाल न करने वाले ब्राउज़र.

डेमो

अगर आप मेरे जैसे लोग हैं, तो आप अलग-अलग तरह के क्रिप्टो करंसी. (वास्तव में, मुझे इस ग्रह से प्यार नहीं लगता, लेकिन अगर इस लेख के लिए, सिर्फ़ यह मान लीजिए कि मैं did.) मेरे मालिकाना हक वाली क्रिप्टो करंसी को ट्रैक करने के लिए, मैंने एक वेब ऐप्लिकेशन बनाया है. इससे मुझे मैं जीवन की हर स्थिति में बाज़ार देखता हूँ, जैसे अपने बिस्तर पर आराम से, जहाँ मेरे पास सिंगल-स्क्रीन सेटअप है.

यह बात क्रिप्टो के बारे में है, इसलिए शेयर बाज़ार में कभी भी उतार-चढ़ाव हो सकता है. अगर ऐसा होता है, तो मैं तुरंत मेरे डेस्क पर जाओ, जहां मैंने एक मल्टी-स्क्रीन सेटअप किया है. मैं किसी भी मुद्रा विंडो पर क्लिक कर सकता हूं और पूरी जानकारी को दूसरी स्क्रीन पर फ़ुलस्क्रीन व्यू में तुरंत देखा जा सकता है. नीचे इसकी हाल की फ़ोटो दी गई है यह मुझे पिछले YCY ब्लडबैथ के दौरान लिया गया था. इसने मुझे पकड़ लिया पूरी तरह से ऑफ़ है और मुझे छोड़ दिया अपने चेहरे पर हाथ रखें.

नीचे एम्बेड किए गए डेमो का इस्तेमाल किया जा सकता है या ग्लिच पर इसका सोर्स कोड देखा जा सकता है.

सुरक्षा और अनुमतियां

Chrome टीम ने विंडो मैनेजमेंट एपीआई को डिज़ाइन और लागू करने के लिए शानदार वेब प्लैटफ़ॉर्म सुविधाओं का ऐक्सेस कंट्रोल करना में बताए गए सिद्धांत, इसमें उपयोगकर्ता के कंट्रोल, पारदर्शिता, और एर्गोनॉमिक्स का इस्तेमाल करना शामिल है. Window Management API डिवाइस से कनेक्ट की गई स्क्रीन के बारे में नई जानकारी, फ़िंगरप्रिंटिंग की सतह को बढ़ाने में खास तौर पर, ऐसे लोग जिनके डिवाइस पर कई स्क्रीन मौजूद हैं. एक निजता से जुड़ी इस समस्या को कम करने के लिए, बिना अनुमति के सार्वजनिक स्क्रीन की प्रॉपर्टी तय की गई सीमा तक ही सीमित हैं. प्लेसमेंट के सामान्य उदाहरणों के लिए. साइटों को मल्टी-स्क्रीन का ऐक्सेस देने के लिए, उपयोगकर्ता की अनुमति ज़रूरी है जानकारी और विंडो को दूसरी स्क्रीन पर लगाना. Chromium, ज़्यादा जानकारी वाले स्क्रीन लेबल दिखाता है, ब्राउज़र कम जानकारी देने वाले (या खाली लेबल भी) दिखाने के लिए स्वतंत्र होते हैं.

ऐप्लिकेशन पर उपयोगकर्ताओं के कंट्रोल की जानकारी

उपयोगकर्ता अपने सेटअप के एक्सपोज़र का पूरा कंट्रोल रखता है. वे अनुमति के संकेत को सेव करने की सुविधा का इस्तेमाल कर सकते हैं. साथ ही, ब्राउज़र खोलें.

एंटरप्राइज़ के लिए कंट्रोल

Chrome Enterprise के उपयोगकर्ता, विंडो मैनेजमेंट एपीआई की कई सुविधाओं को इस तरह कंट्रोल कर सकते हैं: के संबंधित सेक्शन में बताया गया है एटॉमिक पॉलिसी ग्रुप सेटिंग.

पारदर्शिता

विंडो मैनेजमेंट एपीआई के इस्तेमाल की अनुमति दी गई है या नहीं, यह को ब्राउज़र की साइट जानकारी में दिखाया जाता है और अनुमतियां API के ज़रिए भी क्वेरी की जा सकती है.

अनुमति का एक जैसा होना

ब्राउज़र ने अब भी अनुमति दी है. इस अनुमति को ब्राउज़र की साइट पर जाकर वापस लिया जा सकता है जानकारी.

सुझाव/राय दें या शिकायत करें

Chrome टीम, विंडो मैनेजमेंट एपीआई के इस्तेमाल से जुड़े आपके अनुभव जानना चाहती है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या कुछ तरीके उपलब्ध नहीं हैं या प्रॉपर्टी से जोड़ना होगा? सुरक्षा से जुड़े सवाल पूछने या टिप्पणी करने के लिए मॉडल?

• इससे जुड़े GitHub रेपो पर स्पेक्ट समस्या दर्ज करें या अपने विचारों को किसी मौजूदा रिपोर्ट में जोड़ें समस्या.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है?

• new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. पक्का करें कि आपने इसमें ज़्यादा से ज़्यादा जानकारी दी हो इसे दोबारा बनाने के आसान निर्देश दिए जा सकते हैं. साथ ही, इसमें Blink>Screen>MultiScreen डाला जा सकता है कॉम्पोनेंट बॉक्स. Glitch, जल्दी और आसान रेप्रस शेयर करने के लिए शानदार काम करता है.

यह एपीआई काम करता है

क्या आपको विंडो मैनेजमेंट एपीआई इस्तेमाल करना है? आपके सार्वजनिक समर्थन से Chrome को टीम की सहायता करता है. साथ ही, अन्य ब्राउज़र वेंडर को दिखाता है कि उनके लिए सहायता करना कितना ज़रूरी है.

• डब्ल्यूआईसीजी डिस्कोर्स थ्रेड में बताएं कि आपको इसका इस्तेमाल कैसे करना है.
• हैशटैग का इस्तेमाल करके @ChromiumDev को ट्वीट भेजें #WindowManagement और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.
• अन्य ब्राउज़र वेंडर से इस एपीआई को लागू करने के लिए कहें.

मददगार लिंक

• स्पेक्ट ड्राफ़्ट
• सार्वजनिक एक्सप्लेनर
• Window Management API डेमो | विंडो मैनेजमेंट एपीआई डेमो सोर्स
• Chromium ट्रैकिंग बग
• ChromeStatus.com एंट्री
• ब्लिंक कॉम्पोनेंट: Blink>Screen>MultiScreen
• TAG की समीक्षा
• एक्सपेरिमेंट करने की इच्छा

स्वीकार की गई

विंडो मैनेजमेंट एपीआई की खास जानकारी में बदलाव किया गया विक्टर कोस्टन, Joshua Bell, और माइक वासरमैन. एपीआई को इसने लागू किया माइक वासरमैन और ऐड्रिएन वॉकर. इस लेख की समीक्षा इन्होंने की है जो मेडली, फ़्रांसुआ बोफ़र्ट, और कायस बास्क. इन फ़ोटो के लिए, लॉरा टोरेंट पुइग को धन्यवाद.