mirror of
https://github.com/iNavFlight/inav-configurator.git
synced 2025-07-17 13:25:22 +03:00
Basic PID gui
This commit is contained in:
Pawel Spychalski (DzikuVx)
parent
6c8322acd1
commit
0101ee329d
6 changed files with 232 additions and 21 deletions
|
|
@ -3642,5 +3642,32 @@
|
|||
},
|
||||
"rollPitchAdjustmentsMoved": {
|
||||
"message": "Roll & Pitch board orientation is available only in the CLI. Do not use it to trim the airplane for the level flight! Use <strong>fw_level_pitch_trim</strong> instead"
|
||||
},
|
||||
"pidId": {
|
||||
"message": "#"
|
||||
},
|
||||
"pidEnabled": {
|
||||
"message": "Enabled"
|
||||
},
|
||||
"pidSetpoint": {
|
||||
"message": "Setpoint"
|
||||
},
|
||||
"pidMeasurement": {
|
||||
"message": "Measurement"
|
||||
},
|
||||
"pidP": {
|
||||
"message": "P-gain"
|
||||
},
|
||||
"pidI": {
|
||||
"message": "I-gain"
|
||||
},
|
||||
"pidD": {
|
||||
"message": "D-gain"
|
||||
},
|
||||
"pidFF": {
|
||||
"message": "FF-gain"
|
||||
},
|
||||
"pidOutput": {
|
||||
"message": "Output"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,5 +76,140 @@ let ProgrammingPid = function (enabled, setpointType, setpointValue, measurement
|
|||
gainFF = data;
|
||||
};
|
||||
|
||||
self.onEnabledChange = function (event) {
|
||||
let $cT = $(event.currentTarget);
|
||||
self.setEnabled(!!$cT.prop('checked'));
|
||||
};
|
||||
|
||||
self.onGainPChange = function (event) {
|
||||
let $cT = $(event.currentTarget);
|
||||
self.setGainP($cT.val());
|
||||
};
|
||||
|
||||
self.onGainIChange = function (event) {
|
||||
let $cT = $(event.currentTarget);
|
||||
self.setGainI($cT.val());
|
||||
};
|
||||
|
||||
self.onGainDChange = function (event) {
|
||||
let $cT = $(event.currentTarget);
|
||||
self.setGainD($cT.val());
|
||||
};
|
||||
|
||||
self.onGainFFChange = function (event) {
|
||||
let $cT = $(event.currentTarget);
|
||||
self.setGainFF($cT.val());
|
||||
};
|
||||
|
||||
self.onOperatorValueChange = function (event) {
|
||||
let $cT = $(event.currentTarget),
|
||||
operand = $cT.data("operand");
|
||||
|
||||
if (operand == 0) {
|
||||
self.setSetpointValue($cT.val());
|
||||
} else {
|
||||
self.setMeasurementValue($cT.val());
|
||||
}
|
||||
};
|
||||
|
||||
self.render = function (index, $container) {
|
||||
|
||||
$container.find('tbody').append('<tr>\
|
||||
<td class="pid_cell__index"></td>\
|
||||
<td class="pid_cell__enabled"></td>\
|
||||
<td class="pid_cell__setpoint"></td>\
|
||||
<td class="pid_cell__measurement"></td>\
|
||||
<td class="pid_cell__p"></td>\
|
||||
<td class="pid_cell__i"></td>\
|
||||
<td class="pid_cell__d"></td>\
|
||||
<td class="pid_cell__ff"></td>\
|
||||
<td class="pid_cell__output"></td>\
|
||||
</tr>\
|
||||
');
|
||||
|
||||
$row = $container.find('tr:last');
|
||||
|
||||
$row.find('.pid_cell__index').html(index);
|
||||
$row.find('.pid_cell__enabled').html("<input type='checkbox' class='toggle logic_element__enabled' />");
|
||||
$row.find('.logic_element__enabled').
|
||||
prop('checked', self.getEnabled()).
|
||||
change(self.onEnabledChange);
|
||||
|
||||
self.renderOperand(0);
|
||||
self.renderOperand(1);
|
||||
|
||||
$row.find(".pid_cell__p").html('<input type="number" class="pid_cell__p-gain" step="1" min="0" max="32767" value="0">');
|
||||
$row.find(".pid_cell__p-gain").val(self.getGainP()).change(self.onGainPChange);
|
||||
|
||||
$row.find(".pid_cell__i").html('<input type="number" class="pid_cell__i-gain" step="1" min="0" max="32767" value="0">');
|
||||
$row.find(".pid_cell__i-gain").val(self.getGainI()).change(self.onGainIChange);
|
||||
|
||||
$row.find(".pid_cell__d").html('<input type="number" class="pid_cell__d-gain" step="1" min="0" max="32767" value="0">');
|
||||
$row.find(".pid_cell__d-gain").val(self.getGainD()).change(self.onGainDChange);
|
||||
|
||||
$row.find(".pid_cell__ff").html('<input type="number" class="pid_cell__ff-gain" step="1" min="0" max="32767" value="0">');
|
||||
$row.find(".pid_cell__ff-gain").val(self.getGainFF()).change(self.onGainFFChange);
|
||||
|
||||
}
|
||||
|
||||
self.onOperatorTypeChange = function (event) {
|
||||
let $cT = $(event.currentTarget),
|
||||
operand = $cT.data("operand"),
|
||||
$container = $cT.parent(),
|
||||
operandMetadata = FC.getOperandTypes()[$cT.val()];
|
||||
|
||||
if (operand == 0) {
|
||||
self.setSetpointType($cT.val());
|
||||
self.setSetpointValue(operandMetadata.default);
|
||||
} else {
|
||||
self.setMeasurementType($cT.val());
|
||||
self.setMeasurementValue(operandMetadata.default);
|
||||
}
|
||||
|
||||
GUI.renderOperandValue($container, operandMetadata, operand, operandMetadata.default, self.onOperatorValueChange);
|
||||
};
|
||||
|
||||
self.renderOperand = function (operand) {
|
||||
let type, value, $container;
|
||||
if (operand == 0) {
|
||||
type = setpointType;
|
||||
value = setpointValue;
|
||||
$container = $row.find('.pid_cell__setpoint');
|
||||
} else {
|
||||
type = measurementType;
|
||||
value = measurementValue;
|
||||
$container = $row.find('.pid_cell__measurement');
|
||||
}
|
||||
|
||||
$container.html('');
|
||||
|
||||
$container.append('<select class="logic_element__operand--type" data-operand="' + operand + '"></select>');
|
||||
let $t = $container.find('.logic_element__operand--type');
|
||||
|
||||
for (let k in FC.getOperandTypes()) {
|
||||
if (FC.getOperandTypes().hasOwnProperty(k)) {
|
||||
let op = FC.getOperandTypes()[k];
|
||||
|
||||
if (type == k) {
|
||||
$t.append('<option value="' + k + '" selected>' + op.name + '</option>');
|
||||
|
||||
/*
|
||||
* Render value element depending on type
|
||||
*/
|
||||
GUI.renderOperandValue($container, op, operand, value, self.onOperatorValueChange);
|
||||
|
||||
} else {
|
||||
$t.append('<option value="' + k + '">' + op.name + '</option>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Bind events
|
||||
*/
|
||||
$t.change(self.onOperatorTypeChange);
|
||||
|
||||
}
|
||||
|
||||
return self;
|
||||
};
|
||||
|
|
@ -27,7 +27,22 @@ let ProgrammingPidCollection = function () {
|
|||
$container.show();
|
||||
};
|
||||
|
||||
self.init = function ($element) {
|
||||
$container = $element;
|
||||
};
|
||||
|
||||
self.render = function () {
|
||||
let $table = $container.find(".pid__table")
|
||||
$table.find("tbody tr").remove();
|
||||
|
||||
for (let k in self.get()) {
|
||||
if (self.get().hasOwnProperty(k)) {
|
||||
self.get()[k].render(k, $table);
|
||||
}
|
||||
}
|
||||
|
||||
GUI.switchery();
|
||||
};
|
||||
|
||||
return self;
|
||||
};
|
||||
|
|
@ -44,7 +44,9 @@ input.logic_element__operand--value {
|
|||
.function_cell__action,
|
||||
.function_cell__operand,
|
||||
.logic_cell__operandA,
|
||||
.logic_cell__operandB {
|
||||
.logic_cell__operandB,
|
||||
.pid_cell__setpoint,
|
||||
.pid_cell__measurement {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<div class="tab-configuration tab-programming toolbar_fixed_bottom">
|
||||
<div class="content_wrapper" id="programming-main-content">
|
||||
|
||||
|
||||
<div class="tab_title subtab__header">
|
||||
<span class="subtab__header_label subtab__header_label--current" for="subtab-lc">Logic Conditions</span>
|
||||
<span class="subtab__header_label" for="subtab-pid">PID Controllers</span>
|
||||
</div>
|
||||
|
||||
<div class="gvar__container">
|
||||
<div class="gvar__wrapper">
|
||||
<div class="gvar__cell">
|
||||
|
|
@ -10,6 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="subtab-lc" class="subtab__content subtab__content--current">
|
||||
<table class="mixer-table logic__table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -26,7 +33,27 @@
|
|||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="subtab-pid" class="subtab__content">
|
||||
<table class="mixer-table pid__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 50px" data-i18n="pidId"></th>
|
||||
<th style="width: 80px" data-i18n="pidEnabled"></th>
|
||||
<th data-i18n="pidSetpoint"></th>
|
||||
<th data-i18n="pidMeasurement"></th>
|
||||
<th style="width: 80px" data-i18n="pidP"></th>
|
||||
<th style="width: 80px" data-i18n="pidI"></th>
|
||||
<th style="width: 80px" data-i18n="pidD"></th>
|
||||
<th style="width: 80px" data-i18n="pidFF"></th>
|
||||
<th style="width: 80px" data-i18n="pidOutput"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn save_btn">
|
||||
|
|
|
|||
|
|
@ -15,13 +15,15 @@ TABS.programming.initialize = function (callback, scrollPosition) {
|
|||
loadChainer.setChain([
|
||||
mspHelper.loadLogicConditions,
|
||||
mspHelper.loadGlobalVariablesStatus,
|
||||
mspHelper.loadProgrammingPidStatus
|
||||
mspHelper.loadProgrammingPidStatus,
|
||||
mspHelper.loadProgrammingPid
|
||||
]);
|
||||
loadChainer.setExitPoint(loadHtml);
|
||||
loadChainer.execute();
|
||||
|
||||
saveChainer.setChain([
|
||||
mspHelper.sendLogicConditions,
|
||||
mspHelper.sendProgrammingPid,
|
||||
mspHelper.saveToEeprom
|
||||
]);
|
||||
|
||||
|
|
@ -38,9 +40,12 @@ TABS.programming.initialize = function (callback, scrollPosition) {
|
|||
|
||||
function processHtml() {
|
||||
|
||||
LOGIC_CONDITIONS.init($('#programming-main-content'));
|
||||
LOGIC_CONDITIONS.init($('#subtab-lc'));
|
||||
LOGIC_CONDITIONS.render();
|
||||
|
||||
PROGRAMMING_PID.init($('#subtab-pid'));
|
||||
PROGRAMMING_PID.render();
|
||||
|
||||
GLOBAL_VARIABLES_STATUS.init($(".gvar__container"));
|
||||
|
||||
helper.tabs.init($('.tab-programming'));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue