Graphing improvements, unwrapping 1 layer to expose graph directly in demo

Author: Matthew Matz

src/main/resources/com/parallax/server/blocklyprop/internationalization/translations.properties

@@ -262,7 +262,7 @@ category.communicate = Communicate
 category.communicate.serial-lcd = Serial LCD
 category.communicate.serial-terminal = Terminal
 category.communicate.oled = OLED
-category.communicate.graphing = Graphing Output
+category.communicate.graphing = Graph
 category.communicate.protocols = Protocols
 category.communicate.xbee = XBee
 category.communicate.WS2812B = RGB LEDs

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

@@ -7,6 +7,8 @@
 <%@page contentType="text/html" pageEncoding="UTF-8"%>
 <%@ include file="/WEB-INF/includes/include.jsp"%>
 
+<c:set var="experimental" scope="page" value="${properties:experimentalmenu(false)}" />
+
 <nav class="navbar navbar-default clearfix" role="navigation">
     <div style="width:100%;">
         <div style="display:inline;"><span><a id="nav-logo" href="<url:getUrl url="/"/>">BlocklyProp<br><strong>BETA</strong></a></span>
@@ -47,11 +49,14 @@
                         </c:if>
                     <a onclick="loadIntoEeprom()" data-toggle="tooltip" title="Load and run (save code to EEPROM)" data-placement="bottom" class="btn btn-success btn-circle"><i class="glyphicon glyphicon-save"></i></a>
                     <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>
-                    <% if ("1".equals(request.getParameter("graphing"))) {%>
-                    <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">
-                        <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><% } %>
+                        <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">
+                                <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>
+                            </c:when>
+                        </c:choose>
                 </div>
                 <div style="display:inline; clear:right; float:right;  padding-right: 10px;" align="right">
 
@@ -88,7 +93,6 @@
                             <li><a id="upload-project" href="#"><fmt:message key="editor.upload" /></a></li>
                             <hr style="line-height:5px; margin:5px;">
                             <li><a href="#" onclick="configure_client()"><fmt:message key="editor.run.configure" /></a></li>
-
                         </ul></span>
                 </div>
             </div>

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

@@ -3168,19 +3168,15 @@ Blockly.Blocks.graph_output = {
 //        this.setTooltip(Blockly.MSG_GRAPH_OUTPUT_TOOLTIP);
         this.setColour(colorPalette.getColor('protocols'));
         this.appendDummyInput()
-                .appendField('Graphing output');
+                .appendField('Graph');
         this.appendValueInput('PRINTa')
                 .setAlign(Blockly.ALIGN_RIGHT)
                 .setCheck('Number')
                 .appendField('value');
-        this.appendValueInput('PRINTb')
-                .setAlign(Blockly.ALIGN_RIGHT)
-                .setCheck('Number')
-                .appendField('value');
         this.setPreviousStatement(true);
         this.setNextStatement(true);
         this.setMutator(new Blockly.Mutator(['graph_dec']));
-        this.optionList_ = ['dec', 'dec'];
+        this.optionList_ = ['dec'];
     },
     mutationToDom: function (workspace) {
         // Create XML to represent menu options.
@@ -3266,7 +3262,7 @@ Blockly.Blocks.graph_output = {
         }
         if (this.getInput('PRINT0') && this.getInput('PRINTa')) {
             this.removeInput('PRINTa');
-            this.removeInput('PRINTb');
+            //this.removeInput('PRINTb');
         }
     }
 };
@@ -3320,25 +3316,23 @@ Blockly.Blocks.graph_settings = {
 //        this.setTooltip(Blockly.MSG_GRAPH_SETTINGS_TOOLTIP);
         this.setColour(colorPalette.getColor('protocols'));
         this.appendDummyInput()
-                .appendField("Graph settings");
-        this.appendDummyInput()
-                .appendField("x-axis")
+                .appendField("Graph initialize  x-axis")
                 .appendField(new Blockly.FieldDropdown([
-                    ["keep 10 seconds of data", "10,S"],
-                    ["keep 20 seconds of data", "20,S"],
-                    ["keep 30 seconds of data", "30,S"],
-                    ["keep 40 seconds of data", "40,S"],
-                    ["keep 50 seconds of data", "50,S"],
-                    ["keep 60 seconds of data", "60,S"],
-                    ["keep 90 seconds of data", "90,S"]    // Add comma back when resetting
+                    ["10 seconds", "10,S"],
+                    ["20 seconds", "20,S"],
+                    ["30 seconds", "30,S"],
+                    ["40 seconds", "40,S"],
+                    ["50 seconds", "50,S"],
+                    ["60 seconds", "60,S"],
+                    ["90 seconds", "90,S"]    // Add comma back when resetting
                             //        ["trigger on value 1 rising edge", "1,TU"],
                             //        ["trigger on value 1 falling edge", "1,TD"],
                             //        ["trigger on value 1 zero crossing", "1,TZ"]
-                ]), "XAXIS");
-        this.appendDummyInput()
+                ]), "XAXIS")
+                .appendField('y-axis ')
                 .appendField(new Blockly.FieldDropdown([
-                    ["y-axis autoscale", "AUTO"],
-                    ["y-axis range", "FIXED"]]), "YSETTING")
+                    ["autoscale", "AUTO"],
+                    ["range", "FIXED"]]), "YSETTING")
                 .appendField("minimum", 'LABELMIN')
                 .appendField(new Blockly.FieldTextInput('0',
                         Blockly.FieldTextInput.numberValidator), "YMIN")
@@ -3361,6 +3355,7 @@ Blockly.Blocks.graph_settings = {
         this.setInputsInline(false);
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
+        this.render();
     },
     onchange: function () {
         if (this.getFieldValue('YSETTING') === 'AUTO') {