Further work and preparation.

Placed dataflash status bar in the header but can’t figure out how to
trigger a readout on connect in serial_backend.js. Some help?

eventPage.js

@@ -10,7 +10,7 @@ function startApplication() {
         id: 'main-window',
         frame: 'chrome',
         innerBounds: {
-            minWidth: 1200, // changed from 960
+            minWidth: 1150, // changed from 960
             minHeight: 700 //  changed from 625
         }
     }, function (createdWindow) {

js/serial_backend.js

@@ -238,10 +238,21 @@ function onConnect() {
     $('#tabs ul.mode-connected').show();
 
     if ("CLFL" == CONFIG.flightControllerIdentifier){
+        
+         /* placing this elsewhere
          var documentationButton = $('#button-documentation');
         documentationButton.show();
         documentationButton.html("Documentation for "+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');
+        sensor_state.show(); 
+        */
+        
+         var flashstate = $('#header_dataflash');
+        flashstate.show();
     }
 }
 
@@ -255,8 +266,14 @@ function onClosed(result) {
     $('#tabs ul.mode-connected').hide();
     $('#tabs ul.mode-disconnected').show();
 
-    var documentationButton = $('#button-documentation');
+    
-    documentationButton.hide();
+    var flashstate = $('#header_dataflash');
+    flashstate.hide();
+    
+    /* just a thought 
+      var sensor_state = $('#sensor-status');
+    sensor_state.hide();
+    */
 }
 
 function read_serial(info) {

main.css

@@ -70,8 +70,7 @@ input[type="number"]::-webkit-inner-spin-button {
 
 #port-picker {
     float: left;
-
+    height: 105px; /* was 20px */
-    height: 20px;
     margin-bottom: 5px;
 }
 #port-picker li {
@@ -80,10 +79,8 @@ input[type="number"]::-webkit-inner-spin-button {
 #port-picker select {
     height: 20px;
     line-height: 20px;
-
     float: left;
     margin-right: 5px;
-
     border: 1px solid silver;
 }
 #port-picker #port {
@@ -106,22 +103,17 @@ input[type="number"]::-webkit-inner-spin-button {
 
 #port-picker a {
     float: left;
-
     display: block;
-
     width: 80px;
     height: 18px;
     border: 1px solid silver;
-
     line-height: 18px;
     text-align: center;
 }
 #port-picker a.connect {
     margin-right: 10px;
-
     background-color: #be2222;
     color: white;
-
     font-weight: bold;
 }
 #port-picker a.connect:hover {
@@ -136,37 +128,33 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 #port-picker input.auto_connect {
     float: left;
-
     margin-top: 4px;
 }
 #port-picker span.auto_connect {
     float: left;
-
     margin: 3px 0 0 5px;
 }
 
 #sensor-status {
     float: right;
-
     margin-right: 10px;
-
     height: 22px;
     line-height: 22px;
 }
+
+#header_dataflash { 
+	display:none; }
+
+
 #sensor-status li {
     float: left;
-
     padding: 0 12px 0 12px;
-
     height: 18px;
     line-height: 18px;
-
     color: white;
     text-align: center;
-
     border: 1px solid #c0c0c0;
     border-right: 0;
-
     background-color: #e32424;
 }
 #sensor-status li:last-child {
@@ -188,12 +176,9 @@ input[type="number"]::-webkit-inner-spin-button {
 /*  
 #button-documentation {
     float: left;
-
     padding: 0 12px 0 12px;
-
     height: 18px;
     line-height: 18px;
-
     background-color: #ffcb18;
     color: #000;
     font-weight: bold;
@@ -203,10 +188,8 @@ input[type="number"]::-webkit-inner-spin-button {
 */
 #options {
     float: right;
-
     width: 20px;
     height: 20px;
-
     background-image: url('./images/ic_settings_24px.svg');
     background-position: -1px -1px;
     background-repeat: no-repeat;
@@ -225,14 +208,10 @@ input[type="number"]::-webkit-inner-spin-button {
 #options-window {
     display: none;
     position: fixed;
-
     right: 30px;
     top: 15px;
-
     padding: 5px;
-
     line-height: 20px;
-
     border: 1px solid silver;
     background-color: white;
 }
@@ -268,9 +247,7 @@ input[type="number"]::-webkit-inner-spin-button {
     padding-top: 5px; 
     padding-bottom: 5px;
     margin-top: 0px;
-
     z-index: 10;
-
     font-weight: regular;
 }
 
@@ -284,10 +261,8 @@ input[type="number"]::-webkit-inner-spin-button {
 
 #tabs li {
 	width:100%;
-
     float: left;
     margin-right: 4px; 
-
     border: 1px solid #848484;
     border-bottom: 0;
 }
@@ -295,11 +270,8 @@ input[type="number"]::-webkit-inner-spin-button {
 #tabs li a {
 	width:100%;
     display: block;
-
     height: 15px;
-
     padding: 5px 4px;
-
     background-color: #d0d0d0;
 }
 #tabs li a:hover {
@@ -310,7 +282,6 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 #tabs li.active a {
     height: 16px;
-
     background-color: white;
 }
 #tabs li.active a:hover {
@@ -320,29 +291,20 @@ input[type="number"]::-webkit-inner-spin-button {
 #content {
     margin-top: 0px;  /* 31 */
     padding: 0px; /* 10 */
-
+    height:calc(100% - 150px); /*  (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/
-    height:100%; /*  (port picker, log, tab, status bar) was calc(100% - 171px) */
-
     background-color: white;
-
     overflow-x: hidden;
     overflow-y: auto;
-
     border: 0px solid #848484; /* 1px solid #848484; */
-
     -webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
 }
 #status-bar {
     position: fixed;
-
     bottom: 0px;
-
     width: calc(100% - 20px);
     height: 20px;
     line-height: 20px;
-
     padding: 0 10px 0 10px;
-
     border-top: 1px solid #7d7d79;
     background-color: #bfbeb5;
 }
@@ -351,12 +313,10 @@ input[type="number"]::-webkit-inner-spin-button {
 
     padding-right: 10px;
     margin-right: 10px;
-
     border-right: 1px solid #7d7d79;
 }
 #status-bar .version {
     float: right;
-
     margin: 0;
     padding: 0;
     border: 0;
@@ -367,7 +327,6 @@ input[type="number"]::-webkit-inner-spin-button {
 .data-loading {
     width: 100%;
     height: 100%;
-
     background-image: url('../images/loading-bars.svg');
     background-repeat: no-repeat;
     background-position: center 45%;
@@ -375,7 +334,6 @@ input[type="number"]::-webkit-inner-spin-button {
 .data-loading p {
     position: relative;
     top: calc(45% + 45px);
-
     text-align: center;
     font-weight: bold;
 }

main.html

@@ -114,9 +114,33 @@
                     </li>
                 </ul>
     </div>
+        
+        
+        
+        
+      
+        
+    
+    
+    
             <a id="options" href="#" i18n_title="options_title"></a>
+            
+             <div class="tab-dataflash" id="flashstate" style="width:120px; float:right; height:12px;"
+>
+    <div class="require-dataflash" id="header_dataflash">
+        <ul class="dataflash-contents" style="height:7px; margin:12px;">
+               <li class="dataflash-free" style="height:10px; text-align:left;">
+                <div class="legend" align="left" style="font-size:10px; margin-top:-40px; float:left; line-height:12px; width:100%;"></div>
+            </li>
+        </ul>
+        
+    </div>
+</div> 
+
+
+
             <div class="header-wrapper">
-                <div id="sensor-status">
+                <div id="sensor-status" class="sensor_state">
                     <ul>
                         <li class="gyro" title="Gyroscope">Gyro</li>
                         <li class="accel" title="Accelerometer">Accel</li>

tabs/dataflash.js

@@ -59,7 +59,7 @@ TABS.dataflash.initialize = function (callback) {
                 display: 'block'
             });
             
-            $(".tab-dataflash .dataflash-used div").text('Used space ' + formatFilesize(DATAFLASH.usedSize));
+            $(".tab-dataflash .dataflash-used div").text('Used space: ' + formatFilesize(DATAFLASH.usedSize));
         } else {
             $(".tab-dataflash .dataflash-used").css({
                 display: 'none'
@@ -71,7 +71,7 @@ TABS.dataflash.initialize = function (callback) {
                 width: ((DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%",
                 display: 'block'
             });
-            $(".tab-dataflash .dataflash-free div").text('Free space ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
+            $(".tab-dataflash .dataflash-free div").text('Free space: ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
         } else {
             $(".tab-dataflash .dataflash-free").css({
                 display: 'none'

tabs/sensors.js

@@ -14,7 +14,7 @@ TABS.sensors.initialize = function (callback) {
             SENSOR_DATA.accelerometer[i] = 0;
             SENSOR_DATA.gyroscope[i] = 0;
             SENSOR_DATA.magnetometer[i] = 0;
-            SENSOR_DATA.sonar[i] = 0;
+            SENSOR_DATA.sonar = 0;
             SENSOR_DATA.debug[i] = 0;
         }
     }