newdavinci-blockly
Version:
New daVinci Fork of Blockly
476 lines (451 loc) • 14.8 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Blockly Playground</title>
<script src="../blockly_uncompressed.js"></script>
<script src="../generators/javascript.js"></script>
<script src="../generators/javascript/logic.js"></script>
<script src="../generators/javascript/loops.js"></script>
<script src="../generators/javascript/math.js"></script>
<script src="../generators/javascript/text.js"></script>
<script src="../generators/javascript/lists.js"></script>
<script src="../generators/javascript/colour.js"></script>
<script src="../generators/javascript/variables.js"></script>
<script src="../generators/javascript/procedures.js"></script>
<script src="../generators/python.js"></script>
<script src="../generators/python/logic.js"></script>
<script src="../generators/python/loops.js"></script>
<script src="../generators/python/math.js"></script>
<script src="../generators/python/text.js"></script>
<script src="../generators/python/lists.js"></script>
<script src="../generators/python/colour.js"></script>
<script src="../generators/python/variables.js"></script>
<script src="../generators/python/procedures.js"></script>
<script src="../generators/dart.js"></script>
<script src="../generators/dart/logic.js"></script>
<script src="../generators/dart/loops.js"></script>
<script src="../generators/dart/math.js"></script>
<script src="../generators/dart/text.js"></script>
<script src="../generators/dart/lists.js"></script>
<script src="../generators/dart/colour.js"></script>
<script src="../generators/dart/variables.js"></script>
<script src="../generators/dart/procedures.js"></script>
<script src="../msg/messages.js"></script>
<script src="../blocks/logic.js"></script>
<script src="../blocks/loops.js"></script>
<script src="../blocks/math.js"></script>
<script src="../blocks/text.js"></script>
<script src="../blocks/lists.js"></script>
<script src="../blocks/colour.js"></script>
<script src="../blocks/variables.js"></script>
<script src="../blocks/procedures.js"></script>
<!-- Load the Google Drive SDK Realtime libraries. -->
<script src="https://apis.google.com/js/api.js"></script>
<script>;
// Depending on the URL argument, render as LTR or RTL.
var rtl = (document.location.search == '?rtl');
var block = null;
function enableRealtimeSpecificUi() {
var realtimeDiv = document.getElementById('realtime');
realtimeDiv.display = 'block';
}
function start() {
var toolbox = document.getElementById('toolbox');
Blockly.inject(document.getElementById('blocklyDiv'),
{rtl: rtl,
media: '../media/',
toolbox: toolbox,
comments: true,
disable: true,
collapse: true,
grid:
{spacing: 25,
length: 3,
colour: '#ccc',
snap: true},
realtime: false,
realtimeOptions:
{clientId: 'YOUR CLIENT ID GOES HERE',
chatbox: {elementId: 'chatbox'},
collabElementId: 'collaborators'}});
if (Blockly.Realtime.isEnabled()) {
enableRealtimeSpecificUi();
}
}
function toXml() {
var output = document.getElementById('importExport');
var xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
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(Blockly.mainWorkspace, xml);
}
function toCode(lang) {
var output = document.getElementById('importExport');
output.value = Blockly[lang].workspaceToCode();
}
function airstrike(n) {
var prototypes = [];
var toolbox = document.getElementById('toolbox');
var blocks = toolbox.getElementsByTagName('block');
for (var i = 0, block; block = blocks[i]; i++) {
prototypes.push(block.getAttribute('type'));
}
for (var i = 0; i < n; i++) {
var prototype = prototypes[Math.floor(Math.random() * prototypes.length)];
var block = Blockly.Block.obtain(Blockly.mainWorkspace, prototype);
block.initSvg();
block.getSvgRoot().setAttribute('transform', 'translate(' +
Math.round(Math.random() * 450 + 40) + ', ' +
Math.round(Math.random() * 600 + 40) + ')');
block.render();
}
}
function spaghetti(n) {
var xml = spaghettiXml;
for(var i = 0; i < n; i++) {
xml = xml.replace(/(<(statement|next)( name="DO0")?>)<\//g,
'$1' + spaghettiXml + '</');
}
xml = '<xml xmlns="http://www.w3.org/1999/xhtml">' + xml + '</xml>';
var dom = Blockly.Xml.textToDom(xml);
console.time('Spaghetti domToWorkspace');
Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, dom);
console.timeEnd('Spaghetti domToWorkspace');
}
var spaghettiXml = [
' <block type="controls_if" inline="false" x="30" y="30">' +
' <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"></statement>' +
' <next></next>' +
' </block>'].join('\n');
</script>
<style>
html, body {
height: 100%;
}
body {
background-color: #fff;
font-family: sans-serif;
overflow: hidden;
}
h1 {
font-weight: normal;
font-size: 140%;
}
#blocklyDiv {
float: right;
height: 95%;
width: 70%;
}
#collaborators {
float: right;
width: 30px;
margin-left: 10px;
}
#collaborators > img {
margin-right: 5px;
height: 30px;
padding-bottom: 5px;
width: 30px;
border-radius: 3px;
}
#importExport {
font-family: monospace;
}
</style>
</head>
<body onload="start()">
<div id="collaborators"></div>
<div id="blocklyDiv"></div>
<xml id="toolbox" style="display: none">
<category name="Logic">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
<block type="logic_null"></block>
<block type="logic_ternary"></block>
</category>
<category name="Loops">
<block type="controls_repeat_ext">
<value name="TIMES">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
</block>
<block type="controls_whileUntil"></block>
<block type="controls_for">
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
<value name="BY">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
</block>
<block type="controls_forEach"></block>
<block type="controls_flow_statements"></block>
</category>
<category name="Math">
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="math_single"></block>
<block type="math_trig"></block>
<block type="math_constant"></block>
<block type="math_number_property"></block>
<block type="math_change">
<value name="DELTA">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
</block>
<block type="math_round"></block>
<block type="math_on_list"></block>
<block type="math_modulo"></block>
<block type="math_constrain">
<value name="LOW">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="HIGH">
<block type="math_number">
<field name="NUM">100</field>
</block>
</value>
</block>
<block type="math_random_int">
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="math_number">
<field name="NUM">100</field>
</block>
</value>
</block>
<block type="math_random_float"></block>
</category>
<category name="Text">
<block type="text"></block>
<block type="text_join"></block>
<block type="text_append">
<value name="TEXT">
<block type="text"></block>
</value>
</block>
<block type="text_length"></block>
<block type="text_isEmpty"></block>
<block type="text_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">text</field>
</block>
</value>
</block>
<block type="text_charAt">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">text</field>
</block>
</value>
</block>
<block type="text_getSubstring">
<value name="STRING">
<block type="variables_get">
<field name="VAR">text</field>
</block>
</value>
</block>
<block type="text_changeCase"></block>
<block type="text_trim"></block>
<block type="text_print"></block>
<block type="text_prompt_ext">
<value name="TEXT">
<block type="text"></block>
</value>
</block>
</category>
<category name="Lists">
<block type="lists_create_empty"></block>
<block type="lists_create_with"></block>
<block type="lists_repeat">
<value name="NUM">
<block type="math_number">
<field name="NUM">5</field>
</block>
</value>
</block>
<block type="lists_length"></block>
<block type="lists_isEmpty"></block>
<block type="lists_indexOf">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
<block type="lists_getIndex">
<value name="VALUE">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
<block type="lists_setIndex">
<value name="LIST">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
<block type="lists_getSublist">
<value name="LIST">
<block type="variables_get">
<field name="VAR">list</field>
</block>
</value>
</block>
<block type="lists_split">
<value name="DELIM">
<block type="text">
<field name="TEXT">,</field>
</block>
</value>
</block>
</category>
<category name="Colour">
<block type="colour_picker"></block>
<block type="colour_random"></block>
<block type="colour_rgb">
<value name="RED">
<block type="math_number">
<field name="NUM">100</field>
</block>
</value>
<value name="GREEN">
<block type="math_number">
<field name="NUM">50</field>
</block>
</value>
<value name="BLUE">
<block type="math_number">
<field name="NUM">0</field>
</block>
</value>
</block>
<block type="colour_blend">
<value name="COLOUR1">
<block type="colour_picker">
<field name="COLOUR">#ff0000</field>
</block>
</value>
<value name="COLOUR2">
<block type="colour_picker">
<field name="COLOUR">#3333ff</field>
</block>
</value>
<value name="RATIO">
<block type="math_number">
<field name="NUM">0.5</field>
</block>
</value>
</block>
</category>
<sep></sep>
<category name="Variables" custom="VARIABLE"></category>
<category name="Functions" custom="PROCEDURE"></category>
</xml>
<h1>Blockly Playground</h1>
<p><a href="javascript:void([document.getElementById('blocklyDiv').style.display = 'block', Blockly.mainWorkspace.render()])">Show</a>
- <a href="javascript:void(document.getElementById('blocklyDiv').style.display = 'none')">Hide</a></p>
<script>
if (rtl) {
document.write('[ ← RTL. Switch to <A HREF="?ltr">LTR</A>. ]');
} else {
document.write('[ → LTR. Switch to <A HREF="?rtl">RTL</A>. ]');
}
</script>
<p>
<input type="button" value="Export to XML" onclick="toXml()">
<input type="button" value="Import from XML" onclick="fromXml()">
<br>
<input type="button" value="To JavaScript" onclick="toCode('JavaScript')">
<input type="button" value="To Python" onclick="toCode('Python')">
<input type="button" value="To Dart" onclick="toCode('Dart')">
<br>
<textarea id="importExport" style="width: 26%; height: 12em"></textarea>
</p>
<hr>
<p>
Stress test:
<input type="button" value="Airstrike!" onclick="airstrike(100)">
<input type="button" value="Spaghetti!" onclick="spaghetti(8)">
</p>
<!-- Realtime setup buttons. -->
<div id="realtime" style="display: none">
<p>Test realtime collaboration by opening
<a target="_blank" href="#" onmouseover="this.href = window.location.href">
this link</a> in a separate browser window or tab and they will be
synchronized. You can even share the link with a friend!.</p>
<br>
<br>
<!-- Undo and redo buttons. -->
<!-- TODO: Uncomment this when undo/redo are fixed. -->
<!--
<button id="undoButton" disabled>Undo</button>
<button id="redoButton" disabled>Redo</button>
<br />
-->
<!-- Text area that will be used for our collaborative chat box. -->
<textarea id="chatbox" style="width: 26%; height: 12em" disabled="true"></textarea>
</div>
</body>
</html>