File "index.html"
Full path: /usr/home/mndrn/domains/mndrn.ru/public_html/block-hill/blockly/demos/custom-fields/turtle/index.html
File size: 5.11 KiB (5230 bytes)
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blockly Demo: Custom Turtle Field</title>
<script src="../../../blockly_uncompressed.js"></script>
<script src="blocks.js"></script>
<script src="field_turtle.js"></script>
<script src="../../../msg/js/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="turtle.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> > Turtle Field</h1>
<p>This is a demo of creating custom block fields. In this case the field
is used to define a turtle.
</p>
<p>All of the custom field implementation is in
demos/custom-fields/turtle/field_turtle.js, including comments on each required
function.
</p>
<p>Click on the blocks' comment icons to learn what they are demonstrating.
Use the buttons below to see how the fields react to changes.
</p>
<p>
<input type="button" value="set random style" onclick="setRandomStyle()">
<input type="button" value="toggle shadow" onclick="toggleShadow()">
<input type="button" value="toggle enabled" onclick="toggleEnabled()">
<input type="button" value="toggle editable" onclick="toggleEditable()">
<input type="button" value="toggle collapsed" onclick="toggleCollapsed()">
</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 setRandomStyle() {
var blocks = workspace.getAllBlocks(false);
var styles =
Object.keys(workspace.getRenderer().getConstants().blockStyles);
styles.splice(styles.indexOf(blocks[0].getStyleName()), 1);
var style = styles[Math.floor(Math.random() * styles.length)];
for(var i = 0, block; block = blocks[i]; i++) {
block.setStyle(style);
}
}
function toggleShadow() {
var blocks = workspace.getAllBlocks(false);
for(var i = 0, block; block = blocks[i]; i++) {
block.setShadow(!block.isShadow());
}
}
function toggleEnabled() {
var blocks = workspace.getAllBlocks(false);
for(var i = 0, block; block = blocks[i]; i++) {
block.setEnabled(!block.isEnabled());
}
}
function toggleEditable() {
Blockly.hideChaff();
var blocks = workspace.getAllBlocks(false);
for(var i = 0, block; block = blocks[i]; i++) {
block.setEditable(!block.isEditable());
}
}
function toggleCollapsed() {
Blockly.hideChaff();
var blocks = workspace.getAllBlocks(false);
for(var i = 0, block; block = blocks[i]; i++) {
block.setCollapsed(!block.isCollapsed());
}
}
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="turtle_basic"></block>
<block type="turtle_nullifier" y="120"></block>
<block type="turtle_changer" y="230"></block>
</xml>
</body>
</html>