Hướng và chuyển động của thiết bị

Pete LePage

Sự kiện chuyển động và hướng của thiết bị cho phép truy cập vào gia tốc kế, con quay hồi chuyển và la bàn tích hợp trong thiết bị di động.

Những sự kiện này có thể được dùng cho nhiều mục đích; ví dụ: trong trò chơi, để điều khiển hướng hoặc hành động của nhân vật. Khi được sử dụng với thông tin vị trí địa lý, các cảm biến này có thể giúp tạo ra thông tin đường đi từng chặng chính xác hơn hoặc cung cấp thông tin về một vị trí cụ thể.

Thận trọng: Không phải trình duyệt nào cũng sử dụng cùng một hệ toạ độ và các trình duyệt có thể báo cáo các giá trị khác nhau trong cùng một tình huống. Vấn đề này đã được cải thiện theo thời gian, nhưng hãy nhớ kiểm tra tình huống của bạn.

Tóm tắt

• Phát hiện mặt nào của thiết bị đang hướng lên và cách thiết bị xoay.
• Tìm hiểu thời điểm và cách phản hồi các sự kiện chuyển động và hướng.

Đầu nào đang hướng lên?

Để sử dụng dữ liệu mà các sự kiện chuyển động và hướng thiết bị trả về, bạn cần hiểu rõ các giá trị được cung cấp.

Khung toạ độ Trái Đất

Khung toạ độ Trái đất, được mô tả bằng các giá trị X, Y và Z, được căn chỉnh dựa trên trọng lực và hướng từ trường chuẩn.

Hệ toạ độ
X	Biểu thị hướng đông-tây (trong đó hướng đông là hướng dương).
Y	Biểu thị hướng bắc-nam (trong đó hướng bắc là hướng dương).
Z	Biểu thị hướng lên xuống, vuông góc với mặt đất (trong đó hướng lên là dương).

Khung toạ độ thiết bị

Hình minh hoạ khung toạ độ của thiết bị

Khung toạ độ của thiết bị, được mô tả bằng các giá trị x, y và z, được căn chỉnh dựa trên tâm của thiết bị.

Hệ toạ độ
X	Trong mặt phẳng của màn hình, giá trị dương nằm ở bên phải.
Y	Trong mặt phẳng của màn hình, giá trị dương hướng lên trên.
Z	Vuông góc với màn hình hoặc bàn phím, hướng ra xa.

Trên điện thoại hoặc máy tính bảng, hướng của thiết bị dựa trên hướng thông thường của màn hình. Đối với điện thoại và máy tính bảng, điều này dựa trên việc thiết bị đang ở chế độ dọc. Đối với máy tính để bàn hoặc máy tính xách tay, hướng được xem xét liên quan đến bàn phím.

Dữ liệu xoay

Dữ liệu xoay được trả về dưới dạng góc Euler, biểu thị số độ chênh lệch giữa khung toạ độ của thiết bị và khung toạ độ của Trái Đất.

Alpha

Hình minh hoạ alpha trong khung toạ độ của thiết bị

Góc xoay quanh trục z. Giá trị alpha là 0° khi phần trên cùng của thiết bị hướng thẳng về phía bắc. Khi thiết bị được xoay ngược chiều kim đồng hồ, giá trị alpha sẽ tăng lên.

Beta

Hình minh hoạ beta trong khung toạ độ của thiết bị

Góc xoay quanh trục x. Giá trị beta là 0° khi phần trên và phần dưới của thiết bị cách đều bề mặt Trái Đất. Giá trị này tăng lên khi phần trên của thiết bị nghiêng về phía bề mặt trái đất.

Gama

Hình minh hoạ gamma trong khung toạ độ của thiết bị

Góc xoay quanh trục y. Giá trị gamma là 0° khi cạnh trái và cạnh phải của thiết bị cách đều bề mặt Trái Đất. Giá trị này tăng lên khi cạnh phải nghiêng về phía bề mặt Trái Đất.

Hướng của thiết bị

Sự kiện hướng thiết bị trả về dữ liệu xoay, bao gồm mức độ nghiêng của thiết bị từ trước ra sau, từ bên này sang bên kia và nếu điện thoại hoặc máy tính xách tay có la bàn, thì hướng mà thiết bị đang hướng tới.

Sử dụng một cách tiết kiệm. Kiểm tra khả năng hỗ trợ. Đừng cập nhật giao diện người dùng cho mọi sự kiện hướng; thay vào đó, hãy đồng bộ hoá với requestAnimationFrame.

Trường hợp sử dụng sự kiện hướng thiết bị

Có một số cách sử dụng cho các sự kiện hướng thiết bị. Một số ví dụ bao gồm:

• Cập nhật bản đồ khi người dùng di chuyển.
• Các điểm tinh chỉnh nhỏ về giao diện người dùng, chẳng hạn như thêm hiệu ứng thị sai.
• Khi kết hợp với tính năng định vị vị trí địa lý, bạn có thể dùng tính năng này để xem đường đi từng chặng.

Kiểm tra khả năng hỗ trợ và lắng nghe các sự kiện

Để theo dõi DeviceOrientationEvent, trước tiên, hãy kiểm tra xem trình duyệt có hỗ trợ các sự kiện này hay không. Sau đó, hãy đính kèm một trình nghe sự kiện vào đối tượng window để nghe các sự kiện deviceorientation.

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

Xử lý các sự kiện hướng thiết bị

Sự kiện hướng thiết bị sẽ kích hoạt khi thiết bị di chuyển hoặc thay đổi hướng. Cảm biến này trả về dữ liệu về sự khác biệt giữa thiết bị ở vị trí hiện tại so với hệ toạ độ Trái Đất.

Sự kiện này thường trả về 3 thuộc tính: alpha, beta và gamma. Trên Safari dành cho thiết bị di động, một tham số bổ sung webkitCompassHeading sẽ được trả về cùng với hướng la bàn.

Chuyển động của thiết bị

Sự kiện hướng thiết bị trả về dữ liệu xoay, bao gồm mức độ nghiêng của thiết bị từ trước ra sau, từ bên này sang bên kia và nếu điện thoại hoặc máy tính xách tay có la bàn, thì hướng mà thiết bị đang hướng tới.

Sử dụng chuyển động của thiết bị khi cần biết chuyển động hiện tại của thiết bị. rotationRate được cung cấp theo đơn vị độ/giây. acceleration và accelerationWithGravity được cung cấp theo đơn vị m/giây². Lưu ý sự khác biệt giữa các cách triển khai trình duyệt.

Trường hợp sử dụng sự kiện chuyển động của thiết bị

Có một số cách sử dụng cho các sự kiện chuyển động của thiết bị. Một số ví dụ bao gồm:

• Thao tác lắc để làm mới dữ liệu.
• Trong trò chơi, để khiến nhân vật nhảy hoặc di chuyển.
• Dành cho ứng dụng theo dõi sức khoẻ và thể chất.

Kiểm tra khả năng hỗ trợ và lắng nghe các sự kiện

Để theo dõi DeviceMotionEvent, trước tiên, hãy kiểm tra xem các sự kiện có được hỗ trợ trong trình duyệt hay không. Sau đó, hãy đính kèm một trình nghe sự kiện vào đối tượng window để theo dõi các sự kiện devicemotion.

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

Xử lý các sự kiện chuyển động của thiết bị

Sự kiện chuyển động của thiết bị kích hoạt theo khoảng thời gian đều đặn và trả về dữ liệu về độ xoay (tính bằng °/giây) và gia tốc (tính bằng m/giây²) của thiết bị tại thời điểm đó. Một số thiết bị không có phần cứng để loại trừ tác động của trọng lực.

Sự kiện này trả về 4 thuộc tính: accelerationIncludingGravity, acceleration (không bao gồm tác động của trọng lực), rotationRate và interval.

Ví dụ: hãy xem xét một chiếc điện thoại đang nằm trên mặt bàn phẳng, với màn hình hướng lên trên.

Tiểu bang	Xoay	Gia tốc (m/s^2)	Gia tốc có trọng lực (m/s^2)
Bạn chưa di chuyển	[0, 0, 0]	[0, 0, 0]	[0, 0, 9,8]
Di chuyển lên phía bầu trời	[0, 0, 0]	[0, 0, 5]	[0, 0, 14.81]
Chỉ di chuyển sang phải	[0, 0, 0]	[3, 0, 0]	[3, 0, 9.81]
Di chuyển lên trên và sang phải	[0, 0, 0]	[5, 0, 5]	[5, 0, 14,81]

Ngược lại, nếu điện thoại được giữ sao cho màn hình vuông góc với mặt đất và người xem có thể nhìn thấy trực tiếp:

Tiểu bang	Xoay	Gia tốc (m/s^2)	Gia tốc có trọng lực (m/s^2)
Bạn chưa di chuyển	[0, 0, 0]	[0, 0, 0]	[0, 9.81, 0]
Di chuyển lên phía bầu trời	[0, 0, 0]	[0, 5, 0]	[0, 14.81, 0]
Chỉ di chuyển sang phải	[0, 0, 0]	[3, 0, 0]	[3, 9.81, 0]
Di chuyển lên trên và sang phải	[0, 0, 0]	[5, 5, 0]	[5, 14.81, 0]

Ví dụ: Tính gia tốc cực đại của một vật

Một cách để sử dụng sự kiện chuyển động của thiết bị là tính toán gia tốc tối đa của một đối tượng. Ví dụ: gia tốc tối đa của một người khi nhảy là bao nhiêu?

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

Sau khi nhấn vào nút Bắt đầu!, người dùng được yêu cầu nhảy. Trong thời gian đó, trang sẽ lưu trữ các giá trị gia tốc tối đa (và tối thiểu) và sau khi nhảy, trang sẽ cho người dùng biết gia tốc tối đa của họ.

Phản hồi