Improve user experience by adding tabs for the welcome and firmware

flasher.

The welcome (aka 'landing') and firmware flasher were already modelled
as tabs but were never displayed as tabs.

The UI didn't make sense when the whether the welcome message or
firmware flasher was displayed since there was no active tab or other
indication.

_locales/en/messages.json

@@ -56,6 +56,13 @@
         "message": "Configuration migration complete, migrations applied: $1"
     },
 
+    "tabFirmwareFlasher": {
+        "message": "Firmware Flasher"
+    },
+    "tabLanding": {
+        "message": "Welcome"
+    },
+
     "tabSetup": {
         "message": "Setup"
     },
@@ -126,6 +133,9 @@
     "tabSwitchConnectionRequired": {
         "message": "You need to <strong>connect</strong> before you can view any of the tabs."
     },
+    "tabSwitchWaitForOperation": {
+        "message": "You <span style=\"color: red\">can't</span> do this right now, please wait for current operation to finish ..."
+    },    
     
     "tabSwitchUpgradeRequired": {
         "message": "You need to <strong>upgrade</strong> your firmware before you can view any of the tabs."
@@ -196,7 +206,7 @@
         "message": "Request Optional Permissions"
     },
     "defaultWelcomeText": {
-        "message": "Welcome to <strong>Cleanflight - Configurator</strong>, utility designed to simplify updating, configuring and tuning of your flight controller.<br /><br />Application supports hardware that run cleanflight (sparky, cc3d, acro naze, naze, afromini, flip32, flip32+, cjmcu, chebuzz f3, stm32f3discovery, naze32pro, etc)<br /><br />The firmware source code can be downloaded from <a href=\"https://github.com/hydra/cleanflight\" title=\"www.github.com\" target=\"_blank\">here</a><br />The newest binary firmware image is available <a href=\"https://github.com/cleanflight/cleanflight/releases\" title=\"www.github.com\" target=\"_blank\">here</a><br /><br />Latest <strong>CP210x Drivers</strong> can be downloaded from <a href=\"http://www.silabs.com/products/mcu/pages/usbtouartbridgevcpdrivers.aspx\" title=\"http://www.silabs.com/\" target=\"_blank\">here</a><br />"
+        "message": "Welcome to <strong>Cleanflight - Configurator</strong>, a utility designed to simplify updating, configuring and tuning of your flight controller.<br /><br />The application supports all hardware that can run cleanflight (sparky, cc3d, acro naze, naze, afromini, flip32, flip32+, cjmcu, chebuzz f3, stm32f3discovery, naze32pro, etc)<br /><br />The firmware source code can be downloaded from <a href=\"https://github.com/cleanflight/cleanflight\" title=\"www.github.com\" target=\"_blank\">here</a><br />The newest binary firmware image is available <a href=\"https://github.com/cleanflight/cleanflight/releases\" title=\"www.github.com\" target=\"_blank\">here</a><br /><br />Latest <strong>CP210x Drivers</strong> can be downloaded from <a href=\"http://www.silabs.com/products/mcu/pages/usbtouartbridgevcpdrivers.aspx\" title=\"http://www.silabs.com/\" target=\"_blank\">here</a><br />"
     },
     "defaultChangelogHead": {
         "message": "Configurator - Changelog"
@@ -942,9 +952,6 @@
     "firmwareFlasherFailedToLoadOnlineFirmware": {
         "message": "Failed to load remote firmware"
     },
-    "firmwareFlasherWaitForFinish": {
-        "message": "You <span style=\"color: red\">can't</span> do this right now, please wait for current operation to finish ..."
-    },
     
     "ledStripHelp": {
         "message": "The flight controller can control colors and effects of individual LEDs on a strip.<br />Configure LEDs on the grid, configure wiring order then attach LEDs on your aircraft according to grid positions."

js/gui.js

@@ -198,7 +198,11 @@ GUI_control.prototype.tab_switch_cleanup = function (callback) {
     MSP.callbacks_cleanup(); // we don't care about any old data that might or might not arrive
     GUI.interval_kill_all(); // all intervals (mostly data pulling) needs to be removed on tab switch
 
-    TABS[this.active_tab].cleanup(callback);
+    if (this.active_tab) {
+        TABS[this.active_tab].cleanup(callback);
+    } else {
+        callback();
+    }
 };
 
 // initialize object into GUI variable

js/serial_backend.js

@@ -170,7 +170,9 @@ function onOpen(openInfo) {
                                     CONFIGURATOR.connectionValid = true;
                                     
                                     $('div#port-picker a.connect').text(chrome.i18n.getMessage('disconnect')).addClass('active');
-                                    $('#tabs li a:first').click();
+                                    $('#tabs ul.mode-disconnected').hide();
+                                    $('#tabs ul.mode-connected').show();
+                                    $('#tabs ul.mode-connected li a:first').click();
                                 });
                             });
                         });
@@ -206,6 +208,9 @@ function onClosed(result) {
     } else { // Something went wrong
         GUI.log(chrome.i18n.getMessage('serialPortClosedFail'));
     }
+    $('#tabs ul.mode-disconnected').show();
+    $('#tabs ul.mode-connected').hide();
+    $('#tabs ul.mode-disconnected li a:first').click();
 }
 
 function read_serial(info) {

main.css

@@ -224,6 +224,11 @@ input[type="number"]::-webkit-inner-spin-button {
 
     font-weight: bold;
 }
+
+#tabs ul.mode-connected {
+    display: none;
+}
+
 #tabs li {
     float: left;
     margin-right: 5px;
@@ -231,6 +236,7 @@ input[type="number"]::-webkit-inner-spin-button {
     border: 1px solid #848484;
     border-bottom: 0;
 }
+
 #tabs li a {
     display: block;
 

main.html

@@ -120,7 +120,11 @@
                 </div>
             </div>
             <div id="tabs">
-                <ul>
+                <ul class="mode-disconnected">
+                    <li class="tab_landing"><a href="#" i18n="tabLanding"></a></li>
+                    <li class="tab_firmware_flasher "><a href="#" i18n="tabFirmwareFlasher"></a></li>
+                </ul>
+                <ul class="mode-connected">
                     <li class="tab_setup"><a href="#" i18n="tabSetup"></a></li>
                     <li class="tab_ports"><a href="#" i18n="tabPorts"></a></li>
                     <li class="tab_configuration"><a href="#" i18n="tabConfiguration"></a></li>

main.js

@@ -62,10 +62,18 @@ $(document).ready(function () {
             var self = this,
                 tab = $(self).parent().prop('class');
 
-            if (!CONFIGURATOR.connectionValid) {
+            var tabRequiresConnection = $(self).parent().hasClass('mode-connected');
+            
+            if (tabRequiresConnection && !CONFIGURATOR.connectionValid) {
                 GUI.log(chrome.i18n.getMessage('tabSwitchConnectionRequired'));
                 return;
             }
+            
+            if (GUI.connect_lock) { // tab switching disabled while operation is in progress
+                GUI.log(chrome.i18n.getMessage('tabSwitchWaitForOperation'));
+                return;
+            }
+            
 
             if (CONFIGURATOR.connectionValidCliOnly) {
                 GUI.log(chrome.i18n.getMessage('tabSwitchUpgradeRequired'));
@@ -93,6 +101,13 @@ $(document).ready(function () {
                 }
 
                 switch (tab) {
+                    case 'tab_landing':
+                        TABS.landing.initialize(content_ready);
+                        break;
+                    case 'tab_firmware_flasher':
+                        TABS.firmware_flasher.initialize(content_ready);
+                        break;
+
                     case 'tab_auxiliary':
                         TABS.auxiliary.initialize(content_ready);
                         break;
@@ -105,7 +120,7 @@ $(document).ready(function () {
                     case 'tab_led_strip':
                         TABS.led_strip.initialize(content_ready);
                         break;
-
+                                                
                     case 'tab_setup':
                         TABS.setup.initialize(content_ready);
                         break;
@@ -147,7 +162,7 @@ $(document).ready(function () {
         }
     });
 
-    TABS.landing.initialize();
+    $('#tabs ul.mode-disconnected li a:first').click();
 
     // options
     $('a#options').click(function () {

tabs/firmware_flasher.html

@@ -72,6 +72,5 @@
         <a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a>
         <a class="load_remote_file locked" href="#" i18n="firmwareFlasherButtonLoadOnline"></a>
         <a class="flash_firmware locked" href="#" i18n="firmwareFlasherFlashFirmware"></a>
-        <a class="back" href="#" i18n="firmwareFlasherButtonLeave"></a>
     </div>
 </div>

tabs/firmware_flasher.js

@@ -453,17 +453,6 @@ TABS.firmware_flasher.initialize = function (callback) {
             }
         });
 
-        // back button
-        $('a.back').click(function () {
-            if (!GUI.connect_lock) { // button disabled while flashing is in progress
-                GUI.tab_switch_cleanup(function () {
-                    TABS.landing.initialize();
-                });
-            } else {
-                GUI.log(chrome.i18n.getMessage('firmwareFlasherWaitForFinish'));
-            }
-        });
-
         if (callback) callback();
     });
 };

tabs/landing.css

@@ -117,24 +117,6 @@
 
     margin: auto;
 }
-.firmware_flasher {
-    display: block;
-    float: right;
-
-    height: 28px;
-    line-height: 28px;
-
-    padding: 0 15px 0 15px;
-
-    text-align: center;
-    font-weight: bold;
-
-    border: 1px solid silver;
-    background-color: #ececec;
-}
-.firmware_flasher:hover {
-    background-color: #dedcdc;
-}
 .tab-landing .sponsors {
     margin-top: 10px;
     border: 1px solid silver;

tabs/landing.html

@@ -32,7 +32,6 @@
                 <!-- changelog content will be loaded here -->
             </div>
         </div>
-        <a class="firmware_flasher" href="#" i18n="defaultButtonFirmwareFlasher"></a>
     </div>
     <div class="clear-both"></div>
 </div>

tabs/landing.js

@@ -18,11 +18,6 @@ TABS.landing.initialize = function (callback) {
         // load changelog content
         $('div.changelog.configurator .wrapper').load('./changelog.html');
 
-        // UI Hooks
-        $('a.firmware_flasher').click(function () {
-            TABS.firmware_flasher.initialize();
-        });
-
         $('div.welcome a, div.sponsors a').click(function () {
             googleAnalytics.sendEvent('ExternalUrls', 'Click', $(this).prop('href'));
         });