diff --git a/js/gui.js b/js/gui.js index e6236f3b..e3bdeed6 100644 --- a/js/gui.js +++ b/js/gui.js @@ -355,5 +355,26 @@ GUI_control.prototype.updateProfileChange = function() { $('#profilechange').val(CONFIG.profile); }; +GUI_control.prototype.fillSelect = function ($element, values, currentValue, unit) { + if (unit == null) { + unit = ''; + } + + $element.find("*").remove(); + + for (var i in values) { + if (values.hasOwnProperty(i)) { + $element.append(''); + } + } + + /* + * If current Value is not on the list, add a new entry + */ + if (currentValue != null && $element.find('[value="' + currentValue + '"]').length == 0) { + $element.append(''); + } +}; + // initialize object into GUI variable var GUI = new GUI_control(); diff --git a/js/serial_backend.js b/js/serial_backend.js index b738caa8..5fdbd3b6 100755 --- a/js/serial_backend.js +++ b/js/serial_backend.js @@ -29,7 +29,7 @@ $(document).ready(function () { if ($tabElement != null) { setTimeout(function () { $tabElement.click(); - }, 250); + }, 500); } }, 5000); diff --git a/main.css b/main.css index 48835151..206e1fe2 100644 --- a/main.css +++ b/main.css @@ -1886,4 +1886,8 @@ select { .ic_osd:hover, li.active .ic_osd { background-image: url(images/icons/icon_osd_white.svg); +} + +.full-width { + width: 100%; } \ No newline at end of file diff --git a/tabs/configuration.css b/tabs/configuration.css index ef1a9376..bc8e606b 100644 --- a/tabs/configuration.css +++ b/tabs/configuration.css @@ -28,21 +28,10 @@ padding: 5px 0; } -.tab-configuration table thead tr:first-child { - background-color: #ececec; -} - .tab-configuration { position: relative; } -.tab-configuration .groupTitle { - padding: 0 0 5px 0; - margin: 0 0 10px 0; - font-size: 16px; - border-bottom: 1px solid #dddddd; -} - .tab-configuration .leftWrapper { float: left; width: calc(50% - 20px); @@ -61,23 +50,6 @@ font-weight: bold; } -.tab-configuration dl.features dt { - float: left; - width: 10px; - height: 18px; - line-height: 18px; -} - -.tab-configuration dl.features dt input { - margin-top: 2px; -} - -.tab-configuration dl.features dd { - margin: 0 0 0 20px; - height: 18px; - line-height: 18px; -} - .tab-configuration .number input { width: 57px; padding-left: 3px; @@ -93,79 +65,13 @@ .tab-configuration .number .disabled { width: 50px; - /*padding: 0px 5px;*/ background-color: #ececec; } -.tab-configuration .number span { - margin-left: 0; -} - -.tab-configuration .gps .line { - clear: left; -} - -.tab-configuration .gps select { - float: left; - width: 100px; - height: 20px; - margin: 0 10px 5px 0; -} - -.tab-configuration .gps span { - line-height: 20px; -} - -.tab-configuration .serialRX { - width: 100%; - margin-bottom: 5px; -} - -.tab-configuration .nrf24Protocol { - width: 100%; - margin-bottom: 5px; -} - -.tab-configuration .disarm .checkbox { - margin-top: 2px; - margin-right: 5px; -} - -.tab-configuration .disarm .checkbox div { - margin-bottom: 0; - margin-top: 0; -} - -.tab-configuration .disarm .checkbox div input { - margin: 0; - float: left; -} - -.tab-configuration .disarm .checkbox span { - margin-left: 0; -} - -.tab-configuration .freelabel { - margin-left: 10px; - position: relative; -} - .tab-configuration input { float: left; } -.tab-configuration span { - margin: 0; -} - -.tab-configuration .disarm .checkbox { - float: left; - padding-left: 0; - padding-bottom: 5px; - border-bottom: 1px solid #ddd; - width: 100%; -} - .tab-configuration .spacer_box { padding-bottom: 10px; float: left; @@ -189,8 +95,7 @@ .tab-configuration .number, .tab-configuration .select, .tab-configuration .checkbox, -hr - { +hr { margin-bottom: 5px; clear: left; padding-bottom: 5px; @@ -201,7 +106,7 @@ hr .tab-configuration .number:last-child, .tab-configuration .select:last-child, -.tab-configuration .checkbox:last-child{ +.tab-configuration .checkbox:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; @@ -211,12 +116,6 @@ hr margin-bottom: 0; } -.tab-configuration .numberspacer { - float: left; - width: 65px; - height: 21px; -} - .tab-configuration thead { display: none; } @@ -233,59 +132,6 @@ hr margin-left: 2px; } -.tab-configuration .rssi td { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-configuration .rssi .gui_box, .tab-configuration .system .gui_box { - min-height: 145px; - float: left; -} - -.tab-configuration .mixer .gui_box, .tab-configuration .motorstop .gui_box { - min-height: 290px; - float: left; -} - -.tab-configuration .board .gui_box, .tab-configuration .acc .gui_box { - min-height: 137px; - float: left; -} - -.tab-configuration .gps .gui_box, .tab-configuration .other .gui_box { - min-height: 355px; - float: left; - margin-bottom: 10px; -} - -.tab-configuration .rxprovider { - min-height: 214px; -} - -.tab-configuration .nrf24provider { - min-height: 140px; -} - -.tab-configuration .rssi td:nth-child(2) { - width: 30px; -} - -.tab-configuration .rxFailsafe td:nth-child(2) { - width: 30px; -} - -.tab-configuration .gps td:nth-child(2) { - width: 38px; -} - -.tab-configuration .other tr:last-child td { - border-bottom: 0; - padding-bottom: 0; - margin-bottom: 0; -} - .tab-configuration .mixerPreview { max-width: 230px; background-color: #eeeeee; @@ -301,19 +147,13 @@ hr padding: 5%; } -.tab-configuration .rxMode tr:last-child td { - border-bottom: 0; - padding-bottom: 0; - margin-bottom: 0; -} - .tab-configuration .gui_box { - font-family: 'open_sanssemibold', Arial,serif; + font-family: 'open_sanssemibold', Arial, serif; } .tab-configuration .gui_box span { font-style: normal; - font-family: 'open_sansregular', Arial,serif; + font-family: 'open_sansregular', Arial, serif; line-height: 19px; color: #4F4F4F; font-size: 11px; @@ -348,71 +188,6 @@ hr margin: 0 0 2px 0; } -#mixercontent .mixerheadline { - font-size: 13px; - width: 100%; - padding-bottom: 0; - float: left; - margin-bottom: 7px; - font-family: 'open_sanssemibold', Arial,serif; -} - -#mixercontent select { - float: left; - width: 100%; - height: 20px; - margin: 3px 0 20px 0; -} - -#mixercontent input { - width: 50px; - padding-left: 3px; - height: 20px; - line-height: 20px; - text-align: left; - border: 1px solid silver; - border-radius: 3px; - margin-right: 11px; - font-size: 12px; - font-weight: normal; - -} - -#mixercontent .mixerletter { - width: 23px; - height: 23px; - background-color: #d0d0d0; - line-height: 23px; - text-align: center; - border-radius: 100px; - margin-right: 10px; - font-size: 12px; - font-weight: bold; - float: left; -} - -#mixercontent .number { - margin-bottom: 5px; - clear: left; - padding-top: 5px; - border-top: 1px solid #ddd; - width: 100%; - float: left; -} - -#mixercontent .number:last-child { - padding-top: 0; - margin-bottom: 0; -} - -#mixercontent .mixercanvas { - background-color: #f9f9f9; - border-radius: 5px; - border: 1px solid #e4e4e4; - height: 340px; - margin-top: 3px; -} - .tab-configuration .sensoralignment { width: 50%; float: left; @@ -428,35 +203,20 @@ hr float: left; } - @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { .tab-configuration .gui_box span { line-height: 17px; } + .tab-configuration .leftWrapper { width: calc(50% - 15px); } + .tab-configuration .rightWrapper { float: left; width: calc(50% - 0px); margin: 0 0 10px 15px; } - .tab-configuration .rssi .gui_box, .tab-configuration .system .gui_box { - min-height: 145px; - float: left; - } - .tab-configuration .mixer .gui_box, .tab-configuration .motorstop .gui_box { - min-height: 290px; - float: left; - } - .tab-configuration .board .gui_box, .tab-configuration .acc .gui_box { - min-height: 137px; - float: left; - } - .tab-configuration .gps .gui_box, .tab-configuration .other .gui_box { - min-height: 355px; - float: left; - } } #esc-protocols, @@ -464,36 +224,19 @@ hr display: none; } -#esc-protocols span { - display: inline-block; - width: 10em; -} - -#esc-protocols .select, -#servo-rate-container .select, -.motorstop .select, -.motorstop .checkbox, -.motorstop .number, .config-section .select, .config-section .checkbox, -.config-section .number, -.system .select, -.system .checkbox, -.system .number { +.config-section .number { position: relative; } -#esc-protocols label, -#servo-rate-container label, -.motorstop label, -.config-section label, -.system label { +.config-section label { position: absolute; left: 10em; } .esc-priority label, -.features.esc label{ +.features.esc label { position: inherit; } @@ -503,4 +246,8 @@ hr .sensors select { width: 8em; +} + +.tab-configuration .gps_ubx_sbas { + width: 8em; } \ No newline at end of file diff --git a/tabs/configuration.html b/tabs/configuration.html index ebcaaf87..b05a321c 100644 --- a/tabs/configuration.html +++ b/tabs/configuration.html @@ -134,19 +134,19 @@

-

-
-
+
@@ -157,31 +157,29 @@
- - - - - - -
-
- - +
-
- - +
-
@@ -225,7 +223,7 @@
-
+
@@ -316,7 +314,7 @@
-
+
diff --git a/tabs/configuration.js b/tabs/configuration.js index cdc829b2..a7ac4c6e 100644 --- a/tabs/configuration.js +++ b/tabs/configuration.js @@ -196,7 +196,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) { var gpsProtocols = FC.getGpsProtocols(); var gpsSbas = FC.getGpsSbasProviders(); - var gps_protocol_e = $('select.gps_protocol'); + var gps_protocol_e = $('#gps_protocol'); for (i = 0; i < gpsProtocols.length; i++) { gps_protocol_e.append(''); } @@ -207,7 +207,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) { gps_protocol_e.val(MISC.gps_type); - var gps_ubx_sbas_e = $('select.gps_ubx_sbas'); + var gps_ubx_sbas_e = $('#gps_ubx_sbas'); for (i = 0; i < gpsSbas.length; i++) { gps_ubx_sbas_e.append(''); } @@ -240,12 +240,8 @@ TABS.configuration.initialize = function (callback, scrollPosition) { //noinspection JSValidateTypes $('#content').scrollTop((scrollPosition) ? scrollPosition : 0); - var nrf24ProtocolTypes = FC.getNrf24ProtocolTypes(); - var nrf24Protocol_e = $('#nrf24-protocol'); - for (i = 0; i < nrf24ProtocolTypes.length; i++) { - nrf24Protocol_e.append(''); - } + GUI.fillSelect(nrf24Protocol_e, FC.getNrf24ProtocolTypes()); nrf24Protocol_e.change(function () { RX_CONFIG.nrf24rx_protocol = parseInt($(this).val()); @@ -261,7 +257,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) { $('input[name="board_align_yaw"]').val((BF_CONFIG.board_align_yaw / 10.0).toFixed(1)); // fill magnetometer - $('input[name="mag_declination"]').val(MISC.mag_declination); + $('#mag_declination').val(MISC.mag_declination); //fill motor disarm params and FC loop time $('input[name="autodisarmdelay"]').val(ARMING_CONFIG.auto_disarm_delay); @@ -365,28 +361,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) { var $looptime = $("#looptime"); - //TODO move this up and use in more places - var fillSelect = function ($element, values, currentValue, unit) { - if (unit == null) { - unit = ''; - } - - $element.find("*").remove(); - - for (i in values) { - if (values.hasOwnProperty(i)) { - $element.append(''); - } - } - - /* - * If current Value is not on the list, add a new entry - */ - if (currentValue != null && $element.find('[value="' + currentValue + '"]').length == 0) { - $element.append(''); - } - }; - if (semver.gte(CONFIG.flightControllerVersion, "1.4.0")) { $(".requires-v1_4").show(); @@ -412,7 +386,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) { $gyroLpf.change(function () { INAV_PID_CONFIG.gyroscopeLpf = $gyroLpf.val(); - fillSelect( + GUI.fillSelect( $looptime, FC.getLooptimes()[FC.getGyroLpfValues()[INAV_PID_CONFIG.gyroscopeLpf].tick].looptimes, FC_CONFIG.loopTime, @@ -421,7 +395,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) { $looptime.val(FC.getLooptimes()[FC.getGyroLpfValues()[INAV_PID_CONFIG.gyroscopeLpf].tick].defaultLooptime); $looptime.change(); - fillSelect($gyroFrequency, FC.getGyroFrequencies()[FC.getGyroLpfValues()[INAV_PID_CONFIG.gyroscopeLpf].tick].looptimes); + GUI.fillSelect($gyroFrequency, FC.getGyroFrequencies()[FC.getGyroLpfValues()[INAV_PID_CONFIG.gyroscopeLpf].tick].looptimes); $gyroFrequency.val(FC.getLooptimes()[FC.getGyroLpfValues()[INAV_PID_CONFIG.gyroscopeLpf].tick].defaultLooptime); $gyroFrequency.change(); }); @@ -457,7 +431,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) { /* * Async mode select */ - fillSelect($asyncMode, FC.getAsyncModes()); + GUI.fillSelect($asyncMode, FC.getAsyncModes()); $asyncMode.val(INAV_PID_CONFIG.asynchronousMode); $asyncMode.change(function () { INAV_PID_CONFIG.asynchronousMode = $asyncMode.val(); @@ -483,20 +457,20 @@ TABS.configuration.initialize = function (callback, scrollPosition) { }); $asyncMode.change(); - fillSelect($accelerometerFrequency, FC.getAccelerometerTaskFrequencies(), INAV_PID_CONFIG.accelerometerTaskFrequency, 'Hz'); + GUI.fillSelect($accelerometerFrequency, FC.getAccelerometerTaskFrequencies(), INAV_PID_CONFIG.accelerometerTaskFrequency, 'Hz'); $accelerometerFrequency.val(INAV_PID_CONFIG.accelerometerTaskFrequency); $accelerometerFrequency.change(function () { INAV_PID_CONFIG.accelerometerTaskFrequency = $accelerometerFrequency.val(); }); - fillSelect($attitudeFrequency, FC.getAttitudeTaskFrequencies(), INAV_PID_CONFIG.attitudeTaskFrequency, 'Hz'); + GUI.fillSelect($attitudeFrequency, FC.getAttitudeTaskFrequencies(), INAV_PID_CONFIG.attitudeTaskFrequency, 'Hz'); $attitudeFrequency.val(INAV_PID_CONFIG.attitudeTaskFrequency); $attitudeFrequency.change(function () { INAV_PID_CONFIG.attitudeTaskFrequency = $attitudeFrequency.val(); }); } else { - fillSelect($looptime, FC.getLooptimes()[125].looptimes, FC_CONFIG.loopTime, 'Hz'); + GUI.fillSelect($looptime, FC.getLooptimes()[125].looptimes, FC_CONFIG.loopTime, 'Hz'); $looptime.val(FC_CONFIG.loopTime); $looptime.change(function () { @@ -513,26 +487,26 @@ TABS.configuration.initialize = function (callback, scrollPosition) { $sensorBaro = $('#sensor-baro'), $sensorPitot = $('#sensor-pitot'); - fillSelect($sensorAcc, FC.getAccelerometerNames()); + GUI.fillSelect($sensorAcc, FC.getAccelerometerNames()); $sensorAcc.val(SENSOR_CONFIG.accelerometer); $sensorAcc.change(function () { SENSOR_CONFIG.accelerometer = $sensorAcc.val(); }); - fillSelect($sensorMag, FC.getMagnetometerNames()); + GUI.fillSelect($sensorMag, FC.getMagnetometerNames()); $sensorMag.val(SENSOR_CONFIG.magnetometer); $sensorMag.change(function () { SENSOR_CONFIG.magnetometer = $sensorMag.val(); }); - fillSelect($sensorBaro, FC.getBarometerNames()); + GUI.fillSelect($sensorBaro, FC.getBarometerNames()); $sensorBaro.val(SENSOR_CONFIG.barometer); $sensorBaro.change(function () { SENSOR_CONFIG.barometer = $sensorBaro.val(); }); - fillSelect($sensorPitot, FC.getPitotNames()); + GUI.fillSelect($sensorPitot, FC.getPitotNames()); $sensorPitot.val(SENSOR_CONFIG.pitot); $sensorPitot.change(function () { SENSOR_CONFIG.pitot = $sensorPitot.val(); @@ -596,7 +570,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) { BF_CONFIG.board_align_pitch = Math.round(parseFloat($('input[name="board_align_pitch"]').val()) * 10); BF_CONFIG.board_align_yaw = Math.round(parseFloat($('input[name="board_align_yaw"]').val()) * 10); - MISC.mag_declination = parseFloat($('input[name="mag_declination"]').val()); + MISC.mag_declination = parseFloat($('#mag_declination').val()); ARMING_CONFIG.auto_disarm_delay = parseInt($('input[name="autodisarmdelay"]').val()); ARMING_CONFIG.disarm_kill_switch = ~~$('input[name="disarmkillswitch"]').is(':checked'); // ~~ boolean to decimal conversion @@ -634,7 +608,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) { // track feature usage if (FC.isFeatureEnabled('RX_NRF24', features)) { - googleAnalytics.sendEvent('Setting', 'nrf24Protocol', nrf24ProtocolTypes[RX_CONFIG.nrf24rx_protocol]); + googleAnalytics.sendEvent('Setting', 'nrf24Protocol', FC.getNrf24ProtocolTypes()[RX_CONFIG.nrf24rx_protocol]); } if (FC.isFeatureEnabled('GPS', features)) {