javascript - parrot 2.0 ardrone 上的 NavData，如何添加延迟并构建实时图？

Question

我想问一件事。我想延迟在 parrot AR Drone 2.0 上读取 navData。您能举例说明如何将间隔添加到我的导航数据读取中吗？我需要做什么，如果我想构建实时图表，有人可以提供教程链接吗？

var arDrone = require('ar-drone'); 

var client = new arDrone.createClient();
client.on('navdata', function(d){

if(d.demo){
    console.log('Roll:' + d.demo.rotation.roll);
}
});

或者这段代码？

    var arDrone = require('ar-drone');
var droneClient = arDrone.createClient();
droneClient.config('general:navdata_demo', 'TRUE');

droneClient.on('navdata', function(navdata) {
try {
    console.log('test:' + navdata.demo.batteryPercentage);
}
catch(err) {
    console.log(err.message);
}
});

Answer 1

您无法真正更改导航数据进入的速率。如果您不想处理导航数据，则可以忽略它。下面的代码每秒仅处理一次导航数据:

var lastNavDataMs = 0;

client.on('navdata', function(d) {
  var nowMs = new Date().getTime();
  if (nowMs - lastNavDataMs > 1000) {
    lastNavDataMs = nowMs;
    // Process navdata once per second.
    if (d.demo){
      console.log('pitch:' + d.demo.rotation.roll);
    }
  }
});

要显示传感器值的实时图表，您可以尝试使用 Smoothie Charts 库。它专门用于处理实时更新的图表和图形。他们的tutorial让它看起来很容易。下面，我尝试调整他们的教程以显示来自 AR.Drone 的导航数据信息。我还没有测试过，但这可能是一个很好的起点。

首先，在 HTML 中包含 Smoothie 脚本并创建一个 Canvas 元素来保存图表:

<script type="text/javascript" src="smoothie.js"></script>
<canvas id="mycanvas" width="400" height="100"></canvas>

代码:

var arDrone = require('ar-drone'); 
var smoothie = new SmoothieChart();
smoothie.streamTo(document.getElementById("mycanvas"));

// Lines on the chart.
var rollLine = new TimeSeries();
var altitudeLine = new TimeSeries();

var client = new arDrone.createClient();
client.on('navdata', function(d) {
  if (d.demo) {
    // Add new measurements for roll and altitude.
    var time = new Date().getTime();
    rollLine.append(time, d.demo.rotation.roll);
    altitudeLine.append(time, d.demo.altitudeMeters);
  }
});

// Add the lines to our chart.
smoothie.addTimeSeries(rollLine);
smoothie.addTimeSeries(altitudeLine);