From 6a5afdefc312cedfe0fcc19817300f2885b85f02 Mon Sep 17 00:00:00 2001 From: Silver Kuusik Date: Sat, 20 Jan 2018 22:41:08 +0100 Subject: [PATCH] update chaning from Blockly to coding mode --- index.html | 13 +++++---- styles.css | 47 +++++++++++++++++++------------- sumorobot.js | 75 ++++++++++++++++++++++++++++++---------------------- 3 files changed, 81 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index bd9e5c8..8b389fc 100755 --- a/index.html +++ b/index.html @@ -32,10 +32,13 @@ - - +
+ +
+ +
-
+
@@ -45,7 +48,7 @@ @@ -53,7 +56,7 @@ diff --git a/styles.css b/styles.css index 4bd0702..e2b6694 100755 --- a/styles.css +++ b/styles.css @@ -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; } } diff --git a/sumorobot.js b/sumorobot.js index fd09b86..b03033c 100755 --- a/sumorobot.js +++ b/sumorobot.js @@ -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