Merge branch 'blackbox-flash' of

https://github.com/sherlockflight/cleanflight-configurator-dev into
sherlockflight-blackbox-flash

Conflicts:
	_locales/en/messages.json

_locales/en/messages.json

@@ -102,7 +102,9 @@
     "tabLogging": {
         "message": "Logging"
     },
-
+    "tabDataflash": {
+        "message": "Dataflash"
+    },
     "tabAdjustments": {
         "message": "Adjustments"
     },
@@ -846,6 +848,45 @@
         "message": "Automatically loaded previous log file: <strong>$1</strong>"
     },
 
+    "dataflashNote": {
+        "message": "Blackbox flight logs can be recorded to your flight controller's onboard dataflash chip."
+    },
+    "dataflashNotSupportedNote": {
+        "message": "Your flight controller does not have a compatible dataflash chip available."
+    },
+    "dataflashButtonSaveFile": {
+        "message": "Save flash to file..."
+    },
+    "dataflashButtonErase": {
+        "message": "Erase flash"
+    },
+    "dataflashConfirmEraseTitle": {
+        "message": "Confirm dataflash erase"
+    },
+    "dataflashConfirmEraseNote": {
+        "message": "This will erase any Blackbox logs or other data contained in the dataflash which will take about 20 seconds, are you sure?"
+    },
+    "dataflashSavingTitle": {
+        "message": "Saving dataflash to file"
+    },
+    "dataflashSavingNote": {
+        "message": "Saving could take several minutes, please wait."
+    },
+    "dataflashSavingNoteAfter": {
+        "message": "Save completed! Press \"Ok\" to continue."
+    },
+    "dataflashButtonSaveCancel": {
+        "message": "Cancel"
+    },
+    "dataflashButtonSaveDismiss": {
+        "message": "Ok"
+    },
+    "dataflashButtonEraseConfirm": {
+        "message": "Yes, erase dataflash"
+    },
+    "dataflashButtonEraseCancel": {
+        "message": "Cancel"
+    },
     "firmwareFlasherReleaseSummaryHead": {
         "message": "Release info"
     },

js/data_storage.js

@@ -149,3 +149,10 @@ var MISC = {
     vbatmaxcellvoltage:     0,
     vbatwarningcellvoltage: 0
 };
+
+var DATAFLASH = {
+    ready: false,
+    sectors: 0,
+    totalSize: 0,
+    usedSize: 0
+};

js/gui.js

@@ -25,6 +25,7 @@ var GUI_control = function () {
         'gps',
         'led_strip',
         'logging', 
+        'dataflash',
         'modes',
         'motors',
         'pid_tuning',

js/msp.js

@@ -22,6 +22,9 @@ var MSP_codes = {
     MSP_SONAR:                  58,
     MSP_PID_CONTROLLER:         59,
     MSP_SET_PID_CONTROLLER:     60,
+    MSP_DATAFLASH_SUMMARY:      70,
+    MSP_DATAFLASH_READ:         71,
+    MSP_DATAFLASH_ERASE:        72,
 
     // Multiwii MSP commands
     MSP_IDENT:              100,
@@ -671,8 +674,26 @@ var MSP = {
             case MSP_codes.MSP_SET_LED_STRIP_CONFIG:
                 console.log('Led strip config saved');
                 break;
-
+            case MSP_codes.MSP_DATAFLASH_SUMMARY:
-
+                if (data.byteLength >= 13) {
+                    DATAFLASH.ready = (data.getUint8(0) & 1) != 0;
+                    DATAFLASH.sectors = data.getUint32(1, 1);
+                    DATAFLASH.totalSize = data.getUint32(5, 1);
+                    DATAFLASH.usedSize = data.getUint32(9, 1);
+                } else {
+                    // Firmware version too old to support MSP_DATAFLASH_SUMMARY
+                    DATAFLASH.ready = false;
+                    DATAFLASH.sectors = 0;
+                    DATAFLASH.totalSize = 0;
+                    DATAFLASH.usedSize = 0;
+                }
+                break;
+            case MSP_codes.MSP_DATAFLASH_READ:
+                // No-op, let callback handle it
+                break;
+            case MSP_codes.MSP_DATAFLASH_ERASE:
+                console.log("Data flash erase begun...");
+                break;
             case MSP_codes.MSP_SET_MODE_RANGE:
                 console.log('Mode range saved');
                 break;
@@ -798,6 +819,9 @@ var MSP = {
     }
 };
 
+/**
+ * Encode the request body for the MSP request with the given code and return it as an array of bytes.
+ */
 MSP.crunch = function (code) {
     var buffer = [];
 
@@ -959,6 +983,27 @@ MSP.crunch = function (code) {
     return buffer;
 };
 
+/**
+ * Send a request to read a block of data from the dataflash at the given address and pass that address and a dataview
+ * of the returned data to the given callback (or null for the data if an error occured).
+ */
+MSP.dataflashRead = function(address, onDataCallback) {
+    MSP.send_message(MSP_codes.MSP_DATAFLASH_READ, [address & 0xFF, (address >> 8) & 0xFF, (address >> 16) & 0xFF, (address >> 24) & 0xFF], 
+            false, function(response) {
+        var chunkAddress = response.data.getUint32(0, 1);
+        
+        // Verify that the address of the memory returned matches what the caller asked for
+        if (chunkAddress == address) {
+            /* Strip that address off the front of the reply and deliver it separately so the caller doesn't have to
+             * figure out the reply format:
+             */
+            onDataCallback(address, new DataView(response.data.buffer, response.data.byteOffset + 4, response.data.buffer.byteLength - 4));
+        } else {
+            // Report error
+            onDataCallback(address, null);
+        }
+    });
+} ;
 
 MSP.sendModeRanges = function(onCompleteCallback) {
     var nextFunction = send_next_mode_range; 

main.css

@@ -353,3 +353,14 @@ input[type="number"]::-webkit-inner-spin-button {
     text-align: center;
     font-weight: bold;
 }
+
+dialog {
+    background-color: white;
+    padding: 1em;
+    height: auto;
+    margin: auto auto;
+    position: absolute;
+    width: 50%;
+    border-radius: 5px;
+    border: 1px solid silver;
+}

main.html

@@ -23,6 +23,7 @@
         <link type="text/css" rel="stylesheet" href="./tabs/sensors.css" media="all" />
         <link type="text/css" rel="stylesheet" href="./tabs/cli.css" media="all" />
         <link type="text/css" rel="stylesheet" href="./tabs/logging.css" media="all" />
+        <link type="text/css" rel="stylesheet" href="./tabs/dataflash.css" media="all" />
         <link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
 
         <link type="text/css" rel="stylesheet" href="./tabs/adjustments.css" media="all" />
@@ -70,6 +71,7 @@
         <script type="text/javascript" src="./tabs/sensors.js"></script>
         <script type="text/javascript" src="./tabs/cli.js"></script>
         <script type="text/javascript" src="./tabs/logging.js"></script>
+        <script type="text/javascript" src="./tabs/dataflash.js"></script>
         <script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
     </head>
     <body>
@@ -148,6 +150,7 @@
                     <li class="tab_led_strip"><a href="#" i18n="tabLedStrip"></a></li>
                     <li class="tab_sensors"><a href="#" i18n="tabRawSensorData"></a></li>
                     <li class="tab_logging"><a href="#" i18n="tabLogging"></a></li>
+                    <li class="tab_dataflash"><a href="#" i18n="tabDataflash"></a></li>
                     <li class="tab_cli"><a href="#" i18n="tabCLI"></a></li>
                 </ul>
                 <div class="clear-both"></div>

main.js

@@ -153,6 +153,9 @@ $(document).ready(function () {
                     case 'logging':
                         TABS.logging.initialize(content_ready);
                         break;
+                    case 'dataflash':
+                        TABS.dataflash.initialize(content_ready);
+                        break;
                     case 'cli':
                         TABS.cli.initialize(content_ready);
                         break;

tabs/dataflash.css

@@ -0,0 +1,192 @@
+.tab-dataflash .info {
+    margin: 0 0 10px 0;
+    position: relative;
+}
+.tab-dataflash .info .progressLabel {
+    position: absolute;
+
+    width: 100%;
+    height: 26px;
+
+    top: 0;
+    left: 0;
+
+    text-align: center;
+    line-height: 24px;
+
+    color: white;
+    font-weight: bold;
+
+    /* text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.9);*/
+}
+.tab-dataflash .note {
+    padding: 5px;
+    border: 1px dashed silver;
+    margin-bottom: 8px;
+}
+.tab-dataflash .properties {
+    margin-top: 10px;
+}
+.tab-dataflash .dataflash-info {
+    overflow:hidden;
+}
+.tab-dataflash .dataflash-info dt {
+    float: left;
+    width: 12em;
+    height: 20px;
+    line-height: 20px;
+
+    font-weight: bold;
+}
+.tab-dataflash .dataflash-info dd {
+    display: block;
+    height: 20px;
+    line-height: 20px;
+}
+.tab-dataflash .speed {
+    margin-top: 5px;
+    width: 80px;
+
+    border: 1px solid silver;
+}
+.tab-dataflash .info {
+    margin-top: 10px;
+}
+.tab-dataflash .info dt {
+    float: left;
+    width: 120px;
+    height: 20px;
+    line-height: 20px;
+
+    font-weight: bold;
+}
+.tab-dataflash .info dd {
+    display: block;
+    margin-left: 130px;
+    height: 20px;
+    line-height: 20px;
+}
+.tab-dataflash .buttons {
+    width: calc(100% - 20px);
+
+    position: absolute;
+    bottom: 10px;
+}
+.tab-dataflash .buttons a {
+    display: block;
+    float: right;
+
+    margin-left: 10px;
+
+    height: 28px;
+    line-height: 28px;
+
+    padding: 0 15px 0 15px;
+
+    text-align: center;
+    font-weight: bold;
+
+    border: 1px solid silver;
+    background-color: #ececec;
+}
+.tab-dataflash .buttons a:hover {
+    background-color: #dedcdc;
+}
+.tab-dataflash .buttons a.disabled {
+    cursor: default;
+    color: #999;
+    pointer-events: none;
+}
+.tab-dataflash .dataflash-progress {
+    display: none;
+}
+.tab-dataflash .dataflash-contents {
+    margin:9px 16px;
+    
+    border:1px solid silver;
+    background-color:#eee;
+
+    display:flex;
+    flex-direction:row;
+    flex-wrap:nowrap;
+    justify-content:flex-start;
+    
+    border-radius:6px;
+}
+.tab-dataflash .dataflash-contents li {
+    height:26px;
+    position:relative;
+}
+.tab-dataflash .dataflash-contents li div {
+    position:absolute;
+    top:26px;
+    margin-top:4px;
+    text-align:center;
+    left: 0;
+    right: 0;
+}
+.tab-dataflash .dataflash-used {
+    background-color:#bcf;
+}
+.tab-dataflash progress::-webkit-progress-bar {
+    height:24px;
+    background-color:#eee;
+}
+.tab-dataflash progress::-webkit-progress-value {
+    background-color:#bcf;
+}
+
+.tab-dataflash dialog {
+    width:40em;
+}
+.tab-dataflash dialog .buttons {
+    position:static;
+    margin-top: 2em;
+    overflow: hidden;
+    width:auto;
+}
+.tab-dataflash dialog h3 {
+    margin-bottom: 0.5em;
+}
+
+.dataflash-confirm-erase .dataflash-erase-progress {
+    height:125px;
+    display:none;
+}
+.dataflash-confirm-erase.erasing .dataflash-erase-progress {
+    display:block;
+}
+.dataflash-confirm-erase.erasing h3,
+.dataflash-confirm-erase.erasing .erase-flash-confirm,
+.dataflash-confirm-erase.erasing .dataflash-confirm-erase-note {
+    display:none;
+}
+
+.tab-dataflash progress {
+    display:block;
+    width:100%;
+    margin:1em 0;
+}
+
+.dataflash-saving .dataflash-saving-after {
+    display:none;
+}
+.dataflash-saving.done .dataflash-saving-before {
+    display:none;
+}
+.dataflash-saving.done .dataflash-saving-after {
+    display:block;
+}
+
+.require-dataflash {
+    display:none;
+}
+.tab-dataflash.supported .require-dataflash {
+    display:block;
+}
+.require-no-dataflash {
+    display:block;
+}
+.tab-dataflash.supported .require-no-dataflash {
+    display:none;
+}

tabs/dataflash.html

@@ -0,0 +1,66 @@
+<div class="tab-dataflash">
+    <div class="require-dataflash">
+        <div class="note" i18n="dataflashNote">
+        </div>
+        
+        <dialog class="dataflash-confirm-erase">
+            <h3 i18n="dataflashConfirmEraseTitle"></h3>
+            <div class="dataflash-confirm-erase-note" i18n="dataflashConfirmEraseNote">
+            </div>
+            
+            <div class="dataflash-erase-progress">
+                <div class="data-loading">
+                    <p>Erase in progress, please wait...</p>
+                </div>
+            </div>
+            
+            <div class="buttons">
+                <a href="#" class="erase-flash-cancel" i18n="dataflashButtonEraseCancel"></a>
+                <a href="#" class="erase-flash-confirm" i18n="dataflashButtonEraseConfirm"></a>
+            </div>
+        </dialog>
+        
+        <dialog class="dataflash-saving">
+            <h3 i18n="dataflashSavingTitle"></h3>
+            <div class="dataflash-saving-before">
+                <div i18n="dataflashSavingNote">
+                </div>
+                
+                <progress value="0" min="0" max="100"></progress>
+                
+                <div class="buttons">
+                    <a href="#" class="save-flash-cancel" i18n="dataflashButtonSaveCancel"></a>
+                </div>
+            </div>
+            <div class="dataflash-saving-after">
+                <div i18n="dataflashSavingNoteAfter">
+                </div>
+                
+                <div class="buttons">
+                    <a href="#" class="save-flash-dismiss" i18n="dataflashButtonSaveDismiss"></a>
+                </div>
+            </div>
+        </dialog>
+    
+        <h3>Dataflash contents</h3>
+        <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 class="buttons">
+            <a href="#" class="erase-flash" i18n="dataflashButtonErase"></a>
+            <a href="#" class="save-flash" i18n="dataflashButtonSaveFile"></a>
+        </div>
+    </div>
+    <div class="note require-no-dataflash" i18n="dataflashNotSupportedNote">
+    </div>
+</div>

tabs/dataflash.js

@@ -0,0 +1,240 @@
+'use strict';
+
+TABS.dataflash = {};
+TABS.dataflash.initialize = function (callback) {
+    var 
+        self = this,
+        saveCancelled, eraseCancelled;
+
+    if (GUI.active_tab != 'dataflash') {
+        GUI.active_tab = 'dataflash';
+        googleAnalytics.sendAppView('dataflash');
+    }
+
+    var 
+        requested_properties = [],
+        samples = 0,
+        requests = 0,
+        log_buffer = [];
+
+    if (CONFIGURATOR.connectionValid) {
+        MSP.send_message(MSP_codes.MSP_DATAFLASH_SUMMARY, false, false, function() {
+            $('#content').load("./tabs/dataflash.html", function() {
+                create_html();
+            });
+        });
+    }
+    
+    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) {
+            $(".tab-dataflash .dataflash-used").css({
+                width: (DATAFLASH.usedSize / DATAFLASH.totalSize * 100) + "%",
+                display: 'block'
+            });
+            
+            $(".tab-dataflash .dataflash-used div").text('Used space ' + formatFilesize(DATAFLASH.usedSize));
+        } else {
+            $(".tab-dataflash .dataflash-used").css({
+                display: 'none'
+            });
+        }
+
+        if (DATAFLASH.totalSize - DATAFLASH.usedSize > 0) {
+            $(".tab-dataflash .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));
+        } else {
+            $(".tab-dataflash .dataflash-free").css({
+                display: 'none'
+            });
+        }
+        
+        $(".tab-dataflash a.erase-flash, .tab-dataflash a.save-flash").toggleClass("disabled", DATAFLASH.usedSize == 0);
+    }
+    
+    function create_html() {
+        var
+            supportsDataflash = DATAFLASH.totalSize > 0;
+        
+        // translate to user-selected language
+        localize();
+
+        $(".tab-dataflash").toggleClass("supported", supportsDataflash);
+        
+        if (supportsDataflash) {
+            // UI hooks
+            $('.tab-dataflash a.erase-flash').click(ask_to_erase_flash);
+            
+            $('.tab-dataflash a.erase-flash-confirm').click(flash_erase);
+            $('.tab-dataflash a.erase-flash-cancel').click(flash_erase_cancel);
+    
+            $('.tab-dataflash a.save-flash').click(flash_save_begin);
+            $('.tab-dataflash a.save-flash-cancel').click(flash_save_cancel);
+            $('.tab-dataflash a.save-flash-dismiss').click(dismiss_saving_dialog);
+            
+            update_html();
+        }
+        
+        if (callback) callback();
+    }
+    
+    // IO related methods
+    function zeroPad(value, width) {
+        value = "" + value;
+        
+        while (value.length < width) {
+            value = "0" + value;
+        }
+        
+        return value;
+    }
+    
+    function flash_save_cancel() {
+        saveCancelled = true;
+    }
+    
+    function show_saving_dialog() {
+        $(".dataflash-saving progress").attr("value", 0);
+        saveCancelled = false;
+        $(".dataflash-saving").removeClass("done");
+        
+        $(".dataflash-saving")[0].showModal();
+    }
+    
+    function dismiss_saving_dialog() {
+        $(".dataflash-saving")[0].close();
+    }
+    
+    function mark_saving_dialog_done() {
+        $(".dataflash-saving").addClass("done");
+    }
+    
+    function flash_save_begin() {
+        var
+            maxBytes = DATAFLASH.usedSize;
+        
+        if (GUI.connected_to) {
+            prepare_file(function(fileWriter) {
+                var
+                    nextAddress = 0;
+                
+                show_saving_dialog();
+                
+                function onChunkRead(chunkAddress, chunkDataView) {
+                    // If we didn't get a zero-byte chunk (indicating end-of-file), request more
+                    if (chunkDataView.byteLength > 0) {
+                        nextAddress += chunkDataView.byteLength;
+                        
+                        $(".dataflash-saving progress").attr("value", nextAddress / maxBytes * 100);
+
+                        var 
+                            blob = new Blob([chunkDataView]);
+                        
+                        fileWriter.write(blob);
+
+                        if (saveCancelled || nextAddress >= maxBytes) {
+                            if (saveCancelled) {
+                                dismiss_saving_dialog();
+                            } else {
+                                mark_saving_dialog_done();
+                            }
+                        } else {
+                            MSP.dataflashRead(nextAddress, onChunkRead);
+                        }
+                    } else {
+                        mark_saving_dialog_done();
+                    }
+                }
+                
+                MSP.dataflashRead(nextAddress, onChunkRead);
+            });
+        }
+    }
+    
+    function prepare_file(onComplete) {
+        var 
+            date = new Date(),
+            filename = 'blackbox_log_' + date.getFullYear() + '-'  + zeroPad(date.getMonth() + 1, 2) + '-' 
+                + zeroPad(date.getDate(), 2) + '_' + zeroPad(date.getHours(), 2) + zeroPad(date.getMinutes(), 2) 
+                + zeroPad(date.getSeconds(), 2);
+        
+        chrome.fileSystem.chooseEntry({type: 'saveFile', suggestedName: filename, 
+                accepts: [{extensions: ['TXT']}]}, function(fileEntry) {
+            if (!fileEntry) {
+                console.log('No file selected');
+                return;
+            }
+
+            // echo/console log path specified
+            chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
+                console.log('Dataflash dump file path: ' + path);
+            });
+
+            fileEntry.createWriter(function (fileWriter) {
+                fileWriter.onerror = function (e) {
+                    console.error(e);
+
+                    // stop logging if the procedure was/is still running
+                };
+
+                onComplete(fileWriter);
+            }, function (e) {
+                // File is not readable or does not exist!
+                console.error(e);
+            });
+        });
+    }
+    
+    function ask_to_erase_flash() {
+        eraseCancelled = false;
+        $(".dataflash-confirm-erase").removeClass('erasing');
+
+        $(".dataflash-confirm-erase")[0].showModal(); 
+    }
+
+    function poll_for_erase_completion() {
+        MSP.send_message(MSP_codes.MSP_DATAFLASH_SUMMARY, false, false, function() {
+            update_html();
+            if (!eraseCancelled) {
+                if (DATAFLASH.ready) {
+                    $(".dataflash-confirm-erase")[0].close();
+                } else {
+                    setTimeout(poll_for_erase_completion, 500);
+                }
+            }
+        });
+    }
+    
+    function flash_erase() {
+        $(".dataflash-confirm-erase").addClass('erasing');
+        
+        MSP.send_message(MSP_codes.MSP_DATAFLASH_ERASE, false, false, poll_for_erase_completion);
+    }
+    
+    function flash_erase_cancel() {
+        eraseCancelled = true;
+        $(".dataflash-confirm-erase")[0].close();
+    }
+};
+
+TABS.dataflash.cleanup = function (callback) {
+    if (callback) callback();
+};