index.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Blockly Demo: Headless</title>
  6. <script src="../../blockly_compressed.js"></script>
  7. <script src="../../blocks_compressed.js"></script>
  8. <script src="../../python_compressed.js"></script>
  9. <script src="../../msg/js/en.js"></script>
  10. <style>
  11. body {
  12. background-color: #fff;
  13. font-family: sans-serif;
  14. }
  15. h1 {
  16. font-weight: normal;
  17. font-size: 140%;
  18. }
  19. td {
  20. vertical-align: top;
  21. }
  22. textarea {
  23. width: 100%;
  24. height: 20em;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
  30. <a href="../index.html">Demos</a> &gt; Headless</h1>
  31. <p>This is a simple demo of generating Python code from XML with no graphics.
  32. This might be useful for server-side code generation.</p>
  33. <table style="width: 100%">
  34. <tr>
  35. <td style="width:50%">
  36. <textarea id="xml_input">
  37. <xml>
  38. <block type="controls_if" inline="false" x="20" y="20">
  39. <mutation else="1"></mutation>
  40. <value name="IF0">
  41. <block type="logic_compare" inline="true">
  42. <field name="OP">EQ</field>
  43. <value name="A">
  44. <block type="math_arithmetic" inline="true">
  45. <field name="OP">MULTIPLY</field>
  46. <value name="A">
  47. <block type="math_number">
  48. <field name="NUM">6</field>
  49. </block>
  50. </value>
  51. <value name="B">
  52. <block type="math_number">
  53. <field name="NUM">7</field>
  54. </block>
  55. </value>
  56. </block>
  57. </value>
  58. <value name="B">
  59. <block type="math_number">
  60. <field name="NUM">42</field>
  61. </block>
  62. </value>
  63. </block>
  64. </value>
  65. <statement name="DO0">
  66. <block type="text_print" inline="false">
  67. <value name="TEXT">
  68. <block type="text">
  69. <field name="TEXT">Don't panic</field>
  70. </block>
  71. </value>
  72. </block>
  73. </statement>
  74. <statement name="ELSE">
  75. <block type="text_print" inline="false">
  76. <value name="TEXT">
  77. <block type="text">
  78. <field name="TEXT">Panic</field>
  79. </block>
  80. </value>
  81. </block>
  82. </statement>
  83. </block>
  84. </xml>
  85. </textarea>
  86. </td>
  87. <td>
  88. </td>
  89. <td style="width:50%">
  90. <textarea id="code_output" readonly></textarea>
  91. </td>
  92. </tr>
  93. </table>
  94. <div style="text-align: center">
  95. <button onclick="generate()">Generate Python &#10548;</button>
  96. </div>
  97. <script>
  98. function generate() {
  99. // Parse the XML into a tree.
  100. var xmlText = document.getElementById('xml_input').value;
  101. try {
  102. var xml = Blockly.Xml.textToDom(xmlText)
  103. } catch (e) {
  104. alert(e);
  105. return;
  106. }
  107. // Create a headless workspace.
  108. var workspace = new Blockly.Workspace();
  109. Blockly.Xml.domToWorkspace(xml, workspace);
  110. var code = Blockly.Python.workspaceToCode(workspace);
  111. document.getElementById('code_output').value = code;
  112. }
  113. </script>
  114. </body>
  115. </html>