डिवाइस की मोशन और ओरिएंटेशन इवेंट की मदद से, मोबाइल डिवाइस में पहले से मौजूद एक्सलरोमीटर, जाइरोस्कोप, और कंपास को ऐक्सेस किया जा सकता है.
इन इवेंट का इस्तेमाल कई कामों के लिए किया जा सकता है. जैसे, गेमिंग में किसी किरदार के निर्देश या कार्रवाई को कंट्रोल करना. जियोलोकेशन के साथ इस्तेमाल करने पर, वे ज़्यादा सटीक मोड़-दर-मोड़ नेविगेशन बनाने में मदद कर सकते हैं या किसी खास जगह के बारे में जानकारी उपलब्ध करा सकते हैं.
खास जानकारी
- पता लगाएं कि डिवाइस का कौनसा हिस्सा ऊपर की ओर है और वह कैसे घूम रहा है.
- जानें कि मोशन और ओरिएंटेशन इवेंट का जवाब कब और कैसे देना है.
कौनसा सीमा खत्म है?
डिवाइस ओरिएंटेशन और मोशन इवेंट से मिलने वाले डेटा का इस्तेमाल करने के लिए, दी गई वैल्यू को समझना ज़रूरी है.
अर्थ निर्देशांक फ़्रेम
X
, Y
, और Z
जैसे मान से बताया गया पृथ्वी निर्देशांक फ़्रेम, गुरुत्वाकर्षण और स्टैंडर्ड चुंबकीय ओरिएंटेशन के आधार पर अलाइन है.
निर्देशांक सिस्टम | |
---|---|
X |
पूर्व-पश्चिम दिशा को दिखाता है (जहां पूर्व का मतलब पॉज़िटिव है). |
Y |
उत्तर-दक्षिण की दिशा दिखाता है (जहां उत्तर धनात्मक होता है). |
Z |
यह ऊपर से नीचे की दिशा के बारे में बताता है. यह ज़मीन के लंबवत (जहां ऊपर की तरफ़ पॉज़िटिव) होता है. |
डिवाइस निर्देशांक फ़्रेम
![डिवाइस के कोऑर्डिनेट फ़्रेम का इलस्ट्रेशन](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-9952f2421cc29.png?authuser=6&hl=hi)
x
, y
, और z
वैल्यू से बताए गए डिवाइस कोऑर्डिनेट फ़्रेम को डिवाइस के बीच में अलाइन किया गया है.
निर्देशांक सिस्टम | |
---|---|
X |
स्क्रीन के प्लेन में, दाईं ओर सकारात्मक. |
Y |
स्क्रीन के प्लेन में, ऊपर की ओर सकारात्मक. |
Z |
स्क्रीन या कीबोर्ड के लंबवत, सकारात्मक विस्तार से दूर. |
फ़ोन या टैबलेट पर, डिवाइस का ओरिएंटेशन, स्क्रीन की सामान्य दिशा पर आधारित होता है. फ़ोन और टैबलेट के लिए, यह पोर्ट्रेट मोड में चल रहे डिवाइस पर आधारित है. डेस्कटॉप या लैपटॉप कंप्यूटर के लिए, ओरिएंटेशन को कीबोर्ड के हिसाब से माना जाता है.
रोटेशन डेटा
रोटेशन डेटा को यूलर ऐंगल के तौर पर दिखाया जाता है. यह डिवाइस निर्देशांक फ़्रेम और अर्थ निर्देशांक फ़्रेम के बीच के डिग्री के अंतर को दिखाता है.
ऐल्फ़ा
![डिवाइस के निर्देशांक फ़्रेम में ऐल्फ़ा का इलस्ट्रेशन](https://web.dev/static/articles/device-orientation/image/illustration-alpha-the-9a77d8ab9d7af.png?authuser=6&hl=hi)
z ऐक्सिस के आस-पास रोटेशन. जब डिवाइस का ऊपरी हिस्सा उत्तर की ओर होता है, तो alpha
की वैल्यू 0° होती है. डिवाइस को घड़ी की उलटी दिशा में घुमाने पर,
alpha
की वैल्यू बढ़ती है.
बीटा
![डिवाइस के निर्देशांक फ़्रेम की इमेज](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-b7e152c8a2b6d.png?authuser=6&hl=hi)
x ऐक्सिस का रोटेशन. जब डिवाइस का ऊपरी और निचला हिस्सा पृथ्वी की सतह से समान दूरी पर होता है, तब beta
की वैल्यू 0° होती है. जैसे-जैसे डिवाइस का ऊपरी हिस्सा पृथ्वी की सतह की ओर बढ़ता है, मान बढ़ता जाता है.
गामा
![डिवाइस के निर्देशांक फ़्रेम की इमेज](https://web.dev/static/articles/device-orientation/image/illustration-device-coor-0377d10426e9c.png?authuser=6&hl=hi)
y ऐक्सिस का चारों ओर का रोटेशन. जब डिवाइस के बाएं और दाएं किनारे पृथ्वी की सतह से समान दूरी पर होते हैं, तब gamma
की वैल्यू 0° होती है. जैसे-जैसे दाईं ओर पृथ्वी की सतह की ओर जाता है, मान बढ़ता जाता है.
डिवाइस की स्क्रीन की दिशा
डिवाइस ओरिएंटेशन इवेंट, रोटेशन डेटा दिखाता है. इस डेटा में यह जानकारी शामिल होती है कि डिवाइस का कितना हिस्सा आगे-पीछे झुकाया गया है. साथ ही, अगर फ़ोन या लैपटॉप का कंपास है, तो यह जानकारी कि डिवाइस किस दिशा में है.
कम से कम इस्तेमाल करें.
सहायता के लिए जांच करें.
हर ओरिएंटेशन इवेंट पर यूज़र इंटरफ़ेस (यूआई) अपडेट न करें. इसके बजाय, requestAnimationFrame
पर सिंक करें.
डिवाइस ओरिएंटेशन इवेंट का इस्तेमाल कब करना चाहिए
डिवाइस ओरिएंटेशन इवेंट के लिए, कई तरीकों से इस्तेमाल किया जा सकता है. उदाहरणों में ये शामिल हैं:
- जैसे-जैसे उपयोगकर्ता बदलता है वैसे-वैसे मैप को अपडेट करें.
- यूज़र इंटरफ़ेस (यूआई) में छोटे-मोटे बदलाव करना. उदाहरण के लिए, पैरालैक्स इफ़ेक्ट जोड़ना.
- भौगोलिक जगह के साथ इस सुविधा का इस्तेमाल, मोड़-दर-मोड़ नेविगेशन के लिए किया जा सकता है.
सहायता टीम से संपर्क करें और इवेंट सुनें
DeviceOrientationEvent
से जुड़ी जानकारी सुनने के लिए, पहले यह देखें कि ब्राउज़र पर इवेंट काम करते हैं या नहीं. इसके बाद, deviceorientation
इवेंट को सुनने वाले window
ऑब्जेक्ट के साथ, इवेंट लिसनर को अटैच करें.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
डिवाइस ओरिएंटेशन इवेंट मैनेज करना
डिवाइस ओरिएंटेशन इवेंट तब ट्रिगर होता है, जब डिवाइस ओरिएंटेशन में बदलाव करता है या उसे इधर-उधर करता है. यह ऑर्थ कोऑर्डिनेट फ़्रेम के हिसाब से, डिवाइस की मौजूदा स्थिति में अंतर के बारे में डेटा दिखाता है.
आम तौर पर, यह इवेंट तीन प्रॉपर्टी दिखाता है: alpha
,
beta
, और gamma
. मोबाइल 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) | गुरुत्वाकर्षण के साथ त्वरण (m/s2) |
---|---|---|---|
नहीं चल रहा है | [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) | गुरुत्वाकर्षण के साथ त्वरण (m/s2) |
---|---|---|---|
नहीं चल रहा है | [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;
}
जाएं! बटन पर टैप करने के बाद, उपयोगकर्ता को कूदने के लिए कहा जाता है. इस दौरान, पेज ज़्यादा से ज़्यादा (और कम से कम) त्वरण वैल्यू सेव करता है. साथ ही, जंप के बाद, उपयोगकर्ता को उसकी सबसे ज़्यादा रफ़्तार की जानकारी दिखाता है.