123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Blockly Demo: Headless</title>
- <script src="../../blockly_compressed.js"></script>
- <script src="../../blocks_compressed.js"></script>
- <script src="../../python_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%;
- }
- td {
- vertical-align: top;
- }
- textarea {
- width: 100%;
- height: 20em;
- }
- </style>
- </head>
- <body>
- <h1><a href="https://developers.google.com/blockly/">Blockly</a> >
- <a href="../index.html">Demos</a> > Headless</h1>
- <p>This is a simple demo of generating Python code from XML with no graphics.
- This might be useful for server-side code generation.</p>
- <table style="width: 100%">
- <tr>
- <td style="width:50%">
- <textarea id="xml_input">
- <xml>
- <block type="controls_if" inline="false" x="20" y="20">
- <mutation else="1"></mutation>
- <value name="IF0">
- <block type="logic_compare" inline="true">
- <field name="OP">EQ</field>
- <value name="A">
- <block type="math_arithmetic" inline="true">
- <field name="OP">MULTIPLY</field>
- <value name="A">
- <block type="math_number">
- <field name="NUM">6</field>
- </block>
- </value>
- <value name="B">
- <block type="math_number">
- <field name="NUM">7</field>
- </block>
- </value>
- </block>
- </value>
- <value name="B">
- <block type="math_number">
- <field name="NUM">42</field>
- </block>
- </value>
- </block>
- </value>
- <statement name="DO0">
- <block type="text_print" inline="false">
- <value name="TEXT">
- <block type="text">
- <field name="TEXT">Don't panic</field>
- </block>
- </value>
- </block>
- </statement>
- <statement name="ELSE">
- <block type="text_print" inline="false">
- <value name="TEXT">
- <block type="text">
- <field name="TEXT">Panic</field>
- </block>
- </value>
- </block>
- </statement>
- </block>
- </xml>
- </textarea>
- </td>
- <td>
- </td>
- <td style="width:50%">
- <textarea id="code_output" readonly></textarea>
- </td>
- </tr>
- </table>
- <div style="text-align: center">
- <button onclick="generate()">Generate Python ⤴</button>
- </div>
- <script>
- function generate() {
- // Parse the XML into a tree.
- var xmlText = document.getElementById('xml_input').value;
- try {
- var xml = Blockly.Xml.textToDom(xmlText)
- } catch (e) {
- alert(e);
- return;
- }
- // Create a headless workspace.
- var workspace = new Blockly.Workspace();
- Blockly.Xml.domToWorkspace(xml, workspace);
- var code = Blockly.Python.workspaceToCode(workspace);
- document.getElementById('code_output').value = code;
- }
- </script>
- </body>
- </html>
|