update chaning from Blockly to coding mode

index.html

@@ -32,10 +32,13 @@
 
     <table class="blockly-table">
         <tr>
-            <td id="blocklyArea"></td>
+            <td id="leftCell">
-            <td id="blocklyCodeArea">
+                <div id="blocklyArea"></div>
+                <div id="blocklyCode" style="display: none;"></div>
+            </td>
+            <td id="rightCell">
               <div id="stream"></div>
-              <div id="blocklyCode"></div>
+              <div id="readOnlyBlocklyCode"></div>
             </td>
         </tr>
     </table>
@@ -45,7 +48,7 @@
     <xml id="toolbox" style="display: none">
         <block type="controls_if"></block>
         <block type="sumorobot_move"></block>
-        <block type="sumorobot_delay"></block>
+        <block type="sumorobot_sleep"></block>
         <block type="sumorobot_opponent"></block>
         <block type="sumorobot_line"></block>
     </xml>
@@ -53,7 +56,7 @@
     <xml id="toolbox_no_if" style="display: none">
         <block type="controls_if" disabled="true"></block>
         <block type="sumorobot_move"></block>
-        <block type="sumorobot_delay"></block>
+        <block type="sumorobot_sleep"></block>
         <block type="sumorobot_opponent"></block>
         <block type="sumorobot_line"></block>
     </xml>

styles.css

@@ -11,6 +11,9 @@ table.blockly-table {
     height: 95%;
     width: 100%;
 }
+td, tr {
+    padding: 0px;
+}
 /* robot ID label error */
 span.has-error {
     color: #a94442 !important;
@@ -79,6 +82,24 @@ div#stream {
     height: 100%;
     display: none;
 }
+/* Blockly workspace */
+div#blocklyArea {
+    width: 100%;
+    height: 100%;
+}
+/* ace editor */
+div#blocklyCode {
+    width: 100%;
+    height: 100%;
+    display: none;
+    font-size: 1.3em;
+}
+/* read only ace editor */
+div#readOnlyBlocklyCode {
+    width: 100%;
+    height: 100%;
+    font-size: 1.3em;
+}
 /* for desktop screen */
 @media screen and (min-width: 1000px) {
     /* logo object */
@@ -113,22 +134,16 @@ div#stream {
         font-size: 10vw !important;
         border: 3px solid rgba(0, 0, 0, 0.1) !important;
     }
-    /* Blockly workspace */
+    /* left table cell */
-    td#blocklyArea {
+    td#leftCell {
         width: 60%;
         height: 100%;
     }
-    /* Blockly code area */
+    /* right table cell */
-    td#blocklyCodeArea {
+    td#rightCell {
         width: 40%;
         height: 100%;
     }
-    /* ace editor */
-    div#blocklyCode {
-        width: 100%;
-        height: 100%;
-        font-size: 1.3em;
-    }
 }
 /* for mobile and tablet screen */
 @media screen and (max-width: 1000px) {
@@ -164,17 +179,13 @@ div#stream {
         font-size: 10vw !important;
         border: 3px solid rgba(0, 0, 0, 0.1) !important;
     }
-    /* Blockly workspace */
+    /* left table cell */
-    td#blocklyArea {
+    td#leftCell {
         width: 100%;
         height: 100%;
     }
-    /* Blockly code area */
+    /* right table cell */
-    td#blocklyCodeArea {
+    td#rightCell {
-        display: none;
-    }
-    /* ace editor */
-    div#blocklyCode {
         display: none;
     }
 }

sumorobot.js

@@ -8,8 +8,8 @@ var robotServer = "iot.koodur.com";
 
 /* ace editor object */
 var codingEditor = null;
-/* ace editor change callback */
+/* read only ace editor object */
-var codingCallback = null;
+var readOnlyCodingEditor = null;
 
 /* the sumorobot code */
 var sumocode = "";
@@ -21,6 +21,8 @@ var workspace = null;
 var sumostart = false;
 /* disable / enable coding mode */
 var codingEnabled = false;
+/* disable / enable live stream */
+var liveStreamVisible = false;
 
 /* control_if block id */
 var controlBlockId = "";
@@ -106,13 +108,23 @@ function setLocalStorageItem(item, value) {
 
 window.onload = function() {
     $("#robot-id").val(getLocalStorageItem("sumorobot.robotId"));
+    /* load read only ace editor */
+    readOnlyCodingEditor = ace.edit("readOnlyBlocklyCode");
+    /* set the style */
+    readOnlyCodingEditor.setTheme("ace/theme/textmate");
+    readOnlyCodingEditor.session.setMode("ace/mode/python");
+    readOnlyCodingEditor.session.setTabSize(2);
+    /* make as read only */
+    readOnlyCodingEditor.setReadOnly(true);
+    /* disable scrolling warning */
+    readOnlyCodingEditor.$blockScrolling = Infinity;
+
     /* load ace editor */
     codingEditor = ace.edit("blocklyCode");
     /* set the style */
     codingEditor.setTheme("ace/theme/textmate");
     codingEditor.session.setMode("ace/mode/python");
     codingEditor.session.setTabSize(2);
-    codingEditor.setReadOnly(true);
     /* disable scrolling warning */
     codingEditor.$blockScrolling = Infinity;
     /* enable autocomplete */
@@ -148,10 +160,18 @@ window.onload = function() {
             ]);
         }
     });
+    /* set the code to the saved code from local storage or empty */
+    codingEditor.setValue(getLocalStorageItem("sumorobot.code") || "");
+    /* clear the selection after setting the value */
+    codingEditor.clearSelection();
+    /* add an change listener for the code editor */
+    codingEditor.on("change", function() {
+        /* when change occurs, save the new code to the localstorage */
+        setLocalStorageItem("sumorobot.code", codingEditor.getValue())
+    });
 
     /* change the if block to be more cheerful */
     Blockly.Msg.LOGIC_HUE = '#44CC00';
-    Blockly.Constants.Logic.HUE = '#44CC00';
 
     /* remote previous and next statement from control_if block */
     Blockly.defineBlocksWithJsonArray([
@@ -223,13 +243,13 @@ window.onload = function() {
         return false;
     };
 
-    Blockly.Blocks['sumorobot_delay'] = {
+    Blockly.Blocks['sumorobot_sleep'] = {
         init: function() {
             this.setColour("#E64C00");
             this.appendDummyInput()
-              .appendField("delay")
+              .appendField("sleep")
                 .appendField(new Blockly.FieldTextInput('1000',
-                  Blockly.FieldNumber.numberValidator), 'DELAY');
+                  Blockly.FieldNumber.numberValidator), 'SLEEP');
             this.setPreviousStatement(true);
             this.setNextStatement(true);
         }
@@ -273,8 +293,8 @@ window.onload = function() {
         }
     };
 
-    Blockly.Python['sumorobot_delay'] = function(block) {
+    Blockly.Python['sumorobot_sleep'] = function(block) {
-        var code = 'sumorobot.sleep(' + parseFloat(block.getFieldValue('DELAY')) + ', "' + block.id + '")\n';
+        var code = 'sumorobot.sleep(' + parseFloat(block.getFieldValue('SLEEP')) + ', "' + block.id + '")\n';
         return code;
     };
 
@@ -363,8 +383,8 @@ window.onload = function() {
         sumocode = Blockly.Python.workspaceToCode(workspace);
 
         /* show the code in the ace editor, filter out block IDs */
-        codingEditor.setValue("\n" + sumocode.replace(/[,]?[ ]?"(.*?)"/g, ""));
+        readOnlyCodingEditor.setValue("\n" + sumocode.replace(/[,]?[ ]?"(.*?)"/g, ""));
-        codingEditor.clearSelection();
+        readOnlyCodingEditor.clearSelection();
 
         /* save the code to the local storage */
         var xml = Blockly.Xml.workspaceToDom(workspace);
@@ -417,34 +437,27 @@ window.onload = function() {
                 break;
             case 76: // l
                 $("#stream").toggle();
-                $("#blocklyCode").toggle();
+                /* toggle live steam visible */
+                liveStreamVisible = !liveStreamVisible;
+                /* if not in coding mode */
+                if (codingEnabled == false) {
+                    $("#readOnlyBlocklyCode").toggle();
+                }
                 break;
             case 80: // p
                 $("#blocklyDiv").toggle();
                 $("#blocklyArea").toggle();
-                /* resize the code editor */
+                $("#blocklyCode").toggle();
-                codingEditor.resize();
+                if (liveStreamVisible == false) {
-                /* disable / enable ace editor */
+                    $("#readOnlyBlocklyCode").toggle();
-                codingEditor.setReadOnly(codingEnabled);
+                }
                 /* toggle coding enabled */
                 codingEnabled = !codingEnabled;
                 if (codingEnabled) {
-                    /* get the saved code from local storage or set empty */
+                    /* resize the coding editor */
-                    codingEditor.setValue(getLocalStorageItem("sumorobot.code") || "");
+                    codingEditor.resize();
-                    /* add an change listener for the code editor */
+                    /* focus, so the user can start coding */
-                    codingCallback = function() {
-                        setLocalStorageItem("sumorobot.code", codingEditor.getValue())
-                    };
-                    codingEditor.on("change", codingCallback);
-                    codingEditor.clearSelection();
                     codingEditor.focus();
-                } else {
-                    /* remove change listener from the coding editor */
-                    codingEditor.off("change", codingCallback);
-                    /* fire CHANGE event in Blockly workspace to change the code */
-                    var event = {type: Blockly.Events.CHANGE};
-                    workspace.fireChangeListener(event);
-                    codingEditor.blur();
                 }
                 break;
             case 82: // r