diff --git a/demos/index.html b/demos/index.html index c6a5ad0eb..13eee2c97 100644 --- a/demos/index.html +++ b/demos/index.html @@ -107,8 +107,9 @@ -
JS Interpreter
-
Step by step execution in JavaScript.
+
JS Interpreter
+
Demo #1: Step by step execution in JavaScript.
+
Demo #2: Asynchronous execution in JavaScript.
diff --git a/demos/interpreter/async-execution.html b/demos/interpreter/async-execution.html new file mode 100644 index 000000000..e68f0dc0d --- /dev/null +++ b/demos/interpreter/async-execution.html @@ -0,0 +1,262 @@ + + + + + Blockly Demo: Asynchronous Execution with JS Interpreter + + + + + + + + + +

Blockly > + Demos > Asynchronous Execution with JS Interpreter

+ +

This is a demo of executing code asychronously (e.g., waiting for delays or user input) using the JavaScript interpreter.

+ +

More info on running code with JS Interpreter

+ +

+ +

+ +
+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/demos/interpreter/index.html b/demos/interpreter/index.html index c72f795a0..2245057c0 100644 --- a/demos/interpreter/index.html +++ b/demos/interpreter/index.html @@ -1,200 +1,11 @@ - - Blockly Demo: JS Interpreter - - - - - - + + Redirecting... + -

Blockly > - Demos > JS Interpreter

- -

This is a simple demo of executing code with a sandboxed JavaScript interpreter.

- -

→ More info on JS Interpreter

- -

- - -

- -
- - - - - - - +Redirecting to step execution jsinterpreter demo. diff --git a/demos/interpreter/step-execution.html b/demos/interpreter/step-execution.html new file mode 100644 index 000000000..8a8b95a6a --- /dev/null +++ b/demos/interpreter/step-execution.html @@ -0,0 +1,251 @@ + + + + + Blockly Demo: Step Execution with JS Interpreter + + + + + + + + +

Blockly > + Demos > Step Execution with JS Interpreter

+ +

This is a demo of executing code step-by-step with a sandboxed JavaScript interpreter.

+ +

The generator's Blockly.JavaScript.STATEMENT_PREFIX is assigned 'highlightBlock(%1);\n', + where %1 is the block id. The call to highlightBlock() will highlight the identified block + and set the variable highlightPause to true.

+ +

"Parse JavaScript" will generate the code and load it into the interpreter. Then, each press of the + "Step JavaScript" button will run the interpreter one step until the highlightPause is true. + That is, until highlightBlock() has highlighted the block that will be executed on the next step.

+ +

More info on running code with JS Interpreter

+ +

+ +

+ +
+
+ +
+ + + + + + + + diff --git a/demos/interpreter/wait_block.js b/demos/interpreter/wait_block.js new file mode 100644 index 000000000..f64d84047 --- /dev/null +++ b/demos/interpreter/wait_block.js @@ -0,0 +1,67 @@ +/** + * @license + * Visual Blocks Editor + * + * Copyright 2017 Google Inc. + * https://developers.google.com/blockly/ + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @fileoverview Example "wait" block that will pause the interpreter for a + * number of seconds. Because wait is a blocking behavior, such blocks will + * only work in interpreted environments. + * + * See https://neil.fraser.name/software/JS-Interpreter/docs.html + */ +Blockly.defineBlocksWithJsonArray([{ + "type": "wait_seconds", + "message0": " wait %1 seconds", + "args0": [{ + "type": "field_number", + "name": "SECONDS", + "min": 0, + "max": 600, + "value": 1 + }], + "previousStatement": null, + "nextStatement": null, + "colour": "%{BKY_LOOPS_HUE}" +}]); + +/** + * Generator for wait block creates call to new method + * waitForSeconds(). + */ +Blockly.JavaScript['wait_seconds'] = function(block) { + var seconds = Number(block.getFieldValue('SECONDS')); + var code = 'waitForSeconds(' + seconds + ');\n'; + return code; +}; + +/** + * Register the interpreter asynchronous function + * waitForSeconds(). + */ +function initInterpreterWaitForSeconds(interpreter, scope) { + // Ensure function name does not conflict with variable names. + Blockly.JavaScript.addReservedWords('waitForSeconds'); + + var wrapper = interpreter.createAsyncFunction( + function(timeInSeconds, callback) { + // Delay the call to the callback. + setTimeout(callback, timeInSeconds * 1000); + }); + interpreter.setProperty(scope, 'waitForSeconds', wrapper); +} \ No newline at end of file