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