initial rework pass for new d3 graphs
cTn
parent
2e1f5c3b4f
commit
311366fe9d
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<div class="tab-sensors">
|
||||
<select title="Gyroscope refresh rate" name="gyro_refresh_rate">
|
||||
<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>
|
||||
|
|
@ -10,30 +15,34 @@
|
|||
<option value="500">500 ms</option>
|
||||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<div class="clear-both"></div>
|
||||
</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">
|
||||
<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>
|
||||
|
|
@ -44,30 +53,33 @@
|
|||
<option value="500">500 ms</option>
|
||||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<div class="clear-both"></div>
|
||||
</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">
|
||||
<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>
|
||||
|
|
@ -78,30 +90,33 @@
|
|||
<option value="500">500 ms</option>
|
||||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<div class="clear-both"></div>
|
||||
</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">
|
||||
<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>
|
||||
|
|
@ -112,22 +127,24 @@
|
|||
<option value="500">500 ms</option>
|
||||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<div class="clear-both"></div>
|
||||
</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">
|
||||
<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>
|
||||
|
|
@ -138,61 +155,57 @@
|
|||
<option value="500">500 ms</option>
|
||||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
<div class="clear-both"></div>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue