mirror of
https://github.com/google/blockly.git
synced 2026-01-07 00:50:27 +01:00
104 lines
2.9 KiB
HTML
104 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Blockly Demo: Custom Pitch Field</title>
|
|
<script src="../../../blockly_uncompressed.js"></script>
|
|
<script src="blocks.js"></script>
|
|
<script src="field_pitch.js"></script>
|
|
<script src="../../../msg/js/en.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="pitch.css">
|
|
</head>
|
|
<body onload="start()">
|
|
<h1>
|
|
<a href="https://developers.google.com/blockly/">Blockly</a> >
|
|
<a href="../../index.html">Demos</a> >
|
|
<a href="../index.html">Custom Fields</a> > Pitch Field</h1>
|
|
|
|
|
|
<p>This is a demo of creating custom block fields. In this case the field
|
|
is used to select a note pitch.
|
|
</p>
|
|
|
|
<p>All of the custom field implementation is in
|
|
demos/custom-fields/pitch/field_pitch.js, including comments on each required
|
|
function.
|
|
</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.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: '../../../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>
|