ডিভাইসের মোশন ও ওরিয়েন্টেশন ইভেন্ট, মোবাইল ডিভাইসে বিল্ট-ইন অ্যাকসিলরোমিটার, জাইরোস্কোপ ও কম্পাস অ্যাক্সেস করার সুবিধা দেয়।
এইসব ইভেন্ট বিভিন্ন উদ্দেশ্যে ব্যবহার করা যেতে পারে; যেমন, গেমিংয়ে কোনও চরিত্রের দিক বা অ্যাকশন নিয়ন্ত্রণ করতে। জিওলোকেশন সহ ব্যবহার করা হলে, এগুলি আরও সঠিক ধাপে ধাপে নেভিগেশন তৈরি করতে বা নির্দিষ্ট লোকেশন সম্পর্কে তথ্য প্রদান করতে সাহায্য করতে পারে।
সারাংশ
- ডিভাইসের কোন দিকটি উপরের দিকে আছে এবং ডিভাইসটি কীভাবে ঘুরছে তা শনাক্ত করে।
- মোশন ও ওরিয়েন্টেশন ইভেন্টে কখন ও কীভাবে প্রতিক্রিয়া জানাতে হয় তা জানুন।
কোন দিকটি উপরে আছে?
ডিভাইস ওরিয়েন্টেশন ও মোশন ইভেন্ট থেকে পাওয়া ডেটা ব্যবহার করতে, প্রদান করা ভ্যালু বোঝা গুরুত্বপূর্ণ।
আর্থ কোঅর্ডিনেট ফ্রেম
X, Y ও Z মানের মাধ্যমে বর্ণিত পৃথিবীর কোঅর্ডিনেট ফ্রেম, মাধ্যাকর্ষণ ও স্ট্যান্ডার্ড ম্যাগনেটিক ওরিয়েন্টেশনের উপর ভিত্তি করে
অ্যালাইন করা হয়।
| স্থানাঙ্ক সিস্টেম | |
|---|---|
X |
পূর্ব-পশ্চিম দিককে দেখায় (যেখানে পূর্ব দিক পজিটিভ)। |
Y |
উত্তর-দক্ষিণ দিককে বোঝায় (যেখানে উত্তর হল পজিটিভ)। |
Z |
মাটির সাথে লম্বভাবে উপর-নিচের দিক নির্দেশ করে (যেখানে উপর হল পজিটিভ)। |
ডিভাইস কোঅর্ডিনেট ফ্রেম
ডিভাইসের কোঅর্ডিনেট ফ্রেম, যা x, y ও z ভ্যালু দ্বারা বর্ণনা করা হয়েছে, তা ডিভাইসের কেন্দ্রের
ভিত্তিতে অ্যালাইন করা হয়েছে।
| স্থানাঙ্ক সিস্টেম | |
|---|---|
X |
স্ক্রিনের প্লেনে, ডানদিকে পজিটিভ। |
Y |
স্ক্রিনের প্লেনে, উপরের দিকে পজিটিভ। |
Z |
স্ক্রিন বা কীবোর্ডের সাথে লম্বভাবে, পজিটিভ এক্সটেন্ডিং দূরে। |
ফোন বা ট্যাবলেটে, ডিভাইসের ওরিয়েন্টেশন স্ক্রিনের সাধারণ ওরিয়েন্টেশনের উপর ভিত্তি করে নির্ধারিত হয়। ফোন ও ট্যাবলেটের ক্ষেত্রে, এটি ডিভাইসের পোর্ট্রেট মোডে থাকার উপর নির্ভর করে। ডেস্কটপ বা ল্যাপটপ কম্পিউটারের ক্ষেত্রে, কীবোর্ডের সাপেক্ষে ওরিয়েন্টেশন বিবেচনা করা হয়।
রোটেশন ডেটা
ঘূর্ণন ডেটা Euler কোণ হিসেবে দেখানো হয়, যা ডিভাইসের স্থানাঙ্ক ফ্রেম এবং পৃথিবীর স্থানাঙ্ক ফ্রেমের মধ্যে পার্থক্যের ডিগ্রি সংখ্যাকে দেখায়।
আলফা
z অক্ষের চারপাশে ঘূর্ণন। ডিভাইসের উপরের অংশ সরাসরি উত্তর দিকে
নির্দেশ করলে alpha-এর মান ০° হয়। ডিভাইসটি ঘড়ির কাঁটার বিপরীত দিকে ঘোরানো হলে,
alpha ভ্যালু বৃদ্ধি পায়।
বিটা
x অক্ষের চারপাশে ঘূর্ণন। ডিভাইসের উপরের ও নিচের অংশ পৃথিবীর পৃষ্ঠ থেকে সমদূরত্বে থাকলে, beta-এর ভ্যালু ০° হয়। ডিভাইসের উপরের অংশ পৃথিবীর পৃষ্ঠের দিকে যত বেশি ঝুঁকে থাকে,
এই ভ্যালু তত বেশি হয়।
গামা
y অক্ষের চারপাশে ঘূর্ণন। ডিভাইসের বাঁদিকের ও ডানদিকের প্রান্ত পৃথিবীর পৃষ্ঠ থেকে সমদূরত্বে থাকলে gamma-এর ভ্যালু 0° হয়। ডান দিকটি পৃথিবীর পৃষ্ঠের দিকে ঝুঁকে থাকলে
মান বৃদ্ধি পায়।
ডিভাইসের ওরিয়েন্টেশন
ডিভাইস ওরিয়েন্টেশন ইভেন্ট রোটেশন ডেটা রিটার্ন করে, যার মধ্যে ডিভাইসটি সামনে থেকে পিছনে, পাশাপাশি কতটা ঝুঁকে আছে এবং ফোন বা ল্যাপটপে কম্পাস থাকলে, ডিভাইসটি কোন দিকে মুখ করে আছে তা অন্তর্ভুক্ত থাকে।
কম ব্যবহার করুন।
Test for support.
প্রতিটি ওরিয়েন্টেশন ইভেন্টে UI আপডেট করবেন না; পরিবর্তে, requestAnimationFrame-এ সিঙ্ক করুন।
ডিভাইস ওরিয়েন্টেশন ইভেন্ট কখন ব্যবহার করতে হবে
ডিভাইস ওরিয়েন্টেশন ইভেন্টের একাধিক ব্যবহার আছে। নিচে কয়েকটি উদাহরণ দেওয়া হল:
- ব্যবহারকারী সরলে ম্যাপ আপডেট করুন।
- UI-তে সূক্ষ্ম পরিবর্তন, যেমন, প্যারালাক্স এফেক্ট যোগ করা।
- জিওলোকেশন সহ, ধাপে ধাপে নেভিগেশনের জন্য ব্যবহার করা যেতে পারে।
সহায়তার জন্য চেক করুন এবং ইভেন্ট শুনুন
DeviceOrientationEvent-এর জন্য শুনতে, প্রথমে ব্রাউজার ইভেন্ট সমর্থন করে কিনা তা দেখতে চেক করুন। তারপর, deviceorientation ইভেন্ট শোনার জন্য window অবজেক্টে একটি ইভেন্ট লিসনার অ্যাটাচ করুন।
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
ডিভাইস ওরিয়েন্টেশন ইভেন্ট ম্যানেজ করুন
ডিভাইসটি সরানোর বা ওরিয়েন্টেশন পরিবর্তন করার সময় ডিভাইস ওরিয়েন্টেশন ইভেন্ট ট্রিগার হয়। এটি পৃথিবীর স্থানাঙ্ক ফ্রেমের তুলনায় ডিভাইসের বর্তমান পজিশনের পার্থক্য সম্পর্কিত ডেটা প্রদান করে।
ইভেন্ট সাধারণত তিনটি প্রপার্টি রিটার্ন করে: alpha,
beta এবং gamma। মোবাইল Safari-তে, কম্পাস হেডিংয়ের সাথে একটি অতিরিক্ত প্যারামিটার
webkitCompassHeading
ফেরত পাঠানো হয়।
ডিভাইস মোশন
ডিভাইস ওরিয়েন্টেশন ইভেন্ট রোটেশন ডেটা রিটার্ন করে, যার মধ্যে ডিভাইসটি সামনে থেকে পিছনে, পাশাপাশি কতটা ঝুঁকে আছে এবং ফোন বা ল্যাপটপে কম্পাস থাকলে, ডিভাইসটি কোন দিকে মুখ করে আছে তা অন্তর্ভুক্ত থাকে।
ডিভাইসের বর্তমান মোশন প্রয়োজন হলে, ডিভাইসের মোশন ব্যবহার করুন।
rotationRate °/সেকেন্ডে প্রদান করা হয়।
acceleration এবং accelerationWithGravity মি/সেকেন্ড২-এ প্রদান করা হয়।
ব্রাউজার ইমপ্লিমেন্টেশনের মধ্যে পার্থক্য সম্পর্কে সচেতন থাকুন।
ডিভাইস মোশন ইভেন্ট কখন ব্যবহার করতে হয়
ডিভাইস মোশন ইভেন্টের একাধিক ব্যবহার আছে। নিচে কয়েকটি উদাহরণ দেওয়া হল:
- ডেটা রিফ্রেশ করতে ঝাঁকানোর অঙ্গভঙ্গি।
- গেমের মধ্যে, কোনও চরিত্রকে লাফানো বা সরানোর জন্য।
- স্বাস্থ্য ও ফিটনেস অ্যাপের জন্য।
সহায়তার জন্য চেক করা এবং ইভেন্ট শোনা
DeviceMotionEvent শোনার জন্য, প্রথমে চেক করে দেখুন যে ইভেন্টগুলি
ব্রাউজারে কাজ করে কিনা। তারপর devicemotion ইভেন্ট শোনার জন্য window
অবজেক্টে একটি ইভেন্ট লিসনার অ্যাটাচ করুন।
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
ডিভাইস মোশন ইভেন্ট ম্যানেজ করা
ডিভাইস মোশন ইভেন্ট নিয়মিত বিরতিতে ফায়ার করে এবং সেই মুহূর্তে ডিভাইসের ঘূর্ণন (°/সেকেন্ডে) এবং ত্বরণ (মি/সেকেন্ড২-এ) সম্পর্কিত ডেটা রিটার্ন করে। কিছু ডিভাইসে মাধ্যাকর্ষণের প্রভাব বাদ দেওয়ার জন্য প্রয়োজনীয় হার্ডওয়্যার নেই।
ইভেন্টটি চারটি প্রপার্টি রিটার্ন করে,
accelerationIncludingGravity,
acceleration, যা মাধ্যাকর্ষণের প্রভাব বাদ দেয়,
rotationRate এবং interval।
যেমন, একটি ফোন সমতল টেবিলের উপর রাখা আছে এবং তার স্ক্রিন উপরের দিকে মুখ করে আছে।
| রাজ্য | রোটেশন | অ্যাক্সিলারেশন (m/s2) | মাধ্যাকর্ষণ সহ অ্যাক্সিলারেশন (m/s২) |
|---|---|---|---|
| সরছে না | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| আকাশের দিকে উপরে উঠে যাওয়া | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| শুধুমাত্র ডানদিকে সরানো হচ্ছে | [0, 0, 0] | [৩, ০, ০] | [3, 0, 9.81] |
| উপরে ডানদিকে সরানো হচ্ছে | [0, 0, 0] | [৫, ০, ৫] | [5, 0, 14.81] |
অন্যদিকে, ফোনটি যদি এমনভাবে ধরা হয় যাতে স্ক্রিনটি মাটির সাথে লম্বভাবে থাকে এবং দর্শক সরাসরি দেখতে পান:
| রাজ্য | রোটেশন | অ্যাক্সিলারেশন (m/s2) | মাধ্যাকর্ষণ সহ অ্যাক্সিলারেশন (m/s২) |
|---|---|---|---|
| সরছে না | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| আকাশের দিকে উপরে উঠে যাওয়া | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| শুধুমাত্র ডানদিকে সরানো হচ্ছে | [0, 0, 0] | [৩, ০, ০] | [3, 9.81, 0] |
| উপরে ডানদিকে সরানো হচ্ছে | [0, 0, 0] | [৫, ৫, ০] | [5, 14.81, 0] |
স্যাম্পেল: কোনও বস্তুর সর্বোচ্চ ত্বরণ গণনা করা
ডিভাইস মোশন ইভেন্ট ব্যবহার করার একটি উপায় হল কোনও অবজেক্টের সর্বাধিক ত্বরণ গণনা করা। যেমন, কোনও ব্যক্তি লাফ দিলে তার সর্বাধিক ত্বরণ কত?
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;
}
'শুরু করুন!' বোতামে ট্যাপ করার পরে, ব্যবহারকারীকে লাফ দিতে বলা হয়। সেই সময়, পৃষ্ঠাটি সর্বাধিক (এবং সর্বনিম্ন) ত্বরণের মান স্টোর করে এবং জাম্পের পরে, ব্যবহারকারীকে তার সর্বাধিক ত্বরণ বলে।