update block and line highlightning

assets/css/styles.css

@@ -75,15 +75,10 @@ a.cc-btn:hover {
 /* the battery div */
 div#battery {
     z-index: 35;
-    right: 0.5vw;
+    top: 1px;
-    font-size: 2vw;
+    right: 1px;
-    color: #ee4d4d;
     position: absolute;
 }
-/* the battery div connected status */
-div#battery.connected {
-    color: #44CC00;
-}
 /* the control panel */
 div#panel {
     z-index: 36;
@@ -117,6 +112,12 @@ div#readOnlyBlocklyCode {
     height: 100%;
     font-size: 1.3em;
 }
+/* ace line highlight */
+.highlight {
+    z-index: 20;
+    position: absolute;
+    background: rgba(255, 212, 73, 0.5);
+}
 
 /* for desktop screen */
 @media screen and (min-width: 1000px) {

assets/js/ace.js

@@ -2,6 +2,8 @@
 var codingEditor = null;
 // Where Blockly is converted to Python
 var readOnlyCodingEditor = null;
+// Range for ace editor line highlighting
+var Range = ace.require('ace/range').Range;
 
 window.addEventListener('load', function() {
     // Load read only ace editor

assets/js/blockly.js

@@ -1,3 +1,6 @@
+// Blockly workspace
+var workspace;
+
 window.addEventListener('load', function() {
     // To remember the control_if blockId
     var controlBlockId = '';
@@ -219,7 +222,7 @@ window.addEventListener('load', function() {
         if (event.type != Blockly.Events.CHANGE && event.type != Blockly.Events.MOVE) return;
 
         // Show the code in the ace editor, filter out block IDs
-        readOnlyCodingEditor.setValue('\n' + Blockly.Python.workspaceToCode(workspace).replace(/;;.{20}/g, ''));
+        readOnlyCodingEditor.setValue(Blockly.Python.workspaceToCode(workspace).replace(/;;.{20}/g, ''));
         readOnlyCodingEditor.clearSelection();
 
         // Save the code to the local storage

assets/js/main.js

@@ -2,7 +2,6 @@
 //var ROBOT_SERVER = '192.168.2.1:80';
 var ROBOT_SERVER = 'ws.achex.ca:4010';
 
-var workspace;
 // The sumorobot object
 var sumorobot;
 // Disable / enable coding mode
@@ -119,6 +118,7 @@ window.addEventListener('load', function() {
         }
     });
 
+    var range_id;
     var lines = [];
     var foundTrue = false;
     // Function to process code and highlight blocks and lines
@@ -153,6 +153,11 @@ window.addEventListener('load', function() {
             if (/\d/.test(code)) {
                 timeout = parseInt(code.replace(/[a-z\.()]/g, ''));
             }
+            if (range_id) {
+                readOnlyCodingEditor.session.removeMarker(range_id);
+            }
+            var range = new Range(index, 0, index, 1);
+            range_id = readOnlyCodingEditor.session.addMarker(range, "highlight", "fullLine");
             // Block ID should always be 20 symbols long
             var blockId = temp[1].substring(0, 20);
             // Highlight the block
@@ -188,6 +193,9 @@ window.addEventListener('load', function() {
         // Stop highlighting blocks and lines
         lines = [];
         workspace.highlightBlock('');
+        if (range_id) {
+            readOnlyCodingEditor.session.removeMarker(range_id);
+        }
     });
 
     // Enter (return) keypress listener on robot ID field