forked from marva/sumorobot-web
Create main.js
This commit is contained in:
Silver Kuusik
GitHub
parent
93972a3972
commit
db079ee6b7
248
assets/js/main.js
Normal file
248
assets/js/main.js
Normal file
@ -0,0 +1,248 @@
|
||||
// The local/remote server URL
|
||||
//var ROBOT_SERVER = "10.42.0.1";
|
||||
var ROBOT_SERVER = "ws.achex.ca:4010";
|
||||
|
||||
// The sumorobot object
|
||||
var sumorobot = null;
|
||||
// The sumorobot state
|
||||
var sumostart = false;
|
||||
// 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())
|
||||
});
|
||||
|
||||
// Key down event
|
||||
$(document).keydown(function(e) {
|
||||
// When the alt key is not pressed, don't process hotkeys
|
||||
if (e.altKey == false) return;
|
||||
|
||||
// Prevent typing in textfields
|
||||
e.preventDefault();
|
||||
|
||||
// Select the hotkey
|
||||
switch(e.which) {
|
||||
case 32: // space bar
|
||||
sumostart = !sumostart;
|
||||
if (sumostart) {
|
||||
$(".btn-start").addClass("hover");
|
||||
$(".btn-start").click();
|
||||
} else {
|
||||
$(".btn-stop").addClass("hover");
|
||||
$(".btn-stop").click();
|
||||
}
|
||||
break;
|
||||
case 37: // left
|
||||
sumorobot.send("left");
|
||||
break;
|
||||
case 38: // up
|
||||
sumorobot.send("forward");
|
||||
break;
|
||||
case 39: // right
|
||||
sumorobot.send("right");
|
||||
break;
|
||||
case 40: // down
|
||||
sumorobot.send("backward");
|
||||
break;
|
||||
case 67: // c
|
||||
$("#panel").toggle();
|
||||
break;
|
||||
case 76: // l
|
||||
// No live stream if cookies are disabled
|
||||
if (!cookiesEnabled) {
|
||||
// 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>');
|
||||
}
|
||||
$("#stream").toggle();
|
||||
// Toggle live steam visible
|
||||
liveStreamVisible = !liveStreamVisible;
|
||||
// If not in coding mode
|
||||
if (codingEnabled == false) {
|
||||
$("#readOnlyBlocklyCode").toggle();
|
||||
}
|
||||
break;
|
||||
case 80: // p
|
||||
$("#blocklyDiv").toggle();
|
||||
$("#blocklyArea").toggle();
|
||||
$("#blocklyCode").toggle();
|
||||
if (liveStreamVisible == false) {
|
||||
$("#readOnlyBlocklyCode").toggle();
|
||||
}
|
||||
// Toggle coding enabled
|
||||
codingEnabled = !codingEnabled;
|
||||
if (codingEnabled) {
|
||||
// Resize the coding editor
|
||||
codingEditor.resize();
|
||||
// Focus, so the user can start coding
|
||||
codingEditor.focus();
|
||||
}
|
||||
break;
|
||||
case 82: // r
|
||||
// Implement something
|
||||
break;
|
||||
case 83: // s
|
||||
$(".btn-stop").addClass("hover");
|
||||
$(".btn-stop").click();
|
||||
break;
|
||||
case 84: // t
|
||||
sumorobot.send("calibrate_line");
|
||||
break;
|
||||
case 87: // w
|
||||
$(".btn-start").addClass("hover");
|
||||
$(".btn-start").click();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Key up event
|
||||
$(document).keyup(function(e) {
|
||||
// When the alt key is not pressed, don't process hotkeys
|
||||
if (e.altKey == false) return;
|
||||
// Remove hover from buttons
|
||||
$('.btn').removeClass('hover');
|
||||
// If arrow keys were pressed
|
||||
if (e.which == 37 || e.which == 38 || e.which == 39 || e.which == 40) {
|
||||
sumorobot.send("stop");
|
||||
}
|
||||
});
|
||||
|
||||
// Start button listener
|
||||
$(".btn-start").click(function() {
|
||||
sumostart = true;
|
||||
// When we are in 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);
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
|
||||
// Stop button listener
|
||||
$(".btn-stop").click(function() {
|
||||
sumostart = false;
|
||||
sumorobot.send("stop");
|
||||
//workspace.highlightBlock(lastHighlighted, false);
|
||||
});
|
||||
|
||||
// Enter listener on robot ID field
|
||||
$("#robot-id").keypress(function(e) {
|
||||
if (e.which == 13) {
|
||||
// Simulate robot GO button click
|
||||
$(".btn-robot-go").click();
|
||||
}
|
||||
});
|
||||
|
||||
// Robot number 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");
|
||||
return;
|
||||
} else {
|
||||
$("#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
|
||||
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();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user