sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #31 from TobiasRaeder/d3-for-sensors-tab 

Use d3 to render the sensors tab
10.3.x-maintenance
Stefan Kolla 2014-04-13 12:52:54 +02:00
parent 1c7906ad00 de26bdb0d0
commit 2e1f5c3b4f
6 changed files with 334 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
js/libraries/flotr2.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
main.html
View File

@ -21,7 +21,6 @@
<script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script> <script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
<script type="text/javascript" src="./js/libraries/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="./js/libraries/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/libraries/d3.min.js"></script> <script type="text/javascript" src="./js/libraries/d3.min.js"></script>
<script type="text/javascript" src="./js/libraries/flotr2.min.js"></script>
<script type="text/javascript" src="./js/port_handler.js"></script> <script type="text/javascript" src="./js/port_handler.js"></script>
<script type="text/javascript" src="./js/port_usage.js"></script> <script type="text/javascript" src="./js/port_usage.js"></script>
<script type="text/javascript" src="./js/serial.js"></script> <script type="text/javascript" src="./js/serial.js"></script>
@ -125,4 +124,4 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

1
tabs/receiver.js
View File

@ -247,7 +247,6 @@ function tab_initialize_receiver() {
svg.select(".x.grid").call(xGrid); svg.select(".x.grid").call(xGrid);
svg.select(".y.grid").call(yGrid); svg.select(".y.grid").call(yGrid);
svg.select(".x.axis").call(xAxis); svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis); svg.select(".y.axis").call(yAxis);

54
tabs/sensors.css
View File

@ -31,13 +31,47 @@
border: 1px solid silver; border: 1px solid silver;
} }
/* Flotr related styles */ /* SVG classes*/
.flotr-legend { .tab-sensors .grid .tick {
padding: 2px; stroke: silver;
margin-left: 31px; shape-rendering: crispEdges;
top: 20px; }
border: 0; .tab-sensors .line {
stroke-width: 2px;
background-color: white; fill: none;
opacity: 0.75; }
} .tab-sensors .grid path {
stroke-width: 0;
}
.tab-sensors .axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.tab-sensors svg .title {
font-weight: bold;
}
.tab-sensors .line:nth-child(1) {
stroke: #00A8F0;
}
.tab-sensors .line:nth-child(2) {
stroke: #C0D800;
}
.tab-sensors .line:nth-child(3) {
stroke: #CB4B4B;
}
.tab-sensors .line:nth-child(4) {
stroke: #4DA74D;
}
.tab-sensors .legend .item:nth-child(1) {
fill: #00A8F0;
}
.tab-sensors .legend .item:nth-child(2) {
fill: #C0D800;
}
.tab-sensors .legend .item:nth-child(3) {
fill: #CB4B4B;
}
.tab-sensors .legend .item:nth-child(4) {
fill: #4DA74D;
}

144
tabs/sensors.html
View File

@ -11,7 +11,28 @@
<option value="1000">1000 ms</option> <option value="1000">1000 ms</option>
</select> </select>
<div class="clear-both"></div> <div class="clear-both"></div>
<div id="gyro"></div> <svg id="gyro">
<text class="title" transform="translate(400, 8)">Gyroscope (deg/s)</text>
<g class="grid x" transform="translate(40, 100)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 10)"></g>
<g class="legend" transform="translate(790, 20)">
<g class="item" transform="translate(0, 0)">
<text class="label">X - rate</text>
<text class="value" transform="translate(50, 0)"></text>
</g>
<g class="item" transform="translate(0, 12)">
<text class="label">Y - rate</text>
<text class="value" transform="translate(50, 0)"></text>
</g>
<g class="item" transform="translate(0, 24)">
<text class="label">Z - rate</text>
<text class="value" transform="translate(50, 0)"></text>
</g>
</g>
</svg>
<select title="Accelerometer refresh rate" name="accel_refresh_rate"> <select title="Accelerometer refresh rate" name="accel_refresh_rate">
<option value="10">10 ms</option> <option value="10">10 ms</option>
<option value="20">20 ms</option> <option value="20">20 ms</option>
@ -24,7 +45,28 @@
<option value="1000">1000 ms</option> <option value="1000">1000 ms</option>
</select> </select>
<div class="clear-both"></div> <div class="clear-both"></div>
<div id="accel"></div> <svg id="accel">
<text class="title" transform="translate(400, 8)">Accelerometer (g)</text>
<g class="grid x" transform="translate(40, 100)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 10)"></g>
<g class="legend" transform="translate(750, 20)">
<g class="item" transform="translate(0, 0)">
<text class="label">X - acceleration</text>
<text class="value" transform="translate(90, 0)"></text>
</g>
<g class="item" transform="translate(0, 12)">
<text class="label">Y - acceleration</text>
<text class="value" transform="translate(90, 0)"></text>
</g>
<g class="item" transform="translate(0, 24)">
<text class="label">Z - acceleration</text>
<text class="value" transform="translate(90, 0)"></text>
</g>
</g>
</svg>
<select title="Magnetometer refresh rate" name="mag_refrash_rate"> <select title="Magnetometer refresh rate" name="mag_refrash_rate">
<option value="10">10 ms</option> <option value="10">10 ms</option>
<option value="20">20 ms</option> <option value="20">20 ms</option>
@ -37,7 +79,28 @@
<option value="1000">1000 ms</option> <option value="1000">1000 ms</option>
</select> </select>
<div class="clear-both"></div> <div class="clear-both"></div>
<div id="mag"></div> <svg id="mag">
<text class="title" transform="translate(400, 8)">Magnetometer (Ga)</text>
<g class="grid x" transform="translate(40, 100)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 10)"></g>
<g class="legend" transform="translate(780, 20)">
<g class="item" transform="translate(0, 0)">
<text class="label">X - gauss</text>
<text class="value" transform="translate(60, 0)"></text>
</g>
<g class="item" transform="translate(0, 12)">
<text class="label">Y - gauss</text>
<text class="value" transform="translate(60, 0)"></text>
</g>
<g class="item" transform="translate(0, 24)">
<text class="label">Z - gauss</text>
<text class="value" transform="translate(60, 0)"></text>
</g>
</g>
</svg>
<select title="Barometer refresh rate" name="baro_refresh_rate"> <select title="Barometer refresh rate" name="baro_refresh_rate">
<option value="10">10 ms</option> <option value="10">10 ms</option>
<option value="20">20 ms</option> <option value="20">20 ms</option>
@ -50,7 +113,20 @@
<option value="1000">1000 ms</option> <option value="1000">1000 ms</option>
</select> </select>
<div class="clear-both"></div> <div class="clear-both"></div>
<div id="baro"></div> <svg id="baro">
<text class="title" transform="translate(400, 8)">Barometer (meters)</text>
<g class="grid x" transform="translate(40, 100)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 10)"></g>
<g class="legend" transform="translate(780, 20)">
<g class="item" transform="translate(0, 0)">
<text class="label">X - meters</text>
<text class="value" transform="translate(60, 0)"></text>
</g>
</g>
</svg>
<select title="Debug refresh rate" name="debug_refresh_rate"> <select title="Debug refresh rate" name="debug_refresh_rate">
<option value="10">10 ms</option> <option value="10">10 ms</option>
<option value="20">20 ms</option> <option value="20">20 ms</option>
@ -63,8 +139,60 @@
<option value="1000">1000 ms</option> <option value="1000">1000 ms</option>
</select> </select>
<div class="clear-both"></div> <div class="clear-both"></div>
<div id="debug1"></div> <svg id="debug1">
<div id="debug2"></div> <text class="title" transform="translate(400, 8)">Debug 1</text>
<div id="debug3"></div> <g class="grid x" transform="translate(40, 100)"></g>
<div id="debug4"></div> <g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 10)"></g>
<g class="legend" transform="translate(750, 20)">
<g class="item" transform="translate(0, 0)">
<text class="label">Debug 1</text>
<text class="value" transform="translate(60, 0)"></text>
</g>
</g>
</svg>
<svg id="debug2">
<text class="title" transform="translate(400, 8)">Debug 2</text>
<g class="grid x" transform="translate(40, 100)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 10)"></g>
<g class="legend" transform="translate(750, 20)">
<g class="item" transform="translate(0, 0)">
<text class="label">Debug 2</text>
<text class="value" transform="translate(60, 0)"></text>
</g>
</g>
</svg>
<svg id="debug3">
<text class="title" transform="translate(400, 8)">Debug 3</text>
<g class="grid x" transform="translate(40, 100)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 10)"></g>
<g class="legend" transform="translate(750, 20)">
<g class="item" transform="translate(0, 0)">
<text class="label">Debug 3</text>
<text class="value" transform="translate(60, 0)"></text>
</g>
</g>
</svg>
<svg id="debug4">
<text class="title" transform="translate(400, 8)">Debug 4</text>
<g class="grid x" transform="translate(40, 100)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 10)"></g>
<g class="legend" transform="translate(750, 20)">
<g class="item" transform="translate(0, 0)">
<text class="label">Debug 4</text>
<text class="value" transform="translate(60, 0)"></text>
</g>
</g>
</svg>
</div> </div>

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() { function tab_initialize_sensors() {
ga_tracker.sendAppView('Sensor Page'); ga_tracker.sendAppView('Sensor Page');
GUI.active_tab = 'sensors'; GUI.active_tab = 'sensors';
$('#content').load("./tabs/sensors.html", function load_html() { $('#content').load("./tabs/sensors.html", function load_html() {
// Always start with default/empty sensor data array, clean slate all // Always start with default/empty sensor data array, clean slate all
for (var i = 0; i < 3; i++) SENSOR_DATA.accelerometer[i] = 0; initSensorData();
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;
// Setup variables // Setup variables
var samples_gyro_i = 300; var samples_gyro_i = 300;
@ -16,159 +128,27 @@ function tab_initialize_sensors() {
var samples_baro_i = 300; var samples_baro_i = 300;
var samples_debug_i = 300; var samples_debug_i = 300;
var gyro_data = new Array(3); var gyro_data = initDataArray(3);
var accel_data = new Array(3); var accel_data = initDataArray(3);
var mag_data = new Array(3); var mag_data = initDataArray(3);
var baro_data = new Array(1); var baro_data = initDataArray(1);
var debug_data = new Array(4); var debug_data = [
initDataArray(1),
initDataArray(1),
initDataArray(1),
initDataArray(1)
];
gyro_data[0] = new Array(); var gyroHelpers = initGraphHelpers('#gyro', samples_gyro_i, [2000, -2000]);
gyro_data[1] = new Array(); var accelHelpers = initGraphHelpers('#accel', samples_accel_i, [2, -2]);
gyro_data[2] = new Array(); var magHelpers = initGraphHelpers('#mag', samples_mag_i);
var baroHelpers = initGraphHelpers('#baro', samples_baro_i);
accel_data[0] = new Array(); var debugHelpers = [
accel_data[1] = new Array(); initGraphHelpers('#debug1', samples_debug_i),
accel_data[2] = new Array(); initGraphHelpers('#debug2', samples_debug_i),
initGraphHelpers('#debug3', samples_debug_i),
mag_data[0] = new Array(); initGraphHelpers('#debug4', samples_debug_i)
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";
// set refresh speeds according to configuration saved in storage // set refresh speeds according to configuration saved in storage
chrome.storage.local.get('sensor_refresh_rates', function(result) { 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 // and timers are re-initialized with the new settings
var rates = { var rates = {
'gyro': parseInt($('.tab-sensors select').eq(0).val()), 'gyro': parseInt($('.tab-sensors select').eq(0).val(), 10),
'accel': parseInt($('.tab-sensors select').eq(1).val()), 'accel': parseInt($('.tab-sensors select').eq(1).val(), 10),
'mag': parseInt($('.tab-sensors select').eq(2).val()), 'mag': parseInt($('.tab-sensors select').eq(2).val(), 10),
'baro': parseInt($('.tab-sensors select').eq(3).val()), 'baro': parseInt($('.tab-sensors select').eq(3).val(), 10),
'debug': parseInt($('.tab-sensors select').eq(4).val()) '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 // 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 // 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" // 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) // and use the "slower" refresh rates only for re-drawing the graphs (to save resources/computing power)
var fastest = rates.gyro; var fastest = d3.min([rates.gyro, rates.accel, rates.mag]);
if (rates.accel < fastest) {
fastest = rates.accel;
}
if (rates.mag < fastest) {
fastest = rates.mag;
}
// store current/latest refresh rates in the storage // store current/latest refresh rates in the storage
chrome.storage.local.set({'sensor_refresh_rates': rates}); chrome.storage.local.set({'sensor_refresh_rates': rates});
@ -238,96 +210,28 @@ function tab_initialize_sensors() {
}, rates.debug, true); }, rates.debug, true);
function update_imu_graphs() { function update_imu_graphs() {
gyro_data[0].push([samples_gyro_i, SENSOR_DATA.gyroscope[0]]); samples_gyro_i = addSampleToData(gyro_data, samples_gyro_i, SENSOR_DATA.gyroscope);
gyro_data[1].push([samples_gyro_i, SENSOR_DATA.gyroscope[1]]); drawGraph(gyroHelpers, gyro_data, samples_gyro_i);
gyro_data[2].push([samples_gyro_i, SENSOR_DATA.gyroscope[2]]);
// Remove old data from array samples_accel_i = addSampleToData(accel_data, samples_accel_i, SENSOR_DATA.accelerometer);
while (gyro_data[0].length > 300) { drawGraph(accelHelpers, accel_data, samples_accel_i);
gyro_data[0].shift();
gyro_data[1].shift();
gyro_data[2].shift();
}
Flotr.draw(e_graph_gyro, [ samples_mag_i = addSampleToData(mag_data, samples_mag_i, SENSOR_DATA.magnetometer);
{data: gyro_data[0], label: "X - rate [" + SENSOR_DATA.gyroscope[0].toFixed(2) + "]"}, drawGraph(magHelpers, mag_data, samples_mag_i);
{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++;
} }
function update_altitude_graph() { function update_altitude_graph() {
baro_data[0].push([samples_baro_i, SENSOR_DATA.altitude]); samples_baro_i = addSampleToData(baro_data, samples_baro_i, [SENSOR_DATA.altitude]);
drawGraph(baroHelpers, baro_data, samples_baro_i);
// 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++;
} }
function update_debug_graphs() { function update_debug_graphs() {
for (var i = 0; i < 4; i++) { for (var i = 0; i < 4; i++) {
debug_data[i].push([samples_debug_i, SENSOR_DATA.debug[i]]); addSampleToData(debug_data[i], samples_debug_i, [SENSOR_DATA.debug[i]]);
drawGraph(debugHelpers[i], debug_data[i], samples_debug_i);
// Remove old data from array
while (debug_data[i].length > 300) {
debug_data[i].shift();
}
} }
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++; samples_debug_i++;
} }
}); });
}); });
} }