forked from marva/sumorobot-web
move ace to own file
This commit is contained in:
Silver Kuusik
parent
607825ed17
commit
d6346b44eb
@ -1,87 +1,18 @@
|
||||
// The local/remote server URL
|
||||
//var ROBOT_SERVER = "10.42.0.1";
|
||||
var ROBOT_SERVER = "ws.achex.ca:4010";
|
||||
//var ROBOT_SERVER = '10.42.0.1';
|
||||
var ROBOT_SERVER = 'ws.achex.ca:4010';
|
||||
|
||||
var workspace;
|
||||
// The sumorobot object
|
||||
var sumorobot = null;
|
||||
// The sumorobot state
|
||||
var sumostart = false;
|
||||
var sumorobot;
|
||||
// Disable / enable coding mode
|
||||
var codingEnabled = false;
|
||||
// Disable / enable live stream
|
||||
var liveStreamVisible = false;
|
||||
|
||||
// Where Blockly Python code is shown
|
||||
var readOnlyCodingEditor = null;
|
||||
// Last hightlighted block id
|
||||
var lastHighlighted = "";
|
||||
// Block highlight WebSocket
|
||||
var blockHighlight = null;
|
||||
|
||||
window.addEventListener("load", 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
|
||||
var codingEditor = ace.edit("blocklyCode");
|
||||
// Set the style
|
||||
codingEditor.setTheme("ace/theme/textmate");
|
||||
codingEditor.session.setMode("ace/mode/python");
|
||||
codingEditor.session.setTabSize(2);
|
||||
// Disable scrolling warning
|
||||
codingEditor.$blockScrolling = Infinity;
|
||||
// Enable autocomplete
|
||||
ace.require("ace/ext/language_tools");
|
||||
codingEditor.setOptions({
|
||||
enableSnippets: true,
|
||||
enableLiveAutocompletion: true,
|
||||
enableBasicAutocompletion: true
|
||||
});
|
||||
// Add autocomplete keywords
|
||||
codingEditor.completers.push({
|
||||
getCompletions: function(editor, session, pos, prefix, callback) {
|
||||
callback(null, [
|
||||
{value: "STOP", score: 1000, meta: "sumorobot"},
|
||||
{value: "LEFT", score: 1000, meta: "sumorobot"},
|
||||
{value: "RIGHT", score: 1000, meta: "sumorobot"},
|
||||
{value: "SEARCH", score: 1000, meta: "sumorobot"},
|
||||
{value: "FORWARD", score: 1000, meta: "sumorobot"},
|
||||
{value: "BACKWARD", score: 1000, meta: "sumorobot"},
|
||||
{value: "STATUS", score: 1000, meta: "sumorobot"},
|
||||
{value: "LEFT_LINE", score: 1000, meta: "sumorobot"},
|
||||
{value: "RIGHT_LINE", score: 1000, meta: "sumorobot"},
|
||||
{value: "sumorobot", score: 1000, meta: "sumorobot"},
|
||||
{value: "move", score: 1000, meta: "sumorobot"},
|
||||
{value: "sleep", score: 1000, meta: "sumorobot"},
|
||||
{value: "set_led", score: 1000, meta: "sumorobot"},
|
||||
{value: "is_line", score: 1000, meta: "sumorobot"},
|
||||
{value: "get_line", score: 1000, meta: "sumorobot"},
|
||||
{value: "set_servo", score: 1000, meta: "sumorobot"},
|
||||
{value: "is_opponent", score: 1000, meta: "sumorobot"},
|
||||
{value: "calibrate_line", score: 1000, meta: "sumorobot"},
|
||||
{value: "get_battery_voltage", score: 1000, meta: "sumorobot"},
|
||||
{value: "get_opponent_distance", score: 1000, meta: "sumorobot"}
|
||||
]);
|
||||
}
|
||||
});
|
||||
// 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())
|
||||
});
|
||||
window.addEventListener('load', function() {
|
||||
// Set the robot ID from the localstorage
|
||||
$('#robot-id').val(getLocalStorageItem('sumorobot.robotId'));
|
||||
|
||||
// Key down event
|
||||
$(document).keydown(function(e) {
|
||||
@ -94,29 +25,28 @@ window.addEventListener("load", function() {
|
||||
// Select the hotkey
|
||||
switch(e.which) {
|
||||
case 32: // space bar
|
||||
sumostart = !sumostart;
|
||||
if (sumostart) {
|
||||
$(".btn-start").addClass("hover");
|
||||
$(".btn-start").click();
|
||||
if (sumorobot.moving) {
|
||||
$('.btn-stop').addClass('hover');
|
||||
$('.btn-stop').click();
|
||||
} else {
|
||||
$(".btn-stop").addClass("hover");
|
||||
$(".btn-stop").click();
|
||||
$('.btn-start').addClass('hover');
|
||||
$('.btn-start').click();
|
||||
}
|
||||
break;
|
||||
case 37: // left
|
||||
sumorobot.send("left");
|
||||
sumorobot.send('left');
|
||||
break;
|
||||
case 38: // up
|
||||
sumorobot.send("forward");
|
||||
sumorobot.send('forward');
|
||||
break;
|
||||
case 39: // right
|
||||
sumorobot.send("right");
|
||||
sumorobot.send('right');
|
||||
break;
|
||||
case 40: // down
|
||||
sumorobot.send("backward");
|
||||
sumorobot.send('backward');
|
||||
break;
|
||||
case 67: // c
|
||||
$("#panel").toggle();
|
||||
$('#panel').toggle();
|
||||
break;
|
||||
case 76: // l
|
||||
// No live stream if cookies are disabled
|
||||
@ -124,24 +54,26 @@ window.addEventListener("load", function() {
|
||||
// TODO: Open the cookie consent popup
|
||||
return;
|
||||
}
|
||||
// Load the Mixer stream
|
||||
if ($("#stream").is(':empty')) {
|
||||
$("#stream").html('<iframe src="https://mixer.com/embed/player/14551694"></iframe>');
|
||||
// Load the Mixer stream when it is not yet loaded
|
||||
if ($('#stream').is(':empty')) {
|
||||
$('#stream').html('<iframe src="https://mixer.com/embed/player/14551694"></iframe>');
|
||||
}
|
||||
$("#stream").toggle();
|
||||
$('#stream').toggle();
|
||||
// Toggle live steam visible
|
||||
liveStreamVisible = !liveStreamVisible;
|
||||
// If not in coding mode
|
||||
if (codingEnabled == false) {
|
||||
$("#readOnlyBlocklyCode").toggle();
|
||||
$('#readOnlyBlocklyCode').toggle();
|
||||
}
|
||||
break;
|
||||
case 80: // p
|
||||
$("#blocklyDiv").toggle();
|
||||
$("#blocklyArea").toggle();
|
||||
$("#blocklyCode").toggle();
|
||||
$('#blocklyDiv').toggle();
|
||||
$('#blocklyArea').toggle();
|
||||
$('#blocklyCode').toggle();
|
||||
// When live stream is not active
|
||||
if (liveStreamVisible == false) {
|
||||
$("#readOnlyBlocklyCode").toggle();
|
||||
// Toggle Blockly Python code
|
||||
$('#readOnlyBlocklyCode').toggle();
|
||||
}
|
||||
// Toggle coding enabled
|
||||
codingEnabled = !codingEnabled;
|
||||
@ -156,15 +88,15 @@ window.addEventListener("load", function() {
|
||||
// Implement something
|
||||
break;
|
||||
case 83: // s
|
||||
$(".btn-stop").addClass("hover");
|
||||
$(".btn-stop").click();
|
||||
$('.btn-stop').addClass('hover');
|
||||
$('.btn-stop').click();
|
||||
break;
|
||||
case 84: // t
|
||||
sumorobot.send("calibrate_line");
|
||||
sumorobot.send('calibrate_line');
|
||||
break;
|
||||
case 87: // w
|
||||
$(".btn-start").addClass("hover");
|
||||
$(".btn-start").click();
|
||||
$('.btn-start').addClass('hover');
|
||||
$('.btn-start').click();
|
||||
break;
|
||||
}
|
||||
});
|
||||
@ -177,72 +109,67 @@ window.addEventListener("load", function() {
|
||||
$('.btn').removeClass('hover');
|
||||
// If arrow keys were pressed
|
||||
if (e.which == 37 || e.which == 38 || e.which == 39 || e.which == 40) {
|
||||
sumorobot.send("stop");
|
||||
sumorobot.send('stop');
|
||||
}
|
||||
});
|
||||
|
||||
// Start button listener
|
||||
$(".btn-start").click(function() {
|
||||
sumostart = true;
|
||||
// When we are in coding mode
|
||||
$('.btn-start').click(function() {
|
||||
// When we are in Python coding mode
|
||||
if (codingEnabled) {
|
||||
var parsedCode = codingEditor.getValue().replace(/"/g, '\\"').replace(/\n/g, ';;');
|
||||
// Send the code from the textarea to the SumoRobot
|
||||
sumorobot.send("code", parsedCode);
|
||||
// Get the Python code
|
||||
parsedCode = codingEditor.getValue();
|
||||
// Otherwise when we are in Blockly mode
|
||||
} else {
|
||||
// Send the code from the blocks to the SumoRobot
|
||||
var parsedCode = sumorobot.getBlocklyCode().replace(/"/g, '\\"').replace(/\n/g, ';;');
|
||||
sumorobot.send("code", parsedCode);
|
||||
// Get the code from the blocks
|
||||
parsedCode = sumorobot.getBlocklyCode().replace(/;;.{20}/g, '');
|
||||
}
|
||||
// Escape the qoutes, replace new lines and send the code
|
||||
sumorobot.send('code', parsedCode.replace(/"/g, '\\"').replace(/\n/g, ';;'));
|
||||
// TODO: Highlight the blocks and lines
|
||||
/*var lines = sumorobot.getBlocklyCode().replace(/ /g, '').split('\n');
|
||||
// Process code lines
|
||||
for (i in lines) {
|
||||
if (lines[i]) {
|
||||
console.log(lines[i].split(';;'));
|
||||
}
|
||||
}*/
|
||||
});
|
||||
|
||||
// Stop button listener
|
||||
$(".btn-stop").click(function() {
|
||||
sumostart = false;
|
||||
sumorobot.send("stop");
|
||||
//workspace.highlightBlock(lastHighlighted, false);
|
||||
$('.btn-stop').click(function() {
|
||||
sumorobot.send('stop');
|
||||
// TODO: Stop highlighting blocks and lines
|
||||
});
|
||||
|
||||
// Enter listener on robot ID field
|
||||
$("#robot-id").keypress(function(e) {
|
||||
// Enter (return) keypress listener on robot ID field
|
||||
$('#robot-id').keypress(function(e) {
|
||||
if (e.which == 13) {
|
||||
// Simulate robot GO button click
|
||||
$(".btn-robot-go").click();
|
||||
$('.btn-robot-go').click();
|
||||
}
|
||||
});
|
||||
|
||||
// Robot number button listener
|
||||
$(".btn-robot-go").click(function() {
|
||||
// Robot GO button listener
|
||||
$('.btn-robot-go').click(function() {
|
||||
// Extract and validate the selected robot ID
|
||||
var robotId = $("#robot-id").val().trim();
|
||||
if (robotId === "" || /^([a-f0-9]{6})$/.test(robotId) == false) {
|
||||
$("#robot-id, #robot-label").addClass("has-error");
|
||||
var robotId = $('#robot-id').val().trim();
|
||||
if (robotId === '' || /^([a-f0-9]{6})$/.test(robotId) == false) {
|
||||
$('#robot-id, #robot-label').addClass('has-error');
|
||||
return;
|
||||
} else {
|
||||
$("#robot-id, #robot-label").removeClass("has-error");
|
||||
$('#robot-id, #robot-label').removeClass('has-error');
|
||||
}
|
||||
// Update robot IDs in local storage
|
||||
setLocalStorageItem("sumorobot.robotId", robotId);
|
||||
// In case there is a open connection
|
||||
if (sumorobot/* && blockHighlight*/) {
|
||||
// Close the connections
|
||||
// Update robot ID in local storage
|
||||
setLocalStorageItem('sumorobot.robotId', robotId);
|
||||
// When a connection was already opened
|
||||
if (sumorobot) {
|
||||
// Close the connection
|
||||
sumorobot.close();
|
||||
//blockHighlight.close();
|
||||
}
|
||||
// Connect to the selected robots WebSocket
|
||||
sumorobot = new Sumorobot(`ws://${ROBOT_SERVER}`, robotId);
|
||||
// connect to the other block highlight WebSocket
|
||||
//blockHighlight = new WebSocket("ws://" + robotServer + ":80/p2p/browser/" + robotId + "-highlight/");
|
||||
// when there is a message from the WebSocket
|
||||
/*blockHighlight.onmessage = function(evt) {
|
||||
// when scope is received
|
||||
if (evt.data.length == 20 && sumostart) {
|
||||
workspace.highlightBlock(evt.data);
|
||||
lastHighlighted = evt.data;
|
||||
}
|
||||
};*/
|
||||
// Hide the configuration panel
|
||||
$("#panel").hide();
|
||||
$('#panel').hide();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user