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

Merge branch 'skaman82-GUI-optimization' into development

Browse source
This commit is contained in:
Dominic Clifton 2015-11-14 11:35:33 +00:00
commit 4e8fc955b0
24 changed files with 348 additions and 407 deletions
Download patch file Download diff file Expand all files Collapse all files

10
_locales/en/messages.json
View file

@ -933,7 +933,7 @@
},
"cliInfo": {
"message": "<span style=\"color: red\">Note</span>: Leaving CLI tab or pressing Disconnect will <strong>automatically</strong> send \"<strong>exit</strong>\" to the board. With the latest firmware this will make the controller <span style=\"color: red\">restart</span> and unsaved changes will be <span style=\"color: red\">lost</span>."
"message": "<strong>Note</strong>: Leaving CLI tab or pressing Disconnect will <strong>automatically</strong> send \"<strong>exit</strong>\" to the board. With the latest firmware this will make the controller <span style=\"color: red\">restart</span> and unsaved changes will be <span style=\"color: red\">lost</span>."
},
"cliInputPlaceholder": {
"message": "Write your command here"
@ -1140,7 +1140,7 @@
"message": "Warning"
},
"firmwareFlasherWarningText": {
"message": "Please do <span style=\"color: red\">not</span> try to flash <strong>non-cleanflight</strong> hardware with this firmware flasher.<br />Do <span style=\"color: red\">not</span> <strong>disconnect</strong> the board or <strong>turn off</strong> your computer while flashing.<br /><br /><span style=\"color: #57a929\">Note: </span>STM32 bootloader is stored in ROM, it cannot be bricked.<br />Note: <strong>Auto-Connect</strong> is always disabled while you are inside firmware flasher.<br /><span style=\"color: red\">Note: </span>Make sure you have a backup; some upgrades/downgrades will wipe your configuration.<br /><span style=\"color: #57a929\">Note:</span> If you have problems flashing try disconnecting all cables from your FC.<br /><br /><span style=\"color: #57a929\">Note: </span>If you have lost comminication with your board then power off the board, jumper the bootloader pins, power on, enable 'No reboot sequence', enable 'Full chip erase', re-flash, then power off, remove bootloader jumper, power on and connect (For all firmware except OPBL firmware)."
"message": "Please do <span style=\"color: red\">not</span> try to flash <strong>non-cleanflight</strong> hardware with this firmware flasher.<br />Do <span style=\"color: red\">not</span> <strong>disconnect</strong> the board or <strong>turn off</strong> your computer while flashing.<br /><br /><strong>Note: </strong>STM32 bootloader is stored in ROM, it cannot be bricked.<br /><strong>Note: </strong><span style=\"color: red\">Auto-Connect</span> is always disabled while you are inside firmware flasher.<br /><strong>Note: </strong>Make sure you have a backup; some upgrades/downgrades will wipe your configuration.<br /><strong>Note:</strong> If you have problems flashing try disconnecting all cables from your FC.<br /><br /><strong>Note: </strong>If you have lost comminication with your board then power off the board, jumper the bootloader pins, power on, enable 'No reboot sequence', enable 'Full chip erase', re-flash, then power off, remove bootloader jumper, power on and connect (For all firmware except OPBL firmware)."
},
"firmwareFlasherButtonLeave": {
"message": "Leave Firmware Flasher"
@ -1202,5 +1202,11 @@
},
"controlAxisAux8": {
"message": "AUX 8"
},
"pidHelp1": {
"message": "The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the LEVEL values differently. Please check the documentation."
},
"configHelp1": {
"message": "RSSI is a measurement of signal strength and is very handy so you know when your aircraft isw going out of range or if it is suffering RF interference."
}
}

1
changelog.html
View file

@ -1,6 +1,7 @@
<span>2015.11.14 - 1.1.0 - cleanflight</span>
<ul>
<li>Support Cleanflight API 1.14.0.</li>
<li>Minor GUI cleanups and fixes.</li>
</ul>
<span>2015.11.11 - 1.0.0 - cleanflight</span>

34
js/gui.js
View file

@ -238,6 +238,7 @@ GUI_control.prototype.tab_switch_cleanup = function (callback) {
};
GUI_control.prototype.content_ready = function (callback) {
$('.togglesmall').each(function(index, html) {
var switchery = new Switchery(html,
{
@ -258,12 +259,43 @@ GUI_control.prototype.content_ready = function (callback) {
$(html).removeClass('toggle');
});
$('.togglemedium').each(function(index, html) {
var switchery = new Switchery(html,
{
className: 'switcherymid',
color: '#59aa29',
secondaryColor: '#c4c4c4'
});
$(html).removeClass('togglemedium');
});
// Build link to in-use CF version documentation
var documentationButton = $('div#content #button-documentation');
documentationButton.html("Documentation for "+CONFIG.flightControllerVersion);
documentationButton.attr("href","https://github.com/cleanflight/cleanflight/tree/v{0}/docs".format(CONFIG.flightControllerVersion));
// loading tooltip
jQuery(document).ready(function($) {
$('cf_tip').each(function() { // Grab all ".cf_tip" elements, and for each...
log(this); // ...print out "this", which now refers to each ".cf_tip" DOM element
});
$('.cf_tip').each(function() {
$(this).jBox('Tooltip', {
content: $(this).children('.cf_tooltiptext'),
delayOpen: 100,
delayClose: 100,
position: {
x: 'right',
y: 'center'
},
outside: 'x'
});
});
});
if (callback) callback();
}

20
js/libraries/switchery/switchery.css
View file

@ -18,7 +18,7 @@
vertical-align: middle;
width: 45px;
z-index:1000;
opacity:1 !important;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
@ -35,14 +35,9 @@
height: 14px;
position: absolute;
top: 0;
width: 14px;
width: 14px;
}
.switcherymid {
background-color: #fff;
border: 1px solid #fff;
@ -70,22 +65,13 @@
height: 14px;
position: absolute;
top: 0;
width: 14px;
width: 14px;
}
/* Switchery sizes. */
.switchery-small {
border: none !important;
border-radius: 20px;
height: 10px;
width: 20px;

47
js/serial_backend.js
View file

@ -79,8 +79,8 @@ $(document).ready(function () {
if (!GUI.auto_connect) $('div#port-picker #baud').prop('disabled', false);
// reset connect / disconnect button
$('div.connect_controls a.connect').removeClass('active');
$('div.connect_controls a.connect_state').text(chrome.i18n.getMessage('connect'));
$('div.connect_controls a.connect').removeClass('active');
$('div.connect_controls a.connect_state').text(chrome.i18n.getMessage('connect'));
// reset active sensor indicators
sensor_status(0);
@ -137,12 +137,8 @@ $(document).ready(function () {
});
});
PortHandler.initialize();
PortUsage.initialize();
});
@ -183,7 +179,6 @@ function onOpen(openInfo) {
}, 10000);
// request configuration data
MSP.send_message(MSP_codes.MSP_API_VERSION, false, false, function () {
GUI.log(chrome.i18n.getMessage('apiVersionReceived', [CONFIG.apiVersion]));
@ -257,14 +252,11 @@ function onConnect() {
$('#tabs ul.mode-disconnected').hide();
$('#tabs ul.mode-connected').show();
if ("CLFL" == CONFIG.flightControllerIdentifier){
var sensor_state = $('#sensor-status');
sensor_state.show();
var port_picker = $('#portsinput');
port_picker.hide();
}
var sensor_state = $('#sensor-status');
sensor_state.show();
var port_picker = $('#portsinput');
port_picker.hide();
}
function onClosed(result) {
@ -280,7 +272,6 @@ function onClosed(result) {
var port_picker = $('#portsinput');
port_picker.show();
/* */
var sensor_state = $('#sensor-status');
sensor_state.hide();
@ -312,30 +303,27 @@ function sensor_status(sensors_detected) {
if (have_sensor(sensors_detected, 'acc')) {
$('.accel', e_sensor_status).addClass('on');
$('.accicon', e_sensor_status).addClass('active');
$('.accicon', e_sensor_status).addClass('active');
} else {
$('.accel', e_sensor_status).removeClass('on');
$('.accicon', e_sensor_status).removeClass('active');
$('.accicon', e_sensor_status).removeClass('active');
}
if (have_sensor(sensors_detected, 'gyro')) {
$('.gyro', e_sensor_status).addClass('on');
$('.gyroicon', e_sensor_status).addClass('active');
$('.gyroicon', e_sensor_status).addClass('active');
} else {
$('.gyro', e_sensor_status).removeClass('on');
$('.gyroicon', e_sensor_status).removeClass('active');
$('.gyroicon', e_sensor_status).removeClass('active');
}
if (have_sensor(sensors_detected, 'baro')) {
$('.baro', e_sensor_status).addClass('on');
$('.baroicon', e_sensor_status).addClass('active');
$('.baroicon', e_sensor_status).addClass('active');
} else {
$('.baro', e_sensor_status).removeClass('on');
$('.baroicon', e_sensor_status).removeClass('active');
$('.baroicon', e_sensor_status).removeClass('active');
}
if (have_sensor(sensors_detected, 'mag')) {
@ -343,7 +331,7 @@ function sensor_status(sensors_detected) {
$('.magicon', e_sensor_status).addClass('active');
} else {
$('.mag', e_sensor_status).removeClass('on');
$('.magicon', e_sensor_status).removeClass('active');
$('.magicon', e_sensor_status).removeClass('active');
}
if (have_sensor(sensors_detected, 'gps')) {
@ -351,15 +339,15 @@ function sensor_status(sensors_detected) {
$('.gpsicon', e_sensor_status).addClass('active');
} else {
$('.gps', e_sensor_status).removeClass('on');
$('.gpsicon', e_sensor_status).removeClass('active');
$('.gpsicon', e_sensor_status).removeClass('active');
}
if (have_sensor(sensors_detected, 'sonar')) {
$('.sonar', e_sensor_status).addClass('on');
$('.sonaricon', e_sensor_status).addClass('active');
$('.sonaricon', e_sensor_status).addClass('active');
} else {
$('.sonar', e_sensor_status).removeClass('on');
$('.sonaricon', e_sensor_status).removeClass('active');
$('.sonaricon', e_sensor_status).removeClass('active');
}
}
@ -404,4 +392,3 @@ function bit_clear(num, bit) {
return num & ~(1 << bit);
}

65
main.css
View file

@ -37,19 +37,6 @@ a.disabled {
}
/* Help-Icon */
span .helpicon {
float: right;
margin-top: 2px;
margin-right: 0px;
display: block;
height: 14px;
width: 14px;
opacity: 0.2;
background-image: url(images/icons/cf_icon_info_grey.svg);
background-size: contain;
background-position: center;
}
.helpicon {
float: right;
margin-top: 7px;
@ -61,19 +48,15 @@ span .helpicon {
background-image: url(images/icons/cf_icon_info_grey.svg);
background-size: contain;
background-position: center;
transition: none;
}
.helpicon:hover {
opacity: 1.0;
opacity: 0.9;
background-image: url(images/icons/cf_icon_info_green.svg);
transition: none;
}
/* Change here the content of the documentation button in all tabs!!!
.cf_doc_version_bt a:before {
content:"Documentation 1.10";
}
*/
.cf_doc_version_bt a {
padding: 1px 9px 1px 9px;
margin-top: -45px;
@ -128,12 +111,12 @@ input[type="number"]::-webkit-inner-spin-button {
}
.headerbar {
height: 110px;
width: 100%;
float: left;
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
height:110px;
width:100%;
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
}
#logo {
position: relative;
float: left;
@ -151,7 +134,7 @@ input[type="number"]::-webkit-inner-spin-button {
.logo_text {
position: absolute;
height: 20px;
width: 132px;
width: 125px;
left: 31px;
top: 63px;
color: #949494;
@ -535,12 +518,12 @@ input[type="number"]::-webkit-inner-spin-button {
#tabs ul {
/* overflow-y: auto; do not force scrollbars as it renders blank stripe on some user agents */
}
#tabs.logopen ul {
/* Cause the height to shrink to contain its floated contents while log is open */
}
.header-wrapper .mode-connected {
@ -905,10 +888,10 @@ dialog {
/* leave 20px side padding always */
/*padding: 0 20px 0 20px;
for testing: */
padding: 20px;
position: relative;
float: left;
width: calc(100% - 40px);
padding: 20px;
position: relative;
/*float: left;
width:calc(100% - 40px);*/
}
.content_toolbar {
@ -959,7 +942,7 @@ dialog {
cursor: default;
color: #fff;
background-color: #AFAFAF;
border: none;
border: 1px solid #AFAFAF;
pointer-events: none;
text-shadow: none;
opacity: 0.5;
@ -1370,7 +1353,7 @@ dialog {
border-radius: 3px;
color: #fff;
font-size: 10px;
}
}
.fixfalse {
background-color: #e60000;
@ -1385,7 +1368,7 @@ dialog {
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
.content_wrapper {
padding: 15px;
width: calc(100% - 30px);
/*width:calc(100% - 30px);*/
}
.tab_title {
font-size: 16px;
@ -1407,12 +1390,12 @@ dialog {
body {
/*font-size: 11px;*/
/* lets see if we really need this? */
}
.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 {
}
.cf_table td {
padding-top: 2px;
@ -1423,7 +1406,7 @@ dialog {
}
.default_btn a {
/*font-size:11px;*/
}
#tabs li a {
font-family: 'open_sansregular', Arial;
@ -1465,7 +1448,13 @@ dialog {
margin-right: 7px;
height: 14px;
width: 14px;
transition: none;
}
#tooltiptext {
}
.gps_false {
padding: 0px 3px 0px 3px;
font-size: 10px;
@ -1484,4 +1473,4 @@ dialog {
height: calc(100% - 81px);
overflow-y: auto;
}
}
}

19
main.js
View file

@ -386,21 +386,4 @@ $("#showlog").on('click', function() {
});
});
// loading tooltip
$(document).ready(function() {
$('.cf_tip').jBox('Tooltip', {
delayOpen: 100,
delayClose: 100,
position: {
x: 'right',
y: 'center'
},
outside: 'x'
});
});
});

7
tabs/configuration.html
View file

@ -281,9 +281,10 @@
<div class="gui_box grey">
<div class="gui_box_titlebar">
<div class="spacer_box_title" i18n="configurationRSSI"></div>
<div class="helpicon cf_tip"
title="RSSI is a measurement of signal strength and is very handy so you know when your aircraft isw going out of range or if it is suffering RF interference."></div>
</div>
<div class="helpicon cf_tip">
<div class="cf_tooltiptext" i18n="configHelp1" style="display:none;"></div>
</div>
</div>
<div class="spacer_box">
<table cellpadding="0" cellspacing="0">
<thead>

18
tabs/configuration.js
View file

@ -89,7 +89,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
{bit: 4, group: 'esc', name: 'MOTOR_STOP', description: 'Don\'t spin the motors when armed'},
{bit: 5, group: 'other', name: 'SERVO_TILT', description: 'Servo gimbal'},
{bit: 6, group: 'other', name: 'SOFTSERIAL', description: 'Enable CPU based serial ports'},
{bit: 7, group: 'gps', name: 'GPS', description: 'Configure port scenario first<div class="helpicon cf_tip" title="Remember to select port scenario first!"></div>'},
{bit: 7, group: 'gps', name: 'GPS', description: 'Configure port scenario first'},
{bit: 8, group: 'rxFailsafe', name: 'FAILSAFE', description: 'Failsafe settings on RX signal loss'},
{bit: 9, group: 'other', name: 'SONAR', description: 'Sonar'},
{bit: 10, group: 'other', name: 'TELEMETRY', description: 'Telemetry output'},
@ -355,22 +355,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
});
});
// loading tooltip
$(document).ready(function() {
$('.cf_tip').jBox('Tooltip', {
delayOpen: 100,
delayClose: 100,
position: {
x: 'right',
y: 'center'
},
outside: 'x'
});
});
$('a.save').click(function () {

8
tabs/firmware_flasher.html
View file

@ -17,8 +17,8 @@
</tr>
<tr class="option flash_on_connect_wrapper">
<td><label> <input class="flash_on_connect toggle" type="checkbox" /> <span
i18n="firmwareFlasherFlashOnConnect"></span></td>
</label>
i18n="firmwareFlasherFlashOnConnect"></span></label></td>
<td><span class="description" i18n="firmwareFlasherFlashOnConnectDescription"></span></td>
</tr>
<tr class="option">
@ -89,7 +89,7 @@
<p i18n="firmwareFlasherTargetWarning"></p>
</div>
</div>
<div class="info">
<div class="info"><a name="progressbar"></a>
<progress class="progress" value="0" min="0" max="100"></progress>
<span class="progressLabel" i18n="firmwareFlasherLoadFirmwareFile"></span>
</div>
@ -102,7 +102,7 @@
<a class="load_remote_file disabled" href="#" i18n="firmwareFlasherButtonLoadOnline"></a>
</div>
<div class="btn">
<a class="flash_firmware disabled" href="#" i18n="firmwareFlasherFlashFirmware"></a>
<a class="flash_firmware disabled" href="#progressbar" i18n="firmwareFlasherFlashFirmware"></a>
</div>
</div>
</div>

1
tabs/firmware_flasher.js
View file

@ -529,4 +529,3 @@ TABS.firmware_flasher.cleanup = function (callback) {
if (callback) callback();
};

327
tabs/landing.css
View file

@ -1,43 +1,41 @@
/* general layout */
.tab-landing {
margin: 0px;
padding: 0px;
min-height: 100%;
overflow: hidden;
}
.tab-landing .content_wrapper {
padding: 0;
min-height: 100%;
height: 100%;
overflow-y: auto;
background-color: #436c2c;
}
.tab-landing {
margin: 0px;
padding: 0px;
width: 100%;
position: absolute;
}
.tab-landing .content_top {
float: left;
width: 100%;
background-color: #59aa29;
height: 240px;
height: 35%;
height: 190px;
height: 140px;
background: #59aa29;
padding: 20px;
}
.tab-landing .content_mid {
float: left;
width: 100%;
background-color: #eaeaea;
overflow: hidden;
}
.tab-landing .content_foot {
float: left;
width: 100%;
clear: both;
padding: 20px;
padding-bottom: 5px;
}
/* hero block */
.tab-landing .logowrapper {
float: both;
margin-left: auto;
margin-right: auto;
width: 450px;
margin-top: 5px;
width: 800px;
color: white;
margin-top: 25px;
font-size: 14px;
font-family: 'open_sanslight', Arial;
}
@ -52,154 +50,26 @@
font-family: 'open_sanslight', Arial;
}
.tab-landing .content_wrapper {
margin: 0px;
padding: 0px;
width: calc(100% - 0px);
height: 100%;
}
.tab-landing .left {
width: 60%;
position: relative;
}
.tab-landing .right {
float: left;
margin-left: 10px;
width: calc(40% - 10px);
position: relative;
}
.contributing li {
list-style-type: disc;
list-style-position: initial;
margin-left: 20px;
}
#changelog_bt {
height: 84px;
width: 30px;
background-color: black;
margin-left: -30px;
margin-top: 30px;
position: absolute;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#changelog_button {
display: block;
color: white;
height: 30px;
width: 100px;
transform: rotate(270deg);
transform-origin: left top 0;
margin-left: 6px;
margin-top: 74px;
}
.changelog_wrapper {
right: 0px;
width: 30px;
height: 100%;
position: fixed;
}
.changelog {
height: calc(100% - 0px);
right: 0px;
width: 0px;
background-color: #363736;
position: absolute;
color: #ccc;
}
.changelog .title {
line-height: 20px;
text-align: left;
padding-left: 10px;
font-weight: bold;
color: #56AC1D;
text-transform: uppercase;
}
.changelog .changewrapper {
height: calc(100% - 40px);
padding: 10px;
overflow-y: hidden;
overflow-x: hidden;
-webkit-user-select: text;
opacity: 0;
}
.changelog .changewrapper.active {
overflow-y: scroll;
opacity: 0;
}
.changelog .changewrapper span {
font-weight: bold;
line-height: 22px;
}
.changelog .changewrapper ul {
margin-bottom: 10px;
line-height: 15px;
}
.changelog .changewrapper ul span {
font-weight: bold;
color: #fff;
}
.changelog .changewrapper li {
font-weight: normal;
margin-left: 0px;
border-top: 1px solid #656565;
padding-top: 4px;
padding-bottom: 4px;
}
.changelog .changewrapper p {
margin-bottom: 5px;
}
.text2 ul {
margin-bottom: 0px;
line-height: 15px;
}
.text2 li {
font-weight: normal;
margin-left: 0px;
border-top: 1px solid #ccc;
padding-top: 4px;
padding-bottom: 4px !important;
}
/* sponsors blocks */
.sponsors .title {
text-transform: uppercase;
font-size: 10px;
}
.sponsors {
float: both;
margin-left: auto;
margin-right: auto;
width: 825px;
text-align: center;
color: rgba(255, 255, 255, 0.50);
margin-top: 2%;
color: silver;
}
.sponsors ul {
margin-top: 10px;
margin-top: 5px;
}
.sponsors li {
margin-right: 10px;
display: inline-block;
margin-right: 10px;
}
.sponsors li a {
@ -208,7 +78,7 @@
padding-left: 4px;
padding-right: 4px;
font-size: 13px;
line-height: 10px;
line-height: 22px;
color: white;
font-weight: normal;
font-family: 'open_sanslight', Arial;
@ -227,27 +97,140 @@
font-size: 12px;
}
.text3 {
/* text columns */
.tab-landing .content_mid .column .wrap {
padding: 15px;
padding-bottom: 0px;
padding-top: 0px;
}
.tab-landing .content_mid .column .wrap2 {
padding: 10px;
padding-bottom: 10px;
padding-top: 10px;
}
.tab-landing .content_mid h2, .tab-landing .content_mid h3 {
margin-bottom: 5px;
font-size: 13px;
}
.tab-landing .content_mid h3 {
font-size: 12px;
}
.tab-landing .content_mid .text1 .wrap {
margin-left: 0px;
}
.tab-landing .content_mid .text1 {
width: 37%;
}
.tab-landing .content_mid .text2 {
width: 40%;
}
.tab-landing .content_mid .text2 ul {
margin-top: 10px;
}
.tab-landing .content_mid .text2 li {
padding: 5px 0;
border-top: 1px dotted silver;
}
.tab-landing .content_mid .text3 {
width: 23%;
}
.tab-landing .content_mid .text3 .wrap2 {
border: 1px solid silver;
border-radius: 5px;
background: white;
margin-right: 25px;
margin-left: 20px;
margin-top: 5px;
min-height: 187px;
font-size: 11px;
}
.mid_head {
font-size: 13px;
line-height: 10px;
color: #000;
font-weight: bold;
margin-bottom: 10px;
line-height: 16px;
}
.donate {
float: left;
margin-top: 15px;
width: 100%;
.tab-landing .content_mid .text3 .donate {
margin-top: 10px;
text-align: center;
margin-bottom: -5px;
}
.text1 a:hover, .text2 a:hover, .text3 a:hover {
color: #59aa29;
/* changelog block */
#changelog {
width: 250px;
height: 100%;
position: fixed;
right: -245px;
top: 0px;
}
#changelog .wrapper {
height: 100%;
padding: 0 20px;
border-left: 5px solid green;
overflow-y: auto;
display: none;
}
#changelog .button {
transform: rotate(270deg);
top: 50px;
right: 215px;
position: absolute;
background: green;
border-radius: 5px 5px 0 0;
border-bottom: none;
height: 30px;
}
#changelog .button a {
display: block;
padding: 5px 10px;
width: 70px;
text-align: center;
color: white;
}
#changelog .title {
margin: 20px 0;
font-size: 16px;
}
#content.log_open #changelog {
right: 0px;
background: white;
}
#content.log_open #changelog .wrapper {
display: block;
}
/* changelog content */
#changelog .log {
line-height: 17px;
}
#changelog .log span {
display: block;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
}
#changelog .log ul {
margin: 5px 0 20px 10px;
}
#changelog .log li {
font-weight: normal;
margin-bottom: 5px;
}
#changelog .log p {
margin-bottom: 20px;
}

56
tabs/landing.html
View file

@ -7,32 +7,27 @@
</div>
</div>
<div class="content_mid">
<div class="cf_column third_left text1" style="width: 41%">
<div class="spacer_left" style="width: calc(100% - 30px); padding-left: 20; padding-right: 10px;">
<div class="mid_head">Hardware</div>
<div class="column third_left text1">
<div class="wrap">
<h2>Hardware</h2>
<div i18n="defaultWelcomeText"></div>
</div>
</div>
<div class="cf_column third_center text2" style="width: 37%;">
<div class="spacer">
<div i18n="defaultContributingHead" class="mid_head"></div>
<div class="column third_center text2">
<div class="wrap">
<h2 i18n="defaultContributingHead"></h2>
<div i18n="defaultContributingText"></div>
</div>
</div>
<div class="cf_column third_right text3" style="width: calc(22% - 15px); margin-right: 15px;">
<div class="spacer_right" style="padding-left: 15px; width: calc(100% - 25px);">
<div class="gui_box grey" style="min-height: 200px; border: #59aa29 1px solid;">
<div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
<div i18n="defaultDonateHead" class="mid_head"></div>
<div i18n="defaultDonateText"></div>
<div class="donate">
<a
href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6"
target="_blank" title="Donate"><img src="./images/btn-donate.png" alt="Paypal"
height="30" /></a>
</li>
</div>
</div>
<div class="column third_right text3">
<div class="wrap2">
<h3 i18n="defaultDonateHead"></h3>
<div i18n="defaultDonateText"></div>
<div class="donate">
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6"
target="_blank" title="Donate"><img src="./images/btn-donate.png" alt="Paypal"
height="30" /></a>
</li>
</div>
</div>
</div>
@ -55,20 +50,21 @@
<li><a href="http://www.overskyrc.com" title="www.overskyrc.com" target="_blank">OverSkyRC</a></li>
<li><a href="http://multirotormania.com" title="multirotormania.com" target="_blank">Multi
Rotor Mania</a></li>
<li><a href="http://www.scorpionsystem.com" title="www.scorpionsystem.com" target="_blank">Scorpion Power Systems</a></li>
<li><a href="http://www.scorpionsystem.com" title="www.scorpionsystem.com" target="_blank">Scorpion
Power Systems</a></li>
<li><a href="http://www.multigp.com" title="www.multigp.com" target="_blank">MultiGP</a></li>
</ul>
</div>
</div>
<div class="changelog_wrapper">
<div class="changelog configurator">
<div id="changelog_bt">
<a id="changelog_button" href="#">Changelog</a>
</div>
<div class="title" i18n="defaultChangelogHead"></div>
<div class="changewrapper">
<!-- changelog content will be loaded here -->
</div>
</div>
<div id="changelog">
<div class="button">
<a id="changelog_toggle" href="#">Changelog</a>
</div>
<div class="wrapper">
<div class="title" i18n="defaultChangelogHead"></div>
<div class="log">
<!-- changelog content will be loaded here -->
</div>
</div>
</div>

45
tabs/landing.js
View file

@ -14,41 +14,34 @@ TABS.landing.initialize = function (callback) {
localize();
// load changelog content
$('div.changelog.configurator .changewrapper').load('./changelog.html');
$('#changelog .log').load('./changelog.html');
$('div.welcome a, div.sponsors a').click(function () {
googleAnalytics.sendEvent('ExternalUrls', 'Click', $(this).prop('href'));
});
/** changelog trigger **/
$("#changelog_button").on('click', function() {
var state = $(this).data('state2');
if ( state ) {
$(".changelog").animate({width: 0}, 200);
$(".changewrapper").animate({opacity: 0}, 500);
$(".changewrapper").removeClass('active');
state = false;
}else{
$(".changelog").animate({width: 220}, 200);
$(".changewrapper").animate({opacity: 1}, 500);
$(".changewrapper").addClass('active');
state = true;
}
$(this).text(state ? 'Close' : 'Changelog');
$(this).data('state2', state);
});
/** changelog trigger **/
$("#changelog_toggle").on('click', function() {
var state = $(this).data('state2');
if (state) {
$("#changelog").animate({right: -245}, 200, function () {
$("#content").removeClass('log_open');
});
state = false;
} else {
$("#changelog").animate({right: 0}, 200);
$("#content").addClass('log_open');
state = true;
}
$(this).text(state ? 'Close' : 'Changelog');
$(this).data('state2', state);
});
GUI.content_ready(callback);
});
};
TABS.landing.cleanup = function (callback) {
if (callback) callback();
};
};

17
tabs/led_strip.css
View file

@ -12,10 +12,11 @@
}
.tab-led-strip .mainGrid {
width: calc((24px + 8px) * 16);
height: calc((24px + 8px) * 16);
width: calc((24px + 7px) * 16);
height: calc((24px + 7px) * 16);
float: left;
margin-right: 10px;
border-radius: 3px;
}
.tab-led-strip .mainGrid .gPoint {
@ -112,13 +113,13 @@
.tab-led-strip .wire {
color: rgba(255,255,255,.5);
text-align: center;
font-size: 16px;
font-size: 12px;
text-shadow: 1px 1px rgba(0,0,0,.4);
padding-top: 0px;
display: block;
font-family: monospace;
/* font-family: monospace; */
margin-left: -1px;
margin-top: -23px;
margin-top: -21px;
width: 24px;
height: 24px;
}
@ -276,7 +277,7 @@
.tab-led-strip .colors {
height: 130px;
position: relative;
display: inline-block;
display: inline-block;
width: 49%;
}
@ -324,6 +325,7 @@
border: 1px solid rgb(236, 236, 236);
margin-top: -1px;
margin-left: -1px;
border-radius: 3px;
}
.gridSections .block {
@ -334,9 +336,6 @@
}
/*******JQUERYUI**********/
.tab-led-strip .ui-selected {

2
tabs/motors.html
View file

@ -118,7 +118,7 @@
</div>
<div class="notice">
<p i18n="motorsNotice"></p>
<label><input id="motorsEnableTestMode" class="toggle" type="checkbox" /><span
<label><input id="motorsEnableTestMode" class="togglesmall" type="checkbox" /><span
class="motorsEnableTestMode" i18n="motorsEnableControl"></span></label>
</div>
<div class="cler-both"></div>

6
tabs/pid_tuning.css
View file

@ -228,10 +228,10 @@
float: left;
margin: 0px;
padding: 0px;
text-align: center;
text-align: left;
padding-left: 5px;
line-height: 13px;
padding-top: 6px;
padding-top: 8px;
font-size: 12px;
border-bottom: 1px solid #ccc;
color: #828282;
@ -262,7 +262,7 @@
}
.tab-pid_tuning .helpicon {
margin-top: 0px;
margin-top: -1px;
}
#content-watermark {

44
tabs/pid_tuning.html
View file

@ -64,24 +64,6 @@
<td><input type="number" name="d" step="1" min="0" max="255" /></td>
</tr>
</table>
<table id="pid_accel" class="pid_tuning">
<tr>
<th colspan="4">
<div class="pid_mode">
Accelerometer/Level
<div class="helpicon cf_tip"
title="The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the LEVEL values differently. Please check the documentation."></div>
</div>
</th>
</tr>
<tr class="LEVEL">
<!-- 7 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5" /></td>
<td><input type="number" name="i" step="0.001" min="0" max="0.255" /></td>
<td><input type="number" name="d" step="1" min="0" max="255" /></td>
</tr>
</table>
<table id="pid_baro" class="pid_tuning">
<tr>
<th colspan="4">
@ -146,6 +128,32 @@
</tr>
</table>
</div>
<div class="gui_box grey" style="margin-top:10px;">
<table id="pid_accel" class="pid_tuning">
<tr>
<th colspan="4">
<div class="pid_mode">
<div style="width: 25%; float: left; text-align: left;">
Angle/Horizon
<div class="helpicon cf_tip">
<div class="cf_tooltiptext" i18n="pidHelp1" style="display: none;"></div>
</div>
</div>
<div style="width:25%; float:left;">Strength (Angle)</div>
<div style="width:25%; float:left;">Strength (Horizon)</div>
<div style="width:25%; float:left;">Transition (Horizon)</div>
</div>
</th>
</tr>
<tr class="LEVEL">
<!-- 7 -->
<td></td>
<td><input type="number" name="p" step="0.1" min="0" max="25.5" /></td>
<td><input type="number" name="i" step="0.001" min="0" max="0.255" /></td>
<td><input type="number" name="d" step="1" min="0" max="255" /></td>
</tr>
</table>
</div>
</div>
<div class="cf_column half">
<div class="spacer_left">

14
tabs/pid_tuning.js
View file

@ -264,20 +264,6 @@ TABS.pid_tuning.initialize = function (callback) {
// translate to user-selected language
localize();
// loading tooltip
$(document).ready(function() {
$('.cf_tip').jBox('Tooltip', {
delayOpen: 100,
delayClose: 100,
position: {
x: 'right',
y: 'center'
},
outside: 'x'
});
});
hideUnusedPids(CONFIG.activeSensors);
$('#showAllPids').on('click', function(){

2
tabs/ports.js
View file

@ -163,7 +163,7 @@ TABS.ports.initialize = function (callback, scrollPosition) {
var select_e;
if (column != 'telemetry') {
var checkboxId = 'functionCheckbox-' + portIndex + '-' + columnIndex + '-' + i;
functions_e.prepend('<span class="function"><input type="checkbox" class="toggle" id="' + checkboxId + '" value="' + functionName + '" /><label for="' + checkboxId + '"> ' + functionRule.displayName + '</label></span>');
functions_e.prepend('<span class="function"><input type="checkbox" class="togglemedium" id="' + checkboxId + '" value="' + functionName + '" /><label for="' + checkboxId + '"> ' + functionRule.displayName + '</label></span>');
if (serialPort.functions.indexOf(functionName) >= 0) {
var checkbox_e = functions_e.find('#' + checkboxId);

2
tabs/receiver.css
View file

@ -287,6 +287,8 @@
border-radius: 0px;
border: 1px solid silver;
margin: 4px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.tab-receiver .hybrid_element select {

2
tabs/servos.html
View file

@ -21,7 +21,7 @@
</tr>
</table>
<div class="live">
<input type="checkbox" class="toggle" /> <span i18n="servosLiveMode"></span>
<input type="checkbox" class="togglemedium" /> <span i18n="servosLiveMode"></span>
</div>
</div>
<div class="note require-upgrade">

6
tabs/setup.css
View file

@ -74,6 +74,12 @@
background-image: url(../images/paper.jpg);
background-size: 100%;
background-position: center;
border-radius: 5px;
}
#canvas {
width: 100% !important;
height: 100% !important;
}
.gui_box grey .block_wrapper {

2
tabs/setup.html
View file

@ -52,7 +52,7 @@
<div class="spacer_right">
<div class="model-and-info">
<div id="interactive_block">
<div id="canvas_wrapper" style="">
<div id="canvas_wrapper">
<canvas id="canvas"></canvas>
<div class="attitude_info">
<dl>