Skip to content

Commit 14e7779

Browse files
mikellermikeller
authored
Merge pull request #2173 from haslinghuis/addaxislabels
Add labels for the axis of the graphs
2 parents 5e0afc0 + fe1f57c commit 14e7779

File tree

4 files changed

+202
-30
lines changed

4 files changed

+202
-30
lines changed

‎locales/en/messages.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2037,6 +2037,12 @@
20372037
"receiverRefreshRateTitle": {
20382038
"message": "Graph refresh rate"
20392039
},
2040+
"receiverResetRefreshRate": {
2041+
"message": "Reset"
2042+
},
2043+
"receiverResetRefreshRateTitle": {
2044+
"message": "Reset refresh rate"
2045+
},
20402046
"receiverButtonSave": {
20412047
"message": "Save"
20422048
},

‎src/css/tabs/receiver.css‎

Lines changed: 88 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
font-weight: normal;
33
}
44

5+
.tab-receiver .graphAndLabel {
6+
float: left;
7+
width: 100%;
8+
margin-bottom: 0;
9+
}
10+
511
.tab-receiver .spacer {
612
padding-left: 10px;
713
padding-right: 9px;
@@ -337,13 +343,92 @@
337343
-webkit-appearance: slider-horizontal;
338344
}
339345

340-
.tab-receiver select[name="rx_refresh_rate"] {
346+
/*Plot Control*/
347+
348+
.tab-receiver .plot_control {
341349
float: right;
342-
border: 1px solid var(--subtleAccent);
350+
width: 188px;
351+
margin: 0;
352+
background-color: #ECECEC;
353+
border-top-right-radius: 3px;
354+
border-bottom-right-radius: 3px;
343355
}
344356

345-
.tab-receiver #RX_plot {
357+
.tab-receiver .plot_control .table {
358+
display:table;
359+
width: 100%;
360+
table-layout:fixed;
361+
border-collapse:separate;
362+
border-spacing:5px;
363+
box-sizing: border-box;
364+
}
365+
366+
.tab-receiver .plot_control .row-container {
367+
display: table-row-group;
368+
}
369+
370+
.tab-receiver .plot_control .receiver-button a {
371+
background-color: var(--accent);
372+
border-radius: 3px;
373+
border: 1px solid #e8b423;
374+
color: #000;
375+
font-size: 10px;
376+
line-height: 17px;
377+
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
378+
text-transform: uppercase;
379+
letter-spacing: 0.03em;
380+
display: block;
381+
text-align: center;
382+
}
383+
384+
.tab-receiver .plot_control .row {
385+
display: table-row;
386+
}
387+
388+
.tab-receiver .plot_control .left-cell {
389+
display: table-cell;
390+
vertical-align: middle;
391+
font-weight: bold;
392+
}
393+
394+
.tab-receiver .plot_control .right-cell {
395+
display: table-cell;
396+
vertical-align: middle;
397+
text-align: right;
398+
width: 95px;
399+
font-size: smaller;
400+
}
401+
402+
.tab-receiver .plot_control select {
346403
width: 100%;
404+
border: 1px solid var(--subtleAccent);
405+
border-radius: 3px;
406+
}
407+
408+
.tab-receiver .plot_control .value {
409+
padding: 3px;
410+
color: #fff;
411+
border-radius: 3px;
412+
}
413+
414+
.tab-receiver .plot_control .ch1 {
415+
background-color: #F1453D;
416+
}
417+
418+
.tab-receiver .plot_control .ch2 {
419+
background-color: #673FB4;
420+
}
421+
422+
.tab-receiver .plot_control .ch3 {
423+
background-color: #2B98F0;
424+
}
425+
426+
.tab-receiver .plot_control .ch4 {
427+
background-color: #1FBCD2;
428+
}
429+
430+
.tab-receiver #RX_plot {
431+
width: calc(100% - 188px);
347432
height: 200px;
348433
}
349434

‎src/js/tabs/receiver.js‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -441,11 +441,39 @@ TABS.receiver.initialize = function (callback) {
441441
// Only show the MSP control sticks if the MSP Rx feature is enabled
442442
$(".sticks_btn").toggle(FC.FEATURE_CONFIG.features.isEnabled('RX_MSP'));
443443

444-
$('select[name="rx_refresh_rate"]').change(function () {
445-
var plot_update_rate = parseInt($(this).val(), 10);
444+
const labelsChannelData = {
445+
ch1: [],
446+
ch2: [],
447+
ch3: [],
448+
ch4: [],
449+
};
450+
451+
$(`.plot_control .ch1, .plot_control .ch2, .plot_control .ch3, .plot_control .ch4`).each(function (){
452+
const element = $(this);
453+
if (element.hasClass('ch1')){
454+
labelsChannelData.ch1.push(element);
455+
} else if (element.hasClass('ch2')){
456+
labelsChannelData.ch2.push(element);
457+
} else if (element.hasClass('ch3')){
458+
labelsChannelData.ch3.push(element);
459+
} else if (element.hasClass('ch4')){
460+
labelsChannelData.ch4.push(element);
461+
}
462+
});
463+
464+
let plotUpdateRate;
465+
const rxRefreshRate = $('select[name="rx_refresh_rate"]');
466+
467+
$('a.reset_rate').click(function () {
468+
plotUpdateRate = 50;
469+
rxRefreshRate.val(plotUpdateRate).change();
470+
});
471+
472+
rxRefreshRate.change(function () {
473+
plotUpdateRate = parseInt($(this).val(), 10);
446474

447475
// save update rate
448-
ConfigStorage.set({'rx_refresh_rate': plot_update_rate});
476+
ConfigStorage.set({'rx_refresh_rate': plotUpdateRate});
449477

450478
function get_rc_data() {
451479
MSP.send_message(MSPCodes.MSP_RC, false, false, update_ui);
@@ -480,12 +508,17 @@ TABS.receiver.initialize = function (callback) {
480508
meter_fill_array[i].css('width', ((FC.RC.channels[i] - meter_scale.min) / (meter_scale.max - meter_scale.min) * 100).clamp(0, 100) + '%');
481509
meter_label_array[i].text(FC.RC.channels[i]);
482510
}
511+
512+
labelsChannelData.ch1[0].text(FC.RC.channels[0]);
513+
labelsChannelData.ch2[0].text(FC.RC.channels[1]);
514+
labelsChannelData.ch3[0].text(FC.RC.channels[2]);
515+
labelsChannelData.ch4[0].text(FC.RC.channels[3]);
483516

484517
// push latest data to the main array
485518
for (var i = 0; i < FC.RC.active_channels; i++) {
486519
RX_plot_data[i].push([samples, FC.RC.channels[i]]);
487520
}
488-
521+
489522
// Remove old data from array
490523
while (RX_plot_data[0].length > 300) {
491524
for (var i = 0; i < RX_plot_data.length; i++) {
@@ -547,14 +580,14 @@ TABS.receiver.initialize = function (callback) {
547580
GUI.interval_remove('receiver_pull');
548581

549582
// enable RC data pulling
550-
GUI.interval_add('receiver_pull', get_rc_data, plot_update_rate, true);
583+
GUI.interval_add('receiver_pull', get_rc_data, plotUpdateRate, true);
551584
});
552585

553586
ConfigStorage.get('rx_refresh_rate', function (result) {
554-
if (result.rx_refresh_rate) {
555-
$('select[name="rx_refresh_rate"]').val(result.rx_refresh_rate).change();
587+
if (result.rxRefreshRate) {
588+
rxRefreshRate.val(result.rxRefreshRate).change();
556589
} else {
557-
$('select[name="rx_refresh_rate"]').change(); // start with default value
590+
rxRefreshRate.change(); // start with default value
558591
}
559592
});
560593

‎src/tabs/receiver.html‎

Lines changed: 67 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -289,27 +289,75 @@
289289
</div>
290290
<div class="gui_box grey">
291291
<div class="spacer">
292-
<select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
293-
<option value="10">10 ms</option>
294-
<option value="20">20 ms</option>
295-
<option value="30">30 ms</option>
296-
<option value="40">40 ms</option>
297-
<option value="50" selected="selected">50 ms</option>
298-
<option value="100">100 ms</option>
299-
<option value="250">250 ms</option>
300-
<option value="500">500 ms</option>
301-
<option value="1000">1000 ms</option>
302-
</select>
303-
<div class="clear-both"></div>
304-
<svg id="RX_plot">
305-
<g class="grid x" transform="translate(40, 180)"></g>
306-
<g class="grid y" transform="translate(40, 10)"></g>
307-
<g class="data" transform="translate(41, 1)"></g>
308-
<g class="axis x" transform="translate(40, 180)"></g>
309-
<g class="axis y" transform="translate(40, 10)"></g>
310-
</svg>
292+
<div class="wrapper graphAndLabel">
293+
<svg id="RX_plot">
294+
<g class="grid x" transform="translate(40, 180)"></g>
295+
<g class="grid y" transform="translate(40, 10)"></g>
296+
<g class="data" transform="translate(41, 1)"></g>
297+
<g class="axis x" transform="translate(40, 180)"></g>
298+
<g class="axis y" transform="translate(40, 10)"></g>
299+
</svg>
300+
301+
<div class="plot_control">
302+
<div class="table">
303+
<div class="sensor row">
304+
<div class="left-cell receiver-button">
305+
<a class="reset_rate" href="#" i18n="receiverResetRefreshRate" i18n_title="receiverResetRefreshRateTitle"></a>
306+
</div>
307+
<div class="right-cell">
308+
<select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
309+
<option value="10">10 ms</option>
310+
<option value="20">20 ms</option>
311+
<option value="30">30 ms</option>
312+
<option value="40">40 ms</option>
313+
<option value="50" selected="selected">50 ms</option>
314+
<option value="100">100 ms</option>
315+
<option value="250">250 ms</option>
316+
<option value="500">500 ms</option>
317+
<option value="1000">1000 ms</option>
318+
</select>
319+
</div>
320+
</div>
321+
<div class="row-container">
322+
<div class="row">
323+
<div class="left-cell">
324+
Roll [A]:
325+
</div>
326+
<div class="ch1 value right-cell">
327+
0
328+
</div>
329+
</div>
330+
<div class="row">
331+
<div class="left-cell">
332+
Pitch [E]:
333+
</div>
334+
<div class="ch2 value right-cell">
335+
0
336+
</div>
337+
</div>
338+
<div class="row">
339+
<div class="left-cell">
340+
Yaw [R]:
341+
</div>
342+
<div class="ch3 value right-cell">
343+
0
344+
</div>
345+
</div>
346+
<div class="row">
347+
<div class="left-cell">
348+
Throttle [T]:
349+
</div>
350+
<div class="ch4 value right-cell">
351+
0
352+
</div>
353+
</div>
354+
</div>
355+
</div>
356+
</div>
357+
</div>
311358
</div>
312359
</div>
360+
<div class="clear-both"></div>
313361
</div>
314362
<div class="content_toolbar">
315363
<div class="btn sticks_btn">

0 commit comments

Comments
 (0)