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