diff --git a/assets/css/styles.css b/assets/css/styles.css index 43b2558..2ab9fc1 100755 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -75,15 +75,10 @@ a.cc-btn:hover { /* the battery div */ div#battery { z-index: 35; - right: 0.5vw; - font-size: 2vw; - color: #ee4d4d; + top: 1px; + right: 1px; 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) { diff --git a/assets/js/ace.js b/assets/js/ace.js index f70130d..4dee964 100644 --- a/assets/js/ace.js +++ b/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 diff --git a/assets/js/blockly.js b/assets/js/blockly.js index 6555736..0928229 100644 --- a/assets/js/blockly.js +++ b/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 diff --git a/assets/js/main.js b/assets/js/main.js index 8a4c1ef..647697f 100644 --- a/assets/js/main.js +++ b/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