Mirror/betaflight
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight.git synced 2025-07-19 14:25:20 +03:00
Code Issues Wiki Activity

Use d3 to render the sensors tab

Browse source
This commit is contained in:
Tobias Raeder 2014-04-12 23:35:22 +02:00
parent 1c7906ad00
commit de26bdb0d0
6 changed files with 334 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

402
tabs/sensors.js
View file

@ -1,13 +1,125 @@
function initSensorData(){
for (var i = 0; i < 3; i++) {
SENSOR_DATA.accelerometer[i] = 0;
SENSOR_DATA.gyroscope[i] = 0;
SENSOR_DATA.magnetometer[i] = 0;
SENSOR_DATA.debug[i] = 0;
}
}
function initDataArray(length) {
var data = new Array(length);
for (var i = 0; i < length; i++) {
data[i] = new Array();
for (var j = 0; j <= 300; j++) {
data[i].push([j, 0]);
}
data[i].min = -1;
data[i].max = 1;
}
return data;
}
function addSampleToData(data, sampleNumber, sensorData) {
for (var i = 0; i < data.length; i++) {
var dataPoint = sensorData[i];
data[i].push([sampleNumber, dataPoint]);
if (dataPoint < data[i].min) {
data[i].min = dataPoint;
}
if (dataPoint > data[i].max) {
data[i].max = dataPoint;
}
}
while (data[0].length > 300) {
for (i = 0; i < data.length; i++) {
data[i].shift();
}
}
return sampleNumber + 1;
}
function initGraphHelpers(selector, sampleNumber, heightDomain) {
var margin = {top: 20, right: 20, bottom: 10, left: 40};
var width = 900 - margin.left - margin.right;
var height = 120 - margin.top - margin.bottom;
var helpers = {selector: selector, dynamicHeightDomain: !heightDomain};
helpers.widthScale = d3.scale.linear().
domain([(sampleNumber - 299), sampleNumber]).
range([0, width]);
helpers.heightScale = d3.scale.linear().
domain(heightDomain || [1, -1]).
range([height, 0]);
helpers.xGrid = d3.svg.axis().
scale(helpers.widthScale).
orient("bottom").
ticks(5).
tickSize(-height, 0, 0).
tickFormat("");
helpers.yGrid = d3.svg.axis().
scale(helpers.heightScale).
orient("left").
ticks(5).
tickSize(-width, 0, 0).
tickFormat("");
helpers.xAxis = d3.svg.axis().
scale(helpers.widthScale).
ticks(5).
orient("bottom").
tickFormat(function(d) {return d;});
helpers.yAxis = d3.svg.axis().
scale(helpers.heightScale).
ticks(5).
orient("left").
tickFormat(function(d) {return d;});
helpers.line = d3.svg.line().
x(function(d) { return helpers.widthScale(d[0]); }).
y(function(d) { return helpers.heightScale(d[1]); });
return helpers;
}
function drawGraph(graphHelpers, data, sampleNumber) {
svg = d3.select(graphHelpers.selector);
if (graphHelpers.dynamicHeightDomain) {
var limits = [];
$.each(data, function(idx, datum) {
limits.push(datum.min);
limits.push(datum.max);
});
graphHelpers.heightScale.domain(d3.extent(limits)).ticks(5);
}
graphHelpers.widthScale.domain([(sampleNumber - 299), sampleNumber]);
svg.select(".x.grid").call(graphHelpers.xGrid);
svg.select(".y.grid").call(graphHelpers.yGrid);
svg.select(".x.axis").call(graphHelpers.xAxis);
svg.select(".y.axis").call(graphHelpers.yAxis);
var group = svg.select("g.data");
var lines = group.selectAll("path").data(data, function(d, i) { return i; });
var newLines = lines.enter().append("path").attr("class", "line");
lines.attr('d', graphHelpers.line);
svg.selectAll('.legend .item .value').data(data, function(d, i){ return i; }).
text(function(d) { return "[ " + d[d.length - 1][1].toFixed(2) + " ]"; });
}
function tab_initialize_sensors() {
ga_tracker.sendAppView('Sensor Page');
GUI.active_tab = 'sensors';
$('#content').load("./tabs/sensors.html", function load_html() {
// Always start with default/empty sensor data array, clean slate all
for (var i = 0; i < 3; i++) SENSOR_DATA.accelerometer[i] = 0;
for (var i = 0; i < 3; i++) SENSOR_DATA.gyroscope[i] = 0;
for (var i = 0; i < 3; i++) SENSOR_DATA.magnetometer[i] = 0;
for (var i = 0; i < 4; i++) SENSOR_DATA.debug[i] = 0;
initSensorData();
// Setup variables
var samples_gyro_i = 300;
@ -16,159 +128,27 @@ function tab_initialize_sensors() {
var samples_baro_i = 300;
var samples_debug_i = 300;
var gyro_data = new Array(3);
var accel_data = new Array(3);
var mag_data = new Array(3);
var baro_data = new Array(1);
var debug_data = new Array(4);
var gyro_data = initDataArray(3);
var accel_data = initDataArray(3);
var mag_data = initDataArray(3);
var baro_data = initDataArray(1);
var debug_data = [
initDataArray(1),
initDataArray(1),
initDataArray(1),
initDataArray(1)
];
gyro_data[0] = new Array();
gyro_data[1] = new Array();
gyro_data[2] = new Array();
accel_data[0] = new Array();
accel_data[1] = new Array();
accel_data[2] = new Array();
mag_data[0] = new Array();
mag_data[1] = new Array();
mag_data[2] = new Array();
baro_data[0] = new Array();
for (var i = 0; i < 4; i++) debug_data[i] = new Array();
for (var i = 0; i <= 300; i++) {
gyro_data[0].push([i, 0]);
gyro_data[1].push([i, 0]);
gyro_data[2].push([i, 0]);
accel_data[0].push([i, 0]);
accel_data[1].push([i, 0]);
accel_data[2].push([i, 0]);
mag_data[0].push([i, 0]);
mag_data[1].push([i, 0]);
mag_data[2].push([i, 0]);
baro_data[0].push([i, 0]);
for (var j = 0; j < 4; j++) debug_data[j].push([i, 0]);
}
// plot specific stuff
var e_graph_gyro = document.getElementById("gyro");
var e_graph_accel = document.getElementById("accel");
var e_graph_mag = document.getElementById("mag");
var e_graph_baro = document.getElementById("baro");
var e_graph_debug1 = document.getElementById("debug1");
var e_graph_debug2 = document.getElementById("debug2");
var e_graph_debug3 = document.getElementById("debug3");
var e_graph_debug4 = document.getElementById("debug4");
var gyro_options = {
title: "Gyroscope (deg/s)",
shadowSize: 0,
yaxis : {
tickDecimals: 1,
max : 2000,
min: -2000
},
xaxis : {
//noTicks = 0
},
grid : {
backgroundColor: "#FFFFFF"
},
legend : {
position: "we",
backgroundOpacity: 0
}
};
var accel_options = {
title: "Accelerometer (g)",
shadowSize: 0,
yaxis : {
tickDecimals: 1,
max : 2,
min : -2
},
xaxis : {
//noTicks = 0
},
grid : {
backgroundColor : "#FFFFFF"
},
legend : {
position: "we",
backgroundOpacity: 0
}
};
var mag_options = {
title: "Magnetometer (Ga)",
shadowSize: 0,
yaxis : {
tickDecimals: 0
},
xaxis : {
//noTicks = 0
},
grid : {
backgroundColor : "#FFFFFF"
},
legend : {
position: "we",
backgroundOpacity: 0
}
};
var baro_options = {
title: "Barometer (meters)",
shadowSize: 0,
yaxis : {
tickDecimals: 1,
},
xaxis : {
//noTicks = 0
},
grid : {
backgroundColor : "#FFFFFF"
},
legend : {
position: "we",
backgroundOpacity: 0
}
};
var debug1_options = {
title: "Debug1",
shadowSize: 0,
yaxis : {
tickDecimals: 1,
},
xaxis : {
//noTicks = 0
},
grid : {
backgroundColor : "#FFFFFF"
},
legend : {
position: "we",
backgroundOpacity: 0
}
};
var debug2_options = {};
for (var key in debug1_options) debug2_options[key] = debug1_options[key];
debug2_options.title = "Debug2";
var debug3_options = {};
for (var key in debug1_options) debug3_options[key] = debug1_options[key];
debug3_options.title = "Debug3";
var debug4_options = {};
for (var key in debug1_options) debug4_options[key] = debug1_options[key];
debug4_options.title = "Debug4";
var gyroHelpers = initGraphHelpers('#gyro', samples_gyro_i, [2000, -2000]);
var accelHelpers = initGraphHelpers('#accel', samples_accel_i, [2, -2]);
var magHelpers = initGraphHelpers('#mag', samples_mag_i);
var baroHelpers = initGraphHelpers('#baro', samples_baro_i);
var debugHelpers = [
initGraphHelpers('#debug1', samples_debug_i),
initGraphHelpers('#debug2', samples_debug_i),
initGraphHelpers('#debug3', samples_debug_i),
initGraphHelpers('#debug4', samples_debug_i)
];
// set refresh speeds according to configuration saved in storage
chrome.storage.local.get('sensor_refresh_rates', function(result) {
@ -191,26 +171,18 @@ function tab_initialize_sensors() {
// and timers are re-initialized with the new settings
var rates = {
'gyro': parseInt($('.tab-sensors select').eq(0).val()),
'accel': parseInt($('.tab-sensors select').eq(1).val()),
'mag': parseInt($('.tab-sensors select').eq(2).val()),
'baro': parseInt($('.tab-sensors select').eq(3).val()),
'debug': parseInt($('.tab-sensors select').eq(4).val())
'gyro': parseInt($('.tab-sensors select').eq(0).val(), 10),
'accel': parseInt($('.tab-sensors select').eq(1).val(), 10),
'mag': parseInt($('.tab-sensors select').eq(2).val(), 10),
'baro': parseInt($('.tab-sensors select').eq(3).val(), 10),
'debug': parseInt($('.tab-sensors select').eq(4).val(), 10)
};
// handling of "data pulling" is a little bit funky here, as MSP_RAW_IMU contains values for gyro/accel/mag but not baro
// this means that setting a slower refresh rate on any of the attributes would have no effect
// what we will do instead is = determinate the fastest refresh rate for those 3 attributes, use that as a "polling rate"
// and use the "slower" refresh rates only for re-drawing the graphs (to save resources/computing power)
var fastest = rates.gyro;
if (rates.accel < fastest) {
fastest = rates.accel;
}
if (rates.mag < fastest) {
fastest = rates.mag;
}
var fastest = d3.min([rates.gyro, rates.accel, rates.mag]);
// store current/latest refresh rates in the storage
chrome.storage.local.set({'sensor_refresh_rates': rates});
@ -238,96 +210,28 @@ function tab_initialize_sensors() {
}, rates.debug, true);
function update_imu_graphs() {
gyro_data[0].push([samples_gyro_i, SENSOR_DATA.gyroscope[0]]);
gyro_data[1].push([samples_gyro_i, SENSOR_DATA.gyroscope[1]]);
gyro_data[2].push([samples_gyro_i, SENSOR_DATA.gyroscope[2]]);
samples_gyro_i = addSampleToData(gyro_data, samples_gyro_i, SENSOR_DATA.gyroscope);
drawGraph(gyroHelpers, gyro_data, samples_gyro_i);
// Remove old data from array
while (gyro_data[0].length > 300) {
gyro_data[0].shift();
gyro_data[1].shift();
gyro_data[2].shift();
}
samples_accel_i = addSampleToData(accel_data, samples_accel_i, SENSOR_DATA.accelerometer);
drawGraph(accelHelpers, accel_data, samples_accel_i);
Flotr.draw(e_graph_gyro, [
{data: gyro_data[0], label: "X - rate [" + SENSOR_DATA.gyroscope[0].toFixed(2) + "]"},
{data: gyro_data[1], label: "Y - rate [" + SENSOR_DATA.gyroscope[1].toFixed(2) + "]"},
{data: gyro_data[2], label: "Z - rate [" + SENSOR_DATA.gyroscope[2].toFixed(2) + "]"} ], gyro_options);
samples_gyro_i++;
accel_data[0].push([samples_accel_i, SENSOR_DATA.accelerometer[0]]);
accel_data[1].push([samples_accel_i, SENSOR_DATA.accelerometer[1]]);
accel_data[2].push([samples_accel_i, SENSOR_DATA.accelerometer[2]]);
// Remove old data from array
while (accel_data[0].length > 300) {
accel_data[0].shift();
accel_data[1].shift();
accel_data[2].shift();
}
Flotr.draw(e_graph_accel, [
{data: accel_data[1], label: "X - acceleration [" + SENSOR_DATA.accelerometer[0].toFixed(2) + "]"},
{data: accel_data[0], label: "Y - acceleration [" + SENSOR_DATA.accelerometer[1].toFixed(2) + "]"},
{data: accel_data[2], label: "Z - acceleration [" + SENSOR_DATA.accelerometer[2].toFixed(2) + "]"} ], accel_options);
samples_accel_i++;
mag_data[0].push([samples_mag_i, SENSOR_DATA.magnetometer[0]]);
mag_data[1].push([samples_mag_i, SENSOR_DATA.magnetometer[1]]);
mag_data[2].push([samples_mag_i, SENSOR_DATA.magnetometer[2]]);
// Remove old data from array
while (mag_data[0].length > 300) {
mag_data[0].shift();
mag_data[1].shift();
mag_data[2].shift();
}
Flotr.draw(e_graph_mag, [
{data: mag_data[1], label: "X - gauss [" + SENSOR_DATA.magnetometer[0].toFixed(2) + "]"},
{data: mag_data[0], label: "Y - gauss [" + SENSOR_DATA.magnetometer[1].toFixed(2) + "]"},
{data: mag_data[2], label: "Z - gauss [" + SENSOR_DATA.magnetometer[2].toFixed(2) + "]"} ], mag_options);
samples_mag_i++;
samples_mag_i = addSampleToData(mag_data, samples_mag_i, SENSOR_DATA.magnetometer);
drawGraph(magHelpers, mag_data, samples_mag_i);
}
function update_altitude_graph() {
baro_data[0].push([samples_baro_i, SENSOR_DATA.altitude]);
// Remove old data from array
while (baro_data[0].length > 300) {
baro_data[0].shift();
}
Flotr.draw(e_graph_baro, [
{data: baro_data[0], label: "Meters [" + SENSOR_DATA.altitude.toFixed(2) + "]"} ], baro_options);
samples_baro_i++;
samples_baro_i = addSampleToData(baro_data, samples_baro_i, [SENSOR_DATA.altitude]);
drawGraph(baroHelpers, baro_data, samples_baro_i);
}
function update_debug_graphs() {
for (var i = 0; i < 4; i++) {
debug_data[i].push([samples_debug_i, SENSOR_DATA.debug[i]]);
// Remove old data from array
while (debug_data[i].length > 300) {
debug_data[i].shift();
}
addSampleToData(debug_data[i], samples_debug_i, [SENSOR_DATA.debug[i]]);
drawGraph(debugHelpers[i], debug_data[i], samples_debug_i);
}
Flotr.draw(e_graph_debug1, [
{data: debug_data[0], label: "debug1 [" + SENSOR_DATA.debug[0] + "]"} ], debug1_options);
Flotr.draw(e_graph_debug2, [
{data: debug_data[1], label: "debug2 [" + SENSOR_DATA.debug[1] + "]"} ], debug2_options);
Flotr.draw(e_graph_debug3, [
{data: debug_data[2], label: "debug3 [" + SENSOR_DATA.debug[2] + "]"} ], debug3_options);
Flotr.draw(e_graph_debug4, [
{data: debug_data[3], label: "debug4 [" + SENSOR_DATA.debug[3] + "]"} ], debug4_options);
samples_debug_i++;
}
});
});
}
}