From 0518ed6993c0df30ed53e9f0ffd21bbb840acfcd Mon Sep 17 00:00:00 2001 From: gael Date: Wed, 20 Apr 2016 01:38:23 +0200 Subject: [PATCH] Issue #74: Show battery & statuses in top bar - Battery voltage appears as a horizontal bar - Autodetection of battery type is used to calculate the bar min, max & alarm values according to the battery configuration parameters. - Color changes to red when battery level goes under the alarm setting - Armed, failsafe and Serial Link status icons below battery voltage monitor - Change calibration button contents to "Calibrating" during calibration --- _locales/en/messages.json | 9 ++ images/icons/cf_icon_armed_active.svg | 16 +++ images/icons/cf_icon_armed_grey.svg | 16 +++ images/icons/cf_icon_bat_grey.svg | 14 +++ images/icons/cf_icon_failsafe_active.svg | 14 +++ images/icons/cf_icon_failsafe_grey.svg | 18 +-- images/icons/cf_icon_link_active.svg | 18 +++ images/icons/cf_icon_link_grey.svg | 18 +++ js/msp.js | 5 + js/serial_backend.js | 140 ++++++++++++++++++----- main.css | 114 +++++++++++++++++- main.html | 15 ++- tabs/setup.css | 45 ++++++++ tabs/setup.html | 22 +++- tabs/setup.js | 9 +- 15 files changed, 433 insertions(+), 40 deletions(-) create mode 100644 images/icons/cf_icon_armed_active.svg create mode 100644 images/icons/cf_icon_armed_grey.svg create mode 100644 images/icons/cf_icon_bat_grey.svg create mode 100644 images/icons/cf_icon_failsafe_active.svg create mode 100644 images/icons/cf_icon_link_active.svg create mode 100644 images/icons/cf_icon_link_grey.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 32f9f047..d75f43ad 100755 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1620,5 +1620,14 @@ }, "failsafeKillSwitchHelp": { "message": "Set this option to make the failsafe switch, configured in the modes tab, act as a direct kill switch, bypassing the selected failsafe procedure. Note: Arming is blocked with the failsafe kill switch in the ON position" + }, + "mainHelpArmed": { + "message": "Motor Arming" + }, + "mainHelpFailsafe": { + "message": "Failsafe Mode" + }, + "mainHelpLink": { + "message": "Serial Link Status" } } diff --git a/images/icons/cf_icon_armed_active.svg b/images/icons/cf_icon_armed_active.svg new file mode 100644 index 00000000..b76fab7e --- /dev/null +++ b/images/icons/cf_icon_armed_active.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/images/icons/cf_icon_armed_grey.svg b/images/icons/cf_icon_armed_grey.svg new file mode 100644 index 00000000..7ae1904a --- /dev/null +++ b/images/icons/cf_icon_armed_grey.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/images/icons/cf_icon_bat_grey.svg b/images/icons/cf_icon_bat_grey.svg new file mode 100644 index 00000000..bbde2820 --- /dev/null +++ b/images/icons/cf_icon_bat_grey.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/images/icons/cf_icon_failsafe_active.svg b/images/icons/cf_icon_failsafe_active.svg new file mode 100644 index 00000000..e3ecd369 --- /dev/null +++ b/images/icons/cf_icon_failsafe_active.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/images/icons/cf_icon_failsafe_grey.svg b/images/icons/cf_icon_failsafe_grey.svg index dd586e1f..70dbbc49 100644 --- a/images/icons/cf_icon_failsafe_grey.svg +++ b/images/icons/cf_icon_failsafe_grey.svg @@ -1,11 +1,15 @@ - + + viewBox="28 -43 141.7 141.7" style="enable-background:new 28 -43 141.7 141.7;" xml:space="preserve"> + - + - + \ No newline at end of file diff --git a/images/icons/cf_icon_link_active.svg b/images/icons/cf_icon_link_active.svg new file mode 100644 index 00000000..edbeeef5 --- /dev/null +++ b/images/icons/cf_icon_link_active.svg @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/images/icons/cf_icon_link_grey.svg b/images/icons/cf_icon_link_grey.svg new file mode 100644 index 00000000..d2c0a027 --- /dev/null +++ b/images/icons/cf_icon_link_grey.svg @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/js/msp.js b/js/msp.js index 1129052a..baae3c19 100644 --- a/js/msp.js +++ b/js/msp.js @@ -128,6 +128,9 @@ var MSP = { ledDirectionLetters: ['n', 'e', 's', 'w', 'u', 'd'], // in LSB bit order ledFunctionLetters: ['i', 'w', 'f', 'a', 't', 'r', 'c'], // in LSB bit order + last_received_timestamp: null, + analog_last_received_timestamp: null, + supportedBaudRates: [ // 0 based index. 'AUTO', '9600', @@ -233,6 +236,7 @@ var MSP = { console.log('Unknown state detected: ' + this.state); } } + this.last_received_timestamp = Date.now(); }, process_data: function (code, message_buffer, message_length) { var data = new DataView(message_buffer, 0); // DataView (allowing us to view arrayBuffer as struct/union) @@ -330,6 +334,7 @@ var MSP = { ANALOG.mAhdrawn = data.getUint16(1, 1); ANALOG.rssi = data.getUint16(3, 1); // 0-1023 ANALOG.amperage = data.getInt16(5, 1) / 100; // A + this.analog_last_received_timestamp = Date.now(); break; case MSP_codes.MSP_RC_TUNING: var offset = 0; diff --git a/js/serial_backend.js b/js/serial_backend.js index cef54589..a3fa4afb 100755 --- a/js/serial_backend.js +++ b/js/serial_backend.js @@ -264,7 +264,9 @@ function onConnect() { port_picker.hide(); var dataflash = $('#dataflash_wrapper_global'); - dataflash.show(); + dataflash.show(); + + startLiveDataRefreshTimer(); } @@ -286,6 +288,9 @@ function onClosed(result) { var dataflash = $('#dataflash_wrapper_global'); dataflash.hide(); + + var battery = $('#quad-status_wrapper'); + battery.hide(); } function read_serial(info) { @@ -339,7 +344,7 @@ function sensor_status(sensors_detected) { if (have_sensor(sensors_detected, 'mag')) { $('.mag', e_sensor_status).addClass('on'); - $('.magicon', e_sensor_status).addClass('active'); + $('.magicon', e_sensor_status).addClass('active'); } else { $('.mag', e_sensor_status).removeClass('on'); $('.magicon', e_sensor_status).removeClass('active'); @@ -347,7 +352,7 @@ function sensor_status(sensors_detected) { if (have_sensor(sensors_detected, 'gps')) { $('.gps', e_sensor_status).addClass('on'); - $('.gpsicon', e_sensor_status).addClass('active'); + $('.gpsicon', e_sensor_status).addClass('active'); } else { $('.gps', e_sensor_status).removeClass('on'); $('.gpsicon', e_sensor_status).removeClass('active'); @@ -385,34 +390,117 @@ function highByte(num) { function lowByte(num) { return 0x00FF & num; -}function update_dataflash_global() { - var supportsDataflash = DATAFLASH.totalSize > 0; - if (supportsDataflash){ +} - $(".noflash_global").css({ - display: 'none' - }); +function update_dataflash_global() { + var supportsDataflash = DATAFLASH.totalSize > 0; + if (supportsDataflash){ - $(".dataflash-contents_global").css({ - display: 'block' - }); + $(".noflash_global").css({ + display: 'none' + }); + + $(".dataflash-contents_global").css({ + display: 'block' + }); - $(".dataflash-free_global").css({ - width: (100-(DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%", - display: 'block' - }); - $(".dataflash-free_global div").text('Dataflash: free ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize)); - } else { - $(".noflash_global").css({ - display: 'block' - }); + $(".dataflash-free_global").css({ + width: (100-(DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%", + display: 'block' + }); + $(".dataflash-free_global div").text('Dataflash: free ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize)); + } else { + $(".noflash_global").css({ + display: 'block' + }); - $(".dataflash-contents_global").css({ - display: 'none' - }); - } - + $(".dataflash-contents_global").css({ + display: 'none' + }); + } + +} + +function startLiveDataRefreshTimer() { + // live data refresh + GUI.timeout_add('data_refresh', function () { update_live_status(); }, 100); +} + +function update_live_status() { + + var statuswrapper = $('#quad-status_wrapper'); + + $(".quad-status-contents").css({ + display: 'inline-block' + }); + + if (GUI.active_tab != 'cli') { + MSP.send_message(MSP_codes.MSP_BOXNAMES, false, false); + MSP.send_message(MSP_codes.MSP_STATUS, false, false); + MSP.send_message(MSP_codes.MSP_ANALOG, false, false); } + + var active = ((Date.now() - MSP.analog_last_received_timestamp) < 300); + + for (var i = 0; i < AUX_CONFIG.length; i++) { + if (AUX_CONFIG[i] == 'ARM') { + if (bit_check(CONFIG.mode, i)) + $(".armedicon").css({ + 'background-image': 'url(images/icons/cf_icon_armed_active.svg)' + }); + else + $(".armedicon").css({ + 'background-image': 'url(images/icons/cf_icon_armed_grey.svg)' + }); + } + if (AUX_CONFIG[i] == 'FAILSAFE') { + if (bit_check(CONFIG.mode, i)) + $(".failsafeicon").css({ + 'background-image': 'url(images/icons/cf_icon_failsafe_active.svg)' + }); + else + $(".failsafeicon").css({ + 'background-image': 'url(images/icons/cf_icon_failsafe_grey.svg)' + }); + } + } + if (ANALOG != undefined) { + var nbCells = Math.floor(ANALOG.voltage / MISC.vbatmaxcellvoltage) + 1; + if (ANALOG.voltage == 0) + nbCells = 1; + + var min = MISC.vbatmincellvoltage * nbCells; + var max = MISC.vbatmaxcellvoltage * nbCells; + var warn = MISC.vbatwarningcellvoltage * nbCells; + + $(".battery-status").css({ + width: ((ANALOG.voltage - min) / (max - min) * 100) + "%", + display: 'inline-block' + }); + + if (active) { + $(".linkicon").css({ + 'background-image': 'url(images/icons/cf_icon_link_active.svg)' + }); + } else { + $(".linkicon").css({ + 'background-image': 'url(images/icons/cf_icon_link_grey.svg)' + }); + } + + if (ANALOG.voltage < warn) { + $(".battery-status").css('background-color', '#D42133'); + } else { + $(".battery-status").css('background-color', '#59AA29'); + } + + $(".battery-legend").text(ANALOG.voltage + " V"); + } + + statuswrapper.show(); + GUI.timeout_remove('data_refresh'); + startLiveDataRefreshTimer(); +} function specificByte(num, pos) { return 0x000000FF & (num >> (8 * pos)); diff --git a/main.css b/main.css index 2a2e890f..4a13a23b 100644 --- a/main.css +++ b/main.css @@ -1478,7 +1478,7 @@ dialog { margin-top: 20px; width:125px; float: right; - margin-right: 20px; + margin-right: 10px; line-height: 12px; height: 33px; border-radius: 5px; @@ -1566,6 +1566,116 @@ dialog { } + + + +/* Battery element styling*/ + +#quad-status_wrapper { + display:none; + color: white; + font-size: 10px; + margin-top: 20px; + width: 90px; + float: right; + margin-right: 20px; + line-height: 12px; + height: 67px; + border-radius: 5px; + border: 1px solid #272727; + box-shadow: 0px 1px 0px rgba(92, 92, 92, 0.5); + background-color: #434343; + background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55)); + text-shadow: 0px 1px rgba(0, 0, 0, 1.0); +} + +.quad-status-contents { + display: none; + margin-top: 14px; + margin-left: 7px; + height: 15px; + width: 40px; +} + + +.battery-legend { + display: inline; + position: relative; + top: -5px; + margin-top: 0px; + left: 0; + right: 0; + width: 40px; + text-align: left; + color: silver; + margin-left: -3px; +} + +.quad-status-contents progress::-webkit-progress-bar { + height: 12px; + background-color: #eee; +} + +.quad-status-contents progress::-webkit-progress-value { + background-color: #bcf; +} + +.battery-status { + height: 15px; + position: relative; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20); + border-radius: 2px; + background-color: #59AA29; + border-radius: 4px; +} + +.battery-icon { + background-image: url(images/icons/cf_icon_bat_grey.svg); + background-size: contain; + background-position: center; + display: inline-block; + height: 41px; + width: 60px; + transition: none; + margin-top: -5px; +} + + + +.armedicon, +.failsafeicon, +.linkicon { + float: left; + margin-left: 8px; + margin-right: 2px; + margin-top: 6px; + display: block; + height: 18px; + width: 18px; + opacity: 0.8; + background-size: contain; + background-position: center; + transition: none; +} + +.armedicon { + background-image: url(images/icons/cf_icon_armed_grey.svg); +} +.failsafeicon { + background-image: url(images/icons/cf_icon_failsafe_grey.svg); +} + +.linkicon { + background-image: url(images/icons/cf_icon_link_grey.svg); +} + +.bottomStatusIcons { + background-color: #272727; + height: 31px; +} + + + @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) { .content_wrapper { @@ -1679,4 +1789,4 @@ input { overflow-y: auto; } - } \ No newline at end of file +} \ No newline at end of file diff --git a/main.html b/main.html index 14783c82..b2c1a81b 100755 --- a/main.html +++ b/main.html @@ -132,7 +132,7 @@
-
No dataflash
chip found
+
No dataflash
chip found
  • Dataflash: free space
    @@ -172,6 +172,19 @@
+
+
+
+
+
+
+
Battery voltage
+
+
+
+
+
+
diff --git a/tabs/setup.css b/tabs/setup.css index 79796fd4..97e5e442 100644 --- a/tabs/setup.css +++ b/tabs/setup.css @@ -205,4 +205,49 @@ width: calc(75% - 20px); height: calc(100% - 218px); } +} + +#accel_calib_running { + display: none; + + width: 100%; + position: relative; + margin-bottom: 0px; + margin-top: 0px; + float: left; + + padding: 5px 0px 5px 0px; + text-align: center; + background-color: #fff; + border-radius: 4px; + border: 1px solid #59aa29; + color: #59aa29; + font-family: 'open_sanssemibold', Arial; + font-size: 12px; + line-height: 13px; + transition: all ease 0.2s; + text-decoration:none; + +} + +#mag_calib_running { + display: none; + + width: 100%; + position: relative; + margin-bottom: 0px; + margin-top: 0px; + float: left; + + padding: 5px 0px 5px 0px; + text-align: center; + background-color: #fff; + border-radius: 4px; + border: 1px solid #59aa29; + color: #59aa29; + font-family: 'open_sanssemibold', Arial; + font-size: 12px; + line-height: 13px; + transition: all ease 0.2s; + text-decoration:none; } \ No newline at end of file diff --git a/tabs/setup.html b/tabs/setup.html index 6cd32308..2af365de 100644 --- a/tabs/setup.html +++ b/tabs/setup.html @@ -9,11 +9,27 @@
- +
+ +
+ +
+
+

Calibrating...

+
+
- +
+ +
+ +
+
+

Calibrating...

+
+
diff --git a/tabs/setup.js b/tabs/setup.js index 6223cd12..b5d8084e 100755 --- a/tabs/setup.js +++ b/tabs/setup.js @@ -74,14 +74,17 @@ TABS.setup.initialize = function (callback) { GUI.interval_pause('setup_data_pull'); MSP.send_message(MSP_codes.MSP_ACC_CALIBRATION, false, false, function () { GUI.log(chrome.i18n.getMessage('initialSetupAccelCalibStarted')); + $('#accel_calib_running').show(); + $('#accel_calib_rest').hide(); }); GUI.timeout_add('button_reset', function () { GUI.interval_resume('setup_data_pull'); GUI.log(chrome.i18n.getMessage('initialSetupAccelCalibEnded')); - self.removeClass('calibrating'); + $('#accel_calib_running').hide(); + $('#accel_calib_rest').show(); }, 2000); } }); @@ -94,11 +97,15 @@ TABS.setup.initialize = function (callback) { MSP.send_message(MSP_codes.MSP_MAG_CALIBRATION, false, false, function () { GUI.log(chrome.i18n.getMessage('initialSetupMagCalibStarted')); + $('#mag_calib_running').show(); + $('#mag_calib_rest').hide(); }); GUI.timeout_add('button_reset', function () { GUI.log(chrome.i18n.getMessage('initialSetupMagCalibEnded')); self.removeClass('calibrating'); + $('#mag_calib_running').hide(); + $('#mag_calib_rest').show(); }, 30000); } });