k-space/sumorobot-web
10
0
Fork 0
forked from marva/sumorobot-web
Code Issues Pull Requests Projects Wiki Activity

add ace editr for Python code

Browse Source
This commit is contained in:
Silver Kuusik 2018-01-17 12:16:26 +01:00
parent 716a91c7cf
commit 20519554d3
3 changed files with 78 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -6,13 +6,15 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap.min.css">
<link rel="shortcut icon" type="image/png" href="logo.png"/> <link rel="shortcut icon" type="image/png" href="logo.png"/>
<script src="jquery.min.js"></script> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap.min.js"></script> <script src="bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="blockly_compressed.js"></script> <script src="blockly_compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="blocks_compressed.js"></script> <script src="blocks_compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="python_compressed.js"></script> <script src="python_compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="msg/js/en.js"></script> <script src="msg/js/en.js" type="text/javascript" charset="utf-8"></script>
<script src="sumorobot.js"></script> <script src="sumorobot.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
</head> </head>
<body> <body>
<div id="battery">Disconnected</div> <div id="battery">Disconnected</div>
@ -59,7 +61,7 @@
<td id="blocklyArea"></td> <td id="blocklyArea"></td>
<td id="blocklyCodeArea"> <td id="blocklyCodeArea">
<div id="stream"></div> <div id="stream"></div>
<textarea id="blocklyCode" class="non-clickable"></textarea> <div id="blocklyCode"></div>
</td> </td>
</tr> </tr>
</table> </table>

9
styles.css
View File

@ -15,10 +15,6 @@ table.blockly-table {
height: 95%; height: 95%;
width: 100%; width: 100%;
} }
/* non clickable input forms */
.non-clickable {
pointer-events: none;
}
/* spans */ /* spans */
span.has-error { span.has-error {
color: #a94442 !important; color: #a94442 !important;
@ -126,7 +122,7 @@ div#stream {
td#blocklyCodeArea { td#blocklyCodeArea {
display: none; display: none;
} }
textarea#blocklyCode { div#blocklyCode {
display: none; display: none;
} }
} }
@ -140,8 +136,7 @@ div#stream {
width: 40%; width: 40%;
height: 100%; height: 100%;
} }
textarea#blocklyCode { div#blocklyCode {
border: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 1.8em; font-size: 1.8em;

75
sumorobot.js
View File

@ -6,6 +6,9 @@ var remoteControl = false;
//var robotServer = "10.42.0.1"; //var robotServer = "10.42.0.1";
var robotServer = "iot.koodur.com"; var robotServer = "iot.koodur.com";
/* ace editor object */
var pythonEditor = null;
/* the sumorobot code */ /* the sumorobot code */
var sumocode = ""; var sumocode = "";
/* the sumorobot object */ /* the sumorobot object */
@ -129,6 +132,44 @@ window.onload = function() {
/* load the control panel */ /* load the control panel */
updateControlPanel(); updateControlPanel();
/* load ace editor */
pythonEditor = ace.edit("blocklyCode");
/* set the style */
pythonEditor.setTheme("ace/theme/textmate");
pythonEditor.session.setMode("ace/mode/python");
pythonEditor.session.setTabSize(2);
pythonEditor.setReadOnly(true);
/* disable scrolling warning */
pythonEditor.$blockScrolling = Infinity;
/* enable autocomplete */
ace.require("ace/ext/language_tools");
pythonEditor.setOptions({
enableSnippets: true,
enableLiveAutocompletion: true,
enableBasicAutocompletion: true
});
/* add autocomplete keywords */
pythonEditor.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: "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: "set_led", score: 1000, meta: "sumorobot"},
{value: "is_line", score: 1000, meta: "sumorobot"},
{value: "set_servo", score: 1000, meta: "sumorobot"},
{value: "is_opponent", score: 1000, meta: "sumorobot"}
]);
}
});
/* change the if block to be more cheerful */ /* change the if block to be more cheerful */
Blockly.Msg.LOGIC_HUE = '#44CC00'; Blockly.Msg.LOGIC_HUE = '#44CC00';
Blockly.Constants.Logic.HUE = '#44CC00'; Blockly.Constants.Logic.HUE = '#44CC00';
@ -327,7 +368,7 @@ window.onload = function() {
} }
/* retrieve the blocks */ /* retrieve the blocks */
var xml = Blockly.Xml.textToDom(getLocalStorageItem("sumorobot.currentProgram")); var xml = Blockly.Xml.textToDom(getLocalStorageItem("sumorobot.blockly"));
/* resume the blocks */ /* resume the blocks */
Blockly.Xml.domToWorkspace(xml, workspace); Blockly.Xml.domToWorkspace(xml, workspace);
@ -358,12 +399,13 @@ window.onload = function() {
/* generate code from the used blocks */ /* generate code from the used blocks */
sumocode = Blockly.Python.workspaceToCode(workspace); sumocode = Blockly.Python.workspaceToCode(workspace);
/* show the code to the user, filter out block IDs */ /* show the code in the ace editor, filter out block IDs */
document.getElementById("blocklyCode").value = sumocode.replace(/[,]?[ ]?"(.*?)"/g, ""); pythonEditor.setValue("\n" + sumocode.replace(/[,]?[ ]?"(.*?)"/g, ""));
pythonEditor.clearSelection();
/* save the code to the local storage */ /* save the code to the local storage */
var xml = Blockly.Xml.workspaceToDom(workspace); var xml = Blockly.Xml.workspaceToDom(workspace);
localStorage.setItem("sumorobot.currentProgram", Blockly.Xml.domToText(xml)); localStorage.setItem("sumorobot.blockly", Blockly.Xml.domToText(xml));
/* if control_if block is used */ /* if control_if block is used */
if (controlBlockId != "") { if (controlBlockId != "") {
@ -431,14 +473,29 @@ window.onload = function() {
$("#blocklyCode").toggle(); $("#blocklyCode").toggle();
break; break;
case 80: // p case 80: // p
$("#blocklyCode").blur();
$("#blocklyDiv").toggle(); $("#blocklyDiv").toggle();
$("#blocklyArea").toggle(); $("#blocklyArea").toggle();
$("#blocklyCode").toggleClass("non-clickable"); /* disable / enable ace editor */
var event = {type: Blockly.Events.CHANGE}; pythonEditor.setReadOnly(pythonEnabled);
workspace.fireChangeListener(event);
/* toggle python enabled */ /* toggle python enabled */
pythonEnabled = !pythonEnabled; pythonEnabled = !pythonEnabled;
if (pythonEnabled) {
/* get the saved Python code from local storage or set empty */
pythonEditor.setValue(getLocalStorageItem("sumorobot.python") || "");
/* add an input listener for the code editor */
pythonEditor.on("change", function() {
setLocalStorageItem("sumorobot.python", pythonEditor.getValue())
});
pythonEditor.clearSelection();
pythonEditor.focus();
} else {
/* remove input listener from the code editor */
pythonEditor.session.removeAllListeners("change");
/* fire CHANGE event in Blockly workspace to change the Python code */
var event = {type: Blockly.Events.CHANGE};
workspace.fireChangeListener(event);
pythonEditor.blur();
}
break; break;
case 82: // r case 82: // r
if (remoteControl) if (remoteControl)
@ -483,7 +540,7 @@ window.onload = function() {
/* if we are in Python mode */ /* if we are in Python mode */
if (pythonEnabled) { if (pythonEnabled) {
/* send the code from the textarea to the SumoRobot */ /* send the code from the textarea to the SumoRobot */
sumorobot.send("start:" + $("#blocklyCode").val()); sumorobot.send("start:" + pythonEditor.getValue());
/* 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 */ /* send the code from the blocks to the SumoRobot */