এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

উইন্ডো ম্যানেজমেন্ট API দিয়ে বেশ কয়েকটি ডিসপ্লে পরিচালনা করুন

সংযুক্ত ডিসপ্লে সম্পর্কে তথ্য পান এবং সেই ডিসপ্লের সাপেক্ষে উইন্ডোগুলির অবস্থান নির্ধারণ করুন।

Thomas Steiner

প্রকাশিত: ১৪ সেপ্টেম্বর, ২০২০

উইন্ডো ম্যানেজমেন্ট API

উইন্ডো ম্যানেজমেন্ট API আপনাকে আপনার মেশিনের সাথে সংযুক্ত ডিসপ্লেগুলি গণনা করতে এবং নির্দিষ্ট স্ক্রিনে উইন্ডোজ স্থাপন করতে দেয়।

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

এই API ব্যবহার করতে পারে এমন সাইটগুলির উদাহরণগুলির মধ্যে রয়েছে:

মাল্টি-উইন্ডো গ্রাফিক্স এডিটর আ লা জিম্প সঠিকভাবে স্থাপন করা উইন্ডোতে বিভিন্ন সম্পাদনা সরঞ্জাম স্থাপন করতে পারে।
ভার্চুয়াল ট্রেডিং ডেস্ক একাধিক উইন্ডোতে বাজারের প্রবণতা দেখাতে পারে যার যেকোনো একটি পূর্ণস্ক্রিন মোডে দেখা যাবে।
স্লাইডশো অ্যাপগুলি অভ্যন্তরীণ প্রাথমিক স্ক্রিনে স্পিকার নোট এবং বহিরাগত প্রজেক্টরে উপস্থাপনা দেখাতে পারে।

উইন্ডো ম্যানেজমেন্ট API কীভাবে ব্যবহার করবেন

উইন্ডোজ নিয়ন্ত্রণের জন্য সময়-পরীক্ষিত পদ্ধতি, Window.open() , দুর্ভাগ্যবশত অতিরিক্ত স্ক্রিন সম্পর্কে অবগত নয়। যদিও এই API এর কিছু দিক একটু পুরনো বলে মনে হচ্ছে, যেমন এর windowFeatures DOMString প্যারামিটার, তবুও এটি বছরের পর বছর ধরে আমাদের ভালোভাবে সেবা করেছে। একটি উইন্ডোর অবস্থান নির্দিষ্ট করতে, আপনি স্থানাঙ্কগুলিকে left এবং top (অথবা screenX এবং screenY যথাক্রমে) হিসাবে পাস করতে পারেন এবং পছন্দসই আকারটি 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
*/

প্রযুক্তি খাতে কাজ করা বেশিরভাগ মানুষের মতো, আমাকেও ২০২০ সালে কাজের বাস্তবতার সাথে নিজেকে খাপ খাইয়ে নিতে হয়েছে এবং আমার ব্যক্তিগত হোম অফিস সেট আপ করতে হয়েছে। আমারটি ছবির মতো দেখাচ্ছে (যদি আপনি আগ্রহী হন, তাহলে আমার সেটআপ সম্পর্কে সম্পূর্ণ বিবরণ পড়তে পারেন)। আমার ম্যাকবুকের পাশের আইপ্যাডটি সাইডকারের মাধ্যমে ল্যাপটপের সাথে সংযুক্ত, তাই যখনই আমার প্রয়োজন হবে, আমি দ্রুত আইপ্যাডটিকে দ্বিতীয় স্ক্রিনে রূপান্তর করতে পারি।

দুটি চেয়ারের উপর স্কুল বেঞ্চ। স্কুল বেঞ্চের উপরে একটি ল্যাপটপ এবং দুটি আইপ্যাডের উপর জুতার বাক্স রয়েছে। — একটি মাল্টি-স্ক্রিন সেটআপ।

যদি আমি বড় স্ক্রিনের সুবিধা নিতে চাই, তাহলে আমি কোড নমুনা থেকে পপআপটি দ্বিতীয় স্ক্রিনে রাখতে পারি। আমি এটি এভাবে করি:

popup.moveTo(2500, 50);

এটি একটি মোটামুটি অনুমান, কারণ দ্বিতীয় স্ক্রিনের মাত্রা জানার কোন উপায় নেই। window.screen থেকে প্রাপ্ত তথ্য কেবল বিল্ট-ইন স্ক্রিনটি কভার করে, কিন্তু iPad স্ক্রিনটি নয়। বিল্ট-ইন স্ক্রিনের width ছিল 1680 পিক্সেল, তাই 2500 পিক্সেলে স্থানান্তর করলে উইন্ডোটি iPad-এ স্থানান্তরিত হতে পারে , কারণ আমি জানি যে এটি আমার MacBook-এর ডানদিকে অবস্থিত। সাধারণ ক্ষেত্রে আমি কীভাবে এটি করতে পারি? দেখা যাচ্ছে, অনুমান করার চেয়ে আরও ভালো উপায় আছে। সেই উপায় হল উইন্ডো ম্যানেজমেন্ট API।

বৈশিষ্ট্য সনাক্তকরণ

উইন্ডো ম্যানেজমেন্ট API সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

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

`window-management` অনুমতি

দ্রষ্টব্য: পুরানো window-placement অনুমতি নামটি আর সমর্থিত নয় ।

উইন্ডো ম্যানেজমেন্ট API ব্যবহার করার আগে, আমাকে ব্যবহারকারীর কাছ থেকে অনুমতি নিতে হবে। window-management অনুমতিটি Permissions API ব্যবহার করে নিম্নলিখিতভাবে জিজ্ঞাসা করা যেতে পারে:

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(&quot;pre").textContent = state;
});

নতুন API-এর যেকোনো পদ্ধতি ব্যবহার করার প্রথম প্রচেষ্টায় ব্রাউজারটি গতিশীলভাবে অনুমতি প্রম্পট দেখানোর জন্য বেছে নিতে পারে । আরও জানতে পড়ুন।

`window.screen.isExtended` সম্পত্তি

আমার ডিভাইসে একাধিক স্ক্রিন সংযুক্ত আছে কিনা তা জানতে, আমি window.screen.isExtended প্রোপার্টিটি অ্যাক্সেস করি। এটি true বা false রিটার্ন করে। আমার সেটআপের জন্য, এটি true রিটার্ন করে।

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

`getScreenDetails()` পদ্ধতি

এখন যেহেতু আমি জানি যে বর্তমান সেটআপটি মাল্টি-স্ক্রিন, আমি Window.getScreenDetails() ব্যবহার করে দ্বিতীয় স্ক্রিন সম্পর্কে আরও তথ্য পেতে পারি। এই ফাংশনটি কল করলে একটি অনুমতি প্রম্পট দেখাবে যা আমাকে জিজ্ঞাসা করবে যে সাইটটি আমার স্ক্রিনে উইন্ডো খুলতে এবং স্থাপন করতে পারে কিনা। ফাংশনটি একটি প্রতিশ্রুতি প্রদান করে যা একটি ScreenDetailed অবজেক্টের সাথে সমাধান করে। আমার MacBook Pro 13-এ একটি সংযুক্ত iPad সহ, এতে দুটি 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 এর সাথে সম্পর্কিত। ক্রস-স্ক্রিন উইন্ডো প্লেসমেন্ট বা ডিভাইস পরিবর্তনের সময় অবজেক্টটি আপডেট হয়।

দ্রষ্টব্য: Chromium-এর সর্বশেষ API বাস্তবায়ন "Internal Display 1" এর মতো কম বর্ণনামূলক স্থানধারকের পরিবর্তে, "Built-in Retina Display" এর মতো অন্তর্নিহিত প্ল্যাটফর্ম দ্বারা প্রদত্ত স্ক্রিন লেবেলগুলি ফেরত দেয়।

`screenschange` ইভেন্ট

এখন যে জিনিসটির অভাব আছে তা হল আমার স্ক্রিন সেটআপ কখন পরিবর্তিত হয় তা সনাক্ত করার একটি উপায়। একটি নতুন ইভেন্ট, screenschange , ঠিক তাই করে: যখনই স্ক্রিন কনস্টেলেশন পরিবর্তন করা হয় তখনই এটি সক্রিয় হয়। (লক্ষ্য করুন যে ইভেন্টের নামে "screens" বহুবচন।) এর অর্থ হল যখনই একটি নতুন স্ক্রিন বা বিদ্যমান স্ক্রিন (সাইডেকারের ক্ষেত্রে শারীরিকভাবে বা ভার্চুয়ালি) প্লাগ ইন বা আনপ্লাগ করা হয় তখনই ইভেন্ট সক্রিয় হয়।

আপনাকে নতুন স্ক্রিনের বিবরণ অ্যাসিঙ্ক্রোনাসভাবে দেখতে হবে, 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 । Window Management API একটি নতুন 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);
}

পলিফিল

উইন্ডো ম্যানেজমেন্ট API-তে পলিফিল করা সম্ভব নয়, তবে আপনি এর আকৃতি পরিবর্তন করতে পারেন যাতে আপনি নতুন API-এর বিপরীতে একচেটিয়াভাবে কোড করতে পারেন:

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

API-এর অন্যান্য দিকগুলি, অর্থাৎ, বিভিন্ন স্ক্রিন পরিবর্তন ইভেন্ট এবং FullscreenOptions এর screen সম্পত্তি, কখনই কার্যকর হবে না বা নীরবে অ-সমর্থিত ব্রাউজারগুলি দ্বারা উপেক্ষা করা হবে না।

ডেমো

যদি আপনি বিভিন্ন ক্রিপ্টোকারেন্সির বিকাশের উপর নিবিড় নজর রাখেন, তাহলে আমার অ্যাপ্লিকেশনে একটি সিঙ্গেল-স্ক্রিন সেটআপ ব্যবহার করে আপনি বিছানায় বসেই বাজার পর্যবেক্ষণ করতে পারবেন। (আমি খুব একটা পছন্দ করি না, কারণ আমি এই গ্রহকে ভালোবাসি, কিন্তু, এই প্রবন্ধের খাতিরে, ধরে নিচ্ছি আমি তাই করেছি।)

বিছানার শেষে বিশাল টিভি স্ক্রিন, লেখকের পা আংশিকভাবে দৃশ্যমান। স্ক্রিনে, একটি জাল ক্রিপ্টোকারেন্সি ট্রেডিং ডেস্ক। — আরাম করছি এবং বাজার দেখছি।

ক্রিপ্টো নিয়ে কথা বলতে গেলে, বাজার যেকোনো সময় ব্যস্ত হয়ে উঠতে পারে। যদি এমনটা হয়, তাহলে আমি দ্রুত আমার ডেস্কে চলে যেতে পারি যেখানে আমার মাল্টি-স্ক্রিন সেটআপ আছে। আমি যেকোনো মুদ্রার উইন্ডোতে ক্লিক করতে পারি এবং বিপরীত স্ক্রিনে পূর্ণ স্ক্রিন ভিউতে দ্রুত সম্পূর্ণ বিবরণ দেখতে পারি। গত YCY রক্তপাতের সময় তোলা আমার একটি সাম্প্রতিক ছবি এখানে। এটি আমাকে সম্পূর্ণরূপে অজ্ঞান করে ফেলেছিল এবং আমার হাত আমার মুখের উপর রেখেছিল।

ডেমোটি খেলুন, অথবা GitHub-এ এর সোর্স কোড দেখুন।

নিরাপত্তা এবং অনুমতি

Chrome টিম "শক্তিশালী ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলিতে অ্যাক্সেস নিয়ন্ত্রণ" -এ সংজ্ঞায়িত মূল নীতিগুলি ব্যবহার করে উইন্ডো ম্যানেজমেন্ট API ডিজাইন এবং বাস্তবায়ন করেছে, যার মধ্যে রয়েছে ব্যবহারকারী নিয়ন্ত্রণ, স্বচ্ছতা এবং এরগনোমিক্স। উইন্ডো ম্যানেজমেন্ট API একটি ডিভাইসের সাথে সংযুক্ত স্ক্রিন সম্পর্কে নতুন তথ্য প্রকাশ করে, ব্যবহারকারীদের, বিশেষ করে যাদের ডিভাইসের সাথে ধারাবাহিকভাবে একাধিক স্ক্রিন সংযুক্ত থাকে, তাদের ফিঙ্গারপ্রিন্টিং পৃষ্ঠকে বৃদ্ধি করে। এই গোপনীয়তা উদ্বেগের একটি প্রশমন হিসাবে, উন্মুক্ত স্ক্রিন বৈশিষ্ট্যগুলি সাধারণ স্থান নির্ধারণের ক্ষেত্রে প্রয়োজনীয় ন্যূনতম পরিমাণে সীমাবদ্ধ।

একাধিক স্ক্রিনের তথ্য পেতে এবং অন্যান্য স্ক্রিনে উইন্ডো স্থাপন করতে সাইটগুলির ব্যবহারকারীর অনুমতি প্রয়োজন। যদিও Chromium বিস্তারিত স্ক্রিন লেবেল প্রদান করে, ব্রাউজারগুলি কম বর্ণনামূলক (অথবা এমনকি খালি লেবেল) প্রদান করতে স্বাধীন।

ব্যবহারকারী নিয়ন্ত্রণ

ব্যবহারকারী তাদের সেটআপের এক্সপোজারের সম্পূর্ণ নিয়ন্ত্রণে থাকে। তারা ব্রাউজারে সাইট তথ্য বৈশিষ্ট্যের মাধ্যমে অনুমতি প্রম্পট গ্রহণ বা প্রত্যাখ্যান করতে পারে এবং পূর্বে প্রদত্ত অনুমতি প্রত্যাহার করতে পারে।

এন্টারপ্রাইজ নিয়ন্ত্রণ

Chrome এন্টারপ্রাইজ ব্যবহারকারীরা Atomic Policy Groups সেটিংসের প্রাসঙ্গিক বিভাগে বর্ণিত Window Management API-এর বিভিন্ন দিক নিয়ন্ত্রণ করতে পারেন।

স্বচ্ছতা

উইন্ডো ম্যানেজমেন্ট এপিআই ব্যবহারের অনুমতি দেওয়া হয়েছে কিনা তা ব্রাউজারের সাইটের তথ্যে প্রকাশিত হয়েছে এবং পারমিশন এপিআই দিয়েও এটি জিজ্ঞাসা করা যায়।

অনুমতির স্থায়িত্ব

ব্রাউজারটি অনুমতি প্রদান অব্যাহত রাখে। ব্রাউজারের সাইটের তথ্যের মাধ্যমে অনুমতি প্রত্যাহার করা যেতে পারে।

প্রতিক্রিয়া

API-তে কি এমন কিছু আছে যা আপনার প্রত্যাশা অনুযায়ী কাজ করছে না? নাকি আপনার ধারণা বাস্তবায়নের জন্য প্রয়োজনীয় কোনও পদ্ধতি বা বৈশিষ্ট্য অনুপস্থিত? নিরাপত্তা মডেল সম্পর্কে আপনার কোন প্রশ্ন বা মন্তব্য আছে?

সংশ্লিষ্ট GitHub রেপোতে একটি স্পেক সমস্যা ফাইল করুন, অথবা বিদ্যমান কোনও সমস্যায় আপনার মতামত যোগ করুন।
Chrome এর বাস্তবায়ন সম্পর্কে একটি বাগ ফাইল করুন । যতটা সম্ভব বিস্তারিত তথ্য, পুনরুৎপাদনের নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না এবং Components বাক্সে Blink>Screen>MultiScreen লিখুন।

API এর জন্য সমর্থন দেখান

আপনি কি উইন্ডো ম্যানেজমেন্ট API ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chrome টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ।

আপনি কীভাবে এটি ব্যবহার করার পরিকল্পনা করছেন তা WICG ডিসকোর্স থ্রেডে শেয়ার করুন।
#WindowManagement হ্যাশট্যাগ ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।
অন্যান্য ব্রাউজার বিক্রেতাদের API বাস্তবায়ন করতে বলুন।

রিসোর্স

স্বীকৃতি

উইন্ডো ম্যানেজমেন্ট API স্পেকটি সম্পাদনা করেছেন ভিক্টর কস্টান , জোশুয়া বেল এবং মাইক ওয়াসারম্যান । APIটি বাস্তবায়ন করেছেন মাইক ওয়াসারম্যান এবং অ্যাড্রিয়েন ওয়াকার । এটি পর্যালোচনা করেছেন জো মেডলি , ফ্রাঁসোয়া বিউফোর্ট এবং কেইস বাস্কেস । ছবির জন্য লরা টরেন্ট পুইগকে ধন্যবাদ।