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 */
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) {

View File

@ -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

View File

@ -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

View File

@ -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