जावास्क्रिप्ट से एक्सेलेरोमीटर / जाइरोस्कोप डेटा का उपयोग कैसे करें?

Question

मैं हाल ही में कुछ वेबसाइटों पर आया हूं जो अभिविन्यास या आंदोलन में परिवर्तन का पता लगाते हुए, अपने लैपटॉप पर एक्सेलेरोमीटर या जाइरोस्कोप का उपयोग कर रहा है।

यह कैसे किया जाता है? क्या मुझे windowऑब्जेक्ट पर किसी प्रकार की घटना की सदस्यता लेनी चाहिए ?

किन उपकरणों (लैपटॉप, मोबाइल फोन, टैबलेट) पर यह काम करने के लिए जाना जाता है?

---

^{NB : मैं वास्तव में पहले से ही इस सवाल का जवाब (भाग) जानता हूं, और मैं इसे तुरंत पोस्ट करने जा रहा हूं। कारण यह है कि मैं प्रश्न यहाँ पोस्टिंग कर रहा हूँ, बाकी सब जानते हैं कि एक्सीलरोमीटर डेटा जाने के लिए है है जावास्क्रिप्ट में उपलब्ध (कुछ उपकरणों पर) और समुदाय इस विषय पर नए निष्कर्ष पोस्ट करने के लिए चुनौती देने के लिए। वर्तमान में, इन सुविधाओं का लगभग कोई दस्तावेज नहीं है।}

Comments

महान प्रयास, बहुत बहुत धन्यवाद। क्या आपको लगता है कि 3 साल बाद उत्तर को किसी भी अपडेट की आवश्यकता है?

— बार्टेक बैनाचविच

@BartekBanachewicz मुझे इस एक पर बाहर बुलाने के लिए धन्यवाद। मैं "सामुदायिक विकि" के उत्तर को हस्तांतरित करूंगा, यह उम्मीद करते हुए कि कोई और अधिक अप-टू-डेट ज्ञान कला की वर्तमान स्थिति को प्रतिबिंबित करने के लिए इसे अपडेट करेगा।

— जोर्न शॉ-रोड

मुझे पता नहीं चला कि क्या इस ऑपरेशन के लिए उपयोगकर्ता की सहमति की आवश्यकता है। मैं एक नया सवाल नहीं करना चाहता था क्योंकि यह आपके प्रश्न के साथ पूरी तरह से फिट बैठता है। शायद हम इसे यहाँ जोड़ सकते हैं? किसी को पता है अगर यह स्पष्ट सहमति की आवश्यकता है? क्या सभी ब्राउज़र और सभी मोबाइल OS में ऐसा है?

— सिल्वर

Answer 1

2019+ में ऐसा करने का तरीका DeviceOrientationएपीआई का उपयोग करना है । यह डेस्कटॉप और मोबाइल पर अधिकांश आधुनिक ब्राउज़रों में काम करता है ।

window.addEventListener("deviceorientation", handleOrientation, true);

अपने ईवेंट श्रोता को पंजीकृत करने के बाद (इस मामले में, एक जावास्क्रिप्ट फ़ंक्शन जिसे हैंडलऑरिएशन ()) कहा जाता है, आपके श्रोता फ़ंक्शन को समय-समय पर अद्यतन अभिविन्यास डेटा के साथ बुलाया जाता है।

ओरिएंटेशन इवेंट में चार मान होते हैं:

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

ईवेंट हैंडलर फ़ंक्शन कुछ इस तरह दिख सकता है:

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;
  // Do stuff with the new orientation data
}

Answer 2

वर्तमान में तीन अलग-अलग ईवेंट हैं, जो क्लाइंट डिवाइस के चलने पर ट्रिगर हो भी सकते हैं और नहीं भी। उनमें से दो उन्मुखीकरण के आसपास केंद्रित हैं और अंतिम गति पर हैं :

• ondeviceorientationChrome के डेस्कटॉप संस्करण पर काम करने के लिए जाना जाता है, और अधिकांश Apple लैपटॉप में काम करने के लिए हार्डवेयर की आवश्यकता होती है। यह iOS 4 के साथ iPhone 4 पर मोबाइल सफारी पर भी काम करता है। ईवेंट हैंडलर समारोह में, आप उपयोग कर सकते हैं alpha, beta, gammaकार्य करने के लिए केवल तर्क के रूप में आपूर्ति की घटना डेटा पर मान।

• onmozorientationफ़ायरफ़ॉक्स 3.6 और नए पर समर्थित है। फिर से, यह Apple के अधिकांश लैपटॉप पर काम करने के लिए जाना जाता है, लेकिन एक्सेलेरोमीटर के साथ विंडोज या लिनक्स मशीनों पर भी काम कर सकता है। ईवेंट हैंडलर समारोह, के लिए रंग-रूप में x, y, zइवेंट डेटा पर खेतों पहले तर्क के रूप में की आपूर्ति की।

• ondevicemotioniPhone 3GS + 4 और iPad (iOS 4.2 के साथ दोनों) पर काम करने के लिए जाना जाता है, और क्लाइंट डिवाइस के वर्तमान त्वरण से संबंधित डेटा प्रदान करता है। हैंडलर कार्य है के लिए पारित घटना डेटा accelerationऔर accelerationIncludingGravityहै, जो दोनों एक धुरी के लिए तीन क्षेत्रों है: x, y,z

"भूकंप का पता लगाने" का नमूना वेबसाइट ifबयानों की एक श्रृंखला का उपयोग करके यह पता लगाने के लिए करती है कि किस घटना को (कुछ प्राथमिकता वाले क्रम में) संलग्न करना है और एक सामान्य tiltफ़ंक्शन को प्राप्त डेटा पास करना है:

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

निरंतर कारकों 2 और 50 का उपयोग पहले वाले लोगों के साथ दो बाद की घटनाओं से रीडिंग को "संरेखित" करने के लिए किया जाता है, लेकिन ये किसी भी तरह से सटीक प्रतिनिधित्व नहीं हैं। इस सरल "खिलौना" परियोजना के लिए यह ठीक काम करता है, लेकिन अगर आपको कुछ अधिक गंभीर चीज़ों के लिए डेटा का उपयोग करने की आवश्यकता है, तो आपको विभिन्न घटनाओं में प्रदान किए गए मूल्यों की इकाइयों से परिचित होना होगा और उनके साथ सम्मान करना होगा :)

Comments

कभी-कभी एक उत्तर सिर्फ नाखून देता है!

— स्कॉट एवरडेन

यदि कोई आश्चर्य करता है - फ़ायरफ़ॉक्स 8.0 के लिए ondevicemotion काम करता है, लेकिन गलत तरीके से (0-9) बढ़ाया जाता है, लेकिन यह बाद के संस्करणों (10.0) में तय किया गया लगता है। ओपेरा मोबाइल पर उनमें से कोई भी काम नहीं करता है और सभी मानक डिफ़ॉल्ट नोकिया एन 9 ब्राउज़र पर ठीक काम करते हैं।

— नक्स

MozOrientation इवेंट फ़ायरफ़ॉक्स 6 में अप्रचलित के रूप में हटा दिया गया था। इसलिए अब वे सभी मानकीकृत एपीआई का उपयोग कर रहे हैं।

— क्रिस मॉर्गन

यह फ़ायरफ़ॉक्स 30 में काम नहीं करता है, जैसा कि इस फिडल में दिखाया गया है । :(

— ब्विंटन

sidenote: Plax.js , जिसका उपयोग github के 404 और 500 पृष्ठों में किया जाता है, ondeviceorientation का उपयोग करता है ।

— योश

Answer 3

अन्य पोस्ट में उत्कृष्ट स्पष्टीकरण के लिए एक टिप्पणी नहीं जोड़ सकते हैं लेकिन यह उल्लेख करना चाहते हैं कि एक महान प्रलेखन स्रोत यहां पाया जा सकता है ।

एक्सेलेरोमीटर के लिए ईवेंट फ़ंक्शन को पंजीकृत करना पर्याप्त है जैसे:

if(window.DeviceMotionEvent){
  window.addEventListener("devicemotion", motion, false);
}else{
  console.log("DeviceMotionEvent is not supported");
}

हैंडलर के साथ:

function motion(event){
  console.log("Accelerometer: "
    + event.accelerationIncludingGravity.x + ", "
    + event.accelerationIncludingGravity.y + ", "
    + event.accelerationIncludingGravity.z
  );
}

और मैग्नेटोमीटर के लिए निम्नलिखित घटना हैंडलर को पंजीकृत करना होगा:

if(window.DeviceOrientationEvent){
  window.addEventListener("deviceorientation", orientation, false);
}else{
  console.log("DeviceOrientationEvent is not supported");
}

एक हैंडलर के साथ:

function orientation(event){
  console.log("Magnetometer: "
    + event.alpha + ", "
    + event.beta + ", "
    + event.gamma
  );
}

गाइरोस्कोप के लिए गति घटना में निर्दिष्ट क्षेत्र भी हैं, लेकिन यह सार्वभौमिक रूप से समर्थित नहीं लगता है (जैसे कि यह सैमसंग गैलेक्सी नोट पर काम नहीं करता था)।

GitHub पर एक सरल कार्य कोड है

Answer 4

यहां उपयोगी उपयोग करें: https://developer.mozilla.org/en-US/docs/Web/Events/MozOrientation

function orientationhandler(evt){


  // For FF3.6+
  if (!evt.gamma && !evt.beta) {
    evt.gamma = -(evt.x * (180 / Math.PI));
    evt.beta = -(evt.y * (180 / Math.PI));
  }

  // use evt.gamma, evt.beta, and evt.alpha 
  // according to dev.w3.org/geo/api/spec-source-orientation


}

window.addEventListener('deviceorientation',  orientationhandler, false);
window.addEventListener('MozOrientation',     orientationhandler, false);