Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-25 17:25:16 +03:00
Code Issues Wiki Activity

fixing some things

Browse source
This commit is contained in:
skaman82 2015-10-25 22:04:33 +01:00
parent 45fb19348d
commit b65c4e738e
8 changed files with 576 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

145
main.css
View file

@ -19,7 +19,18 @@ body {
padding:0px; padding:0px;
} }
a {
text-decoration:none;
color:#000;
font-family: 'open_sanssemibold', Arial;
}
a:hover {
text-decoration: none;
}
/* Help-Icon */ /* Help-Icon */
@ -79,19 +90,7 @@ body {
/* documentation button end */ /* documentation button end */
a {
text-decoration:none;
color:#59aa29;
font-family: 'open_sanssemibold', Arial;
}
a:hover {
text-decoration: none;
transition: all ease 0.2s;
}
input[type="number"]::-webkit-inner-spin-button { input[type="number"]::-webkit-inner-spin-button {
opacity: 1; /* required for chromium 33+ beta */ opacity: 1; /* required for chromium 33+ beta */
@ -108,7 +107,8 @@ input[type="number"]::-webkit-inner-spin-button {
} }
#main-wrapper { #main-wrapper {
padding: 0px 0px 0 0px; /* padding: 5px 5px 0 5px; */ padding: 0px 0px 0 0px; /* padding: 5px 5px 0 5px; */
height: calc(100% - 5px); height: calc(100% - 7px);
} }
.headerbar { .headerbar {
@ -291,6 +291,11 @@ input[type="number"]::-webkit-inner-spin-button {
margin-top: 3px; margin-top: 3px;
margin-right: 5px; margin-right: 5px;
} }
/* Log setup*/
#log { #log {
margin-bottom: 0px; margin-bottom: 0px;
border: 0px solid silver; /* was 1px*/ border: 0px solid silver; /* was 1px*/
@ -357,6 +362,24 @@ margin-right:20px;
text-decoration: underline; text-decoration: underline;
} }
/* Log switch */
.logswitch {
position:fixed;
right: 7px;
margin-top:-1px;
float:right;
padding:5px;
z-index:10;
}
.logswitch a {
color:#656565;
}
.tab_container { .tab_container {
float:left; float:left;
height:100%; height:100%;
@ -451,9 +474,6 @@ transition: none;
color: #fff; color: #fff;
background-image:url(images/icons/cf_icon_info_grey.svg); background-image:url(images/icons/cf_icon_info_grey.svg);
transition: none; transition: none;
} }
@ -463,8 +483,8 @@ transition: none;
} }
#content { #content {
margin-top: 0px; /* 31 */ margin-top: 0px; /* 31 */
padding: 0px; /* 10 */ padding: 10px; /* 10 */
height:calc(100% - 150px); /* (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/ height:calc(100% - 170px); /* (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/
background-color: white; background-color: white;
overflow-x: hidden; overflow-x: hidden;
@ -558,62 +578,7 @@ dialog {
} }
/* Colums START> */
.cf_column {
margin-bottom:20px;
}
.full {
float:left;
width:100%;
}
.half {
float:left;
width:50%;
}
.third_left {
float:left;
width:33%;
}
.third_center {
display: inline-block;
width:34%;
}
.third_right {
float:right;
width:33%;
}
.fourth {
float:left;
width:25%;
}
.threefourth_right {
float:right;
width:75%;
}
.threefourth_left {
float:left;
width:75%;
}
.twothird {
float:left;
width:67%;
}
.tab_wrapper { .tab_wrapper {
padding-left:20px; padding-left:20px;
@ -879,7 +844,7 @@ dialog {
margin-left:3px; margin-left:3px;
} }
/* note */ /* connect button */
.connect_contols { .connect_contols {
@ -945,15 +910,25 @@ background-color:#e60000;
} }
.logswitch { /* fixing padding for all Tabs*/
position:fixed;
right: 7px;
margin-top:-1px;
float:right;
padding:5px;
z-index:10;
}
.logswitch a {
color:#656565;
} .tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-dataflash, .tab-firmware_flasher, .tab-gps, .tab-help, .tab-led-strip, .tab-logging, .tab-modes, .tab-motors, .tab-pid_tuning, .tab-ports, .tab-receiver, .tab-sensors, .tab-servos {
padding:;
}
.properties {
width:800px;
}
.properties dl {
width:200px;
}
.properties dd {
width:400px;
height:auto !important;
}

17
main.html
View file

@ -235,20 +235,7 @@
<p>Waiting for data ...</p> <p>Waiting for data ...</p>
</div> </div>
</div> </div>
<script>
/** log trigger **/
$("#showlog").on('click', function() {
var state = $(this).data('state');
if ( state ) {
$("#log").animate({height: 27}, 800);
state = false;
}else{
$("#log").animate({height: 100}, 800);
state = true;
}
$(this).text(state ? 'Close' : 'Open');
$(this).data('state', state);
});
</script>
</body> </body>
</html> </html>

0
tabs/logging.css Normal file → Executable file
View file

0
tabs/logging.html Normal file → Executable file
View file

136
tabs/setup.css Normal file → Executable file
View file

@ -1,28 +1,92 @@
.tab-setup .model-and-info { .tab-setup .model-and-info {
height: calc(100% - 155px); height: calc(100% - 138px);
} }
.tab-setup { .tab-setup {
height: 100%; height: 100%;
} }
.tab-setup .section {
clear: both;
#interactive_block { padding-bottom: 8px;
position: absolute;
width:calc(71% + 8px);
height:100%;
max-height:417px;
background-color:#f5f5f5;
border-radius: 5px;
border:1px solid #e4e4e4;
} }
.heading_info { .tab-setup .section a {
position:absolute; display: block;
height: 25px;
margin: 10px 0px 10px 10px; float: left;
width: 190px;
height: 24px;
line-height: 24px;
text-align: center;
font-weight: bold; font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
white-space: nowrap;
} }
#interactive_block a.reset { .tab-setup .section a:hover {
background-color: #dedcdc;
}
.tab-setup .section a.calibrating {
background-color: #c1c1c1;
}
.tab-setup .section a.calibrating:hover {
cursor: default;
background-color: #c1c1c1;
}
.tab-setup .section a.disabled {
background-color: #c1c1c1;
}
.tab-setup .section a.disabled:hover {
cursor: default;
}
.tab-setup .section a.backup {
width: 90px;
margin-right: 8px;
}
.tab-setup .section a.restore {
width: 90px;
}
.tab-setup .section p {
margin-left: 200px;
padding: 0 0 0 5px;
height: 25px;
line-height: 25px;
border-bottom: 1px solid #e5e5e5;
}
.tab-setup #interactive_block {
float: left;
position: relative;
height: 100%;
width: calc(100% - 199px);
border: 1px solid silver;
background-color: white;
}
.tab-setup #interactive_block .attitude {
float: right;
margin: 10px 10px 0px 0px
}
.tab-setup #interactive_block .attitude dt {
float: left;
width: 64px;
font-weight: 700;
text-align: right
}
.tab-setup #interactive_block .attitude dd {
display: block;
margin-left: 64px;
width: 64px;
text-align: right
}
.tab-setup #interactive_block a.reset {
position: absolute; position: absolute;
display: block; display: block;
@ -39,25 +103,25 @@
border: 1px solid silver; border: 1px solid silver;
background-color: #ececec; background-color: #ececec;
border-radius: 3px:
z-index: 100; z-index: 100;
} }
#interactive_block a.reset:hover { .tab-setup #interactive_block a.reset:hover {
background-color: #dedcdc; background-color: #dedcdc;
} }
#canvas_wrapper { .tab-setup #canvas_wrapper {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
} }
.block_wrapper { .tab-setup .block_wrapper {
font-size: 0; font-size: 0;
} }
.block { .tab-setup .block {
float: left; float: left;
display: block; display: block;
@ -65,7 +129,7 @@
border: 1px solid silver; border: 1px solid silver;
} }
.block .head { .tab-setup .block .head {
display: block; display: block;
text-align: center; text-align: center;
@ -75,7 +139,7 @@
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
background-color: #ececec; background-color: #ececec;
} }
.block.info { .tab-setup .block.info {
display: inline-block; display: inline-block;
margin-bottom: 10px; margin-bottom: 10px;
@ -118,20 +182,24 @@
line-height: 20px; line-height: 20px;
} }
.tab-setup .block.gps dd {
height: 20px;
.block.instruments { margin-left: 85px;
width: 285px; margin-bottom: 2px;
align-content:center;
text-align:center; line-height: 20px;
ma
} }
.buttons { .tab-setup .block.instruments {
width: 185px;
}
.tab-setup .buttons {
width: calc(100% - 20px); width: calc(100% - 20px);
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
} }
.update { .tab-setup .update {
display: block; display: block;
float: right; float: right;
@ -149,9 +217,3 @@
.tab-setup .update:hover { .tab-setup .update:hover {
background-color: #dedcdc; background-color: #dedcdc;
} }
.cell_setup {
border-bottom: solid 1px #ddd;
padding-bottom:8px;
padding-top:7px;
}

180
tabs/setup.html Normal file → Executable file
View file

@ -1,141 +1,65 @@
<div class="tab-setup">
<div class="tab_setup"> <!-- should be the first DIV on each tab --> <div class="section">
<div class="tab_wrapper"> <a class="calibrateAccel" href="#" i18n="initialSetupButtonCalibrateAccel"></a>
<p i18n="initialSetupCalibrateAccelText">
<div class="cf_column full" style="margin-bottom:10px;"> </p>
<div class="tab_title">Setup </div>
<div class="cf_doc_version_bt"><a href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a></div> <div class="section">
</div> <a class="calibrateMag" href="#" i18n="initialSetupButtonCalibrateMag"></a>
<p i18n="initialSetupCalibrateMagText">
</div> </p>
</div>
<div class="cf_column fourth" style="min-height:100px;"> <div class="section">
<div class="spacer_right"> <a class="resetSettings" href="#" i18n="initialSetupButtonReset"></a>
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateAccel" id="default_btn green" href="#" i18n="initialSetupButtonCalibrateAccel"></a></div> <p i18n="initialSetupResetText">
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateMag" href="#" i18n="initialSetupButtonCalibrateMag" ></a></div> </p>
<div class="default_btn" style="margin-bottom:10px;"><a class="resetSettings" href="#" i18n="initialSetupButtonReset"></a></div> </div>
<div class="section">
<div class="half"><div class="spacer_right"> <a class="backup" href="#" i18n="initialSetupButtonBackup"></a>
<div class="default_btn half"><a class="backup" href="#" i18n="initialSetupButtonBackup"></a></div> <a class="restore" href="#" i18n="initialSetupButtonRestore"></a>
</div></div> <p i18n="initialSetupBackupRestoreText">
<div class="half"><div class="spacer_left"> </p>
<div class="default_btn half"><a class="restore" href="#" i18n="initialSetupButtonRestore"></a></div> </div>
</div></div></div> <div class="model-and-info">
</div>
<div class="threefourth_right"><div class="spacer_left">
<div class="cell_setup"><span i18n="initialSetupCalibrateAccelText"></span></div>
<div class="cell_setup"><span i18n="initialSetupCalibrateMagText"></span></div>
<div class="cell_setup"><span i18n="initialSetupResetText"></span></div>
<div class="cell_setup"><span i18n="initialSetupBackupRestoreText"></span></div>
</div></div>
<div style="clear:both; margin-bottom:5px;"></div>
<div class="cf_column threefourth_left" >
<div class="spacer_right">
<div class="model-and-info">
<div id="interactive_block"> <div id="interactive_block">
<div id="canvas_wrapper" style="max-height:400px; min-height:300px; width:100%;"> <div id="canvas_wrapper">
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</div> </div>
<div class="attitude"> <div class="attitude">
<dl> <dl>
<dt>Heading:</dt><dd class="heading">&nbsp;</dd> <dt>Heading:</dt><dd class="heading">&nbsp;</dd>
<dt>Pitch:</dt><dd class="pitch">&nbsp;</dd> <dt>Pitch:</dt><dd class="pitch">&nbsp;</dd>
<dt>Roll:</dt><dd class="roll">&nbsp;</dd> <dt>Roll:</dt><dd class="roll">&nbsp;</dd>
</dl> </dl>
</div> </div>
<a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a> <a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
</div>
<div class="block info">
</div></div></div> </div> <span class="head" i18n="initialSetupInfoHead"></span>
<div class="fields">
<div class="cf_column fourth"> <dl>
<dt i18n="initialSetupBattery"></dt><dd class="bat-voltage">0 V</dd>
<div class="spacer"><div class="gui_box grey"> <dt i18n="initialSetupDrawn"></dt><dd class="bat-mah-drawn">0 mAh</dd>
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInfoHead"></div> <dt i18n="initialSetupDrawing"></dt><dd class="bat-mah-drawing">0 A</dd>
<div class="helpicon"></div></div><div class="spacer_box"> <dt i18n="initialSetupRSSI"></dt><dd class="rssi">0 %</dd>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table"> </dl>
<tbody> </div>
<tr> </div>
<td i18n="initialSetupBattery"></td> <div class="block gps">
<td class="bat-voltage">0 V</td> <span class="head" i18n="initialSetupGPSHead"></span>
</tr> <div class="fields">
<tr> <dl>
<td i18n="initialSetupDrawn"></td> <dt i18n="gps3dFix"></dt><dd class="gpsFix"></dd>
<td class="bat-mah-drawn">0 mAh</td> <dt i18n="gpsSats"></dt><dd class="gpsSats"></dd>
</tr> <dt i18n="gpsLat"></dt><dd class="gpsLat"></dd>
<tr> <dt i18n="gpsLon"></dt><dd class="gpsLon"></dd>
<td i18n="initialSetupDrawing"></td> </dl>
<td class="bat-mah-drawing">0.00 A</td> </div>
</tr> </div>
<tr class="noboarder"> <div class="block instruments">
<td i18n="initialSetupRSSI"></td> <span class="head" i18n="initialSetupInstrumentsHead"></span>
<td class="rssi"> 0 %</td>
</tr>
</tbody>
</table></div></div></div>
<div class="spacer"><div class="gui_box grey">
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupGPSHead"></div>
<div class="helpicon"></div></div><div class="spacer_box">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
<tbody>
<tr>
<td i18n="gps3dFix"></td>
<td class="gpsFix"></td>
</tr>
<tr>
<td i18n="gpsSats"></td>
<td class="gpsSats"></td>
</tr>
<tr>
<td i18n="gpsLat"></td>
<td class="gpsLat"></td>
</tr>
<tr class="noboarder">
<td i18n="gpsLon"></td>
<td class="gpsLon"></td>
</tr>
</tbody>
</table></div></div></div>
<div class="spacer"><div class="gui_box grey">
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
<div class="helpicon"></div></div><div class="spacer_box" align="center">
<span id="attitude"></span> <span id="attitude"></span>
<span id="heading"></span> <span id="heading"></span>
</div>
</div>
</div></div></div>
</div></div>
</div> </div>

222
tabs/setup_new.css Normal file
View file

@ -0,0 +1,222 @@
.tab-setup .model-and-info {
height: calc(100% - 155px);
}
.tab-setup {
height: 100%;
}
#interactive_block {
position: absolute;
width:calc(71% + 8px);
height:100%;
max-height:417px;
background-color:#f5f5f5;
border-radius: 5px;
border:1px solid #e4e4e4;
}
.heading_info {
position:absolute;
height: 25px;
margin: 10px 0px 10px 10px;
font-weight: bold;
}
#interactive_block a.reset {
position: absolute;
display: block;
bottom: 10px;
right: 10px;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
border-radius: 3px:
z-index: 100;
}
#interactive_block a.reset:hover {
background-color: #dedcdc;
}
#canvas_wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.block_wrapper {
font-size: 0;
}
.block {
float: left;
display: block;
margin-left: 10px;
border: 1px solid silver;
}
.block .head {
display: block;
text-align: center;
line-height: 20px;
font-weight: bold;
border-bottom: 1px solid silver;
background-color: #ececec;
}
.block.info {
display: inline-block;
margin-bottom: 10px;
vertical-align: top;
font-size: 12px;
border: 1px solid silver;
}
.tab-setup .block.info .fields {
padding: 5px 5px 3px 5px;
}
.tab-setup .block.info dt {
float: left;
width: 99px;
height: 20px;
line-height: 20px;
}
.tab-setup .block.info dd {
width: 76px;
height: 20px;
line-height: 20px;
margin-left: 99px;
}
.tab-setup .block.gps {
width: 185px;
margin-bottom: 10px;
}
.tab-setup .block.gps .fields {
padding: 5px 5px 3px 5px;
}
.tab-setup .block.gps dt {
float: left;
width: 85px;
height: 20px;
margin-bottom: 2px;
line-height: 20px;
}
.block.instruments {
width: 285px;
align-content:center;
text-align:center;
ma
}
.buttons {
width: calc(100% - 20px);
position: absolute;
bottom: 10px;
}
.update {
display: block;
float: right;
height: 28px;
line-height: 28px;
padding: 0 15px 0 15px;
text-align: center;
font-weight: bold;
border: 1px solid silver;
background-color: #ececec;
}
.tab-setup .update:hover {
background-color: #dedcdc;
}
.cell_setup {
border-bottom: solid 1px #ddd;
padding-bottom:8px;
padding-top:7px;
}
/* Colums START> */
.cf_column {
margin-bottom:20px;
}
.full {
float:left;
width:100%;
}
.half {
float:left;
width:50%;
}
.third_left {
float:left;
width:33%;
}
.third_center {
display: inline-block;
width:34%;
}
.third_right {
float:right;
width:33%;
}
.fourth {
float:left;
width:25%;
}
.threefourth_right {
float:right;
width:75%;
}
.threefourth_left {
float:left;
width:75%;
}
.twothird {
float:left;
width:67%;
}

141
tabs/setup_new.html Normal file
View file

@ -0,0 +1,141 @@
<div class="tab_setup"> <!-- should be the first DIV on each tab -->
<div class="tab_wrapper">
<div class="cf_column full" style="margin-bottom:10px;">
<div class="tab_title">Setup
<div class="cf_doc_version_bt"><a href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a></div>
</div>
</div>
<div class="cf_column fourth" style="min-height:100px;">
<div class="spacer_right">
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateAccel" id="default_btn green" href="#" i18n="initialSetupButtonCalibrateAccel"></a></div>
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateMag" href="#" i18n="initialSetupButtonCalibrateMag" ></a></div>
<div class="default_btn" style="margin-bottom:10px;"><a class="resetSettings" href="#" i18n="initialSetupButtonReset"></a></div>
<div class="half"><div class="spacer_right">
<div class="default_btn half"><a class="backup" href="#" i18n="initialSetupButtonBackup"></a></div>
</div></div>
<div class="half"><div class="spacer_left">
<div class="default_btn half"><a class="restore" href="#" i18n="initialSetupButtonRestore"></a></div>
</div></div></div>
</div>
<div class="threefourth_right"><div class="spacer_left">
<div class="cell_setup"><span i18n="initialSetupCalibrateAccelText"></span></div>
<div class="cell_setup"><span i18n="initialSetupCalibrateMagText"></span></div>
<div class="cell_setup"><span i18n="initialSetupResetText"></span></div>
<div class="cell_setup"><span i18n="initialSetupBackupRestoreText"></span></div>
</div></div>
<div style="clear:both; margin-bottom:5px;"></div>
<div class="cf_column threefourth_left" >
<div class="spacer_right">
<div class="model-and-info">
<div id="interactive_block">
<div id="canvas_wrapper" style="max-height:400px; min-height:300px; width:100%;">
<canvas id="canvas"></canvas>
</div>
<div class="attitude">
<dl>
<dt>Heading:</dt><dd class="heading">&nbsp;</dd>
<dt>Pitch:</dt><dd class="pitch">&nbsp;</dd>
<dt>Roll:</dt><dd class="roll">&nbsp;</dd>
</dl>
</div>
<a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
</div></div></div> </div>
<div class="cf_column fourth">
<div class="spacer"><div class="gui_box grey">
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInfoHead"></div>
<div class="helpicon"></div></div><div class="spacer_box">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
<tbody>
<tr>
<td i18n="initialSetupBattery"></td>
<td class="bat-voltage">0 V</td>
</tr>
<tr>
<td i18n="initialSetupDrawn"></td>
<td class="bat-mah-drawn">0 mAh</td>
</tr>
<tr>
<td i18n="initialSetupDrawing"></td>
<td class="bat-mah-drawing">0.00 A</td>
</tr>
<tr class="noboarder">
<td i18n="initialSetupRSSI"></td>
<td class="rssi"> 0 %</td>
</tr>
</tbody>
</table></div></div></div>
<div class="spacer"><div class="gui_box grey">
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupGPSHead"></div>
<div class="helpicon"></div></div><div class="spacer_box">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
<tbody>
<tr>
<td i18n="gps3dFix"></td>
<td class="gpsFix"></td>
</tr>
<tr>
<td i18n="gpsSats"></td>
<td class="gpsSats"></td>
</tr>
<tr>
<td i18n="gpsLat"></td>
<td class="gpsLat"></td>
</tr>
<tr class="noboarder">
<td i18n="gpsLon"></td>
<td class="gpsLon"></td>
</tr>
</tbody>
</table></div></div></div>
<div class="spacer"><div class="gui_box grey">
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
<div class="helpicon"></div></div><div class="spacer_box" align="center">
<span id="attitude"></span>
<span id="heading"></span>
</div></div></div>
</div></div>
</div>