已编辑使用 Javascript 从 9 轴 IMU 传感器三轴陀螺仪/加速度计/磁力计中提取实时数据

如何解决已编辑使用 Javascript 从 9 轴 IMU 传感器三轴陀螺仪/加速度计/磁力计中提取实时数据

我正在开展一个学校项目，该项目涉及尝试使用我们在 Github 上找到的 Javascript 脚本读取 Android 上的数据。我首先在 Pixel 4A 上打开传感器演示并能够获取数据，但现在我试图将程序托管在本地机器上，基本上遵循自述文件，但无法获取。

这样做的目的是为了能够从 9 轴 IMU 传感器读取实时数据，我的团队不太确定如何进行。我将提供 github 页面的链接、实际的移动演示、IMU Javascript 以及有关用于确定方向的 javascript 事件的信息。

非常感谢任何帮助。

Github：https://github.com/sensor-js/OpenWPM-mobile

IMU Javascript：粘贴在下方

演示：shorturl.at/pyX89

Javascript 方向事件：https://developer.mozilla.org/en-US/docs/Web/Events/Detecting_device_orientation

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Demo - The Web's Sixth Sense: A Study of Scripts Accessing Smartphone Sensors</title>
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <title>JavaScript Sensor Access Demo</title>
    <style>
      #demo-div {color: lightgrey; border-radius: 0.3rem;}
      #demo-div span,#demo-div #num-observed-events {color: black;}
      h1 {margin-top: 0.5rem;}
      h4 {margin-top: 0.66rem; font-size:1.33rem;}
      #demo-div li {line-height: 21px;}
      #demo-div ul {margin-bottom: 0.66rem;}
    </style>
</head>
<body>
<main role="main" class="container">

<h1 align="left">JavaScript Sensor Access Demo</h1>
<p><b>This demo page should be run from a mobile phone or a tablet.</b></p>
<p>This demo page shows how websites can access sensor data from mobile devices using <a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicemotion"><i>deviceorientation</i></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Events/deviceorientation"><i>devicemotion</i></a> events.</p>

<p><i>deviceorientation</i> provides <i>alpha</i>,<i>beta</i> and <i>gamma</i> components which correspond to orientation along the Z,X and Y axes,respectively.</p><p><i>devicemotion</i> provides acceleration and rotation rate along three axes using MEMS accelerometers and gyroscopes.</p>

<p>The sensor data shown below does not leave your browser: it is not collected,shared or transmitted. However this may not be true for other websites that you visit. For more information,see the companion page for our study: <a href="https://sensor-js.xyz/">"The Web's Sixth Sense: A Study of Scripts Accessing Smartphone Sensors"</a>.</p>

<div class="p-3 mb-2 bg-secondary" id="demo-div">
<a id="start_demo" class="btn btn-lg btn-success py-1" href="#" role="button">Start the demo</a>
<p style="margin-top:1rem;">Num. of datapoints: <span class="badge badge-warning" id="num-observed-events">0</span></p>


<h4 style="margin-top:0.75rem;">Orientation</h4>
<ul>
  <li>X-axis (&beta;): <span id="Orientation_b">0</span><span>&deg;</span></li>
  <li>Y-axis (&gamma;): <span id="Orientation_g">0</span><span>&deg;</span></li>
  <li>Z-axis (&alpha;): <span id="Orientation_a">0</span><span>&deg;</span></li>
</ul>

<h4>Accelerometer</h4>
<ul>
  <li>X-axis: <span id="Accelerometer_x">0</span><span> m/s<sup>2</sup></span></li>
  <li>Y-axis: <span id="Accelerometer_y">0</span><span> m/s<sup>2</sup></span></li>
  <li>Z-axis: <span id="Accelerometer_z">0</span><span> m/s<sup>2</sup></span></li>
  <li>Data Interval: <span id="Accelerometer_i">0</span><span> ms</span></li>
</ul>

<h4>Accelerometer including gravity</h4>

<ul>
  <li>X-axis: <span id="Accelerometer_gx">0</span><span> m/s<sup>2</sup></span></li>
  <li>Y-axis: <span id="Accelerometer_gy">0</span><span> m/s<sup>2</sup></span></li>
  <li>Z-axis: <span id="Accelerometer_gz">0</span><span> m/s<sup>2</sup></span></li>
</ul>

<h4>Gyroscope</h4>
<ul>
  <li>X-axis: <span id="Gyroscope_x">0</span><span>&deg;/s</span></li>
  <li>Y-axis: <span id="Gyroscope_y">0</span><span>&deg;/s</span></li>
  <li>Z-axis: <span id="Gyroscope_z">0</span><span>&deg;/s</span></li>
</ul>

</div>
</main>
<footer class="footer">
  <div class="container">
    <span class="text-muted small">This page is hosted on GitHub Pages,please see GitHub's privacy statement
    <a href="https://help.github.com/articles/github-privacy-statement/">here</a>.</span>
  </div>
</footer>
<script>

function handleOrientation(event) {
  updateFieldIfNotNull('Orientation_a',event.alpha);
  updateFieldIfNotNull('Orientation_b',event.beta);
  updateFieldIfNotNull('Orientation_g',event.gamma);
  incrementEventCount();
}

function incrementEventCount(){
  let counterElement = document.getElementById("num-observed-events")
  let eventCount = parseInt(counterElement.innerHTML)
  counterElement.innerHTML = eventCount + 1;
}

function updateFieldIfNotNull(fieldName,value,precision=10){
  if (value != null)
    document.getElementById(fieldName).innerHTML = value.toFixed(precision);
}

function handleMotion(event) {
  updateFieldIfNotNull('Accelerometer_gx',event.accelerationIncludingGravity.x);
  updateFieldIfNotNull('Accelerometer_gy',event.accelerationIncludingGravity.y);
  updateFieldIfNotNull('Accelerometer_gz',event.accelerationIncludingGravity.z);

  updateFieldIfNotNull('Accelerometer_x',event.acceleration.x);
  updateFieldIfNotNull('Accelerometer_y',event.acceleration.y);
  updateFieldIfNotNull('Accelerometer_z',event.acceleration.z);

  updateFieldIfNotNull('Accelerometer_i',event.interval,2);

  updateFieldIfNotNull('Gyroscope_z',event.rotationRate.alpha);
  updateFieldIfNotNull('Gyroscope_x',event.rotationRate.beta);
  updateFieldIfNotNull('Gyroscope_y',event.rotationRate.gamma);
  incrementEventCount();
}

let is_running = false;
let demo_button = document.getElementById("start_demo");
demo_button.onclick = function(e) {
  e.preventDefault();
  
  // Request permission for iOS 13+ devices
  if (
    DeviceMotionEvent &&
    typeof DeviceMotionEvent.requestPermission === "function"
  ) {
    DeviceMotionEvent.requestPermission();
  }
  
  if (is_running){
    window.removeEventListener("devicemotion",handleMotion);
    window.removeEventListener("deviceorientation",handleOrientation);
    demo_button.innerHTML = "Start demo";
    demo_button.classList.add('btn-success');
    demo_button.classList.remove('btn-danger');
    is_running = false;
  }else{
    window.addEventListener("devicemotion",handleMotion);
    window.addEventListener("deviceorientation",handleOrientation);
    document.getElementById("start_demo").innerHTML = "Stop demo";
    demo_button.classList.remove('btn-success');
    demo_button.classList.add('btn-danger');
    is_running = true;
  }
};

/*
Light and proximity are not supported anymore by mainstream browsers.
window.addEventListener('devicelight',function(e) {
   document.getElementById("DeviceLight").innerHTML="AmbientLight current Value: "+e.value+" Max: "+e.max+" Min: "+e.min;
});

window.addEventListener('lightlevel',function(e) {
   document.getElementById("Lightlevel").innerHTML="Light level: "+e.value;
});

window.addEventListener('deviceproximity',function(e) {
   document.getElementById("DeviceProximity").innerHTML="DeviceProximity current Value: "+e.value+" Max: "+e.max+" Min: "+e.min;
});

window.addEventListener('userproximity',function(event) {
   document.getElementById("UserProximity").innerHTML="UserProximity: "+event.near;
});
*/

</script>
</body>
</html>

已编辑使用 Javascript 从 9 轴 IMU 传感器三轴陀螺仪/加速度计/磁力计中提取实时数据

如何解决已编辑使用 Javascript 从 9 轴 IMU 传感器三轴陀螺仪/加速度计/磁力计中提取实时数据

相关推荐