hook raw values text representations to data
cTn
parent
a0a2ff47a8
commit
b577479678
|
|
@ -3,7 +3,7 @@
|
|||
.tab-sensors .plot_control {
|
||||
float: right;
|
||||
|
||||
width: 168px;
|
||||
width: 158px;
|
||||
|
||||
border: 1px solid silver;
|
||||
}
|
||||
|
|
@ -31,6 +31,15 @@
|
|||
margin-left: 20px;
|
||||
height: 22px;
|
||||
}
|
||||
.tab-sensors .plot_control .x {
|
||||
color: #00A8F0;
|
||||
}
|
||||
.tab-sensors .plot_control .y {
|
||||
color: #C0D800;
|
||||
}
|
||||
.tab-sensors .plot_control .z {
|
||||
color: #CB4B4B;
|
||||
}
|
||||
.tab-sensors select {
|
||||
width: 70px;
|
||||
border: 1px solid silver;
|
||||
|
|
@ -39,7 +48,7 @@
|
|||
.tab-sensors svg {
|
||||
float: right;
|
||||
|
||||
width: 730px;
|
||||
width: 740px;
|
||||
height: 140px;
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="tab-sensors">
|
||||
<div class="plot_control">
|
||||
<div class="title">Gyroscope</div>
|
||||
<div class="title">Gyroscope - deg/s</div>
|
||||
<dl>
|
||||
<dt>Refresh:</dt>
|
||||
<dd>
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
<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>
|
||||
<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="gyro">
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</svg>
|
||||
<div class="clear-both"></div>
|
||||
<div class="plot_control">
|
||||
<div class="title">Accelerometer</div>
|
||||
<div class="title">Accelerometer - g</div>
|
||||
<dl>
|
||||
<dt>Refresh:</dt>
|
||||
<dd>
|
||||
|
|
@ -61,9 +61,9 @@
|
|||
<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>
|
||||
<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">
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
</svg>
|
||||
<div class="clear-both"></div>
|
||||
<div class="plot_control">
|
||||
<div class="title">Magnetometer</div>
|
||||
<div class="title">Magnetometer - Ga</div>
|
||||
<dl>
|
||||
<dt>Refresh:</dt>
|
||||
<dd>
|
||||
|
|
@ -98,9 +98,9 @@
|
|||
<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>
|
||||
<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">
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
</svg>
|
||||
<div class="clear-both"></div>
|
||||
<div class="plot_control">
|
||||
<div class="title">Barometer</div>
|
||||
<div class="title">Barometer - meters</div>
|
||||
<dl>
|
||||
<dt>Refresh:</dt>
|
||||
<dd>
|
||||
|
|
@ -121,14 +121,14 @@
|
|||
<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="50">50 ms</option>
|
||||
<option value="100" selected="selected">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>
|
||||
<dt>X:</dt><dd class="x">0</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<svg id="baro">
|
||||
|
|
@ -149,14 +149,14 @@
|
|||
<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="50">50 ms</option>
|
||||
<option value="100">100 ms</option>
|
||||
<option value="250">250 ms</option>
|
||||
<option value="500">500 ms</option>
|
||||
<option value="500" selected="selected">500 ms</option>
|
||||
<option value="1000">1000 ms</option>
|
||||
</select>
|
||||
</dd>
|
||||
<dt>X:</dt><dd>blue</dd>
|
||||
<dt>X:</dt><dd class="x">0</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<svg id="debug1">
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
<div class="plot_control">
|
||||
<div class="title">Debug 2</div>
|
||||
<dl>
|
||||
<dt>X:</dt><dd>blue</dd>
|
||||
<dt>X:</dt><dd class="x">blue</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<svg id="debug2">
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
<div class="plot_control">
|
||||
<div class="title">Debug 3</div>
|
||||
<dl>
|
||||
<dt>X:</dt><dd>blue</dd>
|
||||
<dt>X:</dt><dd class="x">0</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<svg id="debug3">
|
||||
|
|
@ -198,7 +198,7 @@
|
|||
<div class="plot_control">
|
||||
<div class="title">Debug 4</div>
|
||||
<dl>
|
||||
<dt>X:</dt><dd>blue</dd>
|
||||
<dt>X:</dt><dd class="x">0</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<svg id="debug4">
|
||||
|
|
|
|||
|
|
@ -150,6 +150,22 @@ function tab_initialize_sensors() {
|
|||
initGraphHelpers('#debug4', samples_debug_i)
|
||||
];
|
||||
|
||||
var raw_data_text_ements = {
|
||||
x: [],
|
||||
y: [],
|
||||
z: [],
|
||||
};
|
||||
$('.plot_control .x, .plot_control .y, .plot_control .z').each(function() {
|
||||
var e = $(this);
|
||||
if (e.hasClass('x')) {
|
||||
raw_data_text_ements.x.push(e);
|
||||
} else if (e.hasClass('y')) {
|
||||
raw_data_text_ements.y.push(e);
|
||||
} else {
|
||||
raw_data_text_ements.z.push(e);
|
||||
}
|
||||
});
|
||||
|
||||
// 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') {
|
||||
|
|
@ -212,23 +228,34 @@ function tab_initialize_sensors() {
|
|||
function update_imu_graphs() {
|
||||
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));
|
||||
|
||||
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));
|
||||
|
||||
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]);
|
||||
drawGraph(baroHelpers, baro_data, samples_baro_i);
|
||||
raw_data_text_ements.x[3].text(SENSOR_DATA.altitude.toFixed(2));
|
||||
}
|
||||
|
||||
function update_debug_graphs() {
|
||||
for (var i = 0; i < 4; i++) {
|
||||
addSampleToData(debug_data[i], samples_debug_i, [SENSOR_DATA.debug[i]]);
|
||||
drawGraph(debugHelpers[i], debug_data[i], samples_debug_i);
|
||||
raw_data_text_ements.x[4 + i].text(SENSOR_DATA.debug[i]);
|
||||
}
|
||||
samples_debug_i++;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue