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?
9 years ago · b0b8cc00d7
parent 10f7cdd1b0
commit b0b8cc00d7
6 changed files with 60 additions and 61 deletions
--- a/eventPage.js
+++ b/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) {
--- a/js/serial_backend.js
+++ b/js/serial_backend.js
@ -238,10 +238,21 @@ function onConnect() {
    $('#tabs ul.mode-connected').show();

    if ("CLFL" == CONFIG.flightControllerIdentifier){
-        var documentationButton = $('#button-documentation');
+        
+         /* 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) {
--- a/main.css
+++ b/main.css
@ -70,8 +70,7 @@ input[type="number"]::-webkit-inner-spin-button {

 #port-picker {
    float: left;
-
-    height: 20px;
+    height: 105px; /* was 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;
 }

@ -283,11 +260,9 @@ input[type="number"]::-webkit-inner-spin-button {
 }

 #tabs li {
-		width:100%;
-
+	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:100%; /*  (port picker, log, tab, status bar) was calc(100% - 171px) */
-
+    height:calc(100% - 150px); /*  (port picker 105px, log 25px, tab 0px, status bar: 20px) - 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;
 }
--- a/main.html
+++ b/main.html
@ -113,10 +113,34 @@
                        </label>
                    </li>
                </ul>
-            </div>
+    </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>
@ -127,8 +151,8 @@
                    </ul>
                </div>
                <div id="documentation-controls">
-                    <ul>
-                        <li><a id="button-documentation" href="#" target="_blank"></a></li>
+        <ul>
+        <li><a id="button-documentation" href="#" target="_blank"></a></li>
                    </ul>
                </div>
            </div>
--- a/tabs/dataflash.js
+++ b/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'
--- a/tabs/sensors.js
+++ b/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;
        }
    }