Merge pull request #31 from TobiasRaeder/d3-for-sensors-tab
Use d3 to render the sensors tab10.3.x-maintenance
commit
2e1f5c3b4f
File diff suppressed because one or more lines are too long
|
@ -21,7 +21,6 @@
|
|||
<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/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_usage.js"></script>
|
||||
<script type="text/javascript" src="./js/serial.js"></script>
|
||||
|
@ -125,4 +124,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
@ -247,7 +247,6 @@ function tab_initialize_receiver() {
|
|||
|
||||
svg.select(".x.grid").call(xGrid);
|
||||
svg.select(".y.grid").call(yGrid);
|
||||
|
||||
svg.select(".x.axis").call(xAxis);
|
||||
svg.select(".y.axis").call(yAxis);
|
||||
|
||||
|
|
|
@ -31,13 +31,47 @@
|
|||
border: 1px solid silver;
|
||||
}
|
||||
|
||||
/* Flotr related styles */
|
||||
.flotr-legend {
|
||||
padding: 2px;
|
||||
margin-left: 31px;
|
||||
top: 20px;
|
||||
border: 0;
|
||||
|
||||
background-color: white;
|
||||
opacity: 0.75;
|
||||
}
|
||||
/* SVG classes*/
|
||||
.tab-sensors .grid .tick {
|
||||
stroke: silver;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.tab-sensors .line {
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
|
|
@ -11,7 +11,28 @@
|
|||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<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">
|
||||
<option value="10">10 ms</option>
|
||||
<option value="20">20 ms</option>
|
||||
|
@ -24,7 +45,28 @@
|
|||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<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">
|
||||
<option value="10">10 ms</option>
|
||||
<option value="20">20 ms</option>
|
||||
|
@ -37,7 +79,28 @@
|
|||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<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">
|
||||
<option value="10">10 ms</option>
|
||||
<option value="20">20 ms</option>
|
||||
|
@ -50,7 +113,20 @@
|
|||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<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">
|
||||
<option value="10">10 ms</option>
|
||||
<option value="20">20 ms</option>
|
||||
|
@ -63,8 +139,60 @@
|
|||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<div class="clear-both"></div>
|
||||
<div id="debug1"></div>
|
||||
<div id="debug2"></div>
|
||||
<div id="debug3"></div>
|
||||
<div id="debug4"></div>
|
||||
<svg id="debug1">
|
||||
<text class="title" transform="translate(400, 8)">Debug 1</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 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>
|
||||
|
|
402
tabs/sensors.js
402
tabs/sensors.js
|
@ -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++;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue