mirror of
https://github.com/google/blockly.git
synced 2026-01-08 09:30:06 +01:00
5c541c6f99
Using 123 as a better indicator to the user this block can represent any number, and the user should replace this value with their own desired number.
265 lines
8.6 KiB
HTML
265 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Blockly Demo: Asynchronous Execution with JS Interpreter</title>
|
|
<script src="acorn_interpreter.js"></script>
|
|
<script src="../../blockly_compressed.js"></script>
|
|
<script src="../../blocks_compressed.js"></script>
|
|
<script src="../../javascript_compressed.js"></script>
|
|
<script src="../../msg/js/en.js"></script>
|
|
<script src="wait_block.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1><a href="https://developers.google.com/blockly/">Blockly</a> >
|
|
<a href="../index.html">Demos</a> > Asynchronous Execution with JS Interpreter</h1>
|
|
|
|
<p>This is a demo of executing code asychronously (e.g., waiting for delays or user input) using the JavaScript interpreter.</p>
|
|
|
|
<p>→ <a href="https://developers.google.com/blockly/guides/configure-blockly/web/running-javascript#js_interpreter">More info on running code with JS Interpreter</a></p>
|
|
|
|
<p>
|
|
<button onclick="runCode()" id="runButton">Run JavaScript</button>
|
|
</p>
|
|
|
|
<div style="width: 100%">
|
|
<div id="blocklyDiv"
|
|
style="display: inline-block; height: 480px; width: 58%"></div>
|
|
<textarea id="output" disabled="disabled"
|
|
style="display: inline-block; height: 480px; width: 38%;">
|
|
</textarea>
|
|
</div>
|
|
|
|
<xml id="toolbox" style="display: none">
|
|
<category name="Logic">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<block type="logic_operation"></block>
|
|
<block type="logic_negate"></block>
|
|
<block type="logic_boolean"></block>
|
|
</category>
|
|
<category name="Loops">
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<block type="math_number">
|
|
<field name="NUM">10</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<block type="controls_whileUntil"></block>
|
|
</category>
|
|
<category name="Math">
|
|
<block type="math_number">
|
|
<field name="NUM">123</field>
|
|
</block>
|
|
<block type="math_arithmetic"></block>
|
|
<block type="math_single"></block>
|
|
</category>
|
|
<category name="Text">
|
|
<block type="text"></block>
|
|
<block type="text_length"></block>
|
|
<block type="text_print"></block>
|
|
<block type="text_prompt_ext">
|
|
<value name="TEXT">
|
|
<block type="text"></block>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
<category name="Variables" custom="VARIABLE"></category>
|
|
<category name="Functions" custom="PROCEDURE"></category>
|
|
</xml>
|
|
|
|
<xml id="startBlocks" style="display: none">
|
|
<block type="variables_set" id="set_n_initial" inline="true" x="20" y="20">
|
|
<field name="VAR">n</field>
|
|
<value name="VALUE">
|
|
<block type="math_number">
|
|
<field name="NUM">1</field>
|
|
</block>
|
|
</value>
|
|
<next>
|
|
<block type="controls_repeat_ext" id="repeat" inline="true">
|
|
<value name="TIMES">
|
|
<block type="math_number">
|
|
<field name="NUM">4</field>
|
|
</block>
|
|
</value>
|
|
<statement name="DO">
|
|
<block type="wait_seconds" id="wait">
|
|
<field name="SECONDS">1.0</field>
|
|
<next>
|
|
<block type="variables_set" id="set_n_update" inline="true">
|
|
<field name="VAR">n</field>
|
|
<value name="VALUE">
|
|
<block type="math_arithmetic" inline="true">
|
|
<field name="OP">MULTIPLY</field>
|
|
<value name="A">
|
|
<block type="variables_get">
|
|
<field name="VAR">n</field>
|
|
</block>
|
|
</value>
|
|
<value name="B">
|
|
<block type="math_number">
|
|
<field name="NUM">2</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</value>
|
|
<next>
|
|
<block type="text_print" id="print" inline="false">
|
|
<value name="TEXT">
|
|
<block type="variables_get">
|
|
<field name="VAR">n</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</next>
|
|
</block>
|
|
</next>
|
|
</block>
|
|
</statement>
|
|
</block>
|
|
</next>
|
|
</block>
|
|
</xml>
|
|
|
|
<script>
|
|
var demoWorkspace = Blockly.inject('blocklyDiv',
|
|
{media: '../../media/',
|
|
toolbox: document.getElementById('toolbox')});
|
|
Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),
|
|
demoWorkspace);
|
|
|
|
// Exit is used to signal the end of a script.
|
|
Blockly.JavaScript.addReservedWords('exit');
|
|
|
|
var outputArea = document.getElementById('output');
|
|
var runButton = document.getElementById('runButton');
|
|
var myInterpreter = null;
|
|
var runner;
|
|
|
|
function initApi(interpreter, scope) {
|
|
// Add an API function for the alert() block, generated for "text_print" blocks.
|
|
var wrapper = function(text) {
|
|
text = text ? text.toString() : '';
|
|
outputArea.value = outputArea.value + '\n' + text;
|
|
};
|
|
interpreter.setProperty(scope, 'alert',
|
|
interpreter.createNativeFunction(wrapper));
|
|
|
|
// Add an API function for the prompt() block.
|
|
var wrapper = function(text) {
|
|
text = text ? text.toString() : '';
|
|
return interpreter.createPrimitive(prompt(text));
|
|
};
|
|
interpreter.setProperty(scope, 'prompt',
|
|
interpreter.createNativeFunction(wrapper));
|
|
|
|
// Add an API for the wait block. See wait_block.js
|
|
initInterpreterWaitForSeconds(interpreter, scope);
|
|
|
|
// Add an API function for highlighting blocks.
|
|
var wrapper = function(id) {
|
|
id = id ? id.toString() : '';
|
|
return interpreter.createPrimitive(highlightBlock(id));
|
|
};
|
|
interpreter.setProperty(scope, 'highlightBlock',
|
|
interpreter.createNativeFunction(wrapper));
|
|
}
|
|
|
|
var highlightPause = false;
|
|
var latestCode = '';
|
|
|
|
function highlightBlock(id) {
|
|
demoWorkspace.highlightBlock(id);
|
|
highlightPause = true;
|
|
}
|
|
|
|
function resetStepUi(clearOutput) {
|
|
demoWorkspace.highlightBlock(null);
|
|
highlightPause = false;
|
|
runButton.disabled = '';
|
|
|
|
if (clearOutput) {
|
|
outputArea.value = 'Program output:\n=================';
|
|
}
|
|
}
|
|
|
|
function generateCodeAndLoadIntoInterpreter() {
|
|
// Generate JavaScript code and parse it.
|
|
Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
|
|
Blockly.JavaScript.addReservedWords('highlightBlock');
|
|
latestCode = Blockly.JavaScript.workspaceToCode(demoWorkspace);
|
|
|
|
resetStepUi(true);
|
|
}
|
|
|
|
function resetInterpreter() {
|
|
myInterpreter = null;
|
|
if (runner) {
|
|
clearTimeout(runner);
|
|
runner = null;
|
|
}
|
|
}
|
|
|
|
function runCode() {
|
|
if (!myInterpreter) {
|
|
// First statement of this code.
|
|
// Clear the program output.
|
|
resetStepUi(true);
|
|
runButton.disabled = 'disabled';
|
|
|
|
// And then show generated code in an alert.
|
|
// In a timeout to allow the outputArea.value to reset first.
|
|
setTimeout(function() {
|
|
alert('Ready to execute the following code\n' +
|
|
'===================================\n' +
|
|
latestCode);
|
|
|
|
// Begin execution
|
|
highlightPause = false;
|
|
myInterpreter = new Interpreter(latestCode, initApi);
|
|
runner = function() {
|
|
if (myInterpreter) {
|
|
var hasMore = myInterpreter.run();
|
|
if (hasMore) {
|
|
// Execution is currently blocked by some async call.
|
|
// Try again later.
|
|
setTimeout(runner, 10);
|
|
} else {
|
|
// Program is complete.
|
|
outputArea.value += '\n\n<< Program complete >>';
|
|
resetInterpreter();
|
|
resetStepUi(false);
|
|
}
|
|
}
|
|
};
|
|
runner();
|
|
}, 1);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Load the interpreter now, and upon future changes.
|
|
generateCodeAndLoadIntoInterpreter();
|
|
demoWorkspace.addChangeListener(function(event) {
|
|
if (!(event instanceof Blockly.Events.Ui)) {
|
|
// Something changed. Parser needs to be reloaded.
|
|
resetInterpreter();
|
|
generateCodeAndLoadIntoInterpreter();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|