diff --git a/locales/en/messages.json b/locales/en/messages.json
index e5ea8382..a63ae63a 100644
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -3837,5 +3837,8 @@
},
"modeCameraChangeMode": {
"message": "CAMERA CHANGE MODE"
+ },
+ "flashTab": {
+ "message": "Update Firmware"
}
}
diff --git a/src/css/main.css b/src/css/main.css
index e490b0d4..f4034b36 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -119,7 +119,7 @@ input[type="number"]::-webkit-inner-spin-button {
}
.headerbar {
- height:110px;
+ height:115px;
width:100%;
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
}
@@ -1458,6 +1458,18 @@ dialog {
margin-left: 20px;
}
+/* firmware update button */
+.open_firmware_flasher {
+ position: relative;
+ float: right;
+ left: 0px;
+ top: 19px;
+ height: 70px;
+ width: 60px;
+ margin-right: 20px;
+ margin-left: 20px;
+}
+
.connect_b {
float: left;
}
@@ -1504,6 +1516,52 @@ dialog {
background-color: #f21212;
}
+.firmware_b {
+ float: left;
+}
+
+.firmware_b a {
+ height: 50px;
+ width: 50px;
+ border-radius: 100px;
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
+ float: left;
+ margin-left: 5px;
+ margin-bottom: 7px;
+ transition: none;
+}
+
+.firmware_b a.flash.disabled {
+ background-color: #808080;
+ pointer-events: none;
+ cursor: default;
+ }
+
+.firmware_b a.flash {
+ background-color: #ffbb00;
+ border: 1px solid #dba718;
+ background-image: url(../images/icons/cf_icon_flasher_white.svg);
+ background-repeat: no-repeat;
+ background-size: 30px;
+ background-position: center 10px;
+ transition: none;
+}
+
+.firmware_b a.flash:hover {
+ background-color: #ffcc3f;
+}
+
+.firmware_b a.flash.active {
+ background-color: #e60000;
+ border: 1px solid #fe0000;
+ background-image: url(../images/icons/cf_icon_flasher_white.svg);
+ transition: none;
+}
+
+.firmware_b a.flash.active:hover {
+ background-color: #f21212;
+}
+
.connect_state {
float: left;
height: 20px;
@@ -1516,6 +1574,18 @@ dialog {
margin-top: -1px;
}
+.flash_state {
+ float: left;
+ height: 20px;
+ width: 100%;
+ text-align: center;
+ color: #fff;
+ font-size: 12px;
+ font-family: 'open_sansregular', Arial;
+ text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
+ margin-top: -1px;
+}
+
/* fixing padding for all Tabs*/
.tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-failsafe, .tab-firmware_flasher,
.tab-gps, .tab-help, .tab-led-strip, .tab-logging, .tab-modes, .tab-motors, .tab-pid_tuning, .tab-ports, .tab-receiver,
diff --git a/src/js/main.js b/src/js/main.js
index 32291d3d..88086dee 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -78,6 +78,7 @@ function setupAnalytics(result) {
}
$('.connect_b a.connect').removeClass('disabled');
+ $('.firmware_b a.flash').removeClass('disabled');
}
//Process to execute to real start the app
@@ -149,7 +150,14 @@ function startProcess() {
return;
}
- if (GUI.allowedTabs.indexOf(tab) < 0) {
+ if (GUI.allowedTabs.indexOf(tab) < 0 && tabName == "Firmware Flasher") {
+ if (GUI.connected_to || GUI.connecting_to) {
+ $('a.connect').click();
+ } else {
+ self.disconnect();
+ }
+ $('div.open_firmware_flasher a.flash').click();
+ } else if (GUI.allowedTabs.indexOf(tab) < 0) {
GUI.log(i18n.getMessage('tabSwitchUpgradeRequired', [tabName]));
return;
}
@@ -164,6 +172,11 @@ function startProcess() {
GUI.tab_switch_in_progress = true;
GUI.tab_switch_cleanup(function () {
+ // disable active firmware flasher if it was active
+ if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').addClass('active')) {
+ $('div#flashbutton a.flash_state').removeClass('active');
+ $('div#flashbutton a.flash').removeClass('active');
+ }
// disable previously active tab highlight
$('li', ui_tabs).removeClass('active');
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 512c1b2c..de44260f 100755
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -67,6 +67,10 @@ function initializeSerialBackend() {
toggleStatus();
} else {
+ if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
+ $('div#flashbutton a.flash_state').removeClass('active');
+ $('div#flashbutton a.flash').removeClass('active');
+ }
GUI.timeout_kill_all();
GUI.interval_kill_all();
GUI.tab_switch_cleanup();
@@ -82,6 +86,23 @@ function initializeSerialBackend() {
}
});
+ $('div.open_firmware_flasher a.flash').click(function () {
+ if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
+ $('div#flashbutton a.flash_state').removeClass('active');
+ $('div#flashbutton a.flash').removeClass('active');
+ document.getElementById("tab_landing").style.display = "block";
+ document.getElementById("tab_help").style.display = "block";
+ $('#tabs ul.mode-disconnected .tab_landing a').click();
+ } else {
+ $('#tabs ul.mode-disconnected .tab_firmware_flasher a').click();
+ $('div.open_firmware_flasher a.flash_state').text(i18n.getMessage('flashTab'));
+ $('div#flashbutton a.flash_state').addClass('active');
+ $('div#flashbutton a.flash').addClass('active');
+ document.getElementById("tab_landing").style.display = "none";
+ document.getElementById("tab_help").style.display = "none";
+ }
+ });
+
// auto-connect
chrome.storage.local.get('auto_connect', function (result) {
if (result.auto_connect === 'undefined' || result.auto_connect) {
@@ -337,6 +358,10 @@ function connectCli() {
}
function onConnect() {
+ if ($('div#flashbutton a.flash_state').hasClass('active') && $('div#flashbutton a.flash').hasClass('active')) {
+ $('div#flashbutton a.flash_state').removeClass('active');
+ $('div#flashbutton a.flash').removeClass('active');
+ }
GUI.timeout_remove('connecting'); // kill connecting timer
$('div#connectbutton a.connect_state').text(i18n.getMessage('disconnect')).addClass('active');
$('div#connectbutton a.connect').addClass('active');
diff --git a/src/main.html b/src/main.html
index 7bb742b5..364c3d33 100755
--- a/src/main.html
+++ b/src/main.html
@@ -129,6 +129,12 @@
+