mirror of
https://github.com/betaflight/betaflight.git
synced 2025-07-26 01:35:41 +03:00
plot enable/disable toggles
This commit is contained in:
cTn
parent
c85f5af9cb
commit
8ba30a91d9
3 changed files with 461 additions and 327 deletions
|
|
@ -1,5 +1,22 @@
|
|||
.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 {
|
||||
float: right;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,20 @@
|
|||
<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="title">Gyroscope - deg/s</div>
|
||||
<dl>
|
||||
|
|
@ -37,6 +53,8 @@
|
|||
<g class="axis y" transform="translate(40, 10)"></g>
|
||||
</svg>
|
||||
<div class="clear-both"></div>
|
||||
</div>
|
||||
<div class="wrapper accel">
|
||||
<div class="plot_control">
|
||||
<div class="title">Accelerometer - g</div>
|
||||
<dl>
|
||||
|
|
@ -75,6 +93,8 @@
|
|||
<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>
|
||||
|
|
@ -111,7 +131,9 @@
|
|||
<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="wrapper baro">
|
||||
<div class="plot_control">
|
||||
<div class="title">Barometer - meters</div>
|
||||
<dl>
|
||||
|
|
@ -140,6 +162,8 @@
|
|||
<g class="axis y" transform="translate(40, 10)"></g>
|
||||
</svg>
|
||||
<div class="clear-both"></div>
|
||||
</div>
|
||||
<div class="wrapper debug">
|
||||
<div class="plot_control">
|
||||
<div class="title">Debug 1</div>
|
||||
<dl>
|
||||
|
|
@ -209,4 +233,5 @@
|
|||
<g class="axis x" transform="translate(40, 120)"></g>
|
||||
<g class="axis y" transform="translate(40, 10)"></g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
164
tabs/sensors.js
164
tabs/sensors.js
|
|
@ -1,13 +1,17 @@
|
|||
function initSensorData(){
|
||||
function tab_initialize_sensors() {
|
||||
ga_tracker.sendAppView('Sensor Page');
|
||||
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) {
|
||||
function initDataArray(length) {
|
||||
var data = new Array(length);
|
||||
for (var i = 0; i < length; i++) {
|
||||
data[i] = new Array();
|
||||
|
|
@ -15,9 +19,9 @@ function initDataArray(length) {
|
|||
data[i].max = 1;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
function addSampleToData(data, sampleNumber, sensorData) {
|
||||
function addSampleToData(data, sampleNumber, sensorData) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataPoint = sensorData[i];
|
||||
data[i].push([sampleNumber, dataPoint]);
|
||||
|
|
@ -34,9 +38,9 @@ function addSampleToData(data, sampleNumber, sensorData) {
|
|||
}
|
||||
}
|
||||
return sampleNumber + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function initGraphHelpers(selector, sampleNumber, heightDomain) {
|
||||
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;
|
||||
|
|
@ -84,9 +88,9 @@ function initGraphHelpers(selector, sampleNumber, heightDomain) {
|
|||
y(function(d) { return helpers.heightScale(d[1]); });
|
||||
|
||||
return helpers;
|
||||
}
|
||||
}
|
||||
|
||||
function drawGraph(graphHelpers, data, sampleNumber) {
|
||||
function drawGraph(graphHelpers, data, sampleNumber) {
|
||||
svg = d3.select(graphHelpers.selector);
|
||||
|
||||
if (graphHelpers.dynamicHeightDomain) {
|
||||
|
|
@ -108,13 +112,92 @@ function drawGraph(graphHelpers, data, sampleNumber) {
|
|||
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() {
|
||||
ga_tracker.sendAppView('Sensor Page');
|
||||
GUI.active_tab = 'sensors';
|
||||
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() {
|
||||
$('.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
|
||||
initSensorData();
|
||||
|
||||
|
|
@ -165,7 +248,7 @@ function tab_initialize_sensors() {
|
|||
|
||||
// set refresh speeds according to configuration saved in storage
|
||||
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_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);
|
||||
|
||||
// start polling data by triggering refresh rate change event
|
||||
$('.tab-sensors .scale select:first').change();
|
||||
$('.tab-sensors .rate select:first').change();
|
||||
} else {
|
||||
// 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
|
||||
// and timers are re-initialized with the new settings
|
||||
|
||||
var rates = {
|
||||
'gyro': parseInt($('.tab-sensors select[name="gyro_refresh_rate"]').val(), 10),
|
||||
'accel': parseInt($('.tab-sensors select[name="accel_refresh_rate"]').val(), 10),
|
||||
|
|
@ -213,47 +295,64 @@ function tab_initialize_sensors() {
|
|||
// store current/latest refresh rates in the storage
|
||||
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
|
||||
GUI.interval_kill_all();
|
||||
GUI.interval_kill_all(['status_pull']);
|
||||
|
||||
// data pulling timers
|
||||
|
||||
// status data pulled via separate timer with static speed
|
||||
GUI.interval_add('status_pull', function() {
|
||||
send_message(MSP_codes.MSP_STATUS);
|
||||
}, 250, true);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
if (checkboxes[3]) {
|
||||
GUI.interval_add('altitude_pull', function altitude_data_pull() {
|
||||
send_message(MSP_codes.MSP_ALTITUDE, false, false, update_altitude_graph);
|
||||
}, rates.baro, true);
|
||||
}
|
||||
|
||||
if (checkboxes[4]) {
|
||||
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() {
|
||||
if (checkboxes[0]) {
|
||||
samples_gyro_i = addSampleToData(gyro_data, samples_gyro_i, SENSOR_DATA.gyroscope);
|
||||
drawGraph(gyroHelpers, gyro_data, samples_gyro_i);
|
||||
raw_data_text_ements.x[0].text(SENSOR_DATA.gyroscope[0].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));
|
||||
}
|
||||
|
||||
if (checkboxes[1]) {
|
||||
samples_accel_i = addSampleToData(accel_data, samples_accel_i, SENSOR_DATA.accelerometer);
|
||||
drawGraph(accelHelpers, accel_data, samples_accel_i);
|
||||
raw_data_text_ements.x[1].text(SENSOR_DATA.accelerometer[0].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));
|
||||
}
|
||||
|
||||
if (checkboxes[2]) {
|
||||
samples_mag_i = addSampleToData(mag_data, samples_mag_i, SENSOR_DATA.magnetometer);
|
||||
drawGraph(magHelpers, mag_data, samples_mag_i);
|
||||
raw_data_text_ements.x[2].text(SENSOR_DATA.magnetometer[0].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() {
|
||||
samples_baro_i = addSampleToData(baro_data, samples_baro_i, [SENSOR_DATA.altitude]);
|
||||
|
|
@ -271,16 +370,9 @@ function tab_initialize_sensors() {
|
|||
}
|
||||
});
|
||||
|
||||
$('.tab-sensors .scale select').change(function() {
|
||||
var gyro_s = parseFloat($('select[name="gyro_scale"]').val());
|
||||
var acc_s = parseFloat($('select[name="accel_scale"]').val());
|
||||
var mag_s = parseFloat($('select[name="mag_scale"]').val());
|
||||
|
||||
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();
|
||||
});
|
||||
// status data pulled via separate timer with static speed
|
||||
GUI.interval_add('status_pull', function() {
|
||||
send_message(MSP_codes.MSP_STATUS);
|
||||
}, 250, true);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue