javascript accelerometer




Como acessar os dados do acelerômetro/giroscópio a partir do Javascript? (2)

Existem atualmente três eventos distintos que podem ou não ser acionados quando os dispositivos do cliente são movidos. Dois deles estão focados em orientação e o último em movimento :

  • ondeviceorientation se que a ondeviceorientation funciona na versão desktop do Chrome, e a maioria dos laptops da Apple parece ter o hardware necessário para que isso funcione. Ele também funciona no Mobile Safari no iPhone 4 com o iOS 4.2. Na função do manipulador de eventos, você pode acessar gamma valores alpha , beta e gamma nos dados do evento fornecidos como o único argumento para a função.

  • onmozorientation é suportado no Firefox 3.6 e mais recente. Novamente, isso é conhecido por funcionar na maioria dos laptops da Apple, mas também pode funcionar em máquinas Windows ou Linux com acelerômetro. Na função do manipulador de eventos, procure pelos campos x , y , z nos dados do evento fornecidos como primeiro argumento.

  • ondevicemotion é conhecida por funcionar no iPhone 3GS + 4 e iPad (ambos com o iOS 4.2) e fornece dados relacionados com a atual aceleração do dispositivo cliente. Os dados do evento passados ​​para a função de manipulador têm acceleration e accelerationIncludingGravity , que possuem dois campos para cada eixo: x , y , z

O site de amostra "detecção de terremotos" usa uma série de instruções if para descobrir a qual evento anexar (em uma ordem um pouco priorizada) e passa os dados recebidos para uma função de tilt comum:

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

Os fatores constantes 2 e 50 são usados ​​para "alinhar" as leituras dos dois últimos eventos com os do primeiro, mas estas não são representações precisas. Para este simples "brinquedo" o projeto funciona muito bem, mas se você precisar usar os dados para algo um pouco mais sério, você terá que se familiarizar com as unidades dos valores fornecidos nos diferentes eventos e tratá-los com respeito :)

Recentemente, encontrei alguns sites que parecem acessar o acelerômetro ou giroscópio do meu laptop, detectando mudanças na orientação ou no movimento.

Como isso é feito? Eu devo assinar algum tipo de evento no objeto window ?

Em quais dispositivos (laptops, celulares, tablets) isso é conhecido por funcionar?

NB : Eu na verdade já conheço (parte de) a resposta a essa pergunta, e vou postar imediatamente. A razão pela qual estou postando a pergunta aqui é informar a todos que os dados do acelerômetro estão disponíveis em Javascript (em certos dispositivos) e desafiar a comunidade a postar novas descobertas sobre o assunto. Atualmente, parece não haver quase nenhuma documentação desses recursos.


Não é possível adicionar um comentário à excelente explicação no outro post, mas queria mencionar que uma ótima fonte de documentação pode ser encontrada here .

É suficiente registrar uma função de evento para o acelerômetro da seguinte forma:

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

com o manipulador:

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

E para o magnetômetro, o seguinte manipulador de eventos deve ser registrado:

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

com um manipulador:

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

Há também campos especificados no evento de movimento para um giroscópio, mas isso não parece ser universalmente suportado (por exemplo, não funcionou em um Samsung Galaxy Note).

Existe um código de trabalho simples no GitHub





gyroscope