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

Display header elements depending on connection state

Browse source
This commit is contained in:
skaman82 2015-11-02 11:56:18 +01:00
parent ae41a52c46
commit d2be1715e5
4 changed files with 44 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

2
_locales/en/messages.json
View file

@ -627,7 +627,7 @@
"message": "PID Controller" "message": "PID Controller"
}, },
"pidTuningLoadedProfile": { "pidTuningLoadedProfile": {
"message": "Loaded Profile: <strong>$1</strong>" "message": "<span style=\"color: #57a929\">Loaded Profile: <strong>$1</strong></span>"
}, },
"pidTuningDataRefreshed": { "pidTuningDataRefreshed": {
"message": "PID data <strong>refreshed</strong>" "message": "PID data <strong>refreshed</strong>"

38
js/serial_backend.js
View file

@ -25,7 +25,7 @@ $(document).ready(function () {
GUI.updateManualPortVisibility(); GUI.updateManualPortVisibility();
}); });
$('div#port-picker a.connect').click(function () { $('a.connect').click(function () {
if (GUI.connect_lock != true) { // GUI control overrides the user control if (GUI.connect_lock != true) { // GUI control overrides the user control
var clicks = $(this).data('clicks'); var clicks = $(this).data('clicks');
@ -41,7 +41,7 @@ $(document).ready(function () {
// lock port select & baud while we are connecting / connected // lock port select & baud while we are connecting / connected
$('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', true); $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', true);
$('div#port-picker a.connect_state').text(chrome.i18n.getMessage('connecting')); $('a.connect_state').text(chrome.i18n.getMessage('connecting'));
serial.connect(selected_port, {bitrate: selected_baud}, onOpen); serial.connect(selected_port, {bitrate: selected_baud}, onOpen);
@ -70,8 +70,8 @@ $(document).ready(function () {
if (!GUI.auto_connect) $('div#port-picker #baud').prop('disabled', false); if (!GUI.auto_connect) $('div#port-picker #baud').prop('disabled', false);
// reset connect / disconnect button // reset connect / disconnect button
$('div#port-picker a.connect').removeClass('active'); $('a.connect').removeClass('active');
$('div#port-picker a.connect_state').text(chrome.i18n.getMessage('connect')); $('a.connect_state').text(chrome.i18n.getMessage('connect'));
// reset active sensor indicators // reset active sensor indicators
sensor_status(0); sensor_status(0);
@ -186,7 +186,7 @@ function onOpen(openInfo) {
if (!CONFIGURATOR.connectionValid) { if (!CONFIGURATOR.connectionValid) {
GUI.log(chrome.i18n.getMessage('noConfigurationReceived')); GUI.log(chrome.i18n.getMessage('noConfigurationReceived'));
$('div#port-picker a.connect').click(); // disconnect $('a.connect').click(); // disconnect
} }
}, 10000); }, 10000);
@ -247,21 +247,21 @@ function onOpen(openInfo) {
console.log('Failed to open serial port'); console.log('Failed to open serial port');
GUI.log(chrome.i18n.getMessage('serialPortOpenFail')); GUI.log(chrome.i18n.getMessage('serialPortOpenFail'));
$('div#port-picker a.connect_state').text(chrome.i18n.getMessage('connect')); $('a.connect_state').text(chrome.i18n.getMessage('connect'));
$('div#port-picker a.connect').removeClass('active'); $('a.connect').removeClass('active');
// unlock port select & baud // unlock port select & baud
$('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', false); $('div#port-picker #port, div#port-picker #baud, div#port-picker #delay').prop('disabled', false);
// reset data // reset data
$('div#port-picker a.connect').data("clicks", false); $('a.connect').data("clicks", false);
} }
} }
function onConnect() { function onConnect() {
GUI.timeout_remove('connecting'); // kill connecting timer GUI.timeout_remove('connecting'); // kill connecting timer
$('a.connect_state').text(chrome.i18n.getMessage('disconnect')).addClass('active'); $('a.connect_state').text(chrome.i18n.getMessage('disconnect')).addClass('active');
$('div#port-picker a.connect').addClass('active'); $('a.connect').addClass('active');
$('#tabs ul.mode-disconnected').hide(); $('#tabs ul.mode-disconnected').hide();
$('#tabs ul.mode-connected').show(); $('#tabs ul.mode-connected').show();
@ -274,13 +274,12 @@ function onConnect() {
documentationButton.attr("href","https://github.com/cleanflight/cleanflight/tree/v{0}/docs".format(CONFIG.flightControllerVersion)); documentationButton.attr("href","https://github.com/cleanflight/cleanflight/tree/v{0}/docs".format(CONFIG.flightControllerVersion));
*/ */
/* just a thought /* */
var sensor_state = $('#sensor-status'); var sensor_state = $('#sensor-status');
sensor_state.show(); sensor_state.show();
*/
var flashstate = $('#header_dataflash'); var port_picker = $('#port-picker');
flashstate.show(); port_picker.hide();
} }
} }
@ -294,14 +293,13 @@ function onClosed(result) {
$('#tabs ul.mode-connected').hide(); $('#tabs ul.mode-connected').hide();
$('#tabs ul.mode-disconnected').show(); $('#tabs ul.mode-disconnected').show();
var port_picker = $('#port-picker');
port_picker.show();
var flashstate = $('#header_dataflash'); /* */
flashstate.hide(); var sensor_state = $('#sensor-status');
/* just a thought
var sensor_state = $('#sensor-status');
sensor_state.hide(); sensor_state.hide();
*/
} }
function read_serial(info) { function read_serial(info) {

25
main.css
View file

@ -134,9 +134,10 @@ input[type="number"]::-webkit-inner-spin-button {
} }
#port-picker { #port-picker {
float: left; float: left;
margin-top: 20px; margin-top: 20px;
width:240px; margin-left:30px;
width:180px;
} }
/* /*
@ -225,7 +226,7 @@ input[type="number"]::-webkit-inner-spin-button {
color:#ddd; color:#ddd;
position:absolute; position:absolute;
margin-top:-59px; margin-top:-59px;
margin-left:-183px; margin-left:187px;
} }
@ -606,6 +607,10 @@ input[type="number"]::-webkit-inner-spin-button {
} }
.header-wrapper .mode-connected {
display:none;
}
#tabs ul.mode-connected { #tabs ul.mode-connected {
display: none; display: none;
} }
@ -1309,11 +1314,12 @@ dialog {
.connect_controls { .connect_controls {
position: absolute; position: relative;
left: 620px; float: left;
top: 19px; left: 0px;
height: 70px; top: 19px;
width: 60px; height: 70px;
width: 60px;
} }
@ -1372,6 +1378,7 @@ dialog {
font-size:12px; font-size:12px;
font-family: 'open_sansregular', Arial; font-family: 'open_sansregular', Arial;
text-shadow:0px 1px rgba(0, 0, 0, 0.25); text-shadow:0px 1px rgba(0, 0, 0, 0.25);
margin-top: -1px;
} }

14
main.html
View file

@ -81,6 +81,12 @@
<div id="main-wrapper"> <div id="main-wrapper">
<div class="headerbar"> <div class="headerbar">
<div id="logo"></div> <div id="logo"></div>
<div class="connect_controls">
<div class="connect_b">
<a class="connect" href="#"></a>
</div>
<a class="connect_state" i18n="connect"></a>
</div>
<div id="port-picker"> <div id="port-picker">
<div class="dropdown dropdown-dark" style="margin-bottom:3px;"> <div class="dropdown dropdown-dark" style="margin-bottom:3px;">
<select class="dropdown-select" id="port" title="Port"> <select class="dropdown-select" id="port" title="Port">
@ -107,17 +113,11 @@
</div> </div>
<div> <div>
<label><input class="auto_connect" type="checkbox" id="togglesmall" /><span class="auto_connect" i18n="autoConnect"></span></label> <label><input class="auto_connect" type="checkbox" id="togglesmall" /><span class="auto_connect" i18n="autoConnect"></span></label>
<div class="connect_controls">
<div class="connect_b">
<a class="connect" href="#"></a>
</div>
<a class="connect_state" i18n="connect"></a>
</div>
</div> </div>
</div> </div>
<a id="options" href="#" i18n_title="options_title"></a> <a id="options" href="#" i18n_title="options_title"></a>
<div class="header-wrapper"> <div class="header-wrapper">
<div id="sensor-status" class="sensor_state"> <div id="sensor-status" class="sensor_state mode-connected">
<ul> <ul>
<li class="gyro" title="Gyroscope"> <li class="gyro" title="Gyroscope">
<div class="gyroicon">Gyro</div> <div class="gyroicon">Gyro</div>