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

Clean up receiver tab

10.7.0-preview
IvoFPV 2019-09-10 16:08:46 +02:00
parent 845155c8e2
commit 3c8fc20e1b
4 changed files with 118 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/css/tabs-dark/receiver-dark.css
View File

@ -1,5 +1,5 @@
.tab-receiver select { .tab-receiver select {
background-color: #414443; background-color: #3a3a3a;
color: white; color: white;
} }
@ -31,15 +31,16 @@
.tab-receiver .rssi_channel_wrapper { .tab-receiver .rssi_channel_wrapper {
background-color: #414443; background-color: #414443;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4d4d4d;
border-right: 1px solid #4d4d4d;
} }
.tab-receiver .rcmap_wrapper { .tab-receiver .rcmap_wrapper {
background-color: #414443; background-color: #414443;
border-left: 1px solid #4d4d4d;
border-bottom: 1px solid #4d4d4d;
} }
.tab-receiver .hybrid_element { .tab-receiver .hybrid_element {
border-bottom: 1px solid #4d4d4d;
border-left: 1px solid #4d4d4d;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
} }

91
src/css/tabs/receiver.css
View File

@ -136,14 +136,19 @@
background-color: #14407a; background-color: #14407a;
} }
.tab-receiver .fc_column {
float: right;
width: 50%;
margin-left: 20px;
}
.tab-receiver .tunings { .tab-receiver .tunings {
float: right; float: right;
position: relative; position: relative;
margin: 0px 0px 20px 0; margin: 0px 0px 10px 0;
width: 100%; width: 100%;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
background-color: #DEDEDE;
} }
.tab-receiver .tunings .head { .tab-receiver .tunings .head {
@ -185,15 +190,9 @@
} }
.tab-receiver .tunings table td { .tab-receiver .tunings table td {
background: #DEDEDE;
border-right: 1px solid var(--subtleAccent); border-right: 1px solid var(--subtleAccent);
} }
.tab-receiver .smoothing table td {
background: #DEDEDE;
border-right: 0px;
}
.tab-receiver .tunings table td:first-child { .tab-receiver .tunings table td:first-child {
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
@ -207,38 +206,54 @@
padding: 1px; padding: 1px;
} }
.tab-receiver .tunings table tr:nth-child(odd) {
background-color: #ececec;
}
.tab-receiver .tunings table input { .tab-receiver .tunings table input {
width: calc(100% - 8px); width: calc(100% - 8px);
border: 1px solid var(--subtleAccent); border: 1px solid var(--subtleAccent);
border-radius: 3px; border-radius: 3px;
height: 20px; height: 22px;
margin: 3px; margin: 4px;
line-height: 20px; line-height: 22px;
text-align: right; text-align: right;
box-sizing: border-box;
}
.tab-receiver .input-helpicon-flex {
display: flex;
flex-flow: row nowrap;
}
.tab-receiver .input-helpicon-flex .helpicon {
min-width: 14px;
margin-left: 4px;
}
.tab-receiver .tunings .sticks th,
.tab-receiver .tunings .deadband th {
width: 33%;
} }
.tab-receiver .rssi_channel_wrapper { .tab-receiver .rssi_channel_wrapper {
float: right; float: right;
margin: 0px 0px 20px 0; margin: 0px 0px 10px 0;
border-left: 0; border-left: 0;
width: 30%; width: 30%;
box-sizing: border-box;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
background-color: #DEDEDE; border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
} }
.tab-receiver .rcmap_wrapper { .tab-receiver .rcmap_wrapper {
float: right; float: right;
position: relative; position: relative;
margin: 0px 0px 20px 0; margin: 0px 0px 10px 0;
width: calc(70% - 0px); width: 70%;
box-sizing: border-box;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
background-color: #DEDEDE; border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
} }
.tab-receiver .rssi_channel_wrapper .head, .tab-receiver .rssi_channel_wrapper .head,
@ -260,6 +275,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
} }
.tab-receiver .rssi_channel_wrapper select {
width: calc(100% - 10px);
}
.tab-receiver .hybrid_element { .tab-receiver .hybrid_element {
border-right: 1px solid var(--subtleAccent); border-right: 1px solid var(--subtleAccent);
} }
@ -288,6 +307,7 @@
height: 22px; height: 22px;
padding-left: 5px; padding-left: 5px;
border: 1px solid var(--subtleAccent); border: 1px solid var(--subtleAccent);
border-radius: 3px;
margin: 4px; margin: 4px;
} }
@ -306,15 +326,22 @@
width: 100%; width: 100%;
} }
.tab-receiver .rcInterpolation-label { .tab-receiver .rcSmoothing table td {
margin-top: 6px;
border-right: none; border-right: none;
} }
.tab-receiver .rcSmoothing table select,
.tab-receiver .rcSmoothing table input {
width: 90%;
}
.tab-receiver .rcSmoothing table .helpicon {
margin-top: 0px;
}
.tab-receiver .rcSmoothing td:first-child { .tab-receiver .rcSmoothing td:first-child {
width: 120px; width: 120px;
padding-left:8px; padding-left: 8px;
border-right: none;
} }
.tab-receiver .rcSmoothing td:last-child { .tab-receiver .rcSmoothing td:last-child {
@ -325,22 +352,6 @@
-webkit-appearance: slider-horizontal; -webkit-appearance: slider-horizontal;
} }
.tab-receiver .curves {
float: left;
margin-right: 10px;
}
.tab-receiver .throttle_curve {
margin: 0 0px 0px 0;
width: 200px;
height: 117px;
border: 1px solid silver;
border-radius: 3px;
background-image: var(--paper);
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;

4
src/js/tabs/receiver.js
View File

@ -338,11 +338,9 @@ TABS.receiver.initialize = function (callback) {
$('.tab-receiver .rcSmoothing-input-cutoff').show(); $('.tab-receiver .rcSmoothing-input-cutoff').show();
$('select[name="rcSmoothing-input-manual-select"]').val("1"); $('select[name="rcSmoothing-input-manual-select"]').val("1");
$('.tab-receiver .rc-smoothing-input-blank').hide();
if (RX_CONFIG.rcSmoothingInputCutoff == 0) { if (RX_CONFIG.rcSmoothingInputCutoff == 0) {
$('.tab-receiver .rcSmoothing-input-cutoff').hide(); $('.tab-receiver .rcSmoothing-input-cutoff').hide();
$('select[name="rcSmoothing-input-manual-select"]').val("0"); $('select[name="rcSmoothing-input-manual-select"]').val("0");
$('.tab-receiver .rc-smoothing-input-blank').show();
} }
$('select[name="rcSmoothing-input-manual-select"]').change(function () { $('select[name="rcSmoothing-input-manual-select"]').change(function () {
if ($(this).val() == 0) { if ($(this).val() == 0) {
@ -357,11 +355,9 @@ TABS.receiver.initialize = function (callback) {
$('.tab-receiver .rcSmoothing-derivative-cutoff').show(); $('.tab-receiver .rcSmoothing-derivative-cutoff').show();
$('select[name="rcSmoothing-input-derivative-select"]').val("1"); $('select[name="rcSmoothing-input-derivative-select"]').val("1");
$('.tab-receiver .rc-smoothing-derivative-blank').hide();
if (RX_CONFIG.rcSmoothingDerivativeCutoff == 0) { if (RX_CONFIG.rcSmoothingDerivativeCutoff == 0) {
$('select[name="rcSmoothing-input-derivative-select"]').val("0"); $('select[name="rcSmoothing-input-derivative-select"]').val("0");
$('.tab-receiver .rcSmoothing-derivative-cutoff').hide(); $('.tab-receiver .rcSmoothing-derivative-cutoff').hide();
$('.tab-receiver .rc-smoothing-derivative-blank').show();
} }
$('select[name="rcSmoothing-input-derivative-select"]').change(function () { $('select[name="rcSmoothing-input-derivative-select"]').change(function () {
if ($(this).val() == 0) { if ($(this).val() == 0) {

116
src/tabs/receiver.html
View File

@ -9,14 +9,14 @@
</div> </div>
<div class="bars"> <div class="bars">
</div> </div>
<div class="fc_column half" style="margin-left: 20px;"> <div class="fc_column">
<div class="rssi_channel_wrapper"> <div class="rssi_channel_wrapper grey">
<div class="head" i18n="receiverRssiChannel"></div> <div class="head" i18n="receiverRssiChannel"></div>
<select name="rssi_channel"> <select name="rssi_channel">
<!-- list generated here --> <!-- list generated here -->
</select> </select>
</div> </div>
<div class="rcmap_wrapper"> <div class="rcmap_wrapper grey">
<div class="head"> <div class="head">
<span i18n="receiverChannelMap" i18n_title="receiverChannelMapTitle"></span> <span i18n="receiverChannelMap" i18n_title="receiverChannelMapTitle"></span>
</div> </div>
@ -30,7 +30,7 @@
</select> </select>
</div> </div>
</div> </div>
<div class="gui_box tunings grey" style="float: right;"> <div class="gui_box tunings grey">
<table class="sticks"> <table class="sticks">
<tr> <tr>
<th i18n="receiverStickMin"></th> <th i18n="receiverStickMin"></th>
@ -39,21 +39,27 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<input type="number" name="stick_min" min="1000" max="1200" style="width:80%;"/> <div class="input-helpicon-flex">
<div class="helpicon cf_tip" i18n_title="receiverHelpStickMin"/> <input type="number" name="stick_min" min="1000" max="1200"/>
<div class="helpicon cf_tip" i18n_title="receiverHelpStickMin"/>
</div>
</td> </td>
<td> <td>
<input type="number" name="stick_center" min="1401" max="1599" style="width:70%;"/> <div class="input-helpicon-flex">
<div class="helpicon cf_tip" i18n_title="receiverHelpStickCenter"/> <input type="number" name="stick_center" min="1401" max="1599"/>
<div class="helpicon cf_tip" i18n_title="receiverHelpStickCenter"/>
</div>
</td> </td>
<td> <td>
<input type="number" name="stick_max" min="1800" max="2000" style="width:80%;"/> <div class="input-helpicon-flex">
<div class="helpicon cf_tip" i18n_title="receiverHelpStickMax"/> <input type="number" name="stick_max" min="1800" max="2000"/>
<div class="helpicon cf_tip" i18n_title="receiverHelpStickMax"/>
</div>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="gui_box tunings grey" style="float: right;"> <div class="gui_box tunings grey">
<table class="deadband"> <table class="deadband">
<tr> <tr>
<th i18n="receiverDeadband"></th> <th i18n="receiverDeadband"></th>
@ -62,16 +68,22 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<input type="number" name="deadband" step="1" min="0" max="32" style="width:70%;"/> <div class="input-helpicon-flex">
<div class="helpicon cf_tip" i18n_title="receiverHelpDeadband"/> <input type="number" name="deadband" step="1" min="0" max="32"/>
<div class="helpicon cf_tip" i18n_title="receiverHelpDeadband"/>
</div>
</td> </td>
<td> <td>
<input type="number" name="yaw_deadband" step="1" min="0" max="100" style="width:80%;"/> <div class="input-helpicon-flex">
<div class="helpicon cf_tip" i18n_title="receiverHelpYawDeadband"/> <input type="number" name="yaw_deadband" step="1" min="0" max="100"/>
<div class="helpicon cf_tip" i18n_title="receiverHelpYawDeadband"/>
</div>
</td> </td>
<td> <td>
<input type="number" name="3ddeadbandthrottle" step="1" min="0" max="100" style="width:80%;"/> <div class="input-helpicon-flex">
<div class="helpicon cf_tip" i18n_title="receiverHelp3dDeadbandThrottle"/> <input type="number" name="3ddeadbandthrottle" step="1" min="0" max="100"/>
<div class="helpicon cf_tip" i18n_title="receiverHelp3dDeadbandThrottle"/>
</div>
</td> </td>
</tr> </tr>
</table> </table>
@ -83,12 +95,12 @@
</tr> </tr>
<tr class="rc-smoothing-type"> <tr class="rc-smoothing-type">
<td> <td>
<select name="rcSmoothing-select" style="width: 90%"> <select name="rcSmoothing-select">
<option value="0" i18n="receiverRcSmoothingInterpolation"/> <option value="0" i18n="receiverRcSmoothingInterpolation"/>
<option value="1" i18n="receiverRcSmoothingFilter"/> <option value="1" i18n="receiverRcSmoothingFilter"/>
</select> </select>
</td> </td>
<td style="border-right: none" colspan="2"> <td colspan="2">
<div> <div>
<label> <label>
<span i18n="receiverRcSmoothingType"></span> <span i18n="receiverRcSmoothingType"></span>
@ -98,7 +110,7 @@
</tr> </tr>
<tr class="rc-smoothing-channels"> <tr class="rc-smoothing-channels">
<td> <td>
<select name="rcSmoothingChannels-select" style="width: 90%"> <select name="rcSmoothingChannels-select">
<option value="0">RP</option> <option value="0">RP</option>
<option value="1">RPY</option> <option value="1">RPY</option>
<option value="2">RPYT</option> <option value="2">RPYT</option>
@ -106,7 +118,7 @@
<option value="4">RPT</option> <option value="4">RPT</option>
</select> </select>
</td> </td>
<td style="border-right: none" colspan="2"> <td colspan="2">
<div> <div>
<label> <label>
<span i18n="receiverRcSmoothingChannel"></span> <span i18n="receiverRcSmoothingChannel"></span>
@ -116,91 +128,89 @@
</tr> </tr>
<tr class="rcSmoothing-input-manual"> <tr class="rcSmoothing-input-manual">
<td> <td>
<select name="rcSmoothing-input-manual-select" style="width: 90%"> <select name="rcSmoothing-input-manual-select">
<option value="0" i18n="receiverRcSmoothingAuto"/> <option value="0" i18n="receiverRcSmoothingAuto"/>
<option value="1" i18n="receiverRcSmoothingManual"/> <option value="1" i18n="receiverRcSmoothingManual"/>
</select> </select>
</td> </td>
<td style="border-right: none"> <td>
<div> <div>
<label> <label>
<span i18n="receiverRcInputTypeSelect"></span> <span i18n="receiverRcInputTypeSelect"></span>
</label> </label>
</div> </div>
</td> </td>
<td style="border-right: none"> <td>
<div class="helpicon cf_tip" i18n_title="receiverRcSmoothingInputManual" style="margin-top:0px;"></div> <div class="helpicon cf_tip" i18n_title="receiverRcSmoothingInputManual"></div>
</td> </td>
</tr> </tr>
<tr class="rcSmoothing-input-manual"> <tr class="rcSmoothing-input-manual">
<td class="rcSmoothing-input-cutoff" style="border-right: none !important;"><input type="number" name="rcSmoothingInputHz-number" step="1" min="1" max="255" style="width: 90%; margin-left: 5px"/></td> <td class="rcSmoothing-input-cutoff"><input type="number" name="rcSmoothingInputHz-number" step="1" min="1" max="255"/></td>
<td class="rcSmoothing-input-cutoff" style="border-right: none !important;" colspan="2"> <td class="rcSmoothing-input-cutoff" colspan="2">
<div> <div>
<label> <label>
<span i18n="receiverRcSmoothingInputHz"></span> <span i18n="receiverRcSmoothingInputHz"></span>
</label> </label>
<div class="helpicon cf_tip" i18n_title="rcSmoothingInputCutoffHelp" style="margin-top:0px;"></div> <div class="helpicon cf_tip" i18n_title="rcSmoothingInputCutoffHelp"></div>
</div> </div>
</td> </td>
<td class="rc-smoothing-input-blank" colspan="3"></td>
</tr> </tr>
<tr class="rcSmoothing-input-type"> <tr class="rcSmoothing-input-type">
<td> <td>
<select name="rcSmoothingInputType-select" style="width: 90%"> <select name="rcSmoothingInputType-select">
<option value="0">PT1</option> <option value="0">PT1</option>
<option value="1">BIQUAD</option> <option value="1">BIQUAD</option>
</select> </select>
</td> </td>
<td style="border-right: none"> <td>
<div> <div>
<label> <label>
<span i18n="receiverRcInputType"></span> <span i18n="receiverRcInputType"></span>
</label> </label>
</div> </div>
</td> </td>
<td style="border-right: none"> <td>
<div class="helpicon cf_tip" i18n_title="rcSmoothingInputTypeHelp" style="margin-top:0px;"></div> <div class="helpicon cf_tip" i18n_title="rcSmoothingInputTypeHelp"></div>
</td> </td>
</tr> </tr>
<tr class="rcSmoothing-derivative-manual"> <tr class="rcSmoothing-derivative-manual">
<td> <td>
<select name="rcSmoothing-input-derivative-select" style="width: 90%"> <select name="rcSmoothing-input-derivative-select">
<option value="0" i18n="receiverRcSmoothingAuto"/> <option value="0" i18n="receiverRcSmoothingAuto"/>
<option value="1" i18n="receiverRcSmoothingManual"/> <option value="1" i18n="receiverRcSmoothingManual"/>
</select> </select>
</td> </td>
<td style="border-right: none"> <td>
<div> <div>
<label> <label>
<span i18n="receiverRcDerivativeTypeSelect"></span> <span i18n="receiverRcDerivativeTypeSelect"></span>
</label> </label>
</div> </div>
</td> </td>
<td style="border-right: none"> <td>
<div class="helpicon cf_tip" i18n_title="receiverRcSmoothingDerivativeManual" style="margin-top:0px;"></div> <div class="helpicon cf_tip" i18n_title="receiverRcSmoothingDerivativeManual"></div>
</td> </td>
</tr> </tr>
<tr class="rcSmoothing-derivative-manual"> <tr class="rcSmoothing-derivative-manual">
<td class="rcSmoothing-derivative-cutoff" style="border-right: none"><input type="number" name="rcSmoothingDerivativeCutoff-number" step="1" min="1" max="255" style="width: 90%; margin-left: 5px"/></td> <td class="rcSmoothing-derivative-cutoff"><input type="number" name="rcSmoothingDerivativeCutoff-number" step="1" min="1" max="255"/></td>
<td colspan="2" class="rcSmoothing-derivative-cutoff" style="border-right: none !important;"> <td colspan="2" class="rcSmoothing-derivative-cutoff">
<div> <div>
<label> <label>
<span i18n="receiverRcSmoothingDerivativeCutoff"></span> <span i18n="receiverRcSmoothingDerivativeCutoff"></span>
</label> </label>
<div class="helpicon cf_tip" i18n_title="rcSmoothingDerivativeCutoffHelp" style="margin-top:0px;"></div> <div class="helpicon cf_tip" i18n_title="rcSmoothingDerivativeCutoffHelp"></div>
</div> </div>
</td> </td>
<td class="rc-smoothing-derivative-blank" colspan="3"></td>
</tr> </tr>
<tr class="rcSmoothing-input-type"> <tr class="rcSmoothing-input-type">
<td style="border-right: none"> <td>
<select name="rcSmoothingDerivativeType-select" style="width: 90%; margin-left: 5px"> <select name="rcSmoothingDerivativeType-select">
<option value="0" i18n="receiverRcSmoothingDerivativeTypeOff"/> <option value="0" i18n="receiverRcSmoothingDerivativeTypeOff"/>
<option value="1">PT1</option> <option value="1">PT1</option>
<option value="2">BIQUAD</option> <option value="2">BIQUAD</option>
</select> </select>
</td> </td>
<td style="border-right: none"> <td>
<div> <div>
<label> <label>
<span i18n="receiverRcDerivativeType"></span> <span i18n="receiverRcDerivativeType"></span>
@ -208,7 +218,7 @@
</div> </div>
</td> </td>
<td> <td>
<div class="helpicon cf_tip" i18n_title="rcSmoothingDerivativeTypeHelp" style="margin-top:0px;"></div> <div class="helpicon cf_tip" i18n_title="rcSmoothingDerivativeTypeHelp"></div>
</td> </td>
</tr> </tr>
<tr class="rcSmoothing-auto-smoothness"> <tr class="rcSmoothing-auto-smoothness">
@ -223,7 +233,7 @@
</div> </div>
</td> </td>
<td> <td>
<div class="helpicon cf_tip" i18n_title="receiverRcSmoothingAutoSmoothnessHelp" style="margin-top:0px;"></div> <div class="helpicon cf_tip" i18n_title="receiverRcSmoothingAutoSmoothnessHelp"></div>
</td> </td>
</tr> </tr>
<tr class="rcInterpolation"> <tr class="rcInterpolation">
@ -237,28 +247,28 @@
</td> </td>
<td> <td>
<div class="rcInterpolation-label"> <div class="rcInterpolation-label">
<label style="margin-left: 5px"> <label>
<span i18n="receiverRcInterpolation"></span> <span i18n="receiverRcInterpolation"></span>
</label> </label>
<div class="helpicon cf_tip" i18n_title="receiverRcInterpolationHelp" style="margin-top: 2px"></div> <div class="helpicon cf_tip" i18n_title="receiverRcInterpolationHelp"></div>
</div> </div>
</td> </td>
</tr> </tr>
<tr class="rcInterpolation"> <tr class="rcInterpolation">
<td class="rc-interpolation-manual" colspan="1" style="border-right: none"><input type="number" name="rcInterpolationInterval-number" step="1" min="1" max="50" /></td> <td class="rc-interpolation-manual" colspan="1"><input type="number" name="rcInterpolationInterval-number" step="1" min="1" max="50" /></td>
<td class="rc-interpolation-manual" colspan="2"> <td class="rc-interpolation-manual" colspan="2">
<div> <div>
<label style="margin-left: 5px" > <label>
<span i18n="receiverRcInterpolationInterval"></span> <span i18n="receiverRcInterpolationInterval"></span>
</label> </label>
<div class="helpicon cf_tip" i18n_title="receiverRcInterpolationIntervalHelp" style="margin-top: 2px"></div> <div class="helpicon cf_tip" i18n_title="receiverRcInterpolationIntervalHelp"></div>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="gui_box grey tunings topspacer"> <div class="gui_box grey tunings topspacer">
<table class="pid_titlebar" style="width: 100%;"> <table class="pid_titlebar">
<thead> <thead>
<tr> <tr>
<th i18n="receiverModelPreview"></th> <th i18n="receiverModelPreview"></th>
@ -277,7 +287,7 @@
</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="gui_box grey">
<div class="spacer"> <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>