Merge pull request #1045 from MatzElectronics/demo

Author: zfi

src/main/webapp/WEB-INF/includes/pageparts/editor-menu.jsp

@@ -51,7 +51,7 @@
                     <a onclick="serial_console()" data-toggle="tooltip" title="Open Serial Terminal" data-placement="bottom" class="btn btn-primary btn-circle"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="15"><rect x="1" y="1" width="12" height="13" rx="1" ry="1" style="stroke:#fff;stroke-width:2;fill:none;"/><path d="M3,4.5 L10,4.5 M3,6.5 L6,6.5 M3,8.5 L8,8.5" style="stroke:#fff;stroke-width:1;fill:none;"/></svg></a>
                         <c:choose>
                             <c:when test="${experimental == true}">
-                            <a onclick="graphing_console()" data-toggle="tooltip" title="Open Graphing Output" data-placement="bottom" class="btn btn-primary btn-circle"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="14">
+                            <a onclick="graphing_console()" data-toggle="tooltip" title="Open Graphing Output" data-placement="bottom" class="btn btn-primary btn-circle" id="open-graph-output"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="14">
                                 <path d="M.5,0 L.5,13.5 L12.5,13.5 M3.5,0 L3.5,13.5 M6.5,0 L6.5,13.5 M9.5,0 L9.5,13.5 M12.5,0 L12.5,13.5 M.5,3.5 L12.5,3.5 M.5,7 L12.5,7 M.5,10.5 L12.5,10.5 M.5,.5 L12.5,.5" style="stroke:rgba(255,255,255,.6);stroke-width:1;fill:none;"/>
                                 <path d="M0,13 L6,5 L9,8 L14,2" style="stroke:#fff;stroke-width:2;fill:none;"/>
                                 </svg></a>

src/main/webapp/cdn/blocklyc.js

@@ -27,6 +27,7 @@ var graph_time_multiplier = 0;
 var graph_interval_id = null;
 var fullCycleTime = 4294967296 / 80000000;
 var graph_labels = null;
+var graph_csv_data = new Array;
 
 var console_header_arrived = false;
 var console_header = null;
@@ -581,16 +582,21 @@ function graph_new_data(stream) {
                 } else {
                     graph_temp_data[row].unshift(ts + graph_time_multiplier -
                             graph_timestamp_start + graph_timestamp_restart);
-                    for (j = 2; j < graph_temp_data[row].length; j++) {
+                    var graph_csv_temp = (Math.round(graph_temp_data[row][0] * 10000) / 10000) + ',';
+                    for (var j = 2; j < graph_temp_data[row].length; j++) {
+                        graph_csv_temp += graph_temp_data[row][j] + ',';
                         graph_data.series[j - 2].push({
                             x: graph_temp_data[row][0],
                             y: graph_temp_data[row][j] || null
                         });
                         if (graph_temp_data[row][0] > graph_options.sampleTotal)
                             graph_data.series[j - 2].shift();
                     }
+                    graph_csv_data.push(graph_csv_temp.slice(0, -1).split(','));
                 }
 
+
+
                 /*
                  var read_serial_to_div = '';
                  for (var l = 0; l < graph_temp_data[row].length; l++)
@@ -616,6 +622,8 @@ function graph_reset() {
     graph_interval_id = null;
     graph_temp_data = null;
     graph_temp_data = new Array;
+    graph_csv_data = null;
+    graph_csv_data = new Array;
     graph_data = {
         series: [// add more here for more possible lines...
             [],
@@ -697,19 +705,58 @@ function downloadGraph() {
     });
 }
 
+function downloadCSV() {
+    utils.prompt("Download Graph data as CSV - Filename:", 'graph_data' + idProject, function (value) {
+        if (value) {
+
+            // put all of the pieces together into a downloadable file
+            var saveData = (function () {
+                var a = document.createElement("a");
+                document.body.appendChild(a);
+                a.style = "display: none";
+                return function (data, fileName) {
+                    var blob = new Blob([data], {type: "octet/stream"});
+                    var url = window.URL.createObjectURL(blob);
+                    a.href = url;
+                    a.download = fileName;
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                };
+            }());
+            var graph_csv_temp = graph_csv_data.join('\n');
+            var idx1 = graph_csv_temp.indexOf('\n') + 1;
+            var idx2 = graph_csv_temp.indexOf('\n', idx1 + 1);
+            saveData(graph_csv_temp.substring(0, idx1) + graph_csv_temp.substring(idx2 + 1, graph_csv_temp.length - 1), value + '.csv');
+        }
+    });
+}
+
 function graph_new_labels() {
+    var graph_csv_temp = '';
     var labelsvg = '<svg width="60" height="300">';
+    graph_csv_temp += '"time",';
     for (var t = 0; t < graph_labels.length; t++) {
-        labelsvg += '<g id="labelgroup' + (t+1) + '" transform="translate(0,' + (t*25+35) + ')">';
-        labelsvg += '<path id="label' + (t+1) + '" class="ct-marker-' + (t+1);
-        labelsvg += '" d="M0,6 L5,0 58,0 59,1 60,2 60,10 59,11 58,12 5,12 Z"/>';
-        labelsvg += '<text id="label' + (t+1) + 'text" x="6" y="10" style="font-family:';
-        labelsvg += 'Arial;font-size: 10px;fill:#fff; font-weight:bold;">' + graph_labels[t] + '</text></g>';
+        labelsvg += '<g id="labelgroup' + (t + 1) + '" transform="translate(0,' + (t * 30 + 25) + ')">';
+        labelsvg += '<rect x="0" y = "0" width="60" height="26" rx="3" ry="3" id="label' + (t + 1) + '" ';
+        labelsvg += 'style="stroke:1px;stroke-color:blue;" class="ct-marker-' + (t + 1) + '"/><rect x="3" y = "12"';
+        labelsvg += 'width="54" height="11" rx="3" ry="3" id="value' + (t + 1) + 'bkg" style="fill:rgba';
+        labelsvg += '(255,255,255,.7);stroke:none;"/><text id="label' + (t + 1) + 'text" x="3" ';
+        labelsvg += 'y="9" style="font-family:Arial;font-size: 9px;fill:#fff;font-weight:bold;">' + graph_labels[t];
+        labelsvg += '</text><text id="gValue' + (t + 1) + '" x="5" y="21" style="align:right;';
+        labelsvg += 'font-family:Arial;font-size: 10px;fill:#000;"></text></g>';
+        graph_csv_temp += '"' + graph_labels[t].replace(/"/g, '_') + '",';
     }
     labelsvg += '</svg>';
+    graph_csv_data.push(graph_csv_temp.slice(0, -1));
     $('#serial_graphing_labels').html(labelsvg);
 }
 
 function graph_update_labels() {
-
+    var row = graph_temp_data.length - 1;
+    if (graph_temp_data[row]) {
+        var col = graph_temp_data[row].length;
+        for (var w = 2; w < col; w++) {
+            document.getElementById('gValue' + (w - 1).toString(10)).textContent = graph_temp_data[row][w];
+        }
+    }
 }

src/main/webapp/cdn/editor.js

@@ -144,9 +144,11 @@ loadProject = function () {
     }
     if (projectData['board'] === 's3' && type === 'PROPC') {
         $('#load-ram-button').addClass('hidden');
+        $('#open-graph-output').addClass('hidden');
         document.getElementById('client-available').innerHTML = document.getElementById('client-available-short').innerHTML;
     } else {
         $('#load-ram-button').removeClass('hidden');
+        $('#open-graph-output').removeClass('hidden');
         document.getElementById('client-available').innerHTML = document.getElementById('client-available-long').innerHTML;
     }
 };

src/main/webapp/editor/blocklyc.jsp

@@ -149,8 +149,9 @@
                         </table>
                     </div>
                     <div class="modal-footer clearfix">
-                        <button type="button" id="btn-graph-play" class="btn btn-primary btn-circle pull-left" onclick="graph_play();"><i class="glyphicon glyphicon-pause"></i></button>&nbsp;
-                        <button type="button" id="btn-graph-snapshot" class="btn btn-success btn-circle pull-left" onclick="downloadGraph();"><i class="glyphicon glyphicon-camera"></i></button>
+                        <button type="button" id="btn-graph-play" data-toggle="tooltip" title="Pause/Resume the graph" data-placement="bottom" class="btn btn-primary btn-circle pull-left" onclick="graph_play();"><i class="glyphicon glyphicon-pause"></i></button>&nbsp;
+                        <button type="button" id="btn-graph-snapshot" data-toggle="tooltip" title="Download a snapshot of the graph" data-placement="bottom" class="btn btn-success btn-circle pull-left" onclick="downloadGraph();"><i class="glyphicon glyphicon-camera"></i></button>&nbsp;
+                        <button type="button" id="btn-graph-csv" data-toggle="tooltip" title="Download graph data as CSV" data-placement="bottom" class="btn btn-success btn-circle pull-left" onclick="downloadCSV();"><i class="glyphicon glyphicon-file"></i></button>
                         <button type="button" class="btn btn-default" data-dismiss="modal"><fmt:message key="editor.button.close" /></button>
                     </div>
                 </div><!-- /.modal-content -->