sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Receiver Tab rework

10.3.x-maintenance
skaman82 2015-11-08 16:52:07 +01:00
parent 448c1cfeb4
commit aee05ab86d
5 changed files with 283 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/paper.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 838 KiB

221
tabs/receiver.css
View File

@ -1,8 +1,16 @@
.tab-receiver { .tab-receiver {
} }
.tab-receiver .spacer {
padding-left: 10px;
padding-right: 9px;
width: calc(100% - 18px);
}
.tab-receiver input[type="number"]::-webkit-inner-spin-button { .tab-receiver input[type="number"]::-webkit-inner-spin-button {
border: 0; border: 0;
} }
.tab-receiver .help { .tab-receiver .help {
padding: 10px; padding: 10px;
background-color: #ffcb18; background-color: #ffcb18;
@ -11,63 +19,61 @@
.tab-receiver .bars { .tab-receiver .bars {
float: left; float: left;
width: 45%; width:calc(50% - 20px);
font-weight: bold; font-weight: bold;
} }
.tab-receiver .bars ul { .tab-receiver .bars ul {
margin-bottom: 5px; margin-bottom: 5px;
clear: left; clear: left;
} }
.tab-receiver .bars li { .tab-receiver .bars li {
float: left; float: left;
height: 22px; height: 22px;
line-height: 20px; line-height: 20px;
white-space: nowrap; white-space: nowrap;
} }
.tab-receiver .bars .name { .tab-receiver .bars .name {
padding: 0 10px 0 0; padding: 0 10px 0 0;
width: 50px; width: 50px;
text-align: right; text-align: right;
} }
.tab-receiver .bars .meter { .tab-receiver .bars .meter {
width: calc(100% - 60px); width: calc(100% - 60px);
} }
.tab-receiver .bars .meter-bar { .tab-receiver .bars .meter-bar {
position: relative; position: relative;
margin-top: 2px; margin-top: 2px;
width: calc(100% - 2px);
width: 100%;
height: 15px; height: 15px;
border: 1px solid silver; border: 1px solid silver;
background-color: #f4f4f4; background-color: #f4f4f4;
border-radius:3px;
} }
.tab-receiver .bars .meter-bar .label { .tab-receiver .bars .meter-bar .label {
position: absolute; position: absolute;
width: 50px; width: 50px;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
text-align: center; text-align: center;
color: #474747; color: #474747;
} }
.tab-receiver .bars .meter-bar .fill { .tab-receiver .bars .meter-bar .fill {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius:2px;
width: 50%; width: 50%;
height: 15px; height: 15px;
background-color: green; background-color: green;
} }
.tab-receiver .bars .meter-bar .fill .label { .tab-receiver .bars .meter-bar .fill .label {
color: white; color: white;
} }
.tab-receiver .bars ul:nth-of-type(1) .fill { .tab-receiver .bars ul:nth-of-type(1) .fill {
background-color: #f1453d; background-color: #f1453d;
@ -118,195 +124,279 @@
.tab-receiver .bars ul:nth-of-type(13) .fill { .tab-receiver .bars ul:nth-of-type(13) .fill {
background-color: #cf267d; background-color: #cf267d;
} }
.tab-receiver .bars ul:nth-of-type(14) .fill { .tab-receiver .bars ul:nth-of-type(14) .fill {
background-color: #7a1464; background-color: #7a1464;
} }
.tab-receiver .bars ul:nth-of-type(15) .fill { .tab-receiver .bars ul:nth-of-type(15) .fill {
background-color: #3a7a14; background-color: #3a7a14;
} }
.tab-receiver .bars ul:nth-of-type(16) .fill { .tab-receiver .bars ul:nth-of-type(16) .fill {
background-color: #14407a; background-color: #14407a;
} }
.tab-receiver .tunings { .tab-receiver .tunings {
float: right; float: right;
width: 45%;
} }
.tab-receiver .tunings table { .tab-receiver .tunings table {
border-collapse: collapse; border-collapse: collapse;
width:calc(100% - 2px);
} }
.tab-receiver .tunings .throttle { .tab-receiver .tunings .throttle {
margin-bottom: 10px; margin-bottom: 10px;
} }
.tab-receiver .tunings .rate { .tab-receiver .tunings .rate {
margin-bottom: 10px; margin-bottom: 10px;
} }
.tab-receiver .tunings .yaw_rate { .tab-receiver .tunings .yaw_rate {
margin-left: 127px; margin-left: 0px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.tab-receiver .tunings table, .tab-receiver .tunings table th, .tab-receiver .tunings table td { .tab-receiver .tunings table, .tab-receiver .tunings table th, .tab-receiver .tunings table td {
padding: 4px; padding: 4px;
border: 1px solid #8b8b8b; text-align: left;
padding-left: 6px;
} }
.tab-receiver .tunings table th { .tab-receiver .tunings table th {
width: 118px; background: #8b8b8b;
color: white;
} }
.tab-receiver .tunings table th:first-child {
border-top-left-radius: 3px;
}
.tab-receiver .tunings table th:last-child {
border-top-right-radius: 3px;
}
.tab-receiver .tunings table td {
background: #DEDEDE;
}
.tab-receiver .tunings table td:first-child {
border-bottom-left-radius: 5px;
}
.tab-receiver .tunings table td:last-child {
border-bottom-right-radius: 5px;
}
.tab-receiver .tunings table td { .tab-receiver .tunings table td {
padding: 1px; padding: 1px;
} }
.tab-receiver .tunings table tr:nth-child(odd) { .tab-receiver .tunings table tr:nth-child(odd) {
background-color: #ececec; background-color: #ececec;
} }
.tab-receiver .tunings table input {
width: 100%;
height: 20px;
.tab-receiver .tunings table input {
width: calc(100% - 8px);
border:1px solid silver;
border-radius:3px;
height: 20px;
margin:3px;
line-height: 20px; line-height: 20px;
text-align: right; text-align: right;
} }
.tab-receiver .rssi_channel_wrapper { .tab-receiver .rssi_channel_wrapper {
float: right; float: right;
margin: 0px 0px 10px 0;
margin: 10px 0 0 0;
width: 126px;
border: 1px solid #8b8b8b;
border-left: 0; border-left: 0;
width:30%;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color:#DEDEDE;
} }
.tab-receiver .rssi_channel_wrapper .head { .tab-receiver .rssi_channel_wrapper .head {
height: 15px; height: 15px;
padding: 4px; padding: 4px;
text-align: left;
text-align: center; padding-left: 6px;
font-weight: bold; font-weight: bold;
background: #8b8b8b;
color: white;
border-top-right-radius: 5px;
border-bottom: 1px solid #8b8b8b;
background-color: #ececec;
} }
.tab-receiver .rssi_channel_wrapper select { .tab-receiver .rssi_channel_wrapper select {
width: 100%;
height: 22px; height: 22px;
padding-left: 5px; padding-left: 5px;
border: 1px solid silver;
margin:4px;
width: calc(100% - 8px);
} }
.tab-receiver .rcmap_wrapper { .tab-receiver .rcmap_wrapper {
float: right; float: right;
position: relative; position: relative;
margin: 0px 0px 10px 0;
width:calc(70% - 3px);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color:#DEDEDE;
margin: 10px 0 0 0;
width: 126px;
border: 1px solid #8b8b8b;
} }
.tab-receiver .rcmap_wrapper .head { .tab-receiver .rcmap_wrapper .head {
height: 15px; height: 15px;
padding: 4px; padding: 4px;
text-align: left;
text-align: center; padding-left: 6px;
font-weight: bold; font-weight: bold;
background: #8b8b8b;
color: white;
border-top-left-radius: 5px;
border-bottom: 1px solid #8b8b8b;
background-color: #ececec;
} }
.tab-receiver .rcmap_wrapper .head span { .tab-receiver .rcmap_wrapper .head span {
border-bottom: 1px dashed silver;
} }
.tab-receiver .hybrid_element input { .tab-receiver .hybrid_element input {
position: absolute; position: absolute;
padding-left: 5px; padding-left: 5px;
width: calc(100% - 36px);
width: calc(100% - 24px); height: 20px;
height: 22px;
z-index: 2; z-index: 2;
border-radius:0px;
border: 1px solid silver;
margin:4px;
} }
.tab-receiver .hybrid_element select { .tab-receiver .hybrid_element select {
width: 100%; width: 100%;
height: 22px; height: 22px;
z-index: 1; z-index: 1;
border: 1px solid silver;
margin:4px;
width: calc(100% - 10px);
} }
.tab-receiver .curves { .tab-receiver .curves {
float: right; float: left;
margin-right:10px;
} }
.tab-receiver .throttle_curve { .tab-receiver .throttle_curve {
margin: 0 10px 10px 0; margin: 0 0px 0px 0;
width: 200px;
width: 220px; height: 117px;
height: 120px;
border: 1px solid silver; border: 1px solid silver;
border-radius: 3px;
background-image:url(../images/paper.jpg);
background-size:200%;
background-position:center;
} }
.tab-receiver .pitch_roll_curve { .tab-receiver .pitch_roll_curve {
margin: 0 10px 0 0; margin: 0 0px 0px 0;
width: 200px;
width: 220px; height: 117px;
height: 120px;
border: 1px solid silver; border: 1px solid silver;
border-radius: 3px;
background-image:url(../images/paper.jpg);
background-size:200%;
background-position:center;
} }
.tab-receiver select[name="rx_refresh_rate"] { .tab-receiver select[name="rx_refresh_rate"] {
float: right; float: right;
border: 1px solid silver; border: 1px solid silver;
} }
.tab-receiver #RX_plot { .tab-receiver #RX_plot {
width: 100%; width: 100%;
height: 200px; height: 200px;
} }
.tab-receiver #RX_plot .line:nth-child(1) { .tab-receiver #RX_plot .line:nth-child(1) {
stroke: #f1453d; stroke: #f1453d;
} }
.tab-receiver #RX_plot .line:nth-child(2) { .tab-receiver #RX_plot .line:nth-child(2) {
stroke: #673fb4; stroke: #673fb4;
} }
.tab-receiver #RX_plot .line:nth-child(3) { .tab-receiver #RX_plot .line:nth-child(3) {
stroke: #2b98f0; stroke: #2b98f0;
} }
.tab-receiver #RX_plot .line:nth-child(4) { .tab-receiver #RX_plot .line:nth-child(4) {
stroke: #1fbcd2; stroke: #1fbcd2;
} }
.tab-receiver #RX_plot .line:nth-child(5) { .tab-receiver #RX_plot .line:nth-child(5) {
stroke: #159588; stroke: #159588;
} }
.tab-receiver #RX_plot .line:nth-child(6) { .tab-receiver #RX_plot .line:nth-child(6) {
stroke: #50ae55; stroke: #50ae55;
} }
.tab-receiver #RX_plot .line:nth-child(7) { .tab-receiver #RX_plot .line:nth-child(7) {
stroke: #cdda49; stroke: #cdda49;
} }
.tab-receiver #RX_plot .line:nth-child(8) { .tab-receiver #RX_plot .line:nth-child(8) {
stroke: #fdc02f; stroke: #fdc02f;
} }
.tab-receiver #RX_plot .line:nth-child(9) { .tab-receiver #RX_plot .line:nth-child(9) {
stroke: #fc5830; stroke: #fc5830;
} }
.tab-receiver #RX_plot .line:nth-child(10) { .tab-receiver #RX_plot .line:nth-child(10) {
stroke: #785549; stroke: #785549;
} }
.tab-receiver #RX_plot .line:nth-child(11) { .tab-receiver #RX_plot .line:nth-child(11) {
stroke: #9e9e9e; stroke: #9e9e9e;
} }
.tab-receiver #RX_plot .line:nth-child(12) { .tab-receiver #RX_plot .line:nth-child(12) {
stroke: #7a6614; stroke: #7a6614;
} }
.tab-receiver #RX_plot .line:nth-child(13) { .tab-receiver #RX_plot .line:nth-child(13) {
stroke: #cf267d; stroke: #cf267d;
} }
.tab-receiver #RX_plot .line:nth-child(14) { .tab-receiver #RX_plot .line:nth-child(14) {
stroke: #7a1464; stroke: #7a1464;
} }
.tab-receiver #RX_plot .line:nth-child(15) { .tab-receiver #RX_plot .line:nth-child(15) {
stroke: #3a7a14; stroke: #3a7a14;
} }
.tab-receiver #RX_plot .line:nth-child(16) { .tab-receiver #RX_plot .line:nth-child(16) {
stroke: #14407a; stroke: #14407a;
} }
.tab-receiver .buttons { .tab-receiver .buttons {
width: calc(100% - 20px); width: calc(100% - 20px);
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
} }
@ -314,17 +404,28 @@
/* SVG classes*/ /* SVG classes*/
.tab-receiver .grid .tick { .tab-receiver .grid .tick {
stroke: silver; stroke: silver;
stroke-width: 1px;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
.tab-receiver .line { .tab-receiver .line {
stroke-width: 2px; stroke-width: 2px;
fill: none; fill: none;
} }
.tab-receiver .grid path { .tab-receiver .grid path {
stroke-width: 0; stroke-width: 0;
} }
.tab-receiver .axis path, .axis line { .tab-receiver .axis path, .axis line {
fill: none; fill: none;
stroke: #000; stroke: #ccc;
stroke-width: 1px;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
.tab-receiver text {
stroke: none;
fill: #828885;
font-size:10px;
}

92
tabs/receiver.html
View File

@ -1,5 +1,5 @@
<div class="tab-receiver toolbar_fixed_bottom"> <div class="tab-receiver toolbar_fixed_bottom">
<div class="content_wrapper"> <div class="content_wrapper">
<div class="tab_title" i18n="tabReceiver"></div> <div class="tab_title" i18n="tabReceiver"></div>
<div class="cf_doc_version_bt"> <div class="cf_doc_version_bt">
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a> <a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
@ -10,36 +10,6 @@
</div> </div>
</div> </div>
<div class="bars"> <div class="bars">
</div>
<div class="tunings">
<table class="throttle">
<tr>
<th i18n="receiverThrottleMid"></th>
<th i18n="receiverThrottleExpo"></th>
</tr>
<tr>
<td><input type="number" name="mid" step="0.01" min="0" max="1" /></td>
<td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
</tr>
</table>
<table class="rate">
<tr>
<th i18n="receiverRcRate"></th>
<th i18n="receiverRcExpo"></th>
</tr>
<tr>
<td><input type="number" name="rate" step="0.01" min="0" max="2.5" /></td>
<td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
</tr>
</table>
<table class="yaw_rate">
<tr>
<th i18n="receiverRcYawExpo"></th>
</tr>
<tr>
<td><input type="number" name="yaw_expo" step="0.01" min="0" max="1" /></td>
</tr>
</table>
<div class="rssi_channel_wrapper"> <div class="rssi_channel_wrapper">
<div class="head" i18n="receiverRssiChannel"></div> <div class="head" i18n="receiverRssiChannel"></div>
<select name="rssi_channel"> <select name="rssi_channel">
@ -60,15 +30,61 @@
</div> </div>
</div> </div>
</div> </div>
<div class="curves"> <div class="fc_column half" style="margin-left: 20px;">
<div class="gui_box grey" style="float: right;">
<div class="spacer" style="margin-top:10px; margin-bottom:10px;">
<div class="cf_column curves" style="width:calc(55% - 10px); min-width:200px;" >
<div class="throttle_curve"> <div class="throttle_curve">
<canvas width="220" height="120"></canvas> <canvas width="200" height="117"></canvas>
</div> </div>
</div>
<div class="fc_column half tunings">
<table class="throttle">
<tr>
<th i18n="receiverThrottleMid"></th>
<th i18n="receiverThrottleExpo"></th>
</tr>
<tr>
<td><input type="number" name="mid" step="0.01" min="0" max="1" /></td>
<td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
</tr>
</table>
</div>
</div>
</div>
<div class="gui_box grey" style="float: right;">
<div class="spacer" style="margin-top:10px; margin-bottom:10px;">
<div class="cf_column curves" style="width:calc(50% - 10px);" >
<div class="pitch_roll_curve"> <div class="pitch_roll_curve">
<canvas width="220" height="120"></canvas> <canvas width="200" height="117"></canvas>
</div>
</div>
<div class="fc_column half tunings">
<table class="rate">
<tr>
<th i18n="receiverRcRate"></th>
<th i18n="receiverRcExpo"></th>
</tr>
<tr>
<td><input type="number" name="rate" step="0.01" min="0" max="2.5" /></td>
<td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
</tr>
</table>
<table class="yaw_rate" style="margin-bottom:0px;">
<tr>
<th i18n="receiverRcYawExpo"></th>
</tr>
<tr>
<td><input type="number" name="yaw_expo" step="0.01" min="0" max="1" /></td>
</tr>
</table>
</div>
</div>
</div> </div>
</div> </div>
<div class="clear-both"></div> <div class="clear-both"></div>
<div class="gui_box grey" style="padding-top:10px; padding-bottom:10px; margin-top:20px;">
<div class="spacer">
<select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle"> <select name="rx_refresh_rate" i18n_title="receiverRefreshRateTitle">
<option value="10">10 ms</option> <option value="10">10 ms</option>
<option value="20">20 ms</option> <option value="20">20 ms</option>
@ -88,10 +104,12 @@
<g class="axis x" transform="translate(40, 180)"></g> <g class="axis x" transform="translate(40, 180)"></g>
<g class="axis y" transform="translate(40, 10)"></g> <g class="axis y" transform="translate(40, 10)"></g>
</svg> </svg>
</div> </div>
<div class="content_toolbar"> </div>
</div>
<div class="content_toolbar">
<div class="btn update_btn"><a class="update" href="#" i18n="receiverButtonSave"></a></div> <div class="btn update_btn"><a class="update" href="#" i18n="receiverButtonSave"></a></div>
<div class="btn refresh_btn"><a class="refresh" href="#" i18n="receiverButtonRefresh"></a></div> <div class="btn refresh_btn"><a class="refresh" href="#" i18n="receiverButtonRefresh"></a></div>
<div class="btn sticks_btn"><a class="sticks" href="#" i18n="receiverButtonSticks"></a></div> <div class="btn sticks_btn"><a class="sticks" href="#" i18n="receiverButtonSticks"></a></div>
</div> </div>
</div> </div>

18
tabs/receiver.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
TABS.receiver = { TABS.receiver = {
rateChartHeight: 120 rateChartHeight: 117
}; };
TABS.receiver.initialize = function (callback) { TABS.receiver.initialize = function (callback) {
@ -219,21 +219,22 @@ TABS.receiver.initialize = function (callback) {
} }
// math magic by englishman // math magic by englishman
var midx = 220 * mid, var midx = 200 * mid,
midxl = midx * 0.5, midxl = midx * 0.5,
midxr = (((220 - midx) * 0.5) + midx), midxr = (((200 - midx) * 0.5) + midx),
midy = rateHeight - (midx * (rateHeight / 220)), midy = rateHeight - (midx * (rateHeight / 200)),
midyl = rateHeight - ((rateHeight - midy) * 0.5 *(expo + 1)), midyl = rateHeight - ((rateHeight - midy) * 0.5 *(expo + 1)),
midyr = (midy / 2) * (expo + 1); midyr = (midy / 2) * (expo + 1);
// draw // draw
context.clearRect(0, 0, 220, rateHeight); context.clearRect(0, 0, 200, rateHeight);
context.beginPath(); context.beginPath();
context.moveTo(0, rateHeight); context.moveTo(0, rateHeight);
context.quadraticCurveTo(midxl, midyl, midx, midy); context.quadraticCurveTo(midxl, midyl, midx, midy);
context.moveTo(midx, midy); context.moveTo(midx, midy);
context.quadraticCurveTo(midxr, midyr, 220, 0); context.quadraticCurveTo(midxr, midyr, 200, 0);
context.lineWidth = 2; context.lineWidth = 2;
context.strokeStyle = '#59aa29';
context.stroke(); context.stroke();
}, 0); }, 0);
}).trigger('input'); }).trigger('input');
@ -261,11 +262,12 @@ TABS.receiver.initialize = function (callback) {
var ratey = rateHeight * rate; var ratey = rateHeight * rate;
// draw // draw
context.clearRect(0, 0, 220, rateHeight); context.clearRect(0, 0, 200, rateHeight);
context.beginPath(); context.beginPath();
context.moveTo(0, rateHeight); context.moveTo(0, rateHeight);
context.quadraticCurveTo(110, rateHeight - ((ratey / 2) * (1 - expo)), 220, rateHeight - ratey); context.quadraticCurveTo(110, rateHeight - ((ratey / 2) * (1 - expo)), 200, rateHeight - ratey);
context.lineWidth = 2; context.lineWidth = 2;
context.strokeStyle = '#59aa29';
context.stroke(); context.stroke();
}, 0); }, 0);
}).trigger('input'); }).trigger('input');

15
tabs/setup.css
View File

@ -1,19 +1,11 @@
.tab_setup .model-and-info { .tab_setup .model-and-info {
float: left; float: left;
} }
.tab_setup .default_btn { .tab_setup .default_btn {
margin-bottom:10px; margin-bottom:10px;
} }
#interactive_block { #interactive_block {
position: absolute; position: absolute;
width: calc(75% - 30px); width: calc(75% - 30px);
@ -35,13 +27,10 @@ margin-bottom:10px;
color: #616161; color: #616161;
} }
.attitude_info dl { .attitude_info dl {
width:100%; width:100%;
} }
.attitude_info dt { .attitude_info dt {
width:50%; width:50%;
float:left; float:left;
@ -75,12 +64,16 @@ margin-bottom:10px;
#interactive_block a.reset:hover { #interactive_block a.reset:hover {
background-color: #dedcdc; background-color: #dedcdc;
} }
#canvas_wrapper { #canvas_wrapper {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background-image:url(../images/paper.jpg);
background-size:100%;
background-position:center;
} }