examples/pitch-field-demo/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Blockly Demo: Custom Pitch Field</title>
    <script src="./node_modules/blockly/blockly_compressed.js"></script>
    <script src="blocks.js"></script>
    <script src="field_pitch.js"></script>
    <script src="./node_modules/blockly/msg/en.js"></script>
    <style>
      body {
        margin: 0 10%;
        background-color: #fff;
        font-family: sans-serif;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
      }
      td {
        padding: 1ex;
      }
      img {
        border: none;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="pitch.css" />
  </head>
  <body onload="start()">
    <p>
      This is a demo of creating custom block fields. In this case the field is
      used to select a note pitch.
    </p>

    <p>
      &rarr; More info on
      <a
        href="https://developers.google.com/blockly/guides/create-custom-blocks/fields/customizing-fields/creating"
        >creating a custom field</a
      >&hellip;
    </p>

    <p>
      <input type="button" value="Export to XML" onclick="toXml()" />
      <input type="button" value="Import from XML" onclick="fromXml()" />
    </p>

    <table>
      <tr>
        <td>
          <textarea
            id="importExport"
            style="width: 200px; height: 480px"
            onchange="textAreaChange();"
            onkeyup="textAreaChange()"></textarea>
        </td>
        <td>
          <div id="blocklyDiv" style="width: 600px; height: 480px"></div>
        </td>
      </tr>
    </table>

    <script>
      function toXml() {
        var output = document.getElementById('importExport');
        var xml = Blockly.Xml.workspaceToDom(workspace);
        output.value = Blockly.Xml.domToPrettyText(xml);
        output.focus();
        output.select();
      }

      function fromXml() {
        var input = document.getElementById('importExport');
        var xml = Blockly.utils.xml.textToDom(input.value);
        Blockly.Xml.domToWorkspace(xml, workspace);
      }

      function appendDom() {
        var blocks = document.getElementById('workspace-blocks');
        if (blocks.firstElementChild) {
          Blockly.Xml.appendDomToWorkspace(blocks, workspace);
        }
      }

      function start() {
        workspace = Blockly.inject('blocklyDiv', options);
        appendDom();
        workspace.scrollCenter();
      }

      var options = {
        media: './node_modules/blockly/media/',
        grid: {
          spacing: 25,
          length: 3,
          colour: '#ccc',
        },
        move: {
          scrollbars: true,
          drag: true,
          wheel: true,
        },
        zoom: {
          controls: true,
          startScale: 1.0,
          maxScale: 4,
          minScale: 0.25,
          scaleSpeed: 1.1,
        },
        /*toolbox: document.getElementById('toolbox')*/
      };
    </script>

    <xml
      xmlns="https://developers.google.com/blockly/xml"
      id="workspace-blocks"
      style="display: none">
      <block type="test_pitch_field"></block>
    </xml>
  </body>
</html>