javascript - (編集済み) Javascript を使用して 9 軸 IMU センサー (3 軸ジャイロ/加速度計/磁力計) からリアルタイムデータを取得する

Question

私は、Github で見つけた Javascript スクリプトを使用して Android でデータを読み取ろうとする学校のプロジェクトに取り組んでいます。最初に Pixel 4A でセンサーのデモを開いてデータを取得できましたが、現在、基本的に readme に従ってローカルマシンでプログラムをホストしようとしていますが、できません。

これを行う目的は、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 - (編集済み) Javascript を使用して 9 軸 IMU センサー (3 軸ジャイロ/加速度計/磁力計) からリアルタイム データを取得する

0 に答える 0

Related

Reference

javascript - (編集済み) Javascript を使用して 9 軸 IMU センサー (3 軸ジャイロ/加速度計/磁力計) からリアルタイムデータを取得する