mirror of
https://github.com/google/blockly.git
synced 2026-01-08 17:40:09 +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.
82 lines
2.6 KiB
HTML
82 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Blockly Demo: Mirrored Blockly</title>
|
|
<script src="../../blockly_compressed.js"></script>
|
|
<script src="../../blocks_compressed.js"></script>
|
|
<script src="../../msg/js/en.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> > Mirrored Blockly</h1>
|
|
|
|
<p>This is a simple demo of a primary Blockly instance that controls a secondary Blockly instance with events.
|
|
Open the JavaScript console to see the event passing.</p>
|
|
|
|
<p>→ More info on <a href="https://developers.google.com/blockly/guides/configure/web/events">events</a>…</p>
|
|
|
|
<table width="100%">
|
|
<tr>
|
|
<td>
|
|
<div id="primaryDiv" style="height: 480px; width: 600px;"></div>
|
|
</td>
|
|
<td>
|
|
<div id="secondaryDiv" style="height: 480px; width: 430px;"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<xml id="toolbox" style="display: none">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<block type="controls_repeat_ext"></block>
|
|
<block type="math_number">
|
|
<field name="NUM">123</field>
|
|
</block>
|
|
<block type="math_arithmetic"></block>
|
|
<block type="text"></block>
|
|
<block type="text_print"></block>
|
|
<block type="variables_get"><field name="VAR">i</field></block>
|
|
<block type="variables_get"><field name="VAR">j</field></block>
|
|
<block type="variables_get"><field name="VAR">k</field></block>
|
|
</xml>
|
|
|
|
<script>
|
|
// Inject primary workspace.
|
|
var primaryWorkspace = Blockly.inject('primaryDiv',
|
|
{media: '../../media/',
|
|
toolbox: document.getElementById('toolbox')});
|
|
// Inject secondary workspace.
|
|
var secondaryWorkspace = Blockly.inject('secondaryDiv',
|
|
{media: '../../media/',
|
|
readOnly: true});
|
|
// Listen to events on primary workspace.
|
|
primaryWorkspace.addChangeListener(mirrorEvent);
|
|
|
|
function mirrorEvent(primaryEvent) {
|
|
if (primaryEvent.type == Blockly.Events.UI) {
|
|
return; // Don't mirror UI events.
|
|
}
|
|
// Convert event to JSON. This could then be transmitted across the net.
|
|
var json = primaryEvent.toJson();
|
|
console.log(json);
|
|
// Convert JSON back into an event, then execute it.
|
|
var secondaryEvent = Blockly.Events.fromJson(json, secondaryWorkspace);
|
|
secondaryEvent.run(true);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|