Mirror/betaflight
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight.git synced 2025-07-26 01:35:41 +03:00
Code Issues Wiki Activity

plot enable/disable toggles

Browse source
This commit is contained in:
cTn 2014-04-14 00:15:56 +02:00
parent c85f5af9cb
commit 8ba30a91d9
3 changed files with 461 additions and 327 deletions
Download patch file Download diff file Expand all files Collapse all files

17
tabs/sensors.css
View file

@ -1,5 +1,22 @@
.tab-sensors { .tab-sensors {
} }
.tab-sensors .info {
margin-bottom: 10px;
}
.tab-sensors .info p {
padding: 5px;
border: 1px dashed silver;
margin-bottom: 10px;
}
.tab-sensors .info input {
vertical-align: middle;
margin: 0 10px 0 5px;
}
.tab-sensors .wrapper {
display: none;
}
.tab-sensors .plot_control { .tab-sensors .plot_control {
float: right; float: right;

361
tabs/sensors.html
View file

@ -1,4 +1,20 @@
<div class="tab-sensors"> <div class="tab-sensors">
<div class="info">
<p>
Keep in mind that using fast update periods and rendering multiple graphs at the same time
is resource heavy and will burn your battery quicker if you use a laptop.<br />
We recommend to only render graphs for sensors you are interested in while using reasonable
update periods.<br />
</p>
<div class="checkboxes">
Gyroscope <input type="checkbox" name="gyro_on" />
Accelerometer <input type="checkbox" name="accel_on" />
Magnetometer <input type="checkbox" name="mag_on" />
Barometer <input type="checkbox" name="baro_on" />
Debug <input type="checkbox" name="debug_on" />
</div>
</div>
<div class="wrapper gyro">
<div class="plot_control"> <div class="plot_control">
<div class="title">Gyroscope - deg/s</div> <div class="title">Gyroscope - deg/s</div>
<dl> <dl>
@ -37,176 +53,185 @@
<g class="axis y" transform="translate(40, 10)"></g> <g class="axis y" transform="translate(40, 10)"></g>
</svg> </svg>
<div class="clear-both"></div> <div class="clear-both"></div>
<div class="plot_control">
<div class="title">Accelerometer - g</div>
<dl>
<dt>Refresh:</dt>
<dd class="rate">
<select name="accel_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>Scale:</dt>
<dd class="scale">
<select name="accel_scale">
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</dd>
<dt>X:</dt><dd class="x">0</dd>
<dt>Y:</dt><dd class="y">0</dd>
<dt>Z:</dt><dd class="z">0</dd>
</dl>
</div> </div>
<svg id="accel"> <div class="wrapper accel">
<g class="grid x" transform="translate(40, 120)"></g> <div class="plot_control">
<g class="grid y" transform="translate(40, 10)"></g> <div class="title">Accelerometer - g</div>
<g class="data" transform="translate(41, 10)"></g> <dl>
<g class="axis x" transform="translate(40, 120)"></g> <dt>Refresh:</dt>
<g class="axis y" transform="translate(40, 10)"></g> <dd class="rate">
</svg> <select name="accel_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>Scale:</dt>
<dd class="scale">
<select name="accel_scale">
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</dd>
<dt>X:</dt><dd class="x">0</dd>
<dt>Y:</dt><dd class="y">0</dd>
<dt>Z:</dt><dd class="z">0</dd>
</dl>
</div>
<svg id="accel">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
<div class="wrapper mag">
<div class="plot_control">
<div class="title">Magnetometer - Ga</div>
<dl>
<dt>Refresh:</dt>
<dd class="rate">
<select name="mag_refrash_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>Scale:</dt>
<dd class="scale">
<select name="mag_scale">
<option value="0.5">0.5</option>
<option value="1" selected="selected">1</option>
</select>
</dd>
<dt>X:</dt><dd class="x">0</dd>
<dt>Y:</dt><dd class="y">0</dd>
<dt>Z:</dt><dd class="z">0</dd>
</dl>
</div>
<svg id="mag">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
</div>
<div class="clear-both"></div> <div class="clear-both"></div>
<div class="plot_control"> <div class="wrapper baro">
<div class="title">Magnetometer - Ga</div> <div class="plot_control">
<dl> <div class="title">Barometer - meters</div>
<dt>Refresh:</dt> <dl>
<dd class="rate"> <dt>Refresh:</dt>
<select name="mag_refrash_rate"> <dd class="rate">
<option value="10">10 ms</option> <select name="baro_refresh_rate">
<option value="20">20 ms</option> <option value="10">10 ms</option>
<option value="30">30 ms</option> <option value="20">20 ms</option>
<option value="40">40 ms</option> <option value="30">30 ms</option>
<option value="50" selected="selected">50 ms</option> <option value="40">40 ms</option>
<option value="100">100 ms</option> <option value="50">50 ms</option>
<option value="250">250 ms</option> <option value="100" selected="selected">100 ms</option>
<option value="500">500 ms</option> <option value="250">250 ms</option>
<option value="1000">1000 ms</option> <option value="500">500 ms</option>
</select> <option value="1000">1000 ms</option>
</dd> </select>
<dt>Scale:</dt> </dd>
<dd class="scale"> <dt>X:</dt><dd class="x">0</dd>
<select name="mag_scale"> </dl>
<option value="0.5">0.5</option> </div>
<option value="1" selected="selected">1</option> <svg id="baro">
</select> <g class="grid x" transform="translate(40, 120)"></g>
</dd> <g class="grid y" transform="translate(40, 10)"></g>
<dt>X:</dt><dd class="x">0</dd> <g class="data" transform="translate(41, 10)"></g>
<dt>Y:</dt><dd class="y">0</dd> <g class="axis x" transform="translate(40, 120)"></g>
<dt>Z:</dt><dd class="z">0</dd> <g class="axis y" transform="translate(40, 10)"></g>
</dl> </svg>
<div class="clear-both"></div>
</div> </div>
<svg id="mag"> <div class="wrapper debug">
<g class="grid x" transform="translate(40, 120)"></g> <div class="plot_control">
<g class="grid y" transform="translate(40, 10)"></g> <div class="title">Debug 1</div>
<g class="data" transform="translate(41, 10)"></g> <dl>
<g class="axis x" transform="translate(40, 120)"></g> <dt>Refresh:</dt>
<g class="axis y" transform="translate(40, 10)"></g> <dd class="rate">
</svg> <select name="debug_refresh_rate">
<div class="clear-both"></div> <option value="10">10 ms</option>
<div class="plot_control"> <option value="20">20 ms</option>
<div class="title">Barometer - meters</div> <option value="30">30 ms</option>
<dl> <option value="40">40 ms</option>
<dt>Refresh:</dt> <option value="50">50 ms</option>
<dd class="rate"> <option value="100">100 ms</option>
<select name="baro_refresh_rate"> <option value="250">250 ms</option>
<option value="10">10 ms</option> <option value="500" selected="selected">500 ms</option>
<option value="20">20 ms</option> <option value="1000">1000 ms</option>
<option value="30">30 ms</option> </select>
<option value="40">40 ms</option> </dd>
<option value="50">50 ms</option> <dt>X:</dt><dd class="x">0</dd>
<option value="100" selected="selected">100 ms</option> </dl>
<option value="250">250 ms</option> </div>
<option value="500">500 ms</option> <svg id="debug1">
<option value="1000">1000 ms</option> <g class="grid x" transform="translate(40, 120)"></g>
</select> <g class="grid y" transform="translate(40, 10)"></g>
</dd> <g class="data" transform="translate(41, 10)"></g>
<dt>X:</dt><dd class="x">0</dd> <g class="axis x" transform="translate(40, 120)"></g>
</dl> <g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 2</div>
<dl>
<dt>X:</dt><dd class="x">blue</dd>
</dl>
</div>
<svg id="debug2">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 3</div>
<dl>
<dt>X:</dt><dd class="x">0</dd>
</dl>
</div>
<svg id="debug3">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 4</div>
<dl>
<dt>X:</dt><dd class="x">0</dd>
</dl>
</div>
<svg id="debug4">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
</div> </div>
<svg id="baro">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 1</div>
<dl>
<dt>Refresh:</dt>
<dd class="rate">
<select name="debug_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500" selected="selected">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt><dd class="x">0</dd>
</dl>
</div>
<svg id="debug1">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 2</div>
<dl>
<dt>X:</dt><dd class="x">blue</dd>
</dl>
</div>
<svg id="debug2">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 3</div>
<dl>
<dt>X:</dt><dd class="x">0</dd>
</dl>
</div>
<svg id="debug3">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 4</div>
<dl>
<dt>X:</dt><dd class="x">0</dd>
</dl>
</div>
<svg id="debug4">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
</div> </div>

410
tabs/sensors.js
View file

@ -1,120 +1,203 @@
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();
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 = $(selector).width() - margin.left - margin.right;
var height = $(selector).height() - margin.top - margin.bottom;
var helpers = {selector: selector, dynamicHeightDomain: !heightDomain};
helpers.widthScale = d3.scale.linear().
clamp(true).
domain([(sampleNumber - 299), sampleNumber]).
range([0, width]);
helpers.heightScale = d3.scale.linear().
clamp(true).
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));
}
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);
}
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';
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();
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 = $(selector).width() - margin.left - margin.right;
var height = $(selector).height() - margin.top - margin.bottom;
var helpers = {selector: selector, dynamicHeightDomain: !heightDomain};
helpers.widthScale = d3.scale.linear().
clamp(true).
domain([(sampleNumber - 299), sampleNumber]).
range([0, width]);
helpers.heightScale = d3.scale.linear().
clamp(true).
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));
}
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);
}
function plot_gyro(enable) {
if (enable) {
$('.wrapper.gyro').show();
} else {
$('.wrapper.gyro').hide();
}
}
function plot_accel(enable) {
if (enable) {
$('.wrapper.accel').show();
} else {
$('.wrapper.accel').hide();
}
}
function plot_mag(enable) {
if (enable) {
$('.wrapper.mag').show();
} else {
$('.wrapper.mag').hide();
}
}
function plot_baro(enable) {
if (enable) {
$('.wrapper.baro').show();
} else {
$('.wrapper.baro').hide();
}
}
function plot_debug(enable) {
if (enable) {
$('.wrapper.debug').show();
} else {
$('.wrapper.debug').hide();
}
}
$('#content').load("./tabs/sensors.html", function load_html() { $('#content').load("./tabs/sensors.html", function load_html() {
$('.tab-sensors .info .checkboxes input').change(function() {
var enable = $(this).prop('checked');
var index = $(this).index();
switch (index) {
case 0:
plot_gyro(enable);
break;
case 1:
plot_accel(enable);
break;
case 2:
plot_mag(enable);
break;
case 3:
plot_baro(enable);
break;
case 4:
plot_debug(enable);
break;
}
var checkboxes = [];
$('.tab-sensors .info input').each(function() {
checkboxes.push($(this).prop('checked'));
});
$('.tab-sensors .rate select:first').change();
chrome.storage.local.set({'graphs_enabled': checkboxes});
});
chrome.storage.local.get('graphs_enabled', function(result) {
if (result.graphs_enabled) {
var checkboxes = $('.tab-sensors .info input');
for (var i = 0; i < result.graphs_enabled.length; i++) {
checkboxes.eq(i).prop('checked', result.graphs_enabled[i]).change();
}
} else {
$('.tab-sensors .info input:lt(4)').prop('checked', true).change();
}
});
// Always start with default/empty sensor data array, clean slate all // Always start with default/empty sensor data array, clean slate all
initSensorData(); initSensorData();
@ -165,7 +248,7 @@ function tab_initialize_sensors() {
// set refresh speeds according to configuration saved in storage // set refresh speeds according to configuration saved in storage
chrome.storage.local.get('sensor_settings', function(result) { chrome.storage.local.get('sensor_settings', function(result) {
if (typeof result.sensor_settings != 'undefined') { if (result.sensor_settings) {
$('.tab-sensors select[name="gyro_refresh_rate"]').val(result.sensor_settings.rates.gyro); $('.tab-sensors select[name="gyro_refresh_rate"]').val(result.sensor_settings.rates.gyro);
$('.tab-sensors select[name="gyro_scale"]').val(result.sensor_settings.scales.gyro); $('.tab-sensors select[name="gyro_scale"]').val(result.sensor_settings.scales.gyro);
@ -179,17 +262,16 @@ function tab_initialize_sensors() {
$('.tab-sensors select[name="debug_refresh_rate"]').val(result.sensor_settings.rates.debug); $('.tab-sensors select[name="debug_refresh_rate"]').val(result.sensor_settings.rates.debug);
// start polling data by triggering refresh rate change event // start polling data by triggering refresh rate change event
$('.tab-sensors .scale select:first').change(); $('.tab-sensors .rate select:first').change();
} else { } else {
// start polling immediatly (as there is no configuration saved in the storage) // start polling immediatly (as there is no configuration saved in the storage)
$('.tab-sensors .scale select:first').change(); $('.tab-sensors .rate select:first').change();
} }
}); });
$('.tab-sensors .rate select').change(function() { $('.tab-sensors .rate select, .tab-sensors .scale select').change(function() {
// if any of the select fields change value, all of the select values are grabbed // if any of the select fields change value, all of the select values are grabbed
// 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[name="gyro_refresh_rate"]').val(), 10), 'gyro': parseInt($('.tab-sensors select[name="gyro_refresh_rate"]').val(), 10),
'accel': parseInt($('.tab-sensors select[name="accel_refresh_rate"]').val(), 10), 'accel': parseInt($('.tab-sensors select[name="accel_refresh_rate"]').val(), 10),
@ -213,46 +295,63 @@ function tab_initialize_sensors() {
// store current/latest refresh rates in the storage // store current/latest refresh rates in the storage
chrome.storage.local.set({'sensor_settings': {'rates': rates, 'scales': scales}}); chrome.storage.local.set({'sensor_settings': {'rates': rates, 'scales': scales}});
// re-initialize domains with new scales
gyroHelpers = initGraphHelpers('#gyro', samples_gyro_i, [-scales.gyro, scales.gyro]);
accelHelpers = initGraphHelpers('#accel', samples_accel_i, [-scales.accel, scales.accel]);
magHelpers = initGraphHelpers('#mag', samples_mag_i, [-scales.mag, scales.mag]);
// fetch currently enabled plots
var checkboxes = [];
$('.tab-sensors .info input').each(function() {
checkboxes.push($(this).prop('checked'));
});
// timer initialization // timer initialization
GUI.interval_kill_all(); GUI.interval_kill_all(['status_pull']);
// data pulling timers // data pulling timers
if (checkboxes[0] || checkboxes[1] || checkboxes[2]) {
GUI.interval_add('IMU_pull', function imu_data_pull() {
send_message(MSP_codes.MSP_RAW_IMU, false, false, update_imu_graphs);
}, fastest, true);
}
// status data pulled via separate timer with static speed if (checkboxes[3]) {
GUI.interval_add('status_pull', function() { GUI.interval_add('altitude_pull', function altitude_data_pull() {
send_message(MSP_codes.MSP_STATUS); send_message(MSP_codes.MSP_ALTITUDE, false, false, update_altitude_graph);
}, 250, true); }, rates.baro, true);
}
GUI.interval_add('IMU_pull', function imu_data_pull() { if (checkboxes[4]) {
send_message(MSP_codes.MSP_RAW_IMU, false, false, update_imu_graphs); GUI.interval_add('debug_pull', function debug_data_pull() {
}, fastest, true); send_message(MSP_codes.MSP_DEBUG, false, false, update_debug_graphs);
}, rates.debug, true);
GUI.interval_add('altitude_pull', function altitude_data_pull() { }
send_message(MSP_codes.MSP_ALTITUDE, false, false, update_altitude_graph);
}, rates.baro, true);
GUI.interval_add('debug_pull', function debug_data_pull() {
send_message(MSP_codes.MSP_DEBUG, false, false, update_debug_graphs);
}, rates.debug, true);
function update_imu_graphs() { function update_imu_graphs() {
samples_gyro_i = addSampleToData(gyro_data, samples_gyro_i, SENSOR_DATA.gyroscope); if (checkboxes[0]) {
drawGraph(gyroHelpers, gyro_data, samples_gyro_i); samples_gyro_i = addSampleToData(gyro_data, samples_gyro_i, SENSOR_DATA.gyroscope);
raw_data_text_ements.x[0].text(SENSOR_DATA.gyroscope[0].toFixed(2)); drawGraph(gyroHelpers, gyro_data, samples_gyro_i);
raw_data_text_ements.y[0].text(SENSOR_DATA.gyroscope[1].toFixed(2)); raw_data_text_ements.x[0].text(SENSOR_DATA.gyroscope[0].toFixed(2));
raw_data_text_ements.z[0].text(SENSOR_DATA.gyroscope[2].toFixed(2)); raw_data_text_ements.y[0].text(SENSOR_DATA.gyroscope[1].toFixed(2));
raw_data_text_ements.z[0].text(SENSOR_DATA.gyroscope[2].toFixed(2));
}
samples_accel_i = addSampleToData(accel_data, samples_accel_i, SENSOR_DATA.accelerometer); if (checkboxes[1]) {
drawGraph(accelHelpers, accel_data, samples_accel_i); samples_accel_i = addSampleToData(accel_data, samples_accel_i, SENSOR_DATA.accelerometer);
raw_data_text_ements.x[1].text(SENSOR_DATA.accelerometer[0].toFixed(2)); drawGraph(accelHelpers, accel_data, samples_accel_i);
raw_data_text_ements.y[1].text(SENSOR_DATA.accelerometer[1].toFixed(2)); raw_data_text_ements.x[1].text(SENSOR_DATA.accelerometer[0].toFixed(2));
raw_data_text_ements.z[1].text(SENSOR_DATA.accelerometer[2].toFixed(2)); raw_data_text_ements.y[1].text(SENSOR_DATA.accelerometer[1].toFixed(2));
raw_data_text_ements.z[1].text(SENSOR_DATA.accelerometer[2].toFixed(2));
}
samples_mag_i = addSampleToData(mag_data, samples_mag_i, SENSOR_DATA.magnetometer); if (checkboxes[2]) {
drawGraph(magHelpers, mag_data, samples_mag_i); samples_mag_i = addSampleToData(mag_data, samples_mag_i, SENSOR_DATA.magnetometer);
raw_data_text_ements.x[2].text(SENSOR_DATA.magnetometer[0].toFixed(2)); drawGraph(magHelpers, mag_data, samples_mag_i);
raw_data_text_ements.y[2].text(SENSOR_DATA.magnetometer[1].toFixed(2)); raw_data_text_ements.x[2].text(SENSOR_DATA.magnetometer[0].toFixed(2));
raw_data_text_ements.z[2].text(SENSOR_DATA.magnetometer[2].toFixed(2)); raw_data_text_ements.y[2].text(SENSOR_DATA.magnetometer[1].toFixed(2));
raw_data_text_ements.z[2].text(SENSOR_DATA.magnetometer[2].toFixed(2));
}
} }
function update_altitude_graph() { function update_altitude_graph() {
@ -271,16 +370,9 @@ function tab_initialize_sensors() {
} }
}); });
$('.tab-sensors .scale select').change(function() { // status data pulled via separate timer with static speed
var gyro_s = parseFloat($('select[name="gyro_scale"]').val()); GUI.interval_add('status_pull', function() {
var acc_s = parseFloat($('select[name="accel_scale"]').val()); send_message(MSP_codes.MSP_STATUS);
var mag_s = parseFloat($('select[name="mag_scale"]').val()); }, 250, true);
gyroHelpers = initGraphHelpers('#gyro', samples_gyro_i, [-gyro_s, gyro_s]);
accelHelpers = initGraphHelpers('#accel', samples_accel_i, [-acc_s, acc_s]);
magHelpers = initGraphHelpers('#mag', samples_mag_i, [-mag_s, mag_s]);
$('.tab-sensors .rate select:first').change();
});
}); });
} }