डिवाइस की गति और ओरिएंटेशन इवेंट, मोबाइल डिवाइसों में पहले से मौजूद ऐक्सेलेरोमीटर, जायरोस्कोप, और कंपास को ऐक्सेस करते हैं.
इन इवेंट का इस्तेमाल कई कामों के लिए किया जा सकता है. उदाहरण के लिए, गेमिंग में किसी किरदार की दिशा या कार्रवाई को कंट्रोल करने के लिए. जियोलोकेशन के साथ इस्तेमाल करने पर, ये टर्न-बाय-टर्न नेविगेशन को ज़्यादा सटीक बनाने या किसी खास जगह के बारे में जानकारी देने में मदद कर सकते हैं.
खास जानकारी
- यह पता लगाना कि डिवाइस का कौनसा हिस्सा ऊपर है और डिवाइस कैसे घूम रहा है.
- मोशन और ओरिएंटेशन इवेंट के लिए, जवाब देने का समय और तरीका जानें.
कौनसा सिरा ऊपर है?
डिवाइस के ओरिएंटेशन और मोशन इवेंट से मिलने वाले डेटा का इस्तेमाल करने के लिए, उपलब्ध कराई गई वैल्यू को समझना ज़रूरी है.
Earth कोऑर्डिनेट फ़्रेम
X, Y, और Z वैल्यू से दिखाया गया, पृथ्वी का निर्देशांक फ़्रेम, गुरुत्वाकर्षण और स्टैंडर्ड मैग्नेटिक ओरिएंटेशन के आधार पर अलाइन किया जाता है.
| कोऑर्डिनेट सिस्टम | |
|---|---|
X |
पूर्व-पश्चिम दिशा दिखाता है. इसमें पूर्व को पॉज़िटिव माना जाता है. |
Y |
उत्तर-दक्षिण दिशा दिखाता है. इसमें उत्तर को पॉज़िटिव माना जाता है. |
Z |
यह ऊपर-नीचे की दिशा दिखाता है, जो ज़मीन के लंबवत होती है (जहां ऊपर की दिशा को पॉज़िटिव माना जाता है). |
डिवाइस कोऑर्डिनेट फ़्रेम
डिवाइस के निर्देशांक फ़्रेम को x, y, और z वैल्यू के आधार पर अलाइन किया जाता है. यह डिवाइस के बीच के हिस्से के आधार पर अलाइन किया जाता है.
| कोऑर्डिनेट सिस्टम | |
|---|---|
X |
स्क्रीन के प्लेन में, दाईं ओर पोज़िटिव. |
Y |
स्क्रीन के प्लेन में, सबसे ऊपर की ओर पॉजिटिव. |
Z |
स्क्रीन या कीबोर्ड के लंबवत, पॉज़िटिव दिशा में बढ़ता हुआ. |
फ़ोन या टैबलेट पर, डिवाइस का ओरिएंटेशन, स्क्रीन के सामान्य ओरिएंटेशन पर आधारित होता है. फ़ोन और टैबलेट के लिए, यह डिवाइस के पोर्ट्रेट मोड में होने पर दिखता है. डेस्कटॉप या लैपटॉप कंप्यूटर के लिए, ओरिएंटेशन को कीबोर्ड के हिसाब से तय किया जाता है.
रोटेशन डेटा
घुमाव का डेटा, यूलर ऐंगल के तौर पर दिखाया जाता है. इससे, डिवाइस के निर्देशांक फ़्रेम और Earth के निर्देशांक फ़्रेम के बीच के डिग्री के अंतर का पता चलता है.
ऐल्फ़ा
z ऐक्सिस के आस-पास घुमाना. जब डिवाइस का ऊपरी हिस्सा सीधे उत्तर की ओर होता है, तो alpha वैल्यू 0° होती है. डिवाइस को घड़ी की उल्टी दिशा में घुमाने पर,
alpha वैल्यू बढ़ती है.
बीटा
X-ऐक्सिस के चारों ओर घूमने की गति. जब डिवाइस के ऊपरी और निचले हिस्से, धरती की सतह से बराबर दूरी पर हों, तो beta की वैल्यू 0° होती है. डिवाइस के ऊपरी हिस्से को धरती की सतह की ओर झुकाने पर, वैल्यू बढ़ती है.
गामा
y-ऐक्सिस के आस-पास घुमाना. जब डिवाइस के बाएं और दाएं किनारे, धरती की सतह से बराबर दूरी पर हों, तो gamma की वैल्यू 0° होती है. दाईं ओर के हिस्से को ज़मीन की ओर झुकाने पर, वैल्यू बढ़ती है.
डिवाइस की स्क्रीन की दिशा
डिवाइस के ओरिएंटेशन से जुड़ा इवेंट, घुमाव का डेटा दिखाता है. इसमें यह जानकारी शामिल होती है कि डिवाइस को आगे-पीछे और दाईं-बाईं कितनी दूर घुमाया गया है. अगर फ़ोन या लैपटॉप में कंपास है, तो यह भी पता चलता है कि डिवाइस किस दिशा में है.
कम से कम इस्तेमाल करें.
सहायता के लिए टेस्ट करें.
हर ओरिएंटेशन इवेंट पर यूज़र इंटरफ़ेस (यूआई) को अपडेट न करें. इसके बजाय, requestAnimationFrame के साथ सिंक करें.
डिवाइस के ओरिएंटेशन से जुड़े इवेंट का इस्तेमाल कब करना चाहिए
डिवाइस के ओरिएंटेशन से जुड़े इवेंट का इस्तेमाल कई कामों के लिए किया जा सकता है. उदाहरण के लिए:
- उपयोगकर्ता के एक जगह से दूसरी जगह जाने पर, मैप को अपडेट करना.
- यूज़र इंटरफ़ेस (यूआई) में छोटे बदलाव, जैसे कि पैरलॅक्स इफ़ेक्ट जोड़ना.
- जगह की जानकारी के साथ, इसका इस्तेमाल टर्न-बाय-टर्न नेविगेशन के लिए किया जा सकता है.
सहायता देखना और इवेंट सुनना
DeviceOrientationEvent को सुनने के लिए, पहले यह देखें कि ब्राउज़र में इवेंट काम करते हैं या नहीं. इसके बाद, window इवेंट के लिए सुनने वाले deviceorientation ऑब्जेक्ट में इवेंट लिसनर अटैच करें.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
डिवाइस के ओरिएंटेशन से जुड़े इवेंट मैनेज करना
डिवाइस ओरिएंटेशन इवेंट तब ट्रिगर होता है, जब डिवाइस को घुमाया जाता है या उसका ओरिएंटेशन बदला जाता है. यह Earth कोऑर्डिनेट फ़्रेम के हिसाब से, डिवाइस की मौजूदा स्थिति और उसकी पिछली स्थिति के बीच के अंतर का डेटा दिखाता है.
आम तौर पर, इवेंट तीन प्रॉपर्टी दिखाता है: alpha,
beta, और gamma. मोबाइल Safari पर, कम्पास हेडिंग के साथ एक और पैरामीटर
webkitCompassHeading
दिखता है.
डिवाइस की गति
डिवाइस के ओरिएंटेशन से जुड़ा इवेंट, घुमाव का डेटा दिखाता है. इसमें यह जानकारी शामिल होती है कि डिवाइस को आगे-पीछे और दाईं-बाईं कितनी दूर घुमाया गया है. अगर फ़ोन या लैपटॉप में कंपास है, तो यह भी पता चलता है कि डिवाइस किस दिशा में है.
डिवाइस की मौजूदा गति की जानकारी तब इस्तेमाल करें, जब उसकी ज़रूरत हो.
rotationRate को °/सेकंड में दिखाया जाता है.
acceleration और accelerationWithGravity को मीटर/सेकंड2 में दिखाया जाता है.
ब्राउज़र में लागू करने के तरीकों में अंतर के बारे में जानें.
डिवाइस के मोशन इवेंट का इस्तेमाल कब करना चाहिए
डिवाइस के मोशन इवेंट का इस्तेमाल कई कामों के लिए किया जा सकता है. उदाहरण के लिए:
- डेटा रीफ़्रेश करने के लिए, डिवाइस को हिलाएं.
- गेम में, किरदारों को कूदने या आगे बढ़ने के लिए.
- सेहत और फ़िटनेस से जुड़े ऐप्लिकेशन के लिए.
सहायता देखना और इवेंट सुनना
DeviceMotionEvent को सुनने के लिए, सबसे पहले देखें कि इवेंट, ब्राउज़र में काम करते हैं या नहीं. इसके बाद, window
devicemotion इवेंट के लिए सुनने वाले ऑब्जेक्ट में इवेंट लिसनर अटैच करें.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
डिवाइस के मोशन इवेंट मैनेज करना
डिवाइस मोशन इवेंट, तय समयावधि पर ट्रिगर होता है. साथ ही, उस समय डिवाइस के रोटेशन (°/सेकंड में) और ऐक्सेलरेशन (m/सेकंड2 में) के बारे में डेटा दिखाता है. कुछ डिवाइसों में गुरुत्वाकर्षण के असर को हटाने के लिए हार्डवेयर नहीं होता.
यह इवेंट चार प्रॉपर्टी दिखाता है:
accelerationIncludingGravity,
acceleration. इनमें गुरुत्वाकर्षण, rotationRate, और interval का असर शामिल नहीं होता.
उदाहरण के लिए, एक फ़ोन को टेबल पर सीधा रखें, ताकि उसकी स्क्रीन ऊपर की ओर हो.
| स्थिति | घुमाव | त्वरण (m/s2) | गुरुत्वाकर्षण की वजह से त्वरण (मीटर/सेकंड2) |
|---|---|---|---|
| कोई हलचल नहीं है | [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, 0] | [3, 0, 9.81] |
| ऊपर और दाईं ओर ले जाया गया | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
इसके उलट, अगर फ़ोन को इस तरह से पकड़ा गया था कि उसकी स्क्रीन, ज़मीन के लंबवत हो और दर्शक को सीधे तौर पर दिख रही हो, तो:
| स्थिति | घुमाव | त्वरण (m/s2) | गुरुत्वाकर्षण की वजह से त्वरण (मीटर/सेकंड2) |
|---|---|---|---|
| कोई हलचल नहीं है | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| आसमान की ओर बढ़ना | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| सिर्फ़ दाईं ओर मूव करना | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| ऊपर और दाईं ओर जा रहा है | [0, 0, 0] | [5, 5, 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;
}
'जाओ!' बटन पर टैप करने के बाद, उपयोगकर्ता को कूदने के लिए कहा जाता है. इस दौरान, पेज पर ऐक्सेलरेशन की ज़्यादा से ज़्यादा (और कम से कम) वैल्यू सेव हो जाती हैं. साथ ही, जंप के बाद उपयोगकर्ता को ऐक्सेलरेशन की ज़्यादा से ज़्यादा वैल्यू बताई जाती है.