Graphing improvements, initial addition of series legends

Author: Matthew Matz

src/main/webapp/cdn/blockly/generators/propc.js

@@ -403,8 +403,7 @@ Blockly.propc.finish = function (code) {
     var setup = '';
     if (Blockly.propc.serial_terminal_) {
         setup += "/* SERIAL_TERMINAL USED */\n";
-    }
-    if (Blockly.propc.serial_graphing_) {
+    } else if (Blockly.propc.serial_graphing_) {
         setup += "/* SERIAL_GRAPHING USED */\n";
     }
     if (Blockly.mainWorkspace.getAllBlocks().length === 0) {

src/main/webapp/cdn/blockly/generators/propc/communicate.js

@@ -3172,11 +3172,13 @@ Blockly.Blocks.graph_output = {
         this.appendValueInput('PRINTa')
                 .setAlign(Blockly.ALIGN_RIGHT)
                 .setCheck('Number')
+                .appendField(new Blockly.FieldTextInput(''), 'GRAPH_LABELa')
                 .appendField('value');
         this.setPreviousStatement(true);
         this.setNextStatement(true);
         this.setMutator(new Blockly.Mutator(['graph_dec']));
         this.optionList_ = ['dec'];
+        this.graph_labels_ = [];
     },
     mutationToDom: function (workspace) {
         // Create XML to represent menu options.
@@ -3191,6 +3193,7 @@ Blockly.Blocks.graph_output = {
         for (var i = 0; i < this.optionList_.length; i++) {
             this.appendValueInput('PRINT' + i)
                     .setAlign(Blockly.ALIGN_RIGHT)
+                    .appendField(new Blockly.FieldTextInput(''), 'GRAPH_LABEL' + i)
                     .appendField('value');
         }
     },
@@ -3204,6 +3207,13 @@ Blockly.Blocks.graph_output = {
             connection.connect(optionBlock.previousConnection);
             connection = optionBlock.nextConnection;
         }
+        var i = 0;
+        this.graph_labels_ = null;
+        this.graph_labels_ = [];
+        while (this.getFieldValue('GRAPH_LABEL' + i)) {
+            this.graph_labels_.push(this.getFieldValue('GRAPH_LABEL' + i));
+            i++;
+        }
         return containerBlock;
 
     },
@@ -3214,7 +3224,6 @@ Blockly.Blocks.graph_output = {
             this.removeInput('PRINT' + i);
             i++;
         }
-
         i = 0;
         this.optionList_.length = 0;
         // Rebuild the block's optional inputs.
@@ -3225,6 +3234,7 @@ Blockly.Blocks.graph_output = {
             var printInput = this.appendValueInput('PRINT' + i)
                     .setAlign(Blockly.ALIGN_RIGHT)
                     .setCheck('Number')
+                    .appendField(new Blockly.FieldTextInput('label'), 'GRAPH_LABEL' + i)
                     .appendField('value');
 
             if (clauseBlock.valueConnection_) {
@@ -3235,6 +3245,11 @@ Blockly.Blocks.graph_output = {
             clauseBlock = clauseBlock.nextConnection &&
                     clauseBlock.nextConnection.targetBlock();
         }
+        i = this.graph_labels_.length;
+        for (i = 0; i < this.graph_labels_.length; i++) {
+            if (this.getFieldValue('GRAPH_LABEL' + i))
+                this.setFieldValue(this.graph_labels_[i], 'GRAPH_LABEL' + i);
+        }
     },
     saveConnections: function (containerBlock) {
         // Store a pointer to any connected child blocks.
@@ -3250,6 +3265,14 @@ Blockly.Blocks.graph_output = {
             clauseBlock = clauseBlock.nextConnection &&
                     clauseBlock.nextConnection.targetBlock();
         }
+        var i = 0;
+        this.graph_labels_ = null;
+        this.graph_labels_ = [];
+        while (this.getFieldValue('GRAPH_LABEL' + i)) {
+            this.graph_labels_.push(this.getFieldValue('GRAPH_LABEL' + i));
+            i++;
+        }
+
     },
     onchange: function () {
         if (this.workspace && this.optionList_.length < 1) {
@@ -3294,18 +3317,23 @@ Blockly.propc.graph_output = function () {
 
     var code = 'print("%u';
     var varList = '';
+    var labelList = '';
     var i = 0;
     var orIt = '';
     while (Blockly.propc.valueToCode(this, 'PRINT' + i, Blockly.propc.ORDER_NONE)) {
         code += ',%d';
         varList += ', ' + Blockly.propc.valueToCode(this, 'PRINT' + i, Blockly.propc.NONE || '0');
+        labelList += this.getFieldValue("GRAPH_LABEL" + i);
+        if (Blockly.propc.valueToCode(this, 'PRINT' + (i + 1), Blockly.propc.ORDER_NONE) && i < 9)
+            labelList += ',';
         i++;
         if (i > 10)
             break;
     }
     code += '\\r", (CNT >> 16)' + varList + ');\n';
 
     Blockly.propc.serial_graphing_ = true;
+    Blockly.propc.definitions_['graphing_labels'] = '// GRAPH_LABELS_START:' + labelList + ':GRAPH_LABELS_END //';
 
     return code;
 };

src/main/webapp/cdn/blocklyc.js

@@ -26,6 +26,7 @@ var graph_temp_string = new String;
 var graph_time_multiplier = 0;
 var graph_interval_id = null;
 var fullCycleTime = 4294967296 / 80000000;
+var graph_labels = null;
 
 var console_header_arrived = false;
 var console_header = null;
@@ -373,6 +374,13 @@ function graphing_console() {
 
         // GRAPH_SETTINGS:rate,x_axis_val,x_axis_type,y_min,y_max:GRAPH_SETTINGS_END //
 
+        var graph_labels_start = propcCode.indexOf("// GRAPH_LABELS_START:");
+        if (graph_labels_start > -1) {
+            var graph_labels_end = propcCode.indexOf(":GRAPH_LABELS_END //") + 20;
+            var graph_labels_temp = propcCode.substring(graph_labels_start, graph_labels_end).split(':');
+            graph_labels = graph_labels_temp[1].split(',');
+        }
+
         graph_options.refreshRate = Number(graph_settings_str[0]);
 
         if (graph_settings_str[3] === '0' && graph_settings_str[4] === '0')
@@ -425,8 +433,10 @@ function graphing_console() {
         };
 
         if (newGraph || graph !== null) {
+            graph_new_labels();
             graph_interval_id = setInterval(function () {
                 graph.update(graph_data);
+                graph_update_labels();
             }, graph_options.refreshRate);
         }
 
@@ -623,7 +633,9 @@ function graph_reset() {
     graph_temp_string = '';
     graph_timestamp_start = null;
     graph_data_ready = false;
+    // graph_labels = null;
     $("#serial_graphing").html('');
+    //$("#serial_graphing_labels").html('');
 }
 
 function graph_redraw() {
@@ -683,4 +695,21 @@ function downloadGraph() {
             saveData(svgxml, value + '.svg');
         }
     });
+}
+
+function graph_new_labels() {
+    var labelsvg = '<svg width="60" height="300">';
+    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 += '</svg>';
+    $('#serial_graphing_labels').html(labelsvg);
+}
+
+function graph_update_labels() {
+
 }

src/main/webapp/cdn/blocklypropclient.js

@@ -28,16 +28,17 @@ var check_com_ports_interval = null;
 version_as_number = function (rawVersion) {
     var tempVersion = rawVersion.toString().split(".");
     tempVersion.push('0');
-    
-    if(tempVersion.length < 3) {
-        bootbox.alert("BlocklyProp is unable to determine what version of " + 
+
+    if (tempVersion.length < 3) {
+        bootbox.alert("BlocklyProp is unable to determine what version of " +
                 "BlocklyPropClient is installed on your computer.\nYou may need to install" +
                 "or reinstall the BlocklyPropClient.");
-        if(tempVersion.length === 1) tempVersion = '0.0.0';
+        if (tempVersion.length === 1)
+            tempVersion = '0.0.0';
         else
-        tempVersion.unshift('0');
+            tempVersion.unshift('0');
     }
-    
+
     // Allow for any of the three numbers to be between 0 and 1023.
     // Equivalent to: (Major * 104856) + (Minor * 1024) + Revision.
     return (Number(tempVersion[0]) << 20 | Number(tempVersion[1]) << 10 | Number(tempVersion[2]));

src/main/webapp/cdn/style-editor.css

@@ -424,12 +424,12 @@ nav .nav > li > a:first-child {
 
 .ct-series-g .ct-line {
   stroke-width: 1px;
-  stroke: #c0c;
+  stroke: #d09;
 }
 
 .ct-series-h .ct-line {
   stroke-width: 1px;
-  stroke: #000;
+  stroke: #90d;
 }
 
 .ct-series-i .ct-line {
@@ -439,4 +439,45 @@ nav .nav > li > a:first-child {
 
 .ct-series-j .ct-line {
   stroke-width: 1px;
+  stroke: #000
+}
+
+.ct-marker-1 {
+  fill: #00f;
+}
+
+.ct-marker-2 {
+  fill: #0bb;
+}
+
+.ct-marker-3 {
+  fill: #0d0;
+}
+
+.ct-marker-4 {
+  fill: #dd0;
+}
+
+.ct-marker-5 {
+  fill: #f90;
+}
+
+.ct-marker-6 {
+  fill: #f00;
+}
+
+.ct-marker-7 {
+  fill: #d09;
+}
+
+.ct-marker-8 {
+  fill: #90d;
+}
+
+.ct-marker-9 {
+  fill: #777;
+}
+
+.ct-marker-10 {
+  fill: #000
 }

src/main/webapp/editor/blocklyc.jsp

@@ -136,8 +136,17 @@
                         <h4 class="modal-title" id="graphing-dialog-title"><fmt:message key="editor.title.graphing" /></h4>
                     </div>
                     <div class="modal-body" style="height: 430px;">
-                        <div id="serial_graphing" class="ct-chart ct-perfect-fourth"></div>
-                        <div id="graph_x-axis_label" align="center">Time (seconds)</div>
+                        <table>
+                            <tr>
+                                <td>
+                                    <div id="serial_graphing" class="ct-chart ct-perfect-fourth"></div>
+                                    <div id="graph_x-axis_label" align="center">Time (seconds)</div>
+                                </td>
+                                <td valign="top">
+                                    <div id="serial_graphing_labels"></div>
+                                </td>
+                            </tr>
+                        </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;
@@ -153,7 +162,7 @@
         <script src="<url:getCdnUrl url="/lib/bootstrap/core/js/bootstrap.min.js"/>"></script>
         <script src="<url:getCdnUrl url="/lib/bootstrap/plugins/bootbox.min.js"/>"></script>
         <script>
-            var type = 'PROPC';
+                            var type = 'PROPC';
         </script>
     </body>
 </html>