Renamed global dataflash components, fixed detection for global dataflash display.

js/serial_backend.js

@@ -250,21 +250,12 @@ function onConnect() {
     $('div#connectbutton a.connect_state').text(chrome.i18n.getMessage('disconnect')).addClass('active');
     $('div#connectbutton a.connect').addClass('active');
     $('#tabs ul.mode-disconnected').hide();
-    $('#tabs ul.mode-connected').show();
-
-    var sensor_state = $('#sensor-status');
-    sensor_state.show(); 
-    
-    var port_picker = $('#portsinput');
-    port_picker.hide(); 
-
-    var dataflash = $('#dataflash_wrapper');
-    dataflash.show(); 
+    $('#tabs ul.mode-connected').show(); 
      
     MSP.send_message(MSP_codes.MSP_STATUS, false, false);    
         
 // TEST code for dataflash status in header
-    MSP.send_message(MSP_codes.MSP_DATAFLASH_SUMMARY, false, false);
+    //MSP.send_message(MSP_codes.MSP_DATAFLASH_SUMMARY, false, update_html());
 
     function formatFilesize(bytes) {
         if (bytes < 1024) {
@@ -281,34 +272,45 @@ function onConnect() {
         return megabytes.toFixed(1) + "MB";
     }
     
-    function update_html() {
-        if (DATAFLASH.usedSize > 0) {
-            $(".dataflash-used").css({
-                width: (DATAFLASH.usedSize / DATAFLASH.totalSize * 100) + "%",
-                display: 'block'
-            });
-            
-            $(".dataflash-used div").text('Dataflash: used ' + formatFilesize(DATAFLASH.usedSize));
-        } else {
-            $(".dataflash-used").css({
-                display: 'none'
-            });
-        }
+    function update_dataflash_global() {
+        var supportsDataflash = DATAFLASH.totalSize > 0;
+        if (supportsDataflash){
 
-        if (DATAFLASH.totalSize - DATAFLASH.usedSize > 0) {
-            $(".dataflash-free").css({
-                width: ((DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%",
-                display: 'block'
-            });
-            $(".dataflash-free div").text('Dataflash: free ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
+             $(".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 {
-            $(".dataflash-free").css({
-                display: 'none'
-            });
-        }
+             $(".noflash_global").css({
+                 display: 'block'
+             }); 
+
+             $(".dataflash-contents_global").css({
+                 display: 'none'
+             }); 
+        }      
         
     }
-    update_html();
+    
+    MSP.send_message(MSP_codes.MSP_DATAFLASH_SUMMARY, false, update_dataflash_global);
+    
+    var sensor_state = $('#sensor-status');
+    sensor_state.show(); 
+    
+    var port_picker = $('#portsinput');
+    port_picker.hide(); 
+
+    var dataflash = $('#dataflash_wrapper_global');
+    dataflash.show();
         
         
         
@@ -335,7 +337,7 @@ function onClosed(result) {
     var port_picker = $('#portsinput');
     port_picker.show(); 
     
-    var dataflash = $('#dataflash_wrapper');
+    var dataflash = $('#dataflash_wrapper_global');
     dataflash.hide();
 
 }

main.css

@@ -1347,7 +1347,7 @@ dialog {
 }
 /* Dataflash element styling*/
 
-#dataflash_wrapper {
+#dataflash_wrapper_global {
     color:white;
     font-size:10px;
     margin-top: 20px;
@@ -1376,7 +1376,7 @@ dialog {
     line-height: 12px;
 }
 
-.dataflash-contents {
+.dataflash-contents_global {
     margin-top: 18px;
     border: 1px solid #4A4A4A;
     background-color: #4A4A4A;
@@ -1390,11 +1390,17 @@ dialog {
 }
 
 
-.dataflash-contents .notsupported {
+.dataflash-free_global {
+    background-color: #59AA29;
+    border-radius: 4px;
+}
+
+
+.dataflash-contents_global .notsupported_global {
     display: none;
 }
 
-.dataflash-contents li {
+.dataflash-contents_global li {
     height: 5px;
     position: relative;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
@@ -1402,7 +1408,7 @@ dialog {
 
 }
 
-.dataflash-contents li div {
+.dataflash-contents_global li div {
     position: absolute;
     top: -18px;
     margin-top: 0px;
@@ -1414,12 +1420,7 @@ dialog {
     color:silver;
 }
 
-.dataflash-used {
-    background-color: #59AA29;
-    border-radius: 2px;
-}
-
-.dataflash-contents progress::-webkit-progress-bar {
+.dataflash-contents_global progress::-webkit-progress-bar {
     height: 8px;
     background-color: #eee;
 }
@@ -1428,7 +1429,7 @@ dialog {
     background-color: #bcf;
 }
 
-.noflash {
+.noflash_gloabal {
     display:none;
     color: #4f4f4f;
     text-align: center;

main.html

@@ -126,13 +126,10 @@
                 </div>
             </div>
             <div class="header-wrapper">
-                <div id="dataflash_wrapper">
-            <div class="noflash" align="center">No dataflash <br>chip found</div>
-                    <ul class="dataflash-contents">
-                        <li class="dataflash-used">
-                            <div class="legend">Dataflash: used space</div>
-                        </li>
-                        <li class="dataflash-free">
+                <div id="dataflash_wrapper_global">
+            <div class="noflash_global" align="center">No dataflash <br>chip found</div>
+                    <ul class="dataflash-contents_global">
+                        <li class="dataflash-free_global">
                             <div class="legend">Dataflash: free space</div>
                         </li>
                     </ul>