started to work on new GUI functionality

js/serial_backend.js

@@ -257,6 +257,103 @@ function onConnect() {
     
     var port_picker = $('#portsinput');
     port_picker.hide(); 
+
+    var dataflash = $('#dataflash_wrapper');
+    dataflash.show(); 
+    
+    
+
+// TEST code for profile change in header
+    function get_pid_controller() {
+        if (GUI.canChangePidController) {
+            MSP.send_message(MSP_codes.MSP_PID_CONTROLLER, false, false, get_pid_names);
+        } else {
+            get_pid_names();
+        }
+    }
+
+    function get_pid_names() {
+        MSP.send_message(MSP_codes.MSP_PIDNAMES, false, false, get_pid_data);
+    }
+        
+    // requesting MSP_STATUS manually because it contains CONFIG.profile
+    MSP.send_message(MSP_codes.MSP_STATUS, false, false, get_pid_controller);
+    
+        var profile_e = $('select[name="profilechange"]');
+
+        // Fill in currently selected profile
+        profile_e.val(CONFIG.profile);
+        // UI Hooks
+        profile_e.change(function () {
+            var profile = parseInt($(this).val());
+            MSP.send_message(MSP_codes.MSP_SELECT_SETTING, [profile], false, function () {
+                GUI.log(chrome.i18n.getMessage('pidTuningLoadedProfile', [profile + 1]));
+
+                GUI.tab_switch_cleanup(function () {
+
+                // < here goes the code to reinitialise the current tab
+                TABS[this.active_tab].initialize();
+
+                
+                });
+            });
+        });
+        
+// testing profile change END        
+        
+// TEST code for dataflash status in header
+        MSP.send_message(MSP_codes.MSP_DATAFLASH_SUMMARY, false, false);
+
+    function formatFilesize(bytes) {
+        if (bytes < 1024) {
+            return bytes + "B";
+        }
+        
+        var kilobytes = bytes / 1024;
+        
+        if (kilobytes < 1024) {
+            return Math.round(kilobytes) + "kB";
+        }
+        
+        var megabytes = kilobytes / 1024;
+        
+        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('Used space ' + formatFilesize(DATAFLASH.usedSize));
+        } else {
+            $(".dataflash-used").css({
+                display: 'none'
+            });
+        }
+
+        if (DATAFLASH.totalSize - DATAFLASH.usedSize > 0) {
+            $(".dataflash-free").css({
+                width: ((DATAFLASH.totalSize - DATAFLASH.usedSize) / DATAFLASH.totalSize * 100) + "%",
+                display: 'block'
+            });
+            $(".dataflash-free div").text('Free space ' + formatFilesize(DATAFLASH.totalSize - DATAFLASH.usedSize));
+        } else {
+            $(".dataflash-free").css({
+                display: 'none'
+            });
+        }
+        
+    }
+    
+    // testing dataflash change END        
+
+    
+    
+    
+    
     }
 
 function onClosed(result) {
@@ -269,11 +366,14 @@ function onClosed(result) {
     $('#tabs ul.mode-connected').hide();
     $('#tabs ul.mode-disconnected').show();
 
+    var sensor_state = $('#sensor-status');
+    sensor_state.hide();
+    
     var port_picker = $('#portsinput');
     port_picker.show(); 
     
-    var sensor_state = $('#sensor-status');
+    var dataflash = $('#dataflash_wrapper');
-    sensor_state.hide();
+    dataflash.hide();
 
 }
 

main.css

@@ -360,27 +360,6 @@ input[type="number"]::-webkit-inner-spin-button {
     background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.45));
 }
 
-/*
-#documentation-controls {
-    float: right;
-    height: 22px;
-    line-height: 22px;
-    margin-right: 10px;
-}
-
-
-#button-documentation {
-    float: left;
-    padding: 0 12px 0 12px;
-    height: 18px;
-    line-height: 18px;
-    background-color: #ffcb18;
-    color: #000;
-    font-weight: bold;
-    border: solid 1px #c0c0c0;
-    display: none;
-}
-*/
 #options {
     float: right;
     width: 20px;
@@ -885,13 +864,8 @@ dialog {
 }
 
 .content_wrapper {
-    /* leave 20px side padding always */
-    /*padding: 0 20px 0 20px;
-    for testing: */
   padding: 20px;
   position: relative;
-  /*float: left;
-  width:calc(100% - 40px);*/
 }
 
 .content_toolbar {
@@ -1097,9 +1071,6 @@ dialog {
 }
 
 .fixed_band .save_btn a {
-    /*	line-height:20px;
-	padding:3px 13px 5px 13px;
-	*/
     margin-top: 9px;
     margin-bottom: 0px;
     margin-right: 20px;
@@ -1364,11 +1335,102 @@ dialog {
     color: #fff;
     font-size: 10px;
 }
+/* Dataflash element styling*/
+
+#dataflash_wrapper {
+    color:white;
+    font-size:10px;
+    margin-top: 20px;
+    width:95px;
+    float: right;
+    margin-right: 20px;
+    line-height: 12px;
+    height: 33px;
+    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));
+    padding-top:5px;
+    display:none;
+    text-shadow: 0px 1px rgba(0, 0, 0, 1.0);
+
+}
+
+#profile_change {
+    color:white;
+    margin-top: 16px;
+    width:95px;
+    float: right;
+    margin-right: 0px;
+    line-height: 12px;
+}
+
+.dataflash-contents {
+    margin-top: 18px;
+    border: 1px solid #4A4A4A;
+    background-color: #4A4A4A;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    border-radius: 3px;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+
+.dataflash-contents .notsupported {
+    display: none;
+}
+
+.dataflash-contents li {
+    height: 6px;
+    position: relative;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
+    border-radius: 4px;
+
+}
+
+.dataflash-contents li div {
+    position: absolute;
+    top: -18px;
+    margin-top: 0px;
+    text-align: center;
+    left: 0;
+    right: 0;
+    width:90px;
+    text-align:left;
+    color:silver;
+}
+
+.dataflash-used {
+    background-color: #59AA29;
+    border-radius: 4px;
+}
+
+progress::-webkit-progress-bar {
+    height: 8px;
+    background-color: #eee;
+}
+
+progress::-webkit-progress-value {
+    background-color: #bcf;
+}
+
+.noflash {
+    display:none;
+    color: #4f4f4f;
+    text-align: center;
+    text-shadow: 0px 1px rgba(0, 0, 0, 1.0);
+    margin-top:2px;
+}
+
+
 
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
     .content_wrapper {
         padding: 15px;
-  /*width:calc(100% - 30px);*/
 }
     .tab_title {
         font-size: 16px;

main.html

@@ -126,6 +126,28 @@
                 </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">Used space</div>
+                        </li>
+                        <li class="dataflash-free">
+                            <div class="legend">Free space</div>
+                        </li>
+                    </ul>
+                    <div id="profile_change">
+                        <div class="dropdown dropdown-dark">
+                                <form name="pid-tuning" id="pid-tuning">
+                            <select class="dropdown-select" name="profilechange">
+                            <option value="0">Profile 1</option>
+                            <option value="1">Profile 2</option>
+                            <option value="2">Profile 3</option>
+                            </select>
+                            </form>
+                        </div>
+                    </div>
+                </div>
                 <div id="sensor-status" class="sensor_state mode-connected">
                     <ul>
                         <li class="gyro" title="Gyroscope">

tabs/dataflash.css

@@ -98,6 +98,8 @@
     text-align: center;
     left: 0;
     right: 0;
+    width: 100%;
+    color: black;
 }
 
 .tab-dataflash .dataflash-used {

tabs/dataflash.js

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