block-hillblocklydemosmirror

File "index.html"

Full path: /usr/home/mndrn/domains/mndrn.ru/public_html/block-hill/blockly/demos/mirror/index.html
File size: 2.62 KiB (2683 bytes)
MIME-type: text/html
Charset: utf-8

Download   Open   Back 

<!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> &gt;
    <a href="../index.html">Demos</a> &gt; 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>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure/web/events">events</a>&hellip;</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 xmlns="https://developers.google.com/blockly/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 instanceof 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>

PHP File Manager