mirror of
https://github.com/google/blockly.git
synced 2026-01-04 15:40:08 +01:00
121 lines
3.1 KiB
HTML
121 lines
3.1 KiB
HTML
<!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 xmlns="https://developers.google.com/blockly/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 demoWorkspace = new Blockly.Workspace();
|
|
Blockly.Xml.domToWorkspace(xml, demoWorkspace);
|
|
var code = Blockly.Python.workspaceToCode(demoWorkspace);
|
|
document.getElementById('code_output').value = code;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|