mirror of
https://github.com/iNavFlight/inav-configurator.git
synced 2025-07-16 04:45:18 +03:00
Basic render of global function table
This commit is contained in:
parent
a15277ae25
commit
7478f6cd04
8 changed files with 256 additions and 35 deletions
36
js/fc.js
36
js/fc.js
|
@ -1069,6 +1069,42 @@ var FC = {
|
|||
}
|
||||
}
|
||||
},
|
||||
getFunctionActions: function () {
|
||||
return {
|
||||
0: {
|
||||
name: "OVERRIDE ARMING SAFETY",
|
||||
hasOperand: false
|
||||
},
|
||||
1: {
|
||||
name: "OVERRIDE THROTTLE SCALE",
|
||||
hasOperand: true
|
||||
},
|
||||
2: {
|
||||
name: "SWAP ROLL & YAW",
|
||||
hasOperand: false
|
||||
},
|
||||
3: {
|
||||
name: "SET VTX POWER LEVEL",
|
||||
hasOperand: true
|
||||
},
|
||||
4: {
|
||||
name: "INVERT ROLL",
|
||||
hasOperand: false
|
||||
},
|
||||
5: {
|
||||
name: "INVERT PITCH",
|
||||
hasOperand: false
|
||||
},
|
||||
6: {
|
||||
name: "INVERT YAW",
|
||||
hasOperand: false
|
||||
},
|
||||
7: {
|
||||
name: "OVERRIDE THROTTLE",
|
||||
hasOperand: true
|
||||
}
|
||||
}
|
||||
},
|
||||
getOperandTypes: function () {
|
||||
return {
|
||||
0: {
|
||||
|
|
|
@ -53,5 +53,163 @@ let GlobalFunction = function (enabled, conditionId, action, operandType, operan
|
|||
flags = data;
|
||||
};
|
||||
|
||||
self.onOperatorValueChange = function (event) {
|
||||
let $cT = $(event.currentTarget);
|
||||
self.setOperandValue($cT.val());
|
||||
};
|
||||
|
||||
self.onOperatorTypeChange = function (event) {
|
||||
let $cT = $(event.currentTarget),
|
||||
operand = $cT.data("operand"),
|
||||
$container = $cT.parent(),
|
||||
operandMetadata = FC.getOperandTypes()[$cT.val()];
|
||||
|
||||
self.setOperandType($cT.val());
|
||||
self.setOperandValue(operandMetadata.default);
|
||||
|
||||
GUI.renderOperandValue($container, operandMetadata, operand, operandMetadata.default, self.onOperatorValueChange);
|
||||
};
|
||||
|
||||
self.onEnabledChange = function (event) {
|
||||
let $cT = $(event.currentTarget),
|
||||
$parent = $cT.closest('tr');
|
||||
self.setEnabled(!!$cT.prop('checked'));
|
||||
|
||||
self.renderAction($parent);
|
||||
self.renderOperand($parent);
|
||||
self.renderLogicId($parent);
|
||||
};
|
||||
|
||||
self.onLogicIdChange = function(event) {
|
||||
let $cT = $(event.currentTarget);
|
||||
self.setConditionId($cT.val());
|
||||
};
|
||||
|
||||
self.onActionChange = function (event) {
|
||||
let $cT = $(event.currentTarget);
|
||||
self.setAction($cT.val());
|
||||
self.renderOperand($cT.closest('tr'));
|
||||
};
|
||||
|
||||
self.hasOperand = function () {
|
||||
|
||||
let actions = FC.getFunctionActions();
|
||||
|
||||
if (!self.getEnabled()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return actions[self.getAction()].hasOperand;
|
||||
};
|
||||
|
||||
self.renderOperand = function ($row) {
|
||||
let $container;
|
||||
|
||||
$container = $row.find('.function_cell__operand');
|
||||
|
||||
$container.html('');
|
||||
if (self.hasOperand()) {
|
||||
|
||||
$container.append('<select class="logic_element__operand--type" data-operand="0"></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 (operandType == k) {
|
||||
$t.append('<option value="' + k + '" selected>' + op.name + '</option>');
|
||||
|
||||
/*
|
||||
* Render value element depending on type
|
||||
*/
|
||||
GUI.renderOperandValue($container, op, 0, operandValue, self.onOperatorValueChange);
|
||||
|
||||
} else {
|
||||
$t.append('<option value="' + k + '">' + op.name + '</option>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Bind events
|
||||
*/
|
||||
$t.change(self.onOperatorTypeChange);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
self.renderAction = function ($row) {
|
||||
|
||||
if (self.getEnabled()) {
|
||||
|
||||
$row.find('.function_cell__action').html("<select class='function__action' ></select>");
|
||||
let $t = $row.find(".function__action");
|
||||
|
||||
for (let k in FC.getFunctionActions()) {
|
||||
if (FC.getFunctionActions().hasOwnProperty(k)) {
|
||||
let o = FC.getFunctionActions()[k];
|
||||
if (self.getAction() == parseInt(k, 10)) {
|
||||
$t.append('<option value="' + k + '" selected>' + o.name + '</option>');
|
||||
} else {
|
||||
$t.append('<option value="' + k + '">' + o.name + '</option>');
|
||||
}
|
||||
}
|
||||
}
|
||||
$t.change(self.onActionChange);
|
||||
} else {
|
||||
$row.find('.function_cell__action').html("");
|
||||
}
|
||||
};
|
||||
|
||||
self.renderLogicId = function($row) {
|
||||
|
||||
if (self.getEnabled()) {
|
||||
|
||||
$row.find('.function_cell__logicId').html("<select class='function__logicId' ></select>");
|
||||
let $t = $row.find(".function__logicId");
|
||||
let count = LOGIC_CONDITIONS.getCount();
|
||||
|
||||
console.log(self.getConditionId());
|
||||
|
||||
for (let i = 0; i < count ; i++) {
|
||||
if (i == self.getConditionId()) {
|
||||
$t.append('<option value="' + i + '" selected>Logic Condition ' + i + ' </option>');
|
||||
} else {
|
||||
$t.append('<option value="' + i + '">Logic Condition ' + i + ' </option>');
|
||||
}
|
||||
}
|
||||
$t.change(self.onLogicIdChange);
|
||||
} else {
|
||||
$row.find('.function_cell__logicId').html("");
|
||||
}
|
||||
}
|
||||
|
||||
self.render = function (index, $container) {
|
||||
|
||||
$container.find('tbody').append('<tr>\
|
||||
<td class="function_cell__index"></td>\
|
||||
<td class="function_cell__enabled"></td>\
|
||||
<td class="function_cell__logicId"></td>\
|
||||
<td class="function_cell__action"></td>\
|
||||
<td class="function_cell__operand"></td>\
|
||||
<td class="function_cell__flags"></td>\
|
||||
<td class="function_cell__status"><div class="logic_cell__active_marker"></div></td>\
|
||||
</tr>\
|
||||
');
|
||||
|
||||
$row = $container.find('tr:last');
|
||||
|
||||
$row.find('.function_cell__index').html(index);
|
||||
$row.find('.function_cell__enabled').html("<input type='checkbox' class='toggle function_element__enabled' />");
|
||||
$row.find('.function_element__enabled').
|
||||
prop('checked', self.getEnabled()).
|
||||
change(self.onEnabledChange);
|
||||
self.renderLogicId($row);
|
||||
self.renderAction($row);
|
||||
self.renderOperand($row);
|
||||
}
|
||||
|
||||
|
||||
return self;
|
||||
}
|
|
@ -21,5 +21,27 @@ let GlobalFunctionsCollection = function () {
|
|||
return data.length
|
||||
};
|
||||
|
||||
self.init = function ($element) {
|
||||
|
||||
if (semver.lt(CONFIG.flightControllerVersion, "2.4.0")) {
|
||||
return;
|
||||
}
|
||||
|
||||
$container = $element;
|
||||
};
|
||||
|
||||
self.render = function () {
|
||||
let $table = $container.find(".function__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;
|
||||
}
|
32
js/gui.js
32
js/gui.js
|
@ -260,5 +260,37 @@ GUI_control.prototype.load = function(rel, callback) {
|
|||
});
|
||||
}
|
||||
|
||||
GUI_control.prototype.renderOperandValue = function ($container, operandMetadata, operand, value, onChange) {
|
||||
|
||||
$container.find('.logic_element__operand--value').remove();
|
||||
|
||||
switch (operandMetadata.type) {
|
||||
case "value":
|
||||
$container.append('<input type="number" class="logic_element__operand--value" data-operand="' + operand + '" step="' + operandMetadata.step + '" min="' + operandMetadata.min + '" max="' + operandMetadata.max + '" value="' + value + '" />');
|
||||
break;
|
||||
case "range":
|
||||
case "dictionary":
|
||||
$container.append('<select class="logic_element__operand--value" data-operand="' + operand + '"></select>');
|
||||
let $t = $container.find('.logic_element__operand--value');
|
||||
|
||||
if (operandMetadata.type == "range") {
|
||||
for (let i = operandMetadata.range[0]; i <= operandMetadata.range[1]; i++) {
|
||||
$t.append('<option value="' + i + '">' + i + '</option>');
|
||||
}
|
||||
} else if (operandMetadata.type == "dictionary") {
|
||||
for (let k in operandMetadata.values) {
|
||||
if (operandMetadata.values.hasOwnProperty(k)) {
|
||||
$t.append('<option value="' + k + '">' + operandMetadata.values[k] + '</option>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$t.val(value);
|
||||
break;
|
||||
}
|
||||
|
||||
$container.find('.logic_element__operand--value').change(onChange);
|
||||
};
|
||||
|
||||
// initialize object into GUI variable
|
||||
var GUI = new GUI_control();
|
||||
|
|
|
@ -100,7 +100,7 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
|
|||
self.setOperandBValue(operandMetadata.default);
|
||||
}
|
||||
|
||||
self.renderOperandValue($container, operandMetadata, operand, operandMetadata.default);
|
||||
GUI.renderOperandValue($container, operandMetadata, operand, operandMetadata.default, self.onOperatorValueChange);
|
||||
};
|
||||
|
||||
self.onOperatorValueChange = function (event) {
|
||||
|
@ -114,39 +114,6 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
|
|||
}
|
||||
};
|
||||
|
||||
self.renderOperandValue = function ($container, operandMetadata, operand, value) {
|
||||
|
||||
$container.find('.logic_element__operand--value').remove();
|
||||
|
||||
switch (operandMetadata.type) {
|
||||
case "value":
|
||||
$container.append('<input type="number" class="logic_element__operand--value" data-operand="' + operand + '" step="' + operandMetadata.step + '" min="' + operandMetadata.min + '" max="' + operandMetadata.max + '" value="' + value + '" />');
|
||||
break;
|
||||
case "range":
|
||||
case "dictionary":
|
||||
$container.append('<select class="logic_element__operand--value" data-operand="' + operand + '"></select>');
|
||||
let $t = $container.find('.logic_element__operand--value');
|
||||
|
||||
if (operandMetadata.type == "range") {
|
||||
for (let i = operandMetadata.range[0]; i <= operandMetadata.range[1]; i++) {
|
||||
$t.append('<option value="' + i + '">' + i + '</option>');
|
||||
}
|
||||
} else if (operandMetadata.type == "dictionary") {
|
||||
for (let k in operandMetadata.values) {
|
||||
if (operandMetadata.values.hasOwnProperty(k)) {
|
||||
$t.append('<option value="' + k + '">' + operandMetadata.values[k] + '</option>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$t.val(value);
|
||||
break;
|
||||
}
|
||||
|
||||
$container.find('.logic_element__operand--value').change(self.onOperatorValueChange);
|
||||
|
||||
};
|
||||
|
||||
self.renderOperand = function (operand) {
|
||||
let type, value, $container;
|
||||
if (operand == 0) {
|
||||
|
@ -175,7 +142,7 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
|
|||
/*
|
||||
* Render value element depending on type
|
||||
*/
|
||||
self.renderOperandValue($container, op, operand, value);
|
||||
GUI.renderOperandValue($container, op, operand, value, self.onOperatorValueChange);
|
||||
|
||||
} else {
|
||||
$t.append('<option value="' + k + '">' + op.name + '</option>');
|
||||
|
|
|
@ -41,6 +41,8 @@ input.logic_element__operand--value {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.function_cell__action,
|
||||
.function_cell__operand,
|
||||
.logic_cell__operandA,
|
||||
.logic_cell__operandB {
|
||||
text-align: left;
|
||||
|
|
|
@ -31,6 +31,7 @@
|
|||
<th data-i18n="functionAction"></th>
|
||||
<th data-i18n="functionOperand"></th>
|
||||
<th data-i18n="functionFlags"></th>
|
||||
<th data-i18n="functionStatus"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
|
@ -46,6 +46,9 @@ TABS.programming.initialize = function (callback, scrollPosition) {
|
|||
LOGIC_CONDITIONS.init($('#logic-wrapper'));
|
||||
LOGIC_CONDITIONS.render();
|
||||
|
||||
GLOBAL_FUNCTIONS.init($('#functions-wrapper'));
|
||||
GLOBAL_FUNCTIONS.render();
|
||||
|
||||
localize();
|
||||
GUI.content_ready(callback);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue