ಭೌತಿಕ ಜಗತ್ತನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು: ಡಿವೈಸ್ ಮೋಷನ್ APIಯ ಆಳವಾದ ನೋಟ

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ನೇಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಡುವಿನ ಗೆರೆ ಹೆಚ್ಚು ತೆಳುವಾಗುತ್ತಿದೆ. ಆಧುನಿಕ ವೆಬ್ ಬ್ರೌಸರ್‌ಗಳು ಕೇವಲ ಸ್ಥಿರ ಡಾಕ್ಯುಮೆಂಟ್ ವೀಕ್ಷಕಗಳಲ್ಲ; ಅವು ಶ್ರೀಮಂತ, ಸಂವಾದಾತ್ಮಕ ಮತ್ತು ತಲ್ಲೀನಗೊಳಿಸುವ ಅನುಭವಗಳನ್ನು ನೀಡಬಲ್ಲ ಶಕ್ತಿಯುತ ವೇದಿಕೆಗಳಾಗಿವೆ. ಈ ವಿಕಾಸದಲ್ಲಿ ಅತ್ಯಂತ ರೋಚಕವಾದ ಒಂದು ಗಡಿಯೆಂದರೆ, ವೆಬ್ ಭೌತಿಕ ಪ್ರಪಂಚದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವ ಸಾಮರ್ಥ್ಯ. ನಿಮ್ಮ ಪ್ರತಿಯೊಂದು ಓರೆ ಮತ್ತು ಅಲುಗಾಟಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಮೊಬೈಲ್ ಗೇಮ್‌ಗಳಿಂದ ಹಿಡಿದು, ನಿಮ್ಮ ಸುತ್ತಮುತ್ತಲಿನ ಮೇಲೆ ಡಿಜಿಟಲ್ ಮಾಹಿತಿಯನ್ನು ಹೊದಿಸುವ ಆಗ್ಮೆಂಟೆಡ್ ರಿಯಾಲಿಟಿ ವೀಕ್ಷಕಗಳವರೆಗೆ, ಈ ಅನುಭವಗಳು ಶಕ್ತಿಯುತ ಬ್ರೌಸರ್ APIಗಳ ಗುಂಪಿನಿಂದ ಚಾಲಿತವಾಗಿವೆ. ಈ ಸಾಮರ್ಥ್ಯಕ್ಕೆ ಕೇಂದ್ರಬಿಂದುವಾಗಿರುವುದು ಡಿವೈಸ್ ಮೋಷನ್ API.

ಈ ವಿಸ್ತೃತ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ವೆಬ್ ಡೆವಲಪರ್‌ಗಳ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ನಾವು ಡಿವೈಸ್ ಮೋಷನ್ API ಅನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಸಾಧನಗಳಲ್ಲಿ ಕಂಡುಬರುವ ಎರಡು ಮೂಲಭೂತ ಸೆನ್ಸರ್‌ಗಳಿಂದ ಡೇಟಾವನ್ನು ಹೇಗೆ ಪ್ರವೇಶಿಸುವುದು ಮತ್ತು ಅರ್ಥೈಸಿಕೊಳ್ಳುವುದು ಎಂಬುದರ ಮೇಲೆ ಗಮನ ಹರಿಸುತ್ತೇವೆ: ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ಮತ್ತು ಗೈರೊಸ್ಕೋಪ್. ನೀವು ಪ್ರೊಗ್ರೆಸ್ಸಿವ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ (PWA), ಇನ್-ಬ್ರೌಸರ್ ಗೇಮ್, ಅಥವಾ ಒಂದು ಅನನ್ಯ ಯುಟಿಲಿಟಿಯನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಲಿ, ಈ APIಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ, ಅವರು ಜಗತ್ತಿನ ಯಾವುದೇ ಮೂಲೆಯಲ್ಲಿದ್ದರೂ, ಸಂವಾದದ ಹೊಸ ಆಯಾಮವನ್ನು ತೆರೆಯುತ್ತದೆ.

ಮೂಲ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಚಲನೆ vs. ದೃಷ್ಟಿಕೋನ

ನಾವು ಕೋಡ್‌ಗೆ ಧುಮುಕುವ ಮೊದಲು, ಎರಡು ಸಂಬಂಧಿತ ಆದರೆ ವಿಭಿನ್ನ ಪರಿಕಲ್ಪನೆಗಳ ನಡುವೆ ವ್ಯತ್ಯಾಸವನ್ನು ಗುರುತಿಸುವುದು ಬಹಳ ಮುಖ್ಯ: ಸಾಧನದ ಚಲನೆ ಮತ್ತು ಸಾಧನದ ದೃಷ್ಟಿಕೋನ. ಬ್ರೌಸರ್ ಇವುಗಳಿಗಾಗಿ ಪ್ರತ್ಯೇಕ ಈವೆಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:

• ಡಿವೈಸ್ ಮೋಷನ್ (`devicemotion` ಈವೆಂಟ್): ಈ ಈವೆಂಟ್ ಸಾಧನದ ವೇಗೋತ್ಕರ್ಷ ಮತ್ತು ಅದರ ತಿರುಗುವಿಕೆಯ ದರದ ಬಗ್ಗೆ ಮಾಹಿತಿ ನೀಡುತ್ತದೆ. ಸಾಧನವು ಹೇಗೆ ಚಲಿಸುತ್ತಿದೆ ಎಂದು ಇದು ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ. ಈ ಲೇಖನದಲ್ಲಿ ನಮ್ಮ ಪ್ರಾಥಮಿಕ ಗಮನ ಇದೇ ಆಗಿದೆ.
• ಡಿವೈಸ್ ಓರಿಯಂಟೇಶನ್ (`deviceorientation` ಈವೆಂಟ್): ಈ ಈವೆಂಟ್ 3D ಜಾಗದಲ್ಲಿ ಸಾಧನದ ಭೌತಿಕ ದೃಷ್ಟಿಕೋನದ ಬಗ್ಗೆ ಮಾಹಿತಿ ನೀಡುತ್ತದೆ. ಸಾಧನವು ಯಾವ ದಿಕ್ಕಿಗೆ ಮುಖಮಾಡಿದೆ ಎಂದು ಇದು ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಭೂಮಿಯ ಮೇಲಿನ ಒಂದು ಸ್ಥಿರ ನಿರ್ದೇಶಾಂಕ ವ್ಯವಸ್ಥೆಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಕೋನಗಳ ಸರಣಿಯಾಗಿ.

ಇದನ್ನು ಈ ರೀತಿ ಯೋಚಿಸಿ: `devicemotion` ನಿಮಗೆ ಪ್ರಯಾಣದ ಬಗ್ಗೆ ಹೇಳುತ್ತದೆ (ಚಲನೆಯ ಶಕ್ತಿಗಳು), ಆದರೆ `deviceorientation` ನಿಮಗೆ ಗಮ್ಯಸ್ಥಾನದ ಬಗ್ಗೆ ಹೇಳುತ್ತದೆ (ಅಂತಿಮ ಸ್ಥಾನ). ಇವೆರಡನ್ನೂ ಹೆಚ್ಚಾಗಿ ಒಟ್ಟಿಗೆ ಬಳಸಲಾಗುತ್ತದೆಯಾದರೂ, ಅವುಗಳ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಅರಿಯಲು ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ. ಈ ಮಾರ್ಗದರ್ಶಿಗಾಗಿ, ನಾವು `devicemotion` ಈವೆಂಟ್‌ನಿಂದ ಒದಗಿಸಲಾದ ಶ್ರೀಮಂತ ಡೇಟಾದ ಮೇಲೆ ಗಮನ ಹರಿಸುತ್ತೇವೆ, ಇದು ನೇರವಾಗಿ ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ಮತ್ತು ಗೈರೊಸ್ಕೋಪ್‌ನಿಂದ ಬರುತ್ತದೆ.

ಮೂಲಭೂತ ಅಂಶಗಳು: ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ಮತ್ತು ಗೈರೊಸ್ಕೋಪ್‌ಗಳ ವಿವರಣೆ

ಡಿವೈಸ್ ಮೋಷನ್ APIಯ ಹೃದಯಭಾಗದಲ್ಲಿ ಎರಡು ಅದ್ಭುತವಾದ ಮೈಕ್ರೋ-ಎಲೆಕ್ಟ್ರೋಮೆಕಾನಿಕಲ್ ಸಿಸ್ಟಮ್ಸ್ (MEMS) ಹಾರ್ಡ್‌ವೇರ್ ತುಣುಕುಗಳಿವೆ. ಪ್ರತಿಯೊಂದೂ ಏನು ಮಾಡುತ್ತದೆ ಎಂದು ನೋಡೋಣ.

ಅಕ್ಸೆಲೆರೊಮೀಟರ್: ಚಲನೆ ಮತ್ತು ಗುರುತ್ವಾಕರ್ಷಣೆಯನ್ನು ಗ್ರಹಿಸುವುದು

ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ಎನ್ನುವುದು ಸರಿಯಾದ ವೇಗೋತ್ಕರ್ಷವನ್ನು ಅಳೆಯುವ ಒಂದು ಸೆನ್ಸರ್. ಇದು ನೀವು ನಿಮ್ಮ ಫೋನ್ ಅನ್ನು ವೇಗವಾಗಿ ಚಲಿಸಿದಾಗ (ಉದಾಹರಣೆಗೆ, ಅದನ್ನು ಅಲುಗಾಡಿಸಿದಾಗ) ಅನುಭವಿಸುವ ವೇಗೋತ್ಕರ್ಷ ಮಾತ್ರವಲ್ಲ, ಗುರುತ್ವಾಕರ್ಷಣೆಯಿಂದ ಉಂಟಾಗುವ ನಿರಂತರ ವೇಗೋತ್ಕರ್ಷವನ್ನೂ ಸಹ ಅಳೆಯುತ್ತದೆ. ಇದೊಂದು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ: ಸಮತಟ್ಟಾದ ಮೇಜಿನ ಮೇಲೆ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಿರವಾಗಿರುವ ಸಾಧನವು ಇನ್ನೂ ಗುರುತ್ವಾಕರ್ಷಣೆಯ ಬಲವನ್ನು ಅನುಭವಿಸುತ್ತಿದೆ, ಮತ್ತು ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ಇದನ್ನು ಸುಮಾರು 9.81 ಮೀಟರ್ ಪ್ರತಿ ಸೆಕೆಂಡ್ ವರ್ಗ (m/s²) ವೇಗೋತ್ಕರ್ಷ ಎಂದು ಪತ್ತೆ ಮಾಡುತ್ತದೆ.

ವರ್ಲ್ಡ್ ವೈಡ್ ವೆಬ್ ಕನ್ಸೋರ್ಟಿಯಂ (W3C) ವ್ಯಾಖ್ಯಾನಿಸಿದ ಪ್ರಮಾಣಿತ ನಿರ್ದೇಶಾಂಕ ವ್ಯವಸ್ಥೆಯ ಆಧಾರದ ಮೇಲೆ ಮೂರು ಅಕ್ಷಗಳಲ್ಲಿ ಡೇಟಾವನ್ನು ಒದಗಿಸಲಾಗುತ್ತದೆ:

• x-ಅಕ್ಷ: ಪರದೆಯಾದ್ಯಂತ ಎಡದಿಂದ ಬಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ.
• y-ಅಕ್ಷ: ಪರದೆಯಾದ್ಯಂತ ಕೆಳಗಿನಿಂದ ಮೇಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ.
• z-ಅಕ್ಷ: ಪರದೆಗೆ ಲಂಬವಾಗಿ, ಬಳಕೆದಾರರ ಕಡೆಗೆ ಹೊರಕ್ಕೆ ತೋರಿಸುತ್ತದೆ.

`devicemotion` ಈವೆಂಟ್ ನಿಮಗೆ ವೇಗೋತ್ಕರ್ಷಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಎರಡು ಮುಖ್ಯ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೀಡುತ್ತದೆ:

1. accelerationIncludingGravity: ಈ ಆಬ್ಜೆಕ್ಟ್ ಸೆನ್ಸರ್‌ನಿಂದ ಕಚ್ಚಾ ಡೇಟಾವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇದು ಸಾಧನದ ಚಲನೆ ಮತ್ತು ಭೂಮಿಯ ಗುರುತ್ವಾಕರ್ಷಣೆಯ ಬಲಗಳ ಸಂಯೋಜಿತ ಪರಿಣಾಮವನ್ನು ಅಳೆಯುತ್ತದೆ. ಸ್ಪಿರಿಟ್ ಲೆವೆಲ್ ರಚಿಸುವುದು ಅಥವಾ ಓರೆಯನ್ನು ಪತ್ತೆ ಮಾಡುವಂತಹ ಅನೇಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ, ಇದು ಬಳಸಲು ಅತ್ಯಂತ ವಿಶ್ವಾಸಾರ್ಹ ಪ್ರಾಪರ್ಟಿಯಾಗಿದೆ. ಏಕೆಂದರೆ ಗುರುತ್ವಾಕರ್ಷಣೆಯು ಸ್ಥಿರವಾದ, ಊಹಿಸಬಹುದಾದ ಉಲ್ಲೇಖ ಬಿಂದುವನ್ನು ಒದಗಿಸುತ್ತದೆ.
2. acceleration: ಈ ಆಬ್ಜೆಕ್ಟ್ ಗುರುತ್ವಾಕರ್ಷಣೆಯ ಪರಿಣಾಮವನ್ನು ಕಳೆಯುವ ಮೂಲಕ ಬಳಕೆದಾರ-ಪ್ರಾರಂಭಿಸಿದ ಚಲನೆಯನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಬ್ರೌಸರ್ ಮಾಡುವ ಪ್ರಯತ್ನವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಸಿದ್ಧಾಂತದಲ್ಲಿ ಇದು ಉಪಯುಕ್ತವಾಗಿದ್ದರೂ, ಇದರ ಲಭ್ಯತೆ ಮತ್ತು ನಿಖರತೆಯು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಗಬಹುದು. ಇದನ್ನು ಸಾಧಿಸಲು ಅನೇಕ ಸಾಧನಗಳು ಹೈ-ಪಾಸ್ ಫಿಲ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತವೆ, ಅದು ಪರಿಪೂರ್ಣವಾಗಿಲ್ಲದಿರಬಹುದು. ಆದ್ದರಿಂದ, ಅನೇಕ ಬಳಕೆಗಳಿಗೆ, ಕಚ್ಚಾ `accelerationIncludingGravity` ಡೇಟಾದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಮತ್ತು ನಿಮ್ಮ ಸ್ವಂತ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಮಾಡುವುದು ಹೆಚ್ಚು ಸ್ಥಿರವಾದ ಫಲಿತಾಂಶಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.

ಗೈರೊಸ್ಕೋಪ್: ತಿರುಗುವಿಕೆಯನ್ನು ಗ್ರಹಿಸುವುದು

ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ರೇಖೀಯ ಚಲನೆಯನ್ನು ಅಳೆಯುತ್ತದೆಯಾದರೆ, ಗೈರೊಸ್ಕೋಪ್ ಕೋನೀಯ ವೇಗ ಅಥವಾ ತಿರುಗುವಿಕೆಯ ದರವನ್ನು ಅಳೆಯುತ್ತದೆ. ಸಾಧನವು ಪ್ರತಿಯೊಂದು ಮೂರು ಅಕ್ಷಗಳ ಸುತ್ತ ಎಷ್ಟು ವೇಗವಾಗಿ ತಿರುಗುತ್ತಿದೆ ಎಂದು ಇದು ನಿಮಗೆ ತಿಳಿಸುತ್ತದೆ. ಸಾಧನವನ್ನು ತಿರುಗಿಸಿದಾಗ, ತಿರುಗಿಸಿದಾಗ ಅಥವಾ ಪ್ಯಾನ್ ಮಾಡಿದಾಗ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಇದು ಅತ್ಯಗತ್ಯ.

`devicemotion` ಈವೆಂಟ್‌ನ rotationRate ಪ್ರಾಪರ್ಟಿಯಲ್ಲಿ ಗೈರೊಸ್ಕೋಪ್ ಡೇಟಾವನ್ನು ಒದಗಿಸಲಾಗುತ್ತದೆ. ಇದು ಮೂರು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಇದನ್ನು ಡಿಗ್ರಿ ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಅಳೆಯಲಾಗುತ್ತದೆ:

• ಆಲ್ಫಾ: z-ಅಕ್ಷದ ಸುತ್ತ ತಿರುಗುವಿಕೆಯ ದರ (ಟರ್ನ್‌ಟೇಬಲ್‌ನಲ್ಲಿ ರೆಕಾರ್ಡ್‌ನಂತೆ ಸಮತಟ್ಟಾಗಿ ತಿರುಗುವುದು).
• ಬೀಟಾ: x-ಅಕ್ಷದ ಸುತ್ತ ತಿರುಗುವಿಕೆಯ ದರ (ಮುಂದಕ್ಕೆ ಮತ್ತು ಹಿಂದಕ್ಕೆ ಓರೆಯಾಗುವುದು).
• ಗಾಮಾ: y-ಅಕ್ಷದ ಸುತ್ತ ತಿರುಗುವಿಕೆಯ ದರ (ಅಕ್ಕಪಕ್ಕಕ್ಕೆ ಓರೆಯಾಗುವುದು).

ಈ ತಿರುಗುವಿಕೆಯ ವೇಗವನ್ನು ಕಾಲಾನಂತರದಲ್ಲಿ ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ಸಾಧನದ ದೃಷ್ಟಿಕೋನದಲ್ಲಿನ ಬದಲಾವಣೆಯನ್ನು ಲೆಕ್ಕ ಹಾಕಬಹುದು, ಇದು 360-ಡಿಗ್ರಿ ಫೋಟೋ ವೀಕ್ಷಕಗಳು ಅಥವಾ ಸರಳ ಚಲನೆ-ನಿಯಂತ್ರಿತ ಆಟಗಳಂತಹ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಪರಿಪೂರ್ಣವಾಗಿದೆ.

ಪ್ರಾರಂಭಿಸುವುದು: ಡಿವೈಸ್ ಮೋಷನ್ API ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು

ಈಗ ನಾವು ಸಿದ್ಧಾಂತವನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೇವೆ, ಪ್ರಾಯೋಗಿಕವಾಗಿ ನೋಡೋಣ. ಡಿವೈಸ್ ಮೋಷನ್ API ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಕೆಲವು ನಿರ್ಣಾಯಕ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಆಧುನಿಕ ವೆಬ್‌ನ ಭದ್ರತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಗೌಪ್ಯತೆಯ ಮೇಲಿನ ಗಮನವನ್ನು ಪರಿಗಣಿಸಿದಾಗ.

ಹಂತ 1: ಫೀಚರ್ ಪತ್ತೆಹಚ್ಚುವಿಕೆ

ಮೊದಲನೆಯದಾಗಿ, ಬಳಕೆದಾರರ ಬ್ರೌಸರ್ ಅಥವಾ ಸಾಧನವು ಈ API ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ ಎಂದು ನೀವು ಎಂದಿಗೂ ಭಾವಿಸಬಾರದು. ಯಾವಾಗಲೂ ಫೀಚರ್ ಪತ್ತೆಹಚ್ಚುವಿಕೆಯಿಂದ ಪ್ರಾರಂಭಿಸಿ. `window` ಆಬ್ಜೆಕ್ಟ್‌ನಲ್ಲಿ `DeviceMotionEvent` ಆಬ್ಜೆಕ್ಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವುದು ಒಂದು ಸರಳ ವಿಧಾನ.

            if (window.DeviceMotionEvent) {
  console.log("Device Motion is supported");
} else {
  console.log("Device Motion is not supported on this device.");
}
            

              
                Copy
              
            
          

ಈ ಸರಳ ಗಾರ್ಡ್ ಕ್ಲಾಸ್ ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಹಳೆಯ ಡೆಸ್ಕ್‌ಟಾಪ್ ಬ್ರೌಸರ್‌ಗಳಂತಹ ಬೆಂಬಲವಿಲ್ಲದ ಸಾಧನಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ಪರ್ಯಾಯ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಹಂತ 2: ಅನುಮತಿಗಳನ್ನು ವಿನಂತಿಸುವುದು - ಆಧುನಿಕ ವೆಬ್ ಭದ್ರತಾ ಮಾದರಿ

ಇದು ಇಂದಿನ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಬಹುಶಃ ಅತ್ಯಂತ ನಿರ್ಣಾಯಕ ಮತ್ತು ಹೆಚ್ಚಾಗಿ ತಪ್ಪಿಹೋಗುವ ಹಂತವಾಗಿದೆ. ಗೌಪ್ಯತೆ ಮತ್ತು ಭದ್ರತಾ ಕಾರಣಗಳಿಗಾಗಿ, ಅನೇಕ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು, ವಿಶೇಷವಾಗಿ iOS 13 ಮತ್ತು ನಂತರದ ಸಫಾರಿ, ಮೋಷನ್ ಮತ್ತು ಓರಿಯಂಟೇಶನ್ ಸೆನ್ಸರ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ಸ್ಪಷ್ಟ ಬಳಕೆದಾರರ ಅನುಮತಿಯನ್ನು ಕೇಳುತ್ತವೆ. ಈ ಅನುಮತಿಯನ್ನು ಬಟನ್ ಕ್ಲಿಕ್‌ನಂತಹ ನೇರ ಬಳಕೆದಾರರ ಸಂವಹನಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಮಾತ್ರ ವಿನಂತಿಸಬಹುದು.

ಅಂತಹ ಸಾಧನಗಳಲ್ಲಿ ಈ ಅನುಮತಿಯಿಲ್ಲದೆ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸಿದರೆ ಅದು ಎಂದಿಗೂ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ಸರಿಯಾದ ವಿಧಾನವೆಂದರೆ, ಬಳಕೆದಾರರು ಫೀಚರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಬಳಸಬೇಕಾದ ಬಟನ್ ಅಥವಾ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುವುದು.

ಇಲ್ಲಿ ಒಂದು ಉತ್ತಮ-ಅಭ್ಯಾಸದ ಅನುಷ್ಠಾನವಿದೆ:

            const permissionButton = document.getElementById('permission-button');

permissionButton.addEventListener('click', () => {
  // Check if the permission function exists
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    // iOS 13+ devices
    DeviceMotionEvent.requestPermission()
      .then(permissionState => {
        if (permissionState === 'granted') {
          window.addEventListener('devicemotion', handleMotionEvent);
          // Hide the button after permission is granted
          permissionButton.style.display = 'none';
        } else {
          // Handle permission denial
          alert('Permission to access motion sensors was denied.');
        }
      })
      .catch(console.error); // Handle potential errors
  } else {
    // Non-iOS 13+ devices
    window.addEventListener('devicemotion', handleMotionEvent);
    // You might also want to hide the button here as it's not needed
    permissionButton.style.display = 'none';
  }
});

function handleMotionEvent(event) {
  // Data handling logic goes here...
  console.log(event);
}
            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ತುಣುಕು ದೃಢವಾಗಿದೆ ಮತ್ತು ಜಾಗತಿಕವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ಇದು ಮೊದಲು `requestPermission` ವಿಧಾನ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಅದು ಇದ್ದರೆ (iOS 13+ ಪರಿಸರವನ್ನು ಸೂಚಿಸುತ್ತದೆ), ಅದು ಅದನ್ನು ಕರೆಯುತ್ತದೆ. ಈ ವಿಧಾನವು ಅನುಮತಿ ಸ್ಥಿತಿಯೊಂದಿಗೆ ಪರಿಹರಿಸುವ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಸ್ಥಿತಿ 'granted' ಆಗಿದ್ದರೆ, ನಾವು ನಮ್ಮ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸುತ್ತೇವೆ. `requestPermission` ವಿಧಾನ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ, ನಾವು ಬೇರೆ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನಲ್ಲಿದ್ದೇವೆ (ಆಂಡ್ರಾಯ್ಡ್‌ನಲ್ಲಿ ಕ್ರೋಮ್‌ನಂತೆ) ಎಂದು ನಾವು ಊಹಿಸಬಹುದು, ಅಲ್ಲಿ ಅನುಮತಿಯನ್ನು ಡೀಫಾಲ್ಟ್ ಆಗಿ ನೀಡಲಾಗುತ್ತದೆ ಅಥವಾ ವಿಭಿನ್ನವಾಗಿ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ, ಮತ್ತು ನಾವು ನೇರವಾಗಿ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸಬಹುದು.

ಹಂತ 3: ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸುವುದು ಮತ್ತು ನಿರ್ವಹಿಸುವುದು

ಅನುಮತಿಯನ್ನು ಪಡೆದ ನಂತರ, ನೀವು ನಿಮ್ಮ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು `window` ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಲಗತ್ತಿಸುತ್ತೀರಿ. ಸೆನ್ಸರ್ ಡೇಟಾ ಅಪ್‌ಡೇಟ್ ಆದಾಗಲೆಲ್ಲಾ (ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ 60 ಬಾರಿ ಅಥವಾ 60Hz), ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ `DeviceMotionEvent` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ತನ್ನ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ.

ಡೇಟಾವನ್ನು ಪಾರ್ಸ್ ಮಾಡಲು `handleMotionEvent` ಫಂಕ್ಷನ್ ಅನ್ನು ನಿರ್ಮಿಸೋಣ:

            function handleMotionEvent(event) {
  const acceleration = event.acceleration;
  const gravity = event.accelerationIncludingGravity;
  const rotation = event.rotationRate;
  const interval = event.interval;

  // For demonstration, let's display the data
  const dataContainer = document.getElementById('data-container');

  dataContainer.innerHTML = `
    <h3>Acceleration (without gravity)</h3>
    <p>X: ${acceleration.x ? acceleration.x.toFixed(3) : 'N/A'}</p>
    <p>Y: ${acceleration.y ? acceleration.y.toFixed(3) : 'N/A'}</p>
    <p>Z: ${acceleration.z ? acceleration.z.toFixed(3) : 'N/A'}</p>

    <h3>Acceleration (including gravity)</h3>
    <p>X: ${gravity.x ? gravity.x.toFixed(3) : 'N/A'}</p>
    <p>Y: ${gravity.y ? gravity.y.toFixed(3) : 'N/A'}</p>
    <p>Z: ${gravity.z ? gravity.z.toFixed(3) : 'N/A'}</p>

    <h3>Rotation Rate</h3>
    <p>Alpha (z): ${rotation.alpha ? rotation.alpha.toFixed(3) : 'N/A'}</p>
    <p>Beta (x): ${rotation.beta ? rotation.beta.toFixed(3) : 'N/A'}</p>
    <p>Gamma (y): ${rotation.gamma ? rotation.gamma.toFixed(3) : 'N/A'}</p>

    <h3>Update Interval</h3>
    <p>${interval.toFixed(3)} ms</p>
  `;
}
            

              
                Copy
              
            
          

ಈ ಹ್ಯಾಂಡ್ಲರ್ ಫಂಕ್ಷನ್ ಈವೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್‌ನಿಂದ ಸಂಬಂಧಿತ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವಿಭಜಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. `null` ಅಥವಾ `undefined` ಮೌಲ್ಯಗಳಿಗಾಗಿ ಪರಿಶೀಲನೆಗಳನ್ನು ಗಮನಿಸಿ, ಏಕೆಂದರೆ ಎಲ್ಲಾ ಪ್ರಾಪರ್ಟಿಗಳು ಪ್ರತಿಯೊಂದು ಸಾಧನದಲ್ಲಿ ಲಭ್ಯವಿರುತ್ತವೆ ಎಂಬ ಖಾತರಿಯಿಲ್ಲ. ಉದಾಹರಣೆಗೆ, ಗೈರೊಸ್ಕೋಪ್ ಇಲ್ಲದ ಸಾಧನವು `event.rotationRate` ಗಾಗಿ `null` ಎಂದು ವರದಿ ಮಾಡುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ಕೋಡ್ ಉದಾಹರಣೆಗಳು

ಸಿದ್ಧಾಂತವು ಉತ್ತಮ, ಆದರೆ ಡಿವೈಸ್ ಮೋಷನ್ APIಯ ನಿಜವಾದ ಶಕ್ತಿಯು ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳೊಂದಿಗೆ ಜೀವಂತವಾಗುತ್ತದೆ. ನೀವು ನಿರ್ಮಿಸಬಹುದಾದ ಕೆಲವು ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಉದಾಹರಣೆ 1: "ಶೇಕ್ ಡಿಟೆಕ್ಟರ್" - ಒಂದು ಸಾರ್ವತ್ರಿಕ ಗೆಸ್ಚರ್

ಶೇಕ್ ಅನ್ನು ಪತ್ತೆ ಮಾಡುವುದು "ಅನ್‌ಡೂ", ಪ್ಲೇಪಟ್ಟಿಯನ್ನು ಷಫಲ್ ಮಾಡುವುದು, ಅಥವಾ ಫಾರ್ಮ್ ಅನ್ನು ತೆರವುಗೊಳಿಸುವಂತಹ ಕ್ರಿಯೆಗಳನ್ನು ಪ್ರಚೋದಿಸಲು ವಿಶ್ವಾದ್ಯಂತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಸಾಮಾನ್ಯ ಸಂವಹನ ಮಾದರಿಯಾಗಿದೆ. ವೇಗೋತ್ಕರ್ಷದಲ್ಲಿನ ಹಠಾತ್, ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದ ಬದಲಾವಣೆಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ಮೂಲಕ ನಾವು ಇದನ್ನು ಸಾಧಿಸಬಹುದು.

            let lastX, lastY, lastZ;
let moveCounter = 0;
const shakeThreshold = 15; // Experiment with this value

function handleShake(event) {
  const { x, y, z } = event.accelerationIncludingGravity;

  if (lastX !== undefined) {
    const deltaX = Math.abs(lastX - x);
    const deltaY = Math.abs(lastY - y);
    const deltaZ = Math.abs(lastZ - z);

    if (deltaX + deltaY + deltaZ > shakeThreshold) {
      moveCounter++;
    } else {
      moveCounter = 0;
    }

    if (moveCounter > 3) { // Trigger after a few rapid movements
      console.log('Shake detected!');
      // Trigger your action here, e.g., shufflePlaylist();
      moveCounter = 0; // Reset counter to avoid multiple triggers
    }
  }

  lastX = x;
  lastY = y;
  lastZ = z;
}

// Add 'handleShake' as your event listener callback
            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ಕೊನೆಯದಾಗಿ ತಿಳಿದಿರುವ ವೇಗೋತ್ಕರ್ಷದ ಮೌಲ್ಯಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಪ್ರಸ್ತುತ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಹೋಲಿಸುತ್ತದೆ. ಎಲ್ಲಾ ಮೂರು ಅಕ್ಷಗಳಲ್ಲಿನ ಬದಲಾವಣೆಗಳ ಮೊತ್ತವು ಹಲವಾರು ಸತತ ಈವೆಂಟ್‌ಗಳಿಗೆ ನಿಗದಿತ ಮಿತಿಯನ್ನು ಮೀರಿದರೆ, ಅದು ಶೇಕ್ ಅನ್ನು ನೋಂದಾಯಿಸುತ್ತದೆ. ಈ ಸರಳ ತರ್ಕವು ಆಶ್ಚರ್ಯಕರವಾಗಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.

ಉದಾಹರಣೆ 2: ಒಂದು ಸರಳ ಸ್ಪಿರಿಟ್ ಲೆವೆಲ್ (ಬಬಲ್ ಲೆವೆಲ್) ರಚಿಸುವುದು

ಡಿಜಿಟಲ್ ಸ್ಪಿರಿಟ್ ಲೆವೆಲ್ ನಿರ್ಮಿಸಲು ನಾವು ಗುರುತ್ವಾಕರ್ಷಣೆಯ ಸ್ಥಿರ ಬಲವನ್ನು ಬಳಸಬಹುದು. ಸಾಧನವು ಸಂಪೂರ್ಣವಾಗಿ ಸಮತಟ್ಟಾಗಿದ್ದಾಗ, ಗುರುತ್ವಾಕರ್ಷಣೆಯ ಬಲವು (~-9.81 m/s²) ಸಂಪೂರ್ಣವಾಗಿ z-ಅಕ್ಷದ ಮೇಲೆ ಇರುತ್ತದೆ. ನೀವು ಸಾಧನವನ್ನು ಓರೆಯಾಗಿಸಿದಾಗ, ಈ ಬಲವು x ಮತ್ತು y ಅಕ್ಷಗಳ ಮೇಲೆ ಹಂಚಿಹೋಗುತ್ತದೆ. ಪರದೆಯ ಮೇಲೆ "ಬಬಲ್" ಅನ್ನು ಇರಿಸಲು ನಾವು ಈ ಹಂಚಿಕೆಯನ್ನು ಬಳಸಬಹುದು.

            const bubble = document.getElementById('bubble');
const MAX_TILT = 10; // Corresponds to 9.81 m/s^2

function handleSpiritLevel(event) {
  const { x, y } = event.accelerationIncludingGravity;

  // Map the acceleration values to a CSS transform
  // Clamp the values to a reasonable range for a better visual effect
  const tiltX = Math.min(Math.max(y, -MAX_TILT), MAX_TILT) * -5; // Invert and scale
  const tiltY = Math.min(Math.max(x, -MAX_TILT), MAX_TILT) * 5;  // Scale

  bubble.style.transform = `translateX(${tiltY}px) translateY(${tiltX}px)`;
}

// Add 'handleSpiritLevel' as your event listener callback
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಗುರುತ್ವಾಕರ್ಷಣೆಯ `x` ಮತ್ತು `y` ಘಟಕಗಳನ್ನು ಬಬಲ್ ಎಲಿಮೆಂಟ್‌ನ `translateX` ಮತ್ತು `translateY` CSS ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಮ್ಯಾಪ್ ಮಾಡುತ್ತೇವೆ. ಸೂಕ್ಷ್ಮತೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಸ್ಕೇಲಿಂಗ್ ಫ್ಯಾಕ್ಟರ್ (`* 5`) ಅನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು. ಇದು `accelerationIncludingGravity` ಪ್ರಾಪರ್ಟಿಯ ನೇರ ಮತ್ತು ಶಕ್ತಿಯುತ ಬಳಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 3: ಗೈರೊಸ್ಕೋಪ್-ಆಧಾರಿತ "ಸುತ್ತಲೂ ನೋಡಿ" ವೀಕ್ಷಣೆ (360° ಫೋಟೋ ವೀಕ್ಷಕ)

ಹೆಚ್ಚು ತಲ್ಲೀನಗೊಳಿಸುವ ಅನುಭವಕ್ಕಾಗಿ, ನಾವು ಗೈರೊಸ್ಕೋಪ್‌ನ `rotationRate` ಅನ್ನು ಬಳಸಿ "ಮ್ಯಾಜಿಕ್ ವಿಂಡೋ" ಪರಿಣಾಮವನ್ನು ರಚಿಸಬಹುದು, ಅಲ್ಲಿ ಭೌತಿಕ ಸಾಧನವನ್ನು ತಿರುಗಿಸುವುದರಿಂದ 360° ಛಾಯಾಚಿತ್ರ ಅಥವಾ 3D ದೃಶ್ಯದಂತಹ ವೀಕ್ಷಣೆಯನ್ನು ಪ್ಯಾನ್ ಮಾಡುತ್ತದೆ.

            const scene = document.getElementById('scene');
let currentRotation = { beta: 0, gamma: 0 };
let lastTimestamp = 0;

function handleLookAround(event) {
  if (lastTimestamp === 0) {
    lastTimestamp = event.timeStamp;
    return;
  }

  const delta = (event.timeStamp - lastTimestamp) / 1000; // Time delta in seconds
  lastTimestamp = event.timeStamp;

  const rotation = event.rotationRate;
  if (!rotation) return; // No gyroscope data

  // Integrate rotation rate over time to get the angle change
  currentRotation.beta += rotation.beta * delta;
  currentRotation.gamma += rotation.gamma * delta;

  // Apply rotation to the scene element using CSS transform
  // Note: The axes might need to be swapped or inverted depending on desired effect
  scene.style.transform = `rotateX(${-currentRotation.beta}deg) rotateY(${-currentRotation.gamma}deg)`;
}

// Add 'handleLookAround' as your event listener callback
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಹೆಚ್ಚು ಸುಧಾರಿತವಾಗಿದೆ. ಇದು ಕೋನದಲ್ಲಿನ ಒಟ್ಟು ಬದಲಾವಣೆಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಈವೆಂಟ್‌ಗಳ ನಡುವಿನ ಸಮಯದ ಅಂತರದಲ್ಲಿ ಕೋನೀಯ ವೇಗವನ್ನು (`rotationRate`) ಸಂಯೋಜಿಸುತ್ತದೆ. ಈ ಕೋನವನ್ನು ನಂತರ CSS `rotateX` ಮತ್ತು `rotateY` ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ವಿಧಾನದ ಒಂದು ಪ್ರಮುಖ ಸವಾಲು ಗೈರೊಸ್ಕೋಪ್ ಡ್ರಿಫ್ಟ್, ಅಲ್ಲಿ ಸಣ್ಣ ದೋಷಗಳು ಕಾಲಾನಂತರದಲ್ಲಿ ಸಂಗ್ರಹಗೊಂಡು, ವೀಕ್ಷಣೆಯು ನಿಧಾನವಾಗಿ ಜಾರಲು ಕಾರಣವಾಗುತ್ತದೆ. ಹೆಚ್ಚು ನಿಖರವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಗೈರೊಸ್ಕೋಪ್ ಡೇಟಾವನ್ನು ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ಮತ್ತು ಮ್ಯಾಗ್ನೆಟೋಮೀಟರ್‌ನ ಡೇಟಾದೊಂದಿಗೆ ಸಂಯೋಜಿಸುವ ಮೂಲಕ (ಸಾಮಾನ್ಯವಾಗಿ `deviceorientation` ಈವೆಂಟ್ ಮೂಲಕ) ಸೆನ್ಸರ್ ಫ್ಯೂಷನ್ ಬಳಸಿ ಸರಿಪಡಿಸಲಾಗುತ್ತದೆ.

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಡಿವೈಸ್ ಮೋಷನ್ API ನೊಂದಿಗೆ ನಿರ್ಮಿಸುವುದು ಶಕ್ತಿಯುತವಾಗಿದೆ, ಆದರೆ ಎಲ್ಲೆಡೆ, ಎಲ್ಲರಿಗೂ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಲು ಅದನ್ನು ಜವಾಬ್ದಾರಿಯುತವಾಗಿ ಮಾಡುವುದು ಅತ್ಯಗತ್ಯ.

ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬ್ಯಾಟರಿ ಬಾಳಿಕೆ

ಮೋಷನ್ ಸೆನ್ಸರ್‌ಗಳು ಶಕ್ತಿಯನ್ನು ಬಳಸುತ್ತವೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿದ್ದಾಗಲೂ ಸಹ `devicemotion` ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರಂತರವಾಗಿ ಕೇಳುವುದು ಬಳಕೆದಾರರ ಬ್ಯಾಟರಿಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಖಾಲಿ ಮಾಡಬಹುದು. ಚಾರ್ಜಿಂಗ್‌ಗೆ ನಿರಂತರ ಪ್ರವೇಶ ಕಡಿಮೆ ಇರುವ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ಇದೊಂದು ನಿರ್ಣಾಯಕ ಪರಿಗಣನೆಯಾಗಿದೆ.

• ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಕೇಳಿ: ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಸಕ್ರಿಯವಾಗಿದ್ದಾಗ ಮತ್ತು ಗೋಚರಿಸುವಾಗ ಮಾತ್ರ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸಿ.
• ಕೆಲಸದ ನಂತರ ಸ್ವಚ್ಛಗೊಳಿಸಿ: ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನಾಶಪಡಿಸಿದಾಗ ಅಥವಾ ಫೀಚರ್ ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ ಯಾವಾಗಲೂ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ. `window.removeEventListener('devicemotion', yourHandlerFunction);`
• ನಿಮ್ಮ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಥ್ರಾಟಲ್ ಮಾಡಿ: ನಿಮಗೆ ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ 60 ಅಪ್‌ಡೇಟ್‌ಗಳು ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ, ನಿಮ್ಮ ತರ್ಕವು ಎಷ್ಟು ಬಾರಿ ಚಲಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಸೀಮಿತಗೊಳಿಸಲು ನೀವು `requestAnimationFrame` ಅಥವಾ ಸರಳ ಥ್ರಾಟಲ್/ಡಿಬೌನ್ಸ್ ಫಂಕ್ಷನ್‌ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸಬಹುದು, ಇದು CPU ಸೈಕಲ್‌ಗಳು ಮತ್ತು ಬ್ಯಾಟರಿಯನ್ನು ಉಳಿಸುತ್ತದೆ.

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಮತ್ತು ಕ್ರಾಸ್-ಡಿವೈಸ್ ಹೊಂದಾಣಿಕೆ

ವೆಬ್ ವೈವಿಧ್ಯಮಯವಾಗಿದೆ, ಮತ್ತು ಅದನ್ನು ಪ್ರವೇಶಿಸುವ ಸಾಧನಗಳೂ ಸಹ. iOS ಅನುಮತಿ ಮಾದರಿಯೊಂದಿಗೆ ನಾವು ನೋಡಿದಂತೆ, ಅನುಷ್ಠಾನಗಳು ಭಿನ್ನವಾಗಿರುತ್ತವೆ. ಯಾವಾಗಲೂ ರಕ್ಷಣಾತ್ಮಕವಾಗಿ ಕೋಡ್ ಮಾಡಿ:

• ಎಲ್ಲವನ್ನೂ ಫೀಚರ್ ಪತ್ತೆ ಮಾಡಿ: `DeviceMotionEvent` ಮತ್ತು `DeviceMotionEvent.requestPermission` ಗಾಗಿ ಪರಿಶೀಲಿಸಿ.
• ಶೂನ್ಯ ಡೇಟಾಗಾಗಿ ಪರಿಶೀಲಿಸಿ: ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ಗೈರೊಸ್ಕೋಪ್ ಇರುವುದಿಲ್ಲ. `rotationRate` ಆಬ್ಜೆಕ್ಟ್ `null` ಆಗಿರಬಹುದು. ನಿಮ್ಮ ಕೋಡ್ ಇದನ್ನು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸಬೇಕು.
• ಪರ್ಯಾಯಗಳನ್ನು ಒದಗಿಸಿ: ಬಳಕೆದಾರರು ಅನುಮತಿಯನ್ನು ನಿರಾಕರಿಸಿದರೆ ಅಥವಾ ಅವರ ಸಾಧನದಲ್ಲಿ ಸೆನ್ಸರ್‌ಗಳಿಲ್ಲದಿದ್ದರೆ ಏನಾಗುತ್ತದೆ? 360° ವೀಕ್ಷಕಕ್ಕಾಗಿ ಟಚ್-ಆಧಾರಿತ ಡ್ರ್ಯಾಗ್-ಟು-ಪ್ಯಾನ್‌ನಂತಹ ಪರ್ಯಾಯ ನಿಯಂತ್ರಣ ಯೋಜನೆಯನ್ನು ನೀಡಿ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವಿಶಾಲವಾದ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಪ್ರವೇಶಿಸಲು ಮತ್ತು ಬಳಸಲು ಸಾಧ್ಯವಾಗುವಂತೆ ಮಾಡುತ್ತದೆ.

ಡೇಟಾ ಸ್ಮೂಥಿಂಗ್ ಮತ್ತು ಶಬ್ದ ಕಡಿತ

ಕಚ್ಚಾ ಸೆನ್ಸರ್ ಡೇಟಾವು "ಜಿಟ್ಟರಿ" ಅಥವಾ "ಗದ್ದಲ"ದಿಂದ ಕೂಡಿರಬಹುದು, ಇದು ಅಲುಗಾಡುವ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಸುಗಮ ಅನಿಮೇಷನ್‌ಗಳು ಅಥವಾ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ, ನೀವು ಈ ಡೇಟಾವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಸುಗಮಗೊಳಿಸಬೇಕಾಗುತ್ತದೆ. ಲೋ-ಪಾಸ್ ಫಿಲ್ಟರ್ ಅಥವಾ ಮೂವಿಂಗ್ ಆವರೇಜ್ ಅನ್ನು ಬಳಸುವುದು ಒಂದು ಸರಳ ತಂತ್ರ.

ಇಲ್ಲಿ ಒಂದು ಸರಳ ಲೋ-ಪಾಸ್ ಫಿಲ್ಟರ್ ಅನುಷ್ಠಾನವಿದೆ:

            let smoothedX = 0, smoothedY = 0;
const filterFactor = 0.1; // Value between 0 and 1. Lower is smoother but has more lag.

function handleSmoothedMotion(event) {
  const { x, y } = event.accelerationIncludingGravity;

  smoothedX = (x * filterFactor) + (smoothedX * (1.0 - filterFactor));
  smoothedY = (y * filterFactor) + (smoothedY * (1.0 - filterFactor));

  // Use smoothedX and smoothedY in your application logic
}

            

              
                Copy
              
            
          

ಭದ್ರತೆ ಮತ್ತು ಗೌಪ್ಯತೆ: ಬಳಕೆದಾರ-ಪ್ರಥಮ ವಿಧಾನ

ಚಲನೆಯ ಡೇಟಾ ಸೂಕ್ಷ್ಮವಾಗಿರುತ್ತದೆ. ಬಳಕೆದಾರರ ಚಟುವಟಿಕೆಗಳು, ಸ್ಥಳದ ಸಂದರ್ಭ, ಮತ್ತು ಹತ್ತಿರದ ಕೀಬೋರ್ಡ್‌ನಲ್ಲಿನ ಕೀಸ್ಟ್ರೋಕ್‌ಗಳನ್ನು (ಕಂಪನ ವಿಶ್ಲೇಷಣೆಯ ಮೂಲಕ) ಊಹಿಸಲು ಇದನ್ನು ಬಳಸಬಹುದು. ಒಬ್ಬ ಡೆವಲಪರ್ ಆಗಿ, ನೀವು ಪಾರದರ್ಶಕವಾಗಿರಬೇಕಾದ ಜವಾಬ್ದಾರಿಯನ್ನು ಹೊಂದಿದ್ದೀರಿ.

• ನಿಮಗೆ ಅನುಮತಿ ಏಕೆ ಬೇಕು ಎಂಬುದರ ಬಗ್ಗೆ ಸ್ಪಷ್ಟವಾಗಿರಿ: ಕೇವಲ "ಪ್ರವೇಶವನ್ನು ಅನುಮತಿಸಿ" ಎಂಬ ಸಾಮಾನ್ಯ ಬಟನ್ ಅನ್ನು ತೋರಿಸಬೇಡಿ. ಬಳಕೆದಾರರಿಗೆ ಅದರ ಪ್ರಯೋಜನವನ್ನು ವಿವರಿಸುವ ಪಠ್ಯವನ್ನು ಸೇರಿಸಿ, ಉದಾಹರಣೆಗೆ, "ಹೆಚ್ಚು ತಲ್ಲೀನಗೊಳಿಸುವ ಅನುಭವಕ್ಕಾಗಿ ಮೋಷನ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ."
• ಸರಿಯಾದ ಸಮಯದಲ್ಲಿ ಅನುಮತಿಯನ್ನು ವಿನಂತಿಸಿ: ಪುಟ ಲೋಡ್ ಆದಾಗ ಅಲ್ಲ, ಬಳಕೆದಾರರು ಅದಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಫೀಚರ್‌ನೊಂದಿಗೆ ತೊಡಗಿಸಿಕೊಳ್ಳಲಿರುವಾಗ ಮಾತ್ರ ಅನುಮತಿಯನ್ನು ಕೇಳಿ. ಈ ಸಂದರ್ಭೋಚಿತ ವಿನಂತಿಯು ಸ್ವೀಕಾರದ ಸಾಧ್ಯತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಭವಿಷ್ಯ: ಸೆನ್ಸರ್ ಫ್ಯೂಷನ್ ಮತ್ತು ಜೆನೆರಿಕ್ ಸೆನ್ಸರ್ API

ಡಿವೈಸ್ ಮೋಷನ್ API ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದೆ ಮತ್ತು ಶಕ್ತಿಯುತವಾಗಿದೆ, ಆದರೆ ಇದು ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ ಕಥೆಯ ಒಂದು ಭಾಗವಾಗಿದೆ. ವೆಬ್‌ನಲ್ಲಿ ಸೆನ್ಸರ್ ಪ್ರವೇಶದ ಭವಿಷ್ಯವು ಜೆನೆರಿಕ್ ಸೆನ್ಸರ್ API ಕಡೆಗೆ ಸಾಗುತ್ತಿದೆ. ಇದು ಸಾಧನದ ಸೆನ್ಸರ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಹೆಚ್ಚು ಸ್ಥಿರ, ಸುರಕ್ಷಿತ, ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಹೊಸ ಸ್ಪೆಸಿಫಿಕೇಷನ್ ಆಗಿದೆ.

ಜೆನೆರಿಕ್ ಸೆನ್ಸರ್ API ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:

• ಆಧುನಿಕ, ಪ್ರಾಮಿಸ್-ಆಧಾರಿತ API: ಅಸಮಕಾಲಿಕ ಕಾರ್ಯಾಚರಣೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಸುಲಭ.
• ಪ್ರತಿ-ಸೆನ್ಸರ್‌ಗೆ ಸ್ಪಷ್ಟವಾದ ಅನುಮತಿ: ಇದು ಹೆಚ್ಚು ವಿವರವಾದ ಮತ್ತು ಸ್ಪಷ್ಟವಾದ ಭದ್ರತಾ ಮಾದರಿಯನ್ನು ಹೊಂದಿದೆ.
• ವಿಸ್ತರಣೀಯತೆ: ಚಲನೆಯನ್ನು ಮೀರಿ, ಆಂಬಿಯೆಂಟ್ ಲೈಟ್, ಪ್ರಾಕ್ಸಿಮಿಟಿ, ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಂತಹ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸೆನ್ಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಲು ಇದನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

ಹೋಲಿಕೆಗಾಗಿ ಅದರ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ತ್ವರಿತ ನೋಟ ಇಲ್ಲಿದೆ:

            // Generic Sensor API example
const accelerometer = new Accelerometer({ frequency: 60 });

accelerometer.addEventListener('reading', () => {
  console.log(`Acceleration along the X-axis: ${accelerometer.x}`);
  console.log(`Acceleration along the Y-axis: ${accelerometer.y}`);
  console.log(`Acceleration along the Z-axis: ${accelerometer.z}`);
});

accelerometer.addEventListener('error', event => {
  console.log(event.error.name, event.error.message);
});

accelerometer.start();
            

              
                Copy
              
            
          

ಜೆನೆರಿಕ್ ಸೆನ್ಸರ್ APIಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ಬೆಳೆಯುತ್ತಿದ್ದರೂ, ಅದು ಸ್ಪಷ್ಟ ಉತ್ತರಾಧಿಕಾರಿಯಾಗಿದೆ. ಸದ್ಯಕ್ಕೆ, ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ಮತ್ತು ಗೈರೊಸ್ಕೋಪ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು `devicemotion` ಈವೆಂಟ್ ಅತ್ಯಂತ ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತ ವಿಧಾನವಾಗಿ ಉಳಿದಿದೆ. ಡೆವಲಪರ್‌ಗಳು ಭವಿಷ್ಯದ ಯೋಜನೆಗಳಿಗಾಗಿ ಜೆನೆರಿಕ್ ಸೆನ್ಸರ್ APIಯ ಅಳವಡಿಕೆಯ ಮೇಲೆ ಕಣ್ಣಿಡಬೇಕು.

ತೀರ್ಮಾನ

ಡಿವೈಸ್ ಮೋಷನ್ API ಯು ಹೆಚ್ಚು ಸಹಜ, ಆಕರ್ಷಕ, ಮತ್ತು ಬಳಕೆದಾರರ ಭೌತಿಕ ಪ್ರಪಂಚದೊಂದಿಗೆ ಸಂಪರ್ಕ ಹೊಂದಿದ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಒಂದು ದ್ವಾರವಾಗಿದೆ. ಅಕ್ಸೆಲೆರೊಮೀಟರ್ ಮತ್ತು ಗೈರೊಸ್ಕೋಪ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಾವು ಸಾಂಪ್ರದಾಯಿಕ ಪಾಯಿಂಟ್-ಅಂಡ್-ಕ್ಲಿಕ್ ಅನ್ನು ಮೀರಿದ ಸಂವಹನಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು, ಇದು ಗೇಮಿಂಗ್, ಯುಟಿಲಿಟಿಗಳು, ಮತ್ತು ತಲ್ಲೀನಗೊಳಿಸುವ ಕಥೆ ಹೇಳುವಿಕೆಗೆ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ.

ನಾವು ನೋಡಿದಂತೆ, ಈ API ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಕೇವಲ ಒಂದು ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಿನದು ಬೇಕಾಗುತ್ತದೆ. ಇದು ಭದ್ರತೆ, ಕಾರ್ಯಕ್ಷಮತೆ, ಮತ್ತು ಕ್ರಾಸ್-ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಹೊಂದಾಣಿಕೆಗೆ ಆದ್ಯತೆ ನೀಡುವ ಚಿಂತನಶೀಲ, ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ವಿಧಾನವನ್ನು ಬಯಸುತ್ತದೆ. ಸ್ಪಷ್ಟ ಅನುಮತಿ ವಿನಂತಿಗಳೊಂದಿಗೆ ಬಳಕೆದಾರರ ಗೌಪ್ಯತೆಯನ್ನು ಗೌರವಿಸುವುದು, ಡೇಟಾ ಫಿಲ್ಟರಿಂಗ್ ಮೂಲಕ ಸುಗಮ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು, ಮತ್ತು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪರ್ಯಾಯಗಳನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ನೀವು ಮಾಂತ್ರಿಕ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹವೆನಿಸುವ ನಿಜವಾದ ಜಾಗತಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಈಗ, ಪ್ರಯೋಗಗಳನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮತ್ತು ಡಿಜಿಟಲ್ ಮತ್ತು ಭೌತಿಕ ಪ್ರಪಂಚಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನೀವು ಏನು ನಿರ್ಮಿಸಬಹುದು ಎಂಬುದನ್ನು ನೋಡುವ ಸಮಯ.