mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-17 21:35:33 +03:00
featureAddAxisLabels
This commit is contained in:
Mark Haslinghuis
parent
8032b1f4ee
commit
fe1f57c069
4 changed files with 202 additions and 30 deletions
|
|
@ -2037,6 +2037,12 @@
|
||||||
"receiverRefreshRateTitle": {
|
"receiverRefreshRateTitle": {
|
||||||
"message": "Graph refresh rate"
|
"message": "Graph refresh rate"
|
||||||
},
|
},
|
||||||
|
"receiverResetRefreshRate": {
|
||||||
|
"message": "Reset"
|
||||||
|
},
|
||||||
|
"receiverResetRefreshRateTitle": {
|
||||||
|
"message": "Reset refresh rate"
|
||||||
|
},
|
||||||
"receiverButtonSave": {
|
"receiverButtonSave": {
|
||||||
"message": "Save"
|
"message": "Save"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,12 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab-receiver .graphAndLabel {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.tab-receiver .spacer {
|
.tab-receiver .spacer {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 9px;
|
padding-right: 9px;
|
||||||
|
|
@ -337,13 +343,92 @@
|
||||||
-webkit-appearance: slider-horizontal;
|
-webkit-appearance: slider-horizontal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-receiver select[name="rx_refresh_rate"] {
|
/*Plot Control*/
|
||||||
|
|
||||||
|
.tab-receiver .plot_control {
|
||||||
float: right;
|
float: right;
|
||||||
border: 1px solid var(--subtleAccent);
|
width: 188px;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #ECECEC;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
border-bottom-right-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-receiver #RX_plot {
|
.tab-receiver .plot_control .table {
|
||||||
|
display:table;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
table-layout:fixed;
|
||||||
|
border-collapse:separate;
|
||||||
|
border-spacing:5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .row-container {
|
||||||
|
display: table-row-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .receiver-button a {
|
||||||
|
background-color: var(--accent);
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #e8b423;
|
||||||
|
color: #000;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 17px;
|
||||||
|
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .row {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .left-cell {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .right-cell {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: right;
|
||||||
|
width: 95px;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control select {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--subtleAccent);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .value {
|
||||||
|
padding: 3px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .ch1 {
|
||||||
|
background-color: #F1453D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .ch2 {
|
||||||
|
background-color: #673FB4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .ch3 {
|
||||||
|
background-color: #2B98F0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver .plot_control .ch4 {
|
||||||
|
background-color: #1FBCD2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-receiver #RX_plot {
|
||||||
|
width: calc(100% - 188px);
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -441,11 +441,39 @@ TABS.receiver.initialize = function (callback) {
|
||||||
// Only show the MSP control sticks if the MSP Rx feature is enabled
|
// Only show the MSP control sticks if the MSP Rx feature is enabled
|
||||||
$(".sticks_btn").toggle(FC.FEATURE_CONFIG.features.isEnabled('RX_MSP'));
|
$(".sticks_btn").toggle(FC.FEATURE_CONFIG.features.isEnabled('RX_MSP'));
|
||||||
|
|
||||||
$('select[name="rx_refresh_rate"]').change(function () {
|
const labelsChannelData = {
|
||||||
var plot_update_rate = parseInt($(this).val(), 10);
|
ch1: [],
|
||||||
|
ch2: [],
|
||||||
|
ch3: [],
|
||||||
|
ch4: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
$(`.plot_control .ch1, .plot_control .ch2, .plot_control .ch3, .plot_control .ch4`).each(function (){
|
||||||
|
const element = $(this);
|
||||||
|
if (element.hasClass('ch1')){
|
||||||
|
labelsChannelData.ch1.push(element);
|
||||||
|
} else if (element.hasClass('ch2')){
|
||||||
|
labelsChannelData.ch2.push(element);
|
||||||
|
} else if (element.hasClass('ch3')){
|
||||||
|
labelsChannelData.ch3.push(element);
|
||||||
|
} else if (element.hasClass('ch4')){
|
||||||
|
labelsChannelData.ch4.push(element);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let plotUpdateRate;
|
||||||
|
const rxRefreshRate = $('select[name="rx_refresh_rate"]');
|
||||||
|
|
||||||
|
$('a.reset_rate').click(function () {
|
||||||
|
plotUpdateRate = 50;
|
||||||
|
rxRefreshRate.val(plotUpdateRate).change();
|
||||||
|
});
|
||||||
|
|
||||||
|
rxRefreshRate.change(function () {
|
||||||
|
plotUpdateRate = parseInt($(this).val(), 10);
|
||||||
|
|
||||||
// save update rate
|
// save update rate
|
||||||
ConfigStorage.set({'rx_refresh_rate': plot_update_rate});
|
ConfigStorage.set({'rx_refresh_rate': plotUpdateRate});
|
||||||
|
|
||||||
function get_rc_data() {
|
function get_rc_data() {
|
||||||
MSP.send_message(MSPCodes.MSP_RC, false, false, update_ui);
|
MSP.send_message(MSPCodes.MSP_RC, false, false, update_ui);
|
||||||
|
|
@ -480,12 +508,17 @@ TABS.receiver.initialize = function (callback) {
|
||||||
meter_fill_array[i].css('width', ((FC.RC.channels[i] - meter_scale.min) / (meter_scale.max - meter_scale.min) * 100).clamp(0, 100) + '%');
|
meter_fill_array[i].css('width', ((FC.RC.channels[i] - meter_scale.min) / (meter_scale.max - meter_scale.min) * 100).clamp(0, 100) + '%');
|
||||||
meter_label_array[i].text(FC.RC.channels[i]);
|
meter_label_array[i].text(FC.RC.channels[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
labelsChannelData.ch1[0].text(FC.RC.channels[0]);
|
||||||
|
labelsChannelData.ch2[0].text(FC.RC.channels[1]);
|
||||||
|
labelsChannelData.ch3[0].text(FC.RC.channels[2]);
|
||||||
|
labelsChannelData.ch4[0].text(FC.RC.channels[3]);
|
||||||
|
|
||||||
// push latest data to the main array
|
// push latest data to the main array
|
||||||
for (var i = 0; i < FC.RC.active_channels; i++) {
|
for (var i = 0; i < FC.RC.active_channels; i++) {
|
||||||
RX_plot_data[i].push([samples, FC.RC.channels[i]]);
|
RX_plot_data[i].push([samples, FC.RC.channels[i]]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove old data from array
|
// Remove old data from array
|
||||||
while (RX_plot_data[0].length > 300) {
|
while (RX_plot_data[0].length > 300) {
|
||||||
for (var i = 0; i < RX_plot_data.length; i++) {
|
for (var i = 0; i < RX_plot_data.length; i++) {
|
||||||
|
|
@ -547,14 +580,14 @@ TABS.receiver.initialize = function (callback) {
|
||||||
GUI.interval_remove('receiver_pull');
|
GUI.interval_remove('receiver_pull');
|
||||||
|
|
||||||
// enable RC data pulling
|
// enable RC data pulling
|
||||||
GUI.interval_add('receiver_pull', get_rc_data, plot_update_rate, true);
|
GUI.interval_add('receiver_pull', get_rc_data, plotUpdateRate, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
ConfigStorage.get('rx_refresh_rate', function (result) {
|
ConfigStorage.get('rx_refresh_rate', function (result) {
|
||||||
if (result.rx_refresh_rate) {
|
if (result.rxRefreshRate) {
|
||||||
$('select[name="rx_refresh_rate"]').val(result.rx_refresh_rate).change();
|
rxRefreshRate.val(result.rxRefreshRate).change();
|
||||||
} else {
|
} else {
|
||||||
$('select[name="rx_refresh_rate"]').change(); // start with default value
|
rxRefreshRate.change(); // start with default value
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -289,27 +289,75 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="gui_box grey">
|
<div class="gui_box grey">
|
||||||
<div class="spacer">
|
<div class="spacer">
|
||||||
<select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
|
<div class="wrapper graphAndLabel">
|
||||||
<option value="10">10 ms</option>
|
<svg id="RX_plot">
|
||||||
<option value="20">20 ms</option>
|
<g class="grid x" transform="translate(40, 180)"></g>
|
||||||
<option value="30">30 ms</option>
|
<g class="grid y" transform="translate(40, 10)"></g>
|
||||||
<option value="40">40 ms</option>
|
<g class="data" transform="translate(41, 1)"></g>
|
||||||
<option value="50" selected="selected">50 ms</option>
|
<g class="axis x" transform="translate(40, 180)"></g>
|
||||||
<option value="100">100 ms</option>
|
<g class="axis y" transform="translate(40, 10)"></g>
|
||||||
<option value="250">250 ms</option>
|
</svg>
|
||||||
<option value="500">500 ms</option>
|
|
||||||
<option value="1000">1000 ms</option>
|
<div class="plot_control">
|
||||||
</select>
|
<div class="table">
|
||||||
<div class="clear-both"></div>
|
<div class="sensor row">
|
||||||
<svg id="RX_plot">
|
<div class="left-cell receiver-button">
|
||||||
<g class="grid x" transform="translate(40, 180)"></g>
|
<a class="reset_rate" href="#" i18n="receiverResetRefreshRate" i18n_title="receiverResetRefreshRateTitle"></a>
|
||||||
<g class="grid y" transform="translate(40, 10)"></g>
|
</div>
|
||||||
<g class="data" transform="translate(41, 1)"></g>
|
<div class="right-cell">
|
||||||
<g class="axis x" transform="translate(40, 180)"></g>
|
<select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
|
||||||
<g class="axis y" transform="translate(40, 10)"></g>
|
<option value="10">10 ms</option>
|
||||||
</svg>
|
<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="250">250 ms</option>
|
||||||
|
<option value="500">500 ms</option>
|
||||||
|
<option value="1000">1000 ms</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="left-cell">
|
||||||
|
Roll [A]:
|
||||||
|
</div>
|
||||||
|
<div class="ch1 value right-cell">
|
||||||
|
0
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="left-cell">
|
||||||
|
Pitch [E]:
|
||||||
|
</div>
|
||||||
|
<div class="ch2 value right-cell">
|
||||||
|
0
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="left-cell">
|
||||||
|
Yaw [R]:
|
||||||
|
</div>
|
||||||
|
<div class="ch3 value right-cell">
|
||||||
|
0
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="left-cell">
|
||||||
|
Throttle [T]:
|
||||||
|
</div>
|
||||||
|
<div class="ch4 value right-cell">
|
||||||
|
0
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="clear-both"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_toolbar">
|
<div class="content_toolbar">
|
||||||
<div class="btn sticks_btn">
|
<div class="btn sticks_btn">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue