speedybac
/
inav-configurator
mirror of https://github.com/iNavFlight/inav-configurator
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

initial rework pass for new d3 graphs

Browse Source
pull/3/head
cTn 11 years ago
parent 2e1f5c3b4f
commit 311366fe9d
4 changed files with 230 additions and 208 deletions
Show Stats Download Patch File Download Diff File

2
tabs/receiver.html
Unescape Escape View File

@ -91,6 +91,6 @@
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 180)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(40, 1)"></g>
<g class="data" transform="translate(41, 1)"></g>
</svg>
</div>

67
tabs/sensors.css
Unescape Escape View File

@ -1,37 +1,49 @@
.tab-sensors {
}
.tab-sensors #gyro {
height: 120px;
}
.tab-sensors #accel {
height: 120px;
}
.tab-sensors #mag {
height: 120px;
}
.tab-sensors #baro {
height: 120px;
}
.tab-sensors #debug1 {
height: 120px;
}
.tab-sensors #debug2 {
height: 120px;
}
.tab-sensors #debug3 {
height: 120px;
}
.tab-sensors #debug4 {
height: 120px;
}
.tab-sensors select {
.tab-sensors .plot_control {
float: right;
width: 178px;
border: 1px solid silver;
}
.tab-sensors .plot_control .title {
line-height: 20px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid silver;
background-color: #ececec;
}
.tab-sensors .plot_control dl {
padding: 5px 0 0 5px;
line-height: 22px;
}
.tab-sensors .plot_control dt {
float: left;
width: 60px;
height: 22px;
font-weight: bold;
}
.tab-sensors .plot_control dd {
margin-left: 20px;
height: 22px;
}
.tab-sensors select {
width: 70px;
border: 1px solid silver;
}
/* SVG classes*/
.tab-sensors svg {
float: right;
width: 720px;
height: 130px;
margin-bottom: 20px;
}
.tab-sensors .grid .tick {
stroke: silver;
shape-rendering: crispEdges;
@ -48,9 +60,6 @@
stroke: #000;
shape-rendering: crispEdges;
}
.tab-sensors svg .title {
font-weight: bold;
}
.tab-sensors .line:nth-child(1) {
stroke: #00A8F0;
}

325
tabs/sensors.html
Unescape Escape View File

@ -1,198 +1,211 @@
<div class="tab-sensors">
<select title="Gyroscope refresh rate" name="gyro_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>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Gyroscope</div>
<dl>
<dt>Refresh:</dt>
<dd>
<select name="gyro_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>
<select name="gyro_scale">
<option value="100">100</option>
<option value="1000">1000</option>
<option value="2000" selected="selected">2000</option>
</select>
</dd>
<dt>X:</dt><dd>blue</dd>
<dt>Y:</dt><dd>green</dd>
<dt>Z:</dt><dd>red</dd>
</dl>
</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 x" transform="translate(40, 110)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis x" transform="translate(40, 110)"></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>
<g class="data" transform="translate(43, 10)"></g>
</svg>
<select title="Accelerometer refresh rate" 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>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Accelerometer</div>
<dl>
<dt>Refresh:</dt>
<dd>
<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>
<select name="accel_scale">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</dd>
<dt>X:</dt><dd>blue</dd>
<dt>Y:</dt><dd>green</dd>
<dt>Z:</dt><dd>red</dd>
</dl>
</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 x" transform="translate(40, 110)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis x" transform="translate(40, 110)"></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>
<g class="data" transform="translate(43, 10)"></g>
</svg>
<select title="Magnetometer refresh rate" 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>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Magnetometer</div>
<dl>
<dt>Refresh:</dt>
<dd>
<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>
<select name="mag_scale">
<option value="0.5">0.5</option>
<option value="1" selected="selected">1</option>
</select>
</dd>
<dt>X:</dt><dd>blue</dd>
<dt>Y:</dt><dd>green</dd>
<dt>Z:</dt><dd>red</dd>
</dl>
</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 x" transform="translate(40, 110)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis x" transform="translate(40, 110)"></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>
<g class="data" transform="translate(43, 10)"></g>
</svg>
<select title="Barometer refresh rate" name="baro_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>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Barometer</div>
<dl>
<dt>Refresh:</dt>
<dd>
<select name="baro_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>X:</dt><dd>blue</dd>
</dl>
</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 x" transform="translate(40, 110)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis x" transform="translate(40, 110)"></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>
<g class="data" transform="translate(43, 10)"></g>
</svg>
<select title="Debug refresh rate" 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" 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>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 1</div>
<dl>
<dt>Refresh:</dt>
<dd>
<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" 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>X:</dt><dd>blue</dd>
</dl>
</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 x" transform="translate(40, 110)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis x" transform="translate(40, 110)"></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>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 2</div>
<dl>
<dt>X:</dt><dd>blue</dd>
</dl>
</div>
<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 x" transform="translate(40, 110)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis x" transform="translate(40, 110)"></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>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 3</div>
<dl>
<dt>X:</dt><dd>blue</dd>
</dl>
</div>
<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 x" transform="translate(40, 110)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis x" transform="translate(40, 110)"></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>
<div class="clear-both"></div>
<div class="plot_control">
<div class="title">Debug 4</div>
<dl>
<dt>X:</dt><dd>blue</dd>
</dl>
</div>
<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 x" transform="translate(40, 110)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="axis x" transform="translate(40, 100)"></g>
<g class="axis x" transform="translate(40, 110)"></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>

44
tabs/sensors.js
Unescape Escape View File

@ -11,9 +11,6 @@ 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;
}
@ -41,8 +38,8 @@ function addSampleToData(data, sampleNumber, sensorData) {
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 width = 720 - margin.left - margin.right;
var height = 130 - margin.top - margin.bottom;
var helpers = {selector: selector, dynamicHeightDomain: !heightDomain};
@ -109,8 +106,11 @@ 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);
/*
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() {
@ -122,11 +122,11 @@ function tab_initialize_sensors() {
initSensorData();
// Setup variables
var samples_gyro_i = 300;
var samples_accel_i = 300;
var samples_mag_i = 300;
var samples_baro_i = 300;
var samples_debug_i = 300;
var samples_gyro_i = 0;
var samples_accel_i = 0;
var samples_mag_i = 0;
var samples_baro_i = 0;
var samples_debug_i = 0;
var gyro_data = initDataArray(3);
var accel_data = initDataArray(3);
@ -139,8 +139,8 @@ function tab_initialize_sensors() {
initDataArray(1)
];
var gyroHelpers = initGraphHelpers('#gyro', samples_gyro_i, [2000, -2000]);
var accelHelpers = initGraphHelpers('#accel', samples_accel_i, [2, -2]);
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 = [
@ -153,11 +153,11 @@ function tab_initialize_sensors() {
// set refresh speeds according to configuration saved in storage
chrome.storage.local.get('sensor_refresh_rates', function(result) {
if (typeof result.sensor_refresh_rates != 'undefined') {
$('.tab-sensors select').eq(0).val(result.sensor_refresh_rates.gyro); // gyro
$('.tab-sensors select').eq(1).val(result.sensor_refresh_rates.accel); // accel
$('.tab-sensors select').eq(2).val(result.sensor_refresh_rates.mag); // mag
$('.tab-sensors select').eq(3).val(result.sensor_refresh_rates.baro); // baro
$('.tab-sensors select').eq(4).val(result.sensor_refresh_rates.debug); // debug
$('.tab-sensors select[name="gyro_refresh_rate"]').val(result.sensor_refresh_rates.gyro); // gyro
$('.tab-sensors select[name="accel_refresh_rate"]').val(result.sensor_refresh_rates.accel); // accel
$('.tab-sensors select[name="mag_refresh_rate"]').val(result.sensor_refresh_rates.mag); // mag
$('.tab-sensors select[name="baro_refresh_rate"]').val(result.sensor_refresh_rates.baro); // baro
$('.tab-sensors select[name="debug_refresh_rate"]').val(result.sensor_refresh_rates.debug); // debug
$('.tab-sensors select').change(); // start polling data by triggering refresh rate change event
} else {
@ -171,11 +171,11 @@ function tab_initialize_sensors() {
// and timers are re-initialized with the new settings
var rates = {
'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)
'gyro': parseInt($('.tab-sensors select[name="gyro_refresh_rate"]').val(), 10),
'accel': parseInt($('.tab-sensors select[name="accel_refresh_rate"]').val(), 10),
'mag': parseInt($('.tab-sensors select[name="mag_refresh_rate"]').val(), 10),
'baro': parseInt($('.tab-sensors select[name="baro_refresh_rate"]').val(), 10),
'debug': parseInt($('.tab-sensors select[name="debug_refresh_rate"]').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

Write Preview
Loading…
Cancel
Save