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

update chaning from Blockly to coding mode

Browse Source
This commit is contained in:
Silver Kuusik 2018-01-20 22:41:08 +01:00
parent 002f2ca932
commit 6a5afdefc3
3 changed files with 81 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -32,10 +32,13 @@
<table class="blockly-table">
<tr>
<td id="blocklyArea"></td>
<td id="blocklyCodeArea">
<td id="leftCell">
<div id="blocklyArea"></div>
<div id="blocklyCode" style="display: none;"></div>
</td>
<td id="rightCell">
<div id="stream"></div>
<div id="blocklyCode"></div>
<div id="readOnlyBlocklyCode"></div>
</td>
</tr>
</table>
@ -45,7 +48,7 @@
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="sumorobot_move"></block>
<block type="sumorobot_delay"></block>
<block type="sumorobot_sleep"></block>
<block type="sumorobot_opponent"></block>
<block type="sumorobot_line"></block>
</xml>
@ -53,7 +56,7 @@
<xml id="toolbox_no_if" style="display: none">
<block type="controls_if" disabled="true"></block>
<block type="sumorobot_move"></block>
<block type="sumorobot_delay"></block>
<block type="sumorobot_sleep"></block>
<block type="sumorobot_opponent"></block>
<block type="sumorobot_line"></block>
</xml>

47
styles.css
View File

@ -11,6 +11,9 @@ table.blockly-table {
height: 95%;
width: 100%;
}
td, tr {
padding: 0px;
}
/* robot ID label error */
span.has-error {
color: #a94442 !important;
@ -79,6 +82,24 @@ div#stream {
height: 100%;
display: none;
}
/* Blockly workspace */
div#blocklyArea {
width: 100%;
height: 100%;
}
/* ace editor */
div#blocklyCode {
width: 100%;
height: 100%;
display: none;
font-size: 1.3em;
}
/* read only ace editor */
div#readOnlyBlocklyCode {
width: 100%;
height: 100%;
font-size: 1.3em;
}
/* for desktop screen */
@media screen and (min-width: 1000px) {
/* logo object */
@ -113,22 +134,16 @@ div#stream {
font-size: 10vw !important;
border: 3px solid rgba(0, 0, 0, 0.1) !important;
}
/* Blockly workspace */
td#blocklyArea {
/* left table cell */
td#leftCell {
width: 60%;
height: 100%;
}
/* Blockly code area */
td#blocklyCodeArea {
/* right table cell */
td#rightCell {
width: 40%;
height: 100%;
}
/* ace editor */
div#blocklyCode {
width: 100%;
height: 100%;
font-size: 1.3em;
}
}
/* for mobile and tablet screen */
@media screen and (max-width: 1000px) {
@ -164,17 +179,13 @@ div#stream {
font-size: 10vw !important;
border: 3px solid rgba(0, 0, 0, 0.1) !important;
}
/* Blockly workspace */
td#blocklyArea {
/* left table cell */
td#leftCell {
width: 100%;
height: 100%;
}
/* Blockly code area */
td#blocklyCodeArea {
display: none;
}
/* ace editor */
div#blocklyCode {
/* right table cell */
td#rightCell {
display: none;
}
}

75
sumorobot.js
View File

@ -8,8 +8,8 @@ var robotServer = "iot.koodur.com";
/* ace editor object */
var codingEditor = null;
/* ace editor change callback */
var codingCallback = null;
/* read only ace editor object */
var readOnlyCodingEditor = null;
/* the sumorobot code */
var sumocode = "";
@ -21,6 +21,8 @@ var workspace = null;
var sumostart = false;
/* disable / enable coding mode */
var codingEnabled = false;
/* disable / enable live stream */
var liveStreamVisible = false;
/* control_if block id */
var controlBlockId = "";
@ -106,13 +108,23 @@ function setLocalStorageItem(item, value) {
window.onload = 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 */
codingEditor = ace.edit("blocklyCode");
/* set the style */
codingEditor.setTheme("ace/theme/textmate");
codingEditor.session.setMode("ace/mode/python");
codingEditor.session.setTabSize(2);
codingEditor.setReadOnly(true);
/* disable scrolling warning */
codingEditor.$blockScrolling = Infinity;
/* enable autocomplete */
@ -148,10 +160,18 @@ window.onload = function() {
]);
}
});
/* 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())
});
/* change the if block to be more cheerful */
Blockly.Msg.LOGIC_HUE = '#44CC00';
Blockly.Constants.Logic.HUE = '#44CC00';
/* remote previous and next statement from control_if block */
Blockly.defineBlocksWithJsonArray([
@ -223,13 +243,13 @@ window.onload = function() {
return false;
};
Blockly.Blocks['sumorobot_delay'] = {
Blockly.Blocks['sumorobot_sleep'] = {
init: function() {
this.setColour("#E64C00");
this.appendDummyInput()
.appendField("delay")
.appendField("sleep")
.appendField(new Blockly.FieldTextInput('1000',
Blockly.FieldNumber.numberValidator), 'DELAY');
Blockly.FieldNumber.numberValidator), 'SLEEP');
this.setPreviousStatement(true);
this.setNextStatement(true);
}
@ -273,8 +293,8 @@ window.onload = function() {
}
};
Blockly.Python['sumorobot_delay'] = function(block) {
var code = 'sumorobot.sleep(' + parseFloat(block.getFieldValue('DELAY')) + ', "' + block.id + '")\n';
Blockly.Python['sumorobot_sleep'] = function(block) {
var code = 'sumorobot.sleep(' + parseFloat(block.getFieldValue('SLEEP')) + ', "' + block.id + '")\n';
return code;
};
@ -363,8 +383,8 @@ window.onload = function() {
sumocode = Blockly.Python.workspaceToCode(workspace);
/* show the code in the ace editor, filter out block IDs */
codingEditor.setValue("\n" + sumocode.replace(/[,]?[ ]?"(.*?)"/g, ""));
codingEditor.clearSelection();
readOnlyCodingEditor.setValue("\n" + sumocode.replace(/[,]?[ ]?"(.*?)"/g, ""));
readOnlyCodingEditor.clearSelection();
/* save the code to the local storage */
var xml = Blockly.Xml.workspaceToDom(workspace);
@ -417,34 +437,27 @@ window.onload = function() {
break;
case 76: // l
$("#stream").toggle();
$("#blocklyCode").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();
/* resize the code editor */
codingEditor.resize();
/* disable / enable ace editor */
codingEditor.setReadOnly(codingEnabled);
$("#blocklyCode").toggle();
if (liveStreamVisible == false) {
$("#readOnlyBlocklyCode").toggle();
}
/* toggle coding enabled */
codingEnabled = !codingEnabled;
if (codingEnabled) {
/* get the saved code from local storage or set empty */
codingEditor.setValue(getLocalStorageItem("sumorobot.code") || "");
/* add an change listener for the code editor */
codingCallback = function() {
setLocalStorageItem("sumorobot.code", codingEditor.getValue())
};
codingEditor.on("change", codingCallback);
codingEditor.clearSelection();
/* resize the coding editor */
codingEditor.resize();
/* focus, so the user can start coding */
codingEditor.focus();
} else {
/* remove change listener from the coding editor */
codingEditor.off("change", codingCallback);
/* fire CHANGE event in Blockly workspace to change the code */
var event = {type: Blockly.Events.CHANGE};
workspace.fireChangeListener(event);
codingEditor.blur();
}
break;
case 82: // r