Skip to content

Commit 8424e09

Browse files
david-hodgettsdavid-hodgetts
committed
work on blockly example
1 parent 1a6ae5d commit 8424e09

File tree

3 files changed

+85
-28
lines changed

3 files changed

+85
-28
lines changed

‎public/bollockly.html

+6-28
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,8 @@
44
<script src="lib/blockly/blocks_compressed.js"></script>
55
<script src="lib/blockly/msg/js/en.js"></script>
66
<script src="lib/blockly/javascript_compressed.js"></script>
7-
8-
<script>
9-
function loadBlockly(){
10-
var workspace = Blockly.inject('blocklyDiv',
11-
{toolbox: document.getElementById('toolbox')});
12-
13-
function myUpdateFunction() {
14-
var code = Blockly.JavaScript.workspaceToCode(workspace);
15-
console.log(Blockly.Xml.workspaceToDom(workspace));
16-
document.getElementById('textarea').value = code;
17-
}
18-
workspace.addChangeListener(myUpdateFunction);
19-
20-
window.execute = function (){
21-
Blockly.JavaScript.addReservedWords('code');
22-
var code = Blockly.JavaScript.workspaceToCode(workspace);
23-
console.log(code);
24-
try {
25-
eval(code);
26-
} catch (e) {
27-
alert(e);
28-
}
29-
}
30-
}
31-
window.onload = loadBlockly;
32-
33-
34-
</script>
7+
<script src="square.js"></script>
8+
<script src="bollockly.js"></script>
359

3610
</head>
3711
<body >
@@ -44,8 +18,12 @@
4418
<block type="math_arithmetic"></block>
4519
<block type="text"></block>
4620
<block type="text_print"></block>
21+
<block type="square"></block>
4722
</xml>
4823
<textarea id="textarea"></textarea>
4924
<button onclick="execute()">exec</button>
25+
<button onclick="save()">save</button>
26+
<button onclick="load()">load</button>
27+
<canvas width="400" height="400" id="canvas"></canvas>
5028
</body>
5129
</html>

‎public/bollockly.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
var startcode = '<xml xmlns="http://www.w3.org/1999/xhtml"><block type="controls_repeat_ext" x="67" y="262"><value name="TIMES"><block type="math_number"><field name="NUM">100</field></block></value><statement name="DO"><block type="square"><value name="COLOR"><block type="math_number"><field name="NUM">0</field></block></value></block></statement></block></xml> ';
2+
3+
4+
function loadBlockly(){
5+
var workspace = Blockly.inject('blocklyDiv',
6+
{toolbox: document.getElementById('toolbox')});
7+
8+
var xml = Blockly.Xml.textToDom(startcode);
9+
Blockly.Xml.domToWorkspace( Blockly.mainWorkspace, xml );
10+
function myUpdateFunction() {
11+
var code = Blockly.JavaScript.workspaceToCode(workspace);
12+
document.getElementById('textarea').value = code;
13+
}
14+
workspace.addChangeListener(myUpdateFunction);
15+
16+
window.save = function (){
17+
var dom = Blockly.Xml.workspaceToDom(workspace);
18+
console.log(dom);
19+
console.log(Blockly.Xml.domToText(dom));
20+
localStorage.setItem('data',Blockly.Xml.domToText(dom));
21+
};
22+
window.load = function () {
23+
if(localStorage.data!=null){
24+
var xml = Blockly.Xml.textToDom(localStorage.data);
25+
Blockly.Xml.domToWorkspace( Blockly.mainWorkspace, xml );
26+
console.log("restored");
27+
}
28+
};
29+
window.execute = function (){
30+
Blockly.JavaScript.addReservedWords('code');
31+
var code = Blockly.JavaScript.workspaceToCode(workspace);
32+
code = "var draw = function(ctx){ "+code+"};";
33+
console.log(code);
34+
try {
35+
eval(code);
36+
var canvas = document.getElementById("canvas");
37+
draw(canvas.getContext("2d"));
38+
} catch (e) {
39+
alert(e);
40+
}
41+
};
42+
43+
}
44+
window.onload = loadBlockly;

‎public/square.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
Blockly.Blocks['square'] = {
2+
init: function() {
3+
this.appendValueInput("COLOR")
4+
.appendField("color");
5+
this.appendValueInput("angle")
6+
.setCheck("Number")
7+
.appendField("ANGLE");
8+
this.setInputsInline(false);
9+
this.setPreviousStatement(true);
10+
this.setNextStatement(true);
11+
this.setColour(330);
12+
this.setTooltip('');
13+
this.setHelpUrl('http://www.example.com/');
14+
}
15+
};
16+
17+
Blockly.JavaScript['square'] = function(block) {
18+
var value_color = Blockly.JavaScript.valueToCode(block, 'COLOR', Blockly.JavaScript.ORDER_ATOMIC);
19+
var value_angle = Blockly.JavaScript.valueToCode(block, 'angle', Blockly.JavaScript.ORDER_ATOMIC);
20+
// TODO: Assemble JavaScript into code variable.
21+
var code = "("+makesquare().toString().replace("__COLOR__", value_color)+")(ctx)";
22+
return code;
23+
};
24+
25+
26+
function makesquare (){
27+
return function (context){
28+
context.rotate(this.rotation* this.toRadians);
29+
context.fillStyle = "rgb(__COLOR__,20,"+Math.floor(Math.random()*255)+")";
30+
var x = Math.floor(Math.random()*context.canvas.width);
31+
var y = Math.floor(Math.random()*context.canvas.height);
32+
context.fillRect(x, y, 50, 50);
33+
};
34+
}
35+

0 commit comments

Comments
 (0)