marva/sumorobot-web
1
0
Fork 1
Code Issues Pull Requests Activity

move ace to own file

Browse Source
This commit is contained in:
Silver Kuusik
2018-08-12 12:37:57 +02:00
parent 607825ed17
commit d6346b44eb
1 changed files with 68 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
assets/js/main.js
View File

@@ -1,87 +1,18 @@
// The local/remote server URL // The local/remote server URL
//var ROBOT_SERVER = "10.42.0.1"; //var ROBOT_SERVER = '10.42.0.1';
var ROBOT_SERVER = "ws.achex.ca:4010"; var ROBOT_SERVER = 'ws.achex.ca:4010';
var workspace;
// The sumorobot object // The sumorobot object
var sumorobot = null; var sumorobot;
// The sumorobot state
var sumostart = false;
// Disable / enable coding mode // Disable / enable coding mode
var codingEnabled = false; var codingEnabled = false;
// Disable / enable live stream // Disable / enable live stream
var liveStreamVisible = false; var liveStreamVisible = false;
// Where Blockly Python code is shown window.addEventListener('load', function() {
var readOnlyCodingEditor = null; // Set the robot ID from the localstorage
// Last hightlighted block id $('#robot-id').val(getLocalStorageItem('sumorobot.robotId'));
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())
});
// Key down event // Key down event
$(document).keydown(function(e) { $(document).keydown(function(e) {
@@ -94,29 +25,28 @@ window.addEventListener("load", function() {
// Select the hotkey // Select the hotkey
switch(e.which) { switch(e.which) {
case 32: // space bar case 32: // space bar
sumostart = !sumostart; if (sumorobot.moving) {
if (sumostart) { $('.btn-stop').addClass('hover');
$(".btn-start").addClass("hover"); $('.btn-stop').click();
$(".btn-start").click();
} else { } else {
$(".btn-stop").addClass("hover"); $('.btn-start').addClass('hover');
$(".btn-stop").click(); $('.btn-start').click();
} }
break; break;
case 37: // left case 37: // left
sumorobot.send("left"); sumorobot.send('left');
break; break;
case 38: // up case 38: // up
sumorobot.send("forward"); sumorobot.send('forward');
break; break;
case 39: // right case 39: // right
sumorobot.send("right"); sumorobot.send('right');
break; break;
case 40: // down case 40: // down
sumorobot.send("backward"); sumorobot.send('backward');
break; break;
case 67: // c case 67: // c
$("#panel").toggle(); $('#panel').toggle();
break; break;
case 76: // l case 76: // l
// No live stream if cookies are disabled // No live stream if cookies are disabled
@@ -124,24 +54,26 @@ window.addEventListener("load", function() {
// TODO: Open the cookie consent popup // TODO: Open the cookie consent popup
return; return;
} }
// Load the Mixer stream // Load the Mixer stream when it is not yet loaded
if ($("#stream").is(':empty')) { if ($('#stream').is(':empty')) {
$("#stream").html('<iframe src="https://mixer.com/embed/player/14551694"></iframe>'); $('#stream').html('<iframe src="https://mixer.com/embed/player/14551694"></iframe>');
} }
$("#stream").toggle(); $('#stream').toggle();
// Toggle live steam visible // Toggle live steam visible
liveStreamVisible = !liveStreamVisible; liveStreamVisible = !liveStreamVisible;
// If not in coding mode // If not in coding mode
if (codingEnabled == false) { if (codingEnabled == false) {
$("#readOnlyBlocklyCode").toggle(); $('#readOnlyBlocklyCode').toggle();
} }
break; break;
case 80: // p case 80: // p
$("#blocklyDiv").toggle(); $('#blocklyDiv').toggle();
$("#blocklyArea").toggle(); $('#blocklyArea').toggle();
$("#blocklyCode").toggle(); $('#blocklyCode').toggle();
// When live stream is not active
if (liveStreamVisible == false) { if (liveStreamVisible == false) {
$("#readOnlyBlocklyCode").toggle(); // Toggle Blockly Python code
$('#readOnlyBlocklyCode').toggle();
} }
// Toggle coding enabled // Toggle coding enabled
codingEnabled = !codingEnabled; codingEnabled = !codingEnabled;
@@ -156,15 +88,15 @@ window.addEventListener("load", function() {
// Implement something // Implement something
break; break;
case 83: // s case 83: // s
$(".btn-stop").addClass("hover"); $('.btn-stop').addClass('hover');
$(".btn-stop").click(); $('.btn-stop').click();
break; break;
case 84: // t case 84: // t
sumorobot.send("calibrate_line"); sumorobot.send('calibrate_line');
break; break;
case 87: // w case 87: // w
$(".btn-start").addClass("hover"); $('.btn-start').addClass('hover');
$(".btn-start").click(); $('.btn-start').click();
break; break;
} }
}); });
@@ -177,72 +109,67 @@ window.addEventListener("load", function() {
$('.btn').removeClass('hover'); $('.btn').removeClass('hover');
// If arrow keys were pressed // If arrow keys were pressed
if (e.which == 37 || e.which == 38 || e.which == 39 || e.which == 40) { if (e.which == 37 || e.which == 38 || e.which == 39 || e.which == 40) {
sumorobot.send("stop"); sumorobot.send('stop');
} }
}); });
// Start button listener // Start button listener
$(".btn-start").click(function() { $('.btn-start').click(function() {
sumostart = true; // When we are in Python coding mode
// When we are in coding mode
if (codingEnabled) { if (codingEnabled) {
var parsedCode = codingEditor.getValue().replace(/"/g, '\\"').replace(/\n/g, ';;'); // Get the Python code
// Send the code from the textarea to the SumoRobot parsedCode = codingEditor.getValue();
sumorobot.send("code", parsedCode);
// Otherwise when we are in Blockly mode // Otherwise when we are in Blockly mode
} else { } else {
// Send the code from the blocks to the SumoRobot // Get the code from the blocks
var parsedCode = sumorobot.getBlocklyCode().replace(/"/g, '\\"').replace(/\n/g, ';;'); parsedCode = sumorobot.getBlocklyCode().replace(/;;.{20}/g, '');
sumorobot.send("code", parsedCode);
} }
// 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 // Stop button listener
$(".btn-stop").click(function() { $('.btn-stop').click(function() {
sumostart = false; sumorobot.send('stop');
sumorobot.send("stop"); // TODO: Stop highlighting blocks and lines
//workspace.highlightBlock(lastHighlighted, false);
}); });
// Enter listener on robot ID field // Enter (return) keypress listener on robot ID field
$("#robot-id").keypress(function(e) { $('#robot-id').keypress(function(e) {
if (e.which == 13) { if (e.which == 13) {
// Simulate robot GO button click // Simulate robot GO button click
$(".btn-robot-go").click(); $('.btn-robot-go').click();
} }
}); });
// Robot number button listener // Robot GO button listener
$(".btn-robot-go").click(function() { $('.btn-robot-go').click(function() {
// Extract and validate the selected robot ID // Extract and validate the selected robot ID
var robotId = $("#robot-id").val().trim(); var robotId = $('#robot-id').val().trim();
if (robotId === "" || /^([a-f0-9]{6})$/.test(robotId) == false) { if (robotId === '' || /^([a-f0-9]{6})$/.test(robotId) == false) {
$("#robot-id, #robot-label").addClass("has-error"); $('#robot-id, #robot-label').addClass('has-error');
return; return;
} else { } else {
$("#robot-id, #robot-label").removeClass("has-error"); $('#robot-id, #robot-label').removeClass('has-error');
} }
// Update robot IDs in local storage // Update robot ID in local storage
setLocalStorageItem("sumorobot.robotId", robotId); setLocalStorageItem('sumorobot.robotId', robotId);
// In case there is a open connection // When a connection was already opened
if (sumorobot/* && blockHighlight*/) { if (sumorobot) {
// Close the connections // Close the connection
sumorobot.close(); sumorobot.close();
//blockHighlight.close();
} }
// Connect to the selected robots WebSocket // Connect to the selected robots WebSocket
sumorobot = new Sumorobot(`ws://${ROBOT_SERVER}`, robotId); 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 // Hide the configuration panel
$("#panel").hide(); $('#panel').hide();
}); });
}); });