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 and improve receiver tab style (#1643) 

Clean up and improve receiver tab style
10.7.0-preview
Michael Keller 2019-09-12 07:44:36 +12:00 committed by GitHub
parent 9350de3d6c 3c8fc20e1b
commit 9442e9d940
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 {
background-color: #414443;
background-color: #3a3a3a;
color: white;
}
@ -31,15 +31,16 @@
.tab-receiver .rssi_channel_wrapper {
background-color: #414443;
border-bottom: 1px solid #4d4d4d;
border-right: 1px solid #4d4d4d;
}
.tab-receiver .rcmap_wrapper {
background-color: #414443;
border-left: 1px solid #4d4d4d;
border-bottom: 1px solid #4d4d4d;
}
.tab-receiver .hybrid_element {
border-bottom: 1px solid #4d4d4d;
border-left: 1px solid #4d4d4d;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

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

@ -136,14 +136,19 @@
background-color: #14407a;
}
.tab-receiver .fc_column {
float: right;
width: 50%;
margin-left: 20px;
}
.tab-receiver .tunings {
float: right;
position: relative;
margin: 0px 0px 20px 0;
margin: 0px 0px 10px 0;
width: 100%;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #DEDEDE;
}
.tab-receiver .tunings .head {
@ -185,15 +190,9 @@
}
.tab-receiver .tunings table td {
background: #DEDEDE;
border-right: 1px solid var(--subtleAccent);
}
.tab-receiver .smoothing table td {
background: #DEDEDE;
border-right: 0px;
}
.tab-receiver .tunings table td:first-child {
border-bottom-left-radius: 3px;
}
@ -207,38 +206,54 @@
padding: 1px;
}
.tab-receiver .tunings table tr:nth-child(odd) {
background-color: #ececec;
}
.tab-receiver .tunings table input {
width: calc(100% - 8px);
border: 1px solid var(--subtleAccent);
border-radius: 3px;
height: 20px;
margin: 3px;
line-height: 20px;
height: 22px;
margin: 4px;
line-height: 22px;
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 {
float: right;
margin: 0px 0px 20px 0;
margin: 0px 0px 10px 0;
border-left: 0;
width: 30%;
box-sizing: border-box;
border-top-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 {
float: right;
position: relative;
margin: 0px 0px 20px 0;
width: calc(70% - 0px);
margin: 0px 0px 10px 0;
width: 70%;
box-sizing: border-box;
border-top-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,
@ -260,6 +275,10 @@
border-top-right-radius: 3px;
}
.tab-receiver .rssi_channel_wrapper select {
width: calc(100% - 10px);
}
.tab-receiver .hybrid_element {
border-right: 1px solid var(--subtleAccent);
}
@ -288,6 +307,7 @@
height: 22px;
padding-left: 5px;
border: 1px solid var(--subtleAccent);
border-radius: 3px;
margin: 4px;
}
@ -306,15 +326,22 @@
width: 100%;
}
.tab-receiver .rcInterpolation-label {
margin-top: 6px;
.tab-receiver .rcSmoothing table td {
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 {
width: 120px;
padding-left:8px;
border-right: none;
padding-left: 8px;
}
.tab-receiver .rcSmoothing td:last-child {
@ -325,22 +352,6 @@
-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"] {
float: right;
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();
$('select[name="rcSmoothing-input-manual-select"]').val("1");
$('.tab-receiver .rc-smoothing-input-blank').hide();
if (RX_CONFIG.rcSmoothingInputCutoff == 0) {
$('.tab-receiver .rcSmoothing-input-cutoff').hide();
$('select[name="rcSmoothing-input-manual-select"]').val("0");
$('.tab-receiver .rc-smoothing-input-blank').show();
}
$('select[name="rcSmoothing-input-manual-select"]').change(function () {
if ($(this).val() == 0) {
@ -357,11 +355,9 @@ TABS.receiver.initialize = function (callback) {
$('.tab-receiver .rcSmoothing-derivative-cutoff').show();
$('select[name="rcSmoothing-input-derivative-select"]').val("1");
$('.tab-receiver .rc-smoothing-derivative-blank').hide();
if (RX_CONFIG.rcSmoothingDerivativeCutoff == 0) {
$('select[name="rcSmoothing-input-derivative-select"]').val("0");
$('.tab-receiver .rcSmoothing-derivative-cutoff').hide();
$('.tab-receiver .rc-smoothing-derivative-blank').show();
}
$('select[name="rcSmoothing-input-derivative-select"]').change(function () {
if ($(this).val() == 0) {

116
src/tabs/receiver.html
View File

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