update block and line highlightning

This commit is contained in:
Silver Kuusik 2018-08-18 19:12:05 +02:00
parent 2af99f108b
commit 22adce4b9e
4 changed files with 23 additions and 9 deletions

View File

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

View File

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

View File

@ -1,3 +1,6 @@
// Blockly workspace
var workspace;
window.addEventListener('load', function() { window.addEventListener('load', function() {
// To remember the control_if blockId // To remember the control_if blockId
var controlBlockId = ''; var controlBlockId = '';
@ -219,7 +222,7 @@ window.addEventListener('load', function() {
if (event.type != Blockly.Events.CHANGE && event.type != Blockly.Events.MOVE) return; if (event.type != Blockly.Events.CHANGE && event.type != Blockly.Events.MOVE) return;
// Show the code in the ace editor, filter out block IDs // 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(); readOnlyCodingEditor.clearSelection();
// Save the code to the local storage // Save the code to the local storage

View File

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