ডিভাইস ওরিয়েন্টেশন & গতি

Pete LePage

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

এই ঘটনা অনেক উদ্দেশ্যে ব্যবহার করা যেতে পারে; গেমিং এ, উদাহরণস্বরূপ, একটি চরিত্রের দিক বা ক্রিয়া নিয়ন্ত্রণ করা। যখন ভৌগলিক অবস্থানের সাথে ব্যবহার করা হয়, তখন তারা আরও সঠিক মোড় ঘুরিয়ে নেভিগেশন তৈরি করতে বা একটি নির্দিষ্ট অবস্থান সম্পর্কে তথ্য প্রদান করতে সহায়তা করতে পারে।

সতর্কতা: সমস্ত ব্রাউজার একই স্থানাঙ্ক সিস্টেম ব্যবহার করে না, এবং তারা অভিন্ন পরিস্থিতিতে বিভিন্ন মান রিপোর্ট করতে পারে। এটি সময়ের সাথে উন্নত হয়েছে, তবে আপনার পরিস্থিতি পরীক্ষা করতে ভুলবেন না।

সারাংশ

• ডিভাইসের কোন দিকে আছে এবং ডিভাইসটি কিভাবে ঘোরে তা সনাক্ত করুন।
• গতি এবং অভিযোজন ইভেন্টগুলিতে কখন এবং কীভাবে প্রতিক্রিয়া জানাতে হয় তা শিখুন।

কোন শেষ পর্যন্ত?

ডিভাইসের অভিযোজন এবং গতি ঘটনাগুলি যে ডেটা ফেরত দেয় তা ব্যবহার করার জন্য, প্রদত্ত মানগুলি বোঝা গুরুত্বপূর্ণ৷

আর্থ সমন্বয় ফ্রেম

X , Y , এবং Z মান দ্বারা বর্ণিত আর্থ কোঅর্ডিনেট ফ্রেমটি মাধ্যাকর্ষণ এবং মানক চৌম্বকীয় অভিযোজনের উপর ভিত্তি করে সারিবদ্ধ।

সমন্বয় ব্যবস্থা
X	পূর্ব-পশ্চিম দিক প্রতিনিধিত্ব করে (যেখানে পূর্ব ইতিবাচক)।
Y	উত্তর-দক্ষিণ দিক প্রতিনিধিত্ব করে (যেখানে উত্তর ইতিবাচক)।
Z	উপরে-নিচের দিকটি প্রতিনিধিত্ব করে, মাটিতে লম্ব (যেখানে উপরে ধনাত্মক)।

ডিভাইস সমন্বয় ফ্রেম

ডিভাইস স্থানাঙ্ক ফ্রেমের চিত্রণ

ডিভাইস স্থানাঙ্ক ফ্রেম, x , y , এবং z মান দ্বারা বর্ণিত, ডিভাইসের কেন্দ্রের উপর ভিত্তি করে সারিবদ্ধ করা হয়।

সমন্বয় ব্যবস্থা
X	পর্দার সমতলে, ডানদিকে ইতিবাচক।
Y	পর্দার সমতলে, উপরের দিকে ইতিবাচক।
Z	স্ক্রীন বা কীবোর্ডে লম্ব, ইতিবাচক দূরে প্রসারিত।

একটি ফোন বা ট্যাবলেটে, ডিভাইসের অভিযোজন স্ক্রিনের সাধারণ অভিযোজনের উপর ভিত্তি করে। ফোন এবং ট্যাবলেটের জন্য, এটি প্রতিকৃতি মোডে থাকা ডিভাইসের উপর ভিত্তি করে। ডেস্কটপ বা ল্যাপটপ কম্পিউটারের জন্য, কীবোর্ডের সাথে অভিযোজন বিবেচনা করা হয়।

ঘূর্ণন তথ্য

ঘূর্ণন ডেটা একটি অয়লার কোণ হিসাবে ফেরত দেওয়া হয়, যা ডিভাইস স্থানাঙ্ক ফ্রেম এবং আর্থ স্থানাঙ্ক ফ্রেমের মধ্যে ডিগ্রীর পার্থক্যের সংখ্যা উপস্থাপন করে।

আলফা

ডিভাইস স্থানাঙ্ক ফ্রেমে আলফার ইলাস্ট্রেশন

z অক্ষের চারপাশে ঘূর্ণন। alpha মান 0° হয় যখন ডিভাইসের শীর্ষটি সরাসরি উত্তরে নির্দেশিত হয়। ডিভাইসটিকে ঘড়ির কাঁটার বিপরীত দিকে ঘোরানো হলে, alpha মান বৃদ্ধি পায়।

বেটা

ডিভাইস স্থানাঙ্ক ফ্রেমে বিটা এর চিত্রণ

x অক্ষের চারপাশে ঘূর্ণন। যখন ডিভাইসের উপরের এবং নীচে পৃথিবীর পৃষ্ঠ থেকে সমান দূরত্বে থাকে তখন beta মান 0° হয়৷ যন্ত্রের উপরের অংশটি পৃথিবীর পৃষ্ঠের দিকে অগ্রসর হওয়ার সাথে সাথে মান বৃদ্ধি পায়।

গামা

ডিভাইস স্থানাঙ্ক ফ্রেমে গামার চিত্রণ

y অক্ষের চারপাশে ঘূর্ণন। যখন ডিভাইসটির বাম এবং ডান প্রান্ত পৃথিবীর পৃষ্ঠ থেকে সমান দূরত্বে থাকে তখন gamma মান 0° হয়। ডান দিকটি পৃথিবীর পৃষ্ঠের দিকে টিপলে মান বৃদ্ধি পায়।

ডিভাইস অভিযোজন

ডিভাইস ওরিয়েন্টেশন ইভেন্ট ঘূর্ণন ডেটা ফেরত দেয়, যার মধ্যে রয়েছে ডিভাইসটি সামনে থেকে পিছনে, পাশে থেকে পাশের দিকে ঝুঁকে আছে এবং, যদি ফোন বা ল্যাপটপে একটি কম্পাস থাকে, তাহলে ডিভাইসটি কোন দিকে মুখ করছে।

সংযতভাবে ব্যবহার করুন। সমর্থন জন্য পরীক্ষা. প্রতিটি ওরিয়েন্টেশন ইভেন্টে UI আপডেট করবেন না; পরিবর্তে, requestAnimationFrame সিঙ্ক করুন।

কখন ডিভাইস ওরিয়েন্টেশন ইভেন্ট ব্যবহার করবেন

ডিভাইস ওরিয়েন্টেশন ইভেন্টের জন্য বেশ কিছু ব্যবহার আছে। উদাহরণ নিম্নলিখিত অন্তর্ভুক্ত:

• ব্যবহারকারী চলে যাওয়ার সাথে সাথে একটি মানচিত্র আপডেট করুন।
• সূক্ষ্ম UI tweaks, উদাহরণস্বরূপ, প্যারালাক্স প্রভাব যোগ করা।
• ভূ-অবস্থানের সাথে একত্রিত করে, টার্ন-বাই-টার্ন নেভিগেশনের জন্য ব্যবহার করা যেতে পারে।

সমর্থনের জন্য পরীক্ষা করুন এবং ইভেন্টগুলির জন্য শুনুন

DeviceOrientationEvent শুনতে, ব্রাউজারটি ইভেন্টগুলিকে সমর্থন করে কিনা তা প্রথমে পরীক্ষা করে দেখুন৷ তারপরে, deviceorientation ইভেন্টগুলির জন্য window অবজেক্টের সাথে একটি ইভেন্ট লিসেনার সংযুক্ত করুন।

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

ডিভাইস ওরিয়েন্টেশন ইভেন্টগুলি পরিচালনা করুন

যখন ডিভাইস সরে যায় বা অভিযোজন পরিবর্তন করে তখন ডিভাইস ওরিয়েন্টেশন ইভেন্ট ফায়ার হয়। এটি আর্থ কোঅর্ডিনেট ফ্রেমের সাথে সম্পর্কিত ডিভাইসটির বর্তমান অবস্থানের মধ্যে পার্থক্য সম্পর্কে ডেটা প্রদান করে।

ইভেন্টটি সাধারণত তিনটি বৈশিষ্ট্য প্রদান করে: alpha , beta এবং gamma । মোবাইল সাফারিতে, কম্পাস শিরোনামের সাথে একটি অতিরিক্ত প্যারামিটার webkitCompassHeading ফেরত দেওয়া হয়।

ডিভাইসের গতি

ডিভাইস ওরিয়েন্টেশন ইভেন্ট ঘূর্ণন ডেটা ফেরত দেয়, যার মধ্যে রয়েছে ডিভাইসটি সামনে থেকে পিছনে, পাশে থেকে পাশের দিকে ঝুঁকে আছে এবং, যদি ফোন বা ল্যাপটপে একটি কম্পাস থাকে, তাহলে ডিভাইসটি কোন দিকে মুখ করছে।

ডিভাইসের বর্তমান গতির প্রয়োজন হলে ডিভাইসের গতি ব্যবহার করুন। rotationRate °/সেকেন্ডে প্রদান করা হয়। মাধ্যাকর্ষণ সহ acceleration এবং accelerationWithGravity m/sec ² এ প্রদান করা হয়। ব্রাউজার বাস্তবায়নের মধ্যে পার্থক্য সম্পর্কে সচেতন হন।

কখন ডিভাইস মোশন ইভেন্ট ব্যবহার করবেন

ডিভাইস মোশন ইভেন্টের জন্য বিভিন্ন ব্যবহার আছে। উদাহরণ নিম্নলিখিত অন্তর্ভুক্ত:

• ডেটা রিফ্রেশ করতে অঙ্গভঙ্গি ঝাঁকান।
• গেমগুলিতে, অক্ষরকে লাফিয়ে বা সরানোর জন্য।
• স্বাস্থ্য এবং ফিটনেস অ্যাপের জন্য।

সমর্থনের জন্য পরীক্ষা করুন এবং ইভেন্টগুলির জন্য শুনুন

DeviceMotionEvent শুনতে, প্রথমে ইভেন্টগুলি ব্রাউজারে সমর্থিত কিনা তা পরীক্ষা করে দেখুন৷ তারপর devicemotion ইভেন্টের জন্য window অবজেক্ট শোনার সাথে একটি ইভেন্ট লিসেনার সংযুক্ত করুন।

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

ডিভাইস মোশন ইভেন্টগুলি পরিচালনা করুন

ডিভাইসের মোশন ইভেন্টটি একটি নিয়মিত ব্যবধানে ফায়ার করে এবং সেই মুহূর্তে ডিভাইসের ঘূর্ণন (°/সেকেন্ডে) এবং ত্বরণ (m/সেকেন্ড ² ) সম্পর্কে ডেটা প্রদান করে। কিছু ডিভাইসে মাধ্যাকর্ষণ প্রভাব বাদ দেওয়ার জন্য হার্ডওয়্যার নেই।

ইভেন্টটি চারটি বৈশিষ্ট্য প্রদান করে, accelerationIncludingGravity , acceleration , যা মাধ্যাকর্ষণ, rotationRate এবং interval প্রভাব বাদ দেয়।

উদাহরণ স্বরূপ, আসুন একটি ফ্ল্যাট টেবিলের উপর শুয়ে থাকা একটি ফোনের দিকে নজর দেওয়া যাক, যার স্ক্রীনটি উপরের দিকে রয়েছে৷

রাজ্য	ঘূর্ণন	ত্বরণ (m/s ^2 )	অভিকর্ষ সহ ত্বরণ (m/s ^2 )
নড়ছে না	[০, ০, ০]	[০, ০, ০]	[০, ০, ৯.৮]
আকাশের দিকে এগিয়ে যাচ্ছে	[০, ০, ০]	[০, ০, ৫]	[০, ০, ১৪.৮১]
শুধুমাত্র ডানদিকে সরানো	[০, ০, ০]	[৩, ০, ০]	[৩, ০, ৯.৮১]
উপরে এবং ডান দিকে সরানো	[০, ০, ০]	[৫, ০, ৫]	[৫, ০, ১৪.৮১]

বিপরীতভাবে, যদি ফোনটি ধরে রাখা হয় তাহলে স্ক্রীনটি মাটিতে লম্ব ছিল এবং দর্শকের কাছে সরাসরি দৃশ্যমান ছিল:

রাজ্য	ঘূর্ণন	ত্বরণ (m/s ^2 )	অভিকর্ষ সহ ত্বরণ (m/s ^2 )
নড়ছে না	[০, ০, ০]	[০, ০, ০]	[০, ৯.৮১, ০]
আকাশের দিকে এগিয়ে যাচ্ছে	[০, ০, ০]	[০, ৫, ০]	[০, ১৪.৮১, ০]
শুধুমাত্র ডানদিকে সরানো	[০, ০, ০]	[৩, ০, ০]	[৩, ৯.৮১, ০]
উপরে এবং ডান দিকে সরানো	[০, ০, ০]	[৫, ৫, ০]	[৫, ১৪.৮১, ০]

নমুনা: একটি বস্তুর সর্বোচ্চ ত্বরণ গণনা করা

ডিভাইস মোশন ইভেন্ট ব্যবহার করার একটি উপায় হল একটি বস্তুর সর্বোচ্চ ত্বরণ গণনা করা। উদাহরণস্বরূপ, একজন ব্যক্তির লাফানোর সর্বোচ্চ ত্বরণ কত?

if (evt.acceleration.x > jumpMax.x) {
  jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
  jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
  jumpMax.z = evt.acceleration.z;
}

ট্যাপ করার পর গো! বোতাম, ব্যবহারকারীকে লাফ দিতে বলা হয়। সেই সময়ের মধ্যে, পৃষ্ঠাটি সর্বাধিক (এবং সর্বনিম্ন) ত্বরণ মান সংরক্ষণ করে এবং লাফানোর পরে, ব্যবহারকারীকে তাদের সর্বাধিক ত্বরণ বলে।

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