Làm thế nào để truy cập dữ liệu gia tốc/con quay hồi chuyển từ Javascript?

Question

Gần đây tôi đã gặp một vài trang web có vẻ như truy cập vào gia tốc kế hoặc con quay hồi chuyển trên máy tính xách tay của tôi, phát hiện những thay đổi về hướng hoặc chuyển động.

Điều này được thực hiện như thế nào? Tôi có phải đăng ký một số loại sự kiện trên đối tượng window không?

Thiết bị nào (máy tính xách tay, điện thoại di động, máy tính bảng) được biết là hoạt động?

---

^{NB: Tôi thực sự đã biết (một phần của) câu trả lời cho câu hỏi này, và tôi sẽ gửi nó ngay lập tức. Lý do tôi đăng câu hỏi ở đây là để mọi người biết rằng dữ liệu gia tốc là có sẵn trong Javascript (trên một số thiết bị nhất định) và để thách thức cộng đồng đăng các phát hiện mới về chủ đề này. Hiện tại, dường như không có tài liệu nào về các tính năng này.}

Answer 1

Hiện tại có ba sự kiện riêng biệt có thể có hoặc có thể không được kích hoạt khi thiết bị khách di chuyển. Hai trong số họ đang tập trung xung quanh hướng và cuối cùng trên chuyển động:

• ondeviceorientation được biết đến để làm việc trên phiên bản máy tính để bàn của Chrome, và hầu hết các máy tính xách tay của Apple dường như đã yêu cầu phần cứng cho việc này đến công việc . Nó cũng hoạt động trên Mobile Safari trên iPhone 4 với iOS 4.2. Trong hàm xử lý sự kiện, bạn có thể truy cập các giá trị alpha, beta, gamma trên dữ liệu sự kiện được cung cấp làm đối số duy nhất cho hàm.

• onmozorientation được hỗ trợ trên Firefox 3.6 trở lên. Một lần nữa, điều này được biết là hoạt động trên hầu hết các máy tính xách tay của Apple, nhưng cũng có thể hoạt động trên các máy Windows hoặc Linux với gia tốc kế. Trong hàm xử lý sự kiện, hãy tìm kiếm các trường x, y, z trên dữ liệu sự kiện được cung cấp làm đối số đầu tiên.

• ondevicemotion được biết là hoạt động trên iPhone 3GS + 4 và iPad (cả iOS 4.2) và cung cấp dữ liệu liên quan đến tăng tốc hiện tại của thiết bị khách. Các dữ liệu sự kiện truyền cho hàm xử lý có acceleration và accelerationIncludingGravity, mà cả hai đều có ba lĩnh vực cho mỗi trục: x, y, z

các "trận động đất phát hiện" trang web mẫu sử dụng một loạt các if báo cáo để tìm ra mà sự kiện để đính kèm vào (theo một thứ tự nào ưu tiên) và chuyển các dữ liệu nhận được để một chung tilt chức năng:

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); 
} 

các yếu tố liên tục 2 và 50 được sử dụng để "align" các bài đọc từ hai các sự kiện thứ hai với những sự kiện từ lần đầu tiên, nhưng đây là các sự kiện không có nghĩa là các đại diện chính xác.Đối với dự án "đồ chơi" đơn giản này, nó hoạt động tốt, nhưng nếu bạn cần sử dụng dữ liệu cho một thứ hơi nghiêm trọng hơn, bạn sẽ phải làm quen với các đơn vị của các giá trị được cung cấp trong các sự kiện khác nhau và đối xử với chúng một cách tôn trọng :)

Answer 2

Không thể thêm nhận xét vào lời giải thích tuyệt vời trong bài đăng khác nhưng muốn đề cập đến nguồn tài liệu tuyệt vời có thể tìm thấy here.

Nó là đủ để đăng ký một chức năng sự kiện cho gia tốc như vậy:

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

với handler:

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

Và đối với từ kế một xử lý sự kiện sau đây phải được đăng ký:

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

với trình xử lý:

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

Ngoài ra còn có các trường được chỉ định trong sự kiện chuyển động cho con quay hồi chuyển nhưng điều đó dường như không được hỗ trợ phổ biến (ví dụ: nó không hoạt động trên Samsung Galaxy Note).

Có một mã đơn giản làm việc trên GitHub

Answer 3

dự phòng hữu ích ở đây: 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);