Merge pull request #653 from mmcgann/add_acc_motors_tab

Add acc motors tab
10.3.x-maintenance
Michael Keller 2017-09-05 08:20:39 +12:00 committed by GitHub
commit 70dee138f1
4 changed files with 321 additions and 200 deletions

View File

@ -1428,12 +1428,6 @@
"servosEepromSave": {
"message": "EEPROM <span style=\"color: #ffbb00\">saved</span>"
},
"motorsGyroscope": {
"message": "Gyroscope - "
},
"motorsGyroscopeReset": {
"message": "[Reset]"
},
"gpsHead": {
"message": "GPS"
},

View File

@ -1,4 +1,4 @@
.tab-motors .modelAndGyro {
.tab-motors .modelAndGraph {
float: left;
width: 100%;
margin-bottom: 0px;
@ -9,7 +9,7 @@
margin: 10px;
}
.tab-motors #gyro {
.tab-motors #graph {
float: left;
width: calc(100% - 292px);
}
@ -25,107 +25,90 @@
margin-left: 10px;
}
/*Plot Control*/
.tab-motors .plot_control {
float: right;
width: 160px;
/* border: 1px solid silver; */
height: 100%;
height: 180px;
margin: 0px;
background-color: #ECECEC;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.tab-motors .plot_control .title {
line-height: 20px;
font-weight: bold;
padding-left: 10px;
padding-top: 10px;
text-align: left;
.tab-motors .plot_control .table {
display:table;
width: 100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:5px;
box-sizing: border-box;
}
.tab-motors .plot_control dl {
padding: 10px 10px 0 10px;
line-height: 22px;
float: left;
.tab-motors .plot-control .sensor {
}
.tab-motors .plot_control dt {
float: left;
width: 60px;
height: 22px;
font-weight: bold;
.tab-motors .plot_control .row-container {
display: table-row-group;
}
.tab-motors .plot_control dd {
/* margin-left: 20px; */
height: 25px;
float: right;
width: 73px;
.tab-motors .plot_control .motor-button a {
background-color: #ffbb00;
border-radius: 3px;
border: 1px solid #e8b423;
color: #000;
font-family: 'open_sansbold', Arial;
font-size: 10px;
line-height: 17px;
text-shadow: 0px 1px rgba(255, 255, 255, 0.25);
text-transform: uppercase;
letter-spacing: 0.03em;
display: block;
text-align: center;
}
.tab-motors .plot_control .row {
display: table-row;
}
.tab-motors .plot_control .left-cell {
display: table-cell;
vertical-align: middle;
}
.tab-motors .plot_control .right-cell {
display: table-cell;
vertical-align: middle;
text-align: right;
width: 95px;
font-size: smaller;
}
.tab-motors .plot_control select {
float: right;
width: 80px;
border: 1px solid silver;
width: 100%;
border: 1px solid silver;
}
.tab-motors .plot_control .value {
padding: 3px;
color: #fff;
border-radius: 3px;
}
.tab-motors .plot_control .x {
background-color: #00A8F0;
padding: 3px;
color: #fff;
height: 12px;
float: right;
border-radius: 3px;
line-height: 12px;
margin-bottom: 2px;
text-align: right;
}
.tab-motors .plot_control .y {
background-color: #C0D800;
padding: 3px;
color: #fff;
height: 12px;
float: right;
border-radius: 3px;
line-height: 12px;
margin-bottom: 2px;
text-align: right;
}
.tab-motors .plot_control .z {
background-color: #CB4B4B;
padding: 3px;
color: #fff;
height: 12px;
float: right;
border-radius: 3px;
line-height: 12px;
margin-bottom: 2px;
text-align: right;
}
.tab-motors .plot_control .rms {
background-color: #00D800;
padding: 3px;
color: #fff;
height: 12px;
float: right;
border-radius: 3px;
line-height: 12px;
margin-bottom: 2px;
text-align: right;
}
.tab-motors .plot_control .x, .tab-sensors .plot_control .y, .tab-sensors .plot_control .z {
text-align: right;
}
.tab-motors .plot_control .title a:hover {
text-decoration: underline;
}
/*Motors*/
.tab-motors svg {
float: left;

View File

@ -5,61 +5,101 @@
<a id="button-documentation" href="https://github.com/betaflight/betaflight/releases" target="_blank"></a>
</div>
<div class="gui_box grey" style="margin-bottom: 15px;">
<div class="wrapper modelAndGyro">
<div class="wrapper modelAndGraph">
<div class="mixerPreview">
<img src="./resources/motor_order/custom.svg" />
</div>
<svg id="gyro">
<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>
<svg id="graph">
<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="plot_control">
<div class="title">
<span class="title" i18n="motorsGyroscope"/>
<a class="reset_gyro_max" href="#" title="Reset overtime maximum" i18n="motorsGyroscopeReset"/>
<div class="table">
<div class="sensor row">
<div class="left-cell motor-button">
<a class="reset_max" href="#" title="Reset overtime maximum">Reset</a>
</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="gyro_refresh_rate">
<option value="10">10 ms</option>
<option value="20" selected="selected">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">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt i18n="sensorsScale"></dt>
<dd class="scale">
<select name="gyro_scale">
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000" selected="selected">2000</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>
<dt>RMS:</dt>
<dd class="rms">0</dd>
</dl>
<div class="right-cell">
<select name="sensor_choice">
<option value="gyro" selected="selected">Gyro</option>
<option value="accel">Accel</option>
</select>
</div>
</div>
<div class="row-container">
<div class="row">
<div class="left-cell">
<div i18n="sensorsRefresh"></div>
</div>
<div class="rate right-cell">
<select name="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">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</div>
</div>
<div class="row">
<div class="left-cell">
<div i18n="sensorsScale"></div>
</div>
<div class="scale right-cell">
<select name="scale">
</select>
</div>
</div>
<div class="row">
<div class="left-cell">
X:
</div>
<div class="x value right-cell">
0
</div>
</div>
<div class="row">
<div class="left-cell">
Y:
</div>
<div class="y value right-cell">
0
</div>
</div>
<div class="row">
<div class="left-cell">
Z:
</div>
<div class="z value right-cell">
0
</div>
</div>
<div class="row">
<div class="left-cell">
RMS:
</div>
<div class="rms value right-cell">
0
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gui_box motorblock">
<div class="spacer">

View File

@ -4,8 +4,18 @@ TABS.motors = {
allowTestMode: false,
feature3DEnabled: false,
feature3DSupported: false,
escProtocolIsDshot: false
escProtocolIsDshot: false,
sensor: "gyro",
sensorGyroRate: 20,
sensorGyroScale: 2000,
sensorAccelRate: 20,
sensorAccelScale: 2,
sensorSelectValues: {
"gyroScale": {"50":50,"100":100,"200":200,"300":300,"400":400,"500":500,"1000":1000,"2000":2000},
"accelScale": {"0.05":0.05,"0.1":0.1,"0.2":0.2,"0.3":0.3,"0.4":0.4,"0.5":0.5,"1":1,"2":2}
}
};
TABS.motors.initialize = function (callback) {
var self = this;
@ -57,6 +67,7 @@ TABS.motors.initialize = function (callback) {
function initSensorData() {
for (var i = 0; i < 3; i++) {
SENSOR_DATA.accelerometer[i] = 0;
SENSOR_DATA.gyroscope[i] = 0;
}
}
@ -150,6 +161,7 @@ TABS.motors.initialize = function (callback) {
}
function drawGraph(graphHelpers, data, sampleNumber) {
var svg = d3.select(graphHelpers.selector);
if (graphHelpers.dynamicHeightDomain) {
@ -212,9 +224,17 @@ TABS.motors.initialize = function (callback) {
// Setup variables
var samples_gyro_i = 0,
gyro_data = initDataArray(3),
gyroHelpers = initGraphHelpers('#gyro', samples_gyro_i, [-2, 2]),
gyro_max_read = [0, 0, 0];
gyro_data = initDataArray(3),
gyro_helpers = initGraphHelpers('#graph', samples_gyro_i, [-2, 2]),
gyro_max_read = [0, 0, 0];
var samples_accel_i = 0,
accel_data = initDataArray(3),
accel_helpers = initGraphHelpers('#graph', samples_accel_i, [-2, 2]),
accel_max_read = [0, 0, 0],
accel_offset = [0, 0, 0],
accel_offset_established = false;
var raw_data_text_ements = {
x: [],
@ -237,69 +257,153 @@ TABS.motors.initialize = function (callback) {
});
// set refresh speeds according to configuration saved in storage
chrome.storage.local.get('motors_tab_gyro_settings', function (result) {
if (result.motors_tab_gyro_settings) {
$('.tab-motors select[name="gyro_refresh_rate"]').val(result.motors_tab_gyro_settings.rate);
$('.tab-motors select[name="gyro_scale"]').val(result.motors_tab_gyro_settings.scale);
// start polling data by triggering refresh rate change event
$('.tab-motors .rate select:first').change();
} else {
// start polling immediatly (as there is no configuration saved in the storage)
$('.tab-motors .rate select:first').change();
chrome.storage.local.get(['motors_tab_sensor_settings', 'motors_tab_gyro_settings', 'motors_tab_accel_settings'], function (result) {
if (result.motors_tab_sensor_settings) {
var sensor = result.motors_tab_sensor_settings.sensor;
$('.tab-motors select[name="sensor_choice"]').val(result.motors_tab_sensor_settings.sensor);
}
if (result.motors_tab_gyro_settings) {
TABS.motors.sensorGyroRate = result.motors_tab_gyro_settings.rate;
TABS.motors.sensorGyroScale = result.motors_tab_gyro_settings.scale;
}
if (result.motors_tab_accel_settings) {
TABS.motors.sensorAccelRate = result.motors_tab_accel_settings.rate;
TABS.motors.sensorAccelScale = result.motors_tab_accel_settings.scale;
}
$('.tab-motors .sensor select:first').change();
});
function loadScaleSelector(selectorValues, selectedValue) {
$('.tab-motors select[name="scale"]').find('option').remove();
$.each(selectorValues, function(key, val) {
$('.tab-motors select[name="scale"]').append(new Option(key, val));
});
$('.tab-motors select[name="scale"]').val(selectedValue);
}
function selectRefresh(refreshValue){
$('.tab-motors select[name="rate"]').val(refreshValue);
}
$('.tab-motors .sensor select').change(function(){
TABS.motors.sensor = $('.tab-motors select[name="sensor_choice"]').val()
chrome.storage.local.set({'motors_tab_sensor_settings': {'sensor': TABS.motors.sensor}});
switch(TABS.motors.sensor){
case "gyro":
loadScaleSelector(TABS.motors.sensorSelectValues.gyroScale,
TABS.motors.sensorGyroScale);
selectRefresh(TABS.motors.sensorGyroRate);
break;
case "accel":
loadScaleSelector(TABS.motors.sensorSelectValues.accelScale,
TABS.motors.sensorAccelScale);
selectRefresh(TABS.motors.sensorAccelRate);
break;
}
$('.tab-motors .rate select:first').change();
});
$('.tab-motors .rate select, .tab-motors .scale select').change(function () {
var rate = parseInt($('.tab-motors select[name="gyro_refresh_rate"]').val(), 10);
var scale = parseFloat($('.tab-motors select[name="gyro_scale"]').val());
var rate = parseInt($('.tab-motors select[name="rate"]').val(), 10);
var scale = parseFloat($('.tab-motors select[name="scale"]').val());
// store current/latest refresh rates in the storage
chrome.storage.local.set({'motors_tab_gyro_settings': {'rate': rate, 'scale': scale}});
GUI.interval_kill_all(['motor_and_status_pull']);
gyroHelpers = initGraphHelpers('#gyro', samples_gyro_i, [-scale, scale]);
switch(TABS.motors.sensor) {
case "gyro":
chrome.storage.local.set({'motors_tab_gyro_settings': {'rate': rate, 'scale': scale}});
TABS.motors.sensorGyroRate = rate;
TABS.motors.sensorGyroScale = scale;
// timer initialization
GUI.interval_kill_all(['motor_and_status_pull']);
gyro_helpers = initGraphHelpers('#graph', samples_gyro_i, [-scale, scale]);
GUI.interval_add('IMU_pull', function imu_data_pull() {
MSP.send_message(MSPCodes.MSP_RAW_IMU, false, false, update_gyro_graph);
}, rate, true);
GUI.interval_add('IMU_pull', function imu_data_pull() {
MSP.send_message(MSPCodes.MSP_RAW_IMU, false, false, update_gyro_graph);
}, rate, true);
break;
case "accel":
chrome.storage.local.set({'motors_tab_accel_settings': {'rate': rate, 'scale': scale}});
TABS.motors.sensorAccelRate = rate;
TABS.motors.sensorAccelScale = scale;
accel_helpers = initGraphHelpers('#graph', samples_accel_i, [-scale, scale]);
function update_gyro_graph() {
var gyro = [
SENSOR_DATA.gyroscope[0],
SENSOR_DATA.gyroscope[1],
SENSOR_DATA.gyroscope[2]
];
GUI.interval_add('IMU_pull', function imu_data_pull() {
MSP.send_message(MSPCodes.MSP_RAW_IMU, false, false, update_accel_graph);
}, rate, true);
break;
}
updateGraphHelperSize(gyroHelpers);
samples_gyro_i = addSampleToData(gyro_data, samples_gyro_i, gyro);
drawGraph(gyroHelpers, gyro_data, samples_gyro_i);
function update_accel_graph() {
if (!accel_offset_established) {
for (var i = 0; i < 3; i++) {
accel_offset[i] = SENSOR_DATA.accelerometer[i] * -1;
}
// Compute RMS of gyroscope readings in displayed period of time
// This is particularly useful for motor balancing as it
// eliminates the need for external tools
var sum = 0.0;
for (var j = 0; j < gyro_data.length; j++)
for (var k = 0; k < gyro_data[j].length; k++)
sum += gyro_data[j][k][1]*gyro_data[j][k][1];
var rms = Math.sqrt(sum/(gyro_data[0].length+gyro_data[1].length+gyro_data[2].length));
accel_offset_established = true;
}
raw_data_text_ements.x[0].text(gyro[0].toFixed(2) + ' (' + gyro_max_read[0].toFixed(2) + ')');
raw_data_text_ements.y[0].text(gyro[1].toFixed(2) + ' (' + gyro_max_read[1].toFixed(2) + ')');
raw_data_text_ements.z[0].text(gyro[2].toFixed(2) + ' (' + gyro_max_read[2].toFixed(2) + ')');
raw_data_text_ements.rms[0].text(rms.toFixed(4));
var accel_with_offset = [
accel_offset[0] + SENSOR_DATA.accelerometer[0],
accel_offset[1] + SENSOR_DATA.accelerometer[1],
accel_offset[2] + SENSOR_DATA.accelerometer[2]
];
for (var i = 0; i < 3; i++) {
if (Math.abs(gyro[i]) > Math.abs(gyro_max_read[i])) gyro_max_read[i] = gyro[i];
}
updateGraphHelperSize(accel_helpers);
samples_accel_i = addSampleToData(accel_data, samples_accel_i, accel_with_offset);
drawGraph(accel_helpers, accel_data, samples_accel_i);
for (var i = 0; i < 3; i++) {
if (Math.abs(accel_with_offset[i]) > Math.abs(accel_max_read[i])) accel_max_read[i] = accel_with_offset[i];
}
computeAndUpdate(accel_with_offset, accel_data, accel_max_read);
}
function update_gyro_graph() {
var gyro = [
SENSOR_DATA.gyroscope[0],
SENSOR_DATA.gyroscope[1],
SENSOR_DATA.gyroscope[2]
];
updateGraphHelperSize(gyro_helpers);
samples_gyro_i = addSampleToData(gyro_data, samples_gyro_i, gyro);
drawGraph(gyro_helpers, gyro_data, samples_gyro_i);
for (var i = 0; i < 3; i++) {
if (Math.abs(gyro[i]) > Math.abs(gyro_max_read[i])) gyro_max_read[i] = gyro[i];
}
computeAndUpdate(gyro, gyro_data, gyro_max_read);
}
function computeAndUpdate(sensor_data, data, max_read) {
var sum = 0.0;
for (var j = 0, jlength = data.length; j < jlength; j++) {
for (var k = 0, klength = data[j].length; k < klength; k++){
sum += data[j][k][1]*data[j][k][1];
}
}
var rms = Math.sqrt(sum/(data[0].length+data[1].length+data[2].length));
raw_data_text_ements.x[0].text(sensor_data[0].toFixed(2) + ' (' + max_read[0].toFixed(2) + ')');
raw_data_text_ements.y[0].text(sensor_data[1].toFixed(2) + ' (' + max_read[1].toFixed(2) + ')');
raw_data_text_ements.z[0].text(sensor_data[2].toFixed(2) + ' (' + max_read[2].toFixed(2) + ')');
raw_data_text_ements.rms[0].text(rms.toFixed(4));
}
});
$('a.reset_gyro_max').click(function () {
gyro_max_read = [0, 0, 0];
});
$('a.reset_max').click(function () {
gyro_max_read = [0, 0, 0];
accel_max_read = [0, 0, 0];
accel_offset_established = false;
});
var number_of_valid_outputs = (MOTOR_DATA.indexOf(0) > -1) ? MOTOR_DATA.indexOf(0) : 8;