Лабораторная работа №1 МАПО Blockly

1. Лабораторная работа №1
Дисциплина: «Моделирование и анализ ПО»
Тема: «Фабрика Blockly»
Выполнил студент группы ПОС-10б
Пожидаев Савятослав

2. SVG - изображение
<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<ellipse stroke="#000000" ry="8.25" rx="29.249999" id="svg_13" cy="44.75"
cx="32.499999" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-
dasharray="null" stroke-width="null" fill="#000000"/>
<ellipse stroke="#000000" stroke-opacity="0" ry="7.375" rx="23.875003" id="svg_8"
cy="44.625" cx="26.875003" stroke-linecap="null" stroke-linejoin="null" stroke-
dasharray="null" stroke-width="null" fill="#FF0000"/>
<path id="svg_11" d="m2.7125,44.538124l24.142969,-42.249999l24.142731,42.249999l-
48.2857,0z" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-
dasharray="null" stroke-width="null" stroke="#000000" fill="#FF0000"/>
<path stroke="#000000" id="svg_24" d="m27.083881,2.3c0,0 18.186607,31.600021
23.913883,41.999999c5.727276,10.399982 -42.904321,8.10001 -41.497622,5c1.406699,-
3.099998 17.583738,-46.999999 17.583738,-46.999999z" stroke-opacity="0" stroke-
linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null"
fill="#7f0000"/>
</g>
</svg>
Исходный текст

3. SVG - изображение

4. Блок рисующий конус
100%
125%
150%

5. Блок HTML
Blockly.Language.webgl_b17_mainhtml = {
category: 'WebGL',
init: function() {
this.setColour(230);
this.appendDummyInput()
.appendTitle("HTML");
this.appendStatementInput("NAME");
this.setTooltip('');
}
};
Blockly.JavaScript.webgl_b17_mainhtml = function() {
var statements_name =
Blockly.JavaScript.statementToCode(this, 'NAME');
var code = '&lt;HTML&gt;' +statements_name+
'n&lt;/HTML&gt;';
return code;
};

6. Блок head
Blockly.Language.webgl_b17_head = {
category: 'WebGL',
init: function() {
this.setColour(230);
this.appendDummyInput()
.appendTitle("head");
this.appendStatementInput("NAME");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip('');
}
};
Blockly.JavaScript.webgl_b17_head = function() {
var statements_name =
Blockly.JavaScript.statementToCode(this, 'NAME');
var code = 'n&lt;head&gt;' +statements_name+
'n&lt;/head&gt;';
return code;
};

7. Блок body
Blockly.Language.webgl_b17_body = {
category: 'WebGL',
init: function() {
this.setColour(230);
this.appendDummyInput()
.appendTitle("body");
this.appendStatementInput("NAME");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip('');
}
};
Blockly.JavaScript.webgl_b17_body = function() {
var statements_name =
Blockly.JavaScript.statementToCode(this, 'NAME');
var code = 'n&lt;body&gt;' +statements_name+
'n&lt;/body&gt;';
return code;
};

8. Блок title
Blockly.Language.webgl_b17_title = {
category: 'WebGL',
init: function() {
this.setColour(120);
this.appendDummyInput()
.appendTitle("title")
.appendTitle(new
Blockly.FieldTextInput("title for web
browser"), "NAME");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip('');
}
};
Blockly.JavaScript.webgl_b17_title = function() {
var text_name = this.getTitleValue('NAME');
var code = 'n&lt;title&gt;' +text_name+
'&lt;/title&gt;';
return code;
};

9. Блок Cone
Blockly.Language.webgl_b17_cone = {
category: 'WebGL',
init: function() {
this.setColour(230);
this.appendDummyInput()
.appendTitle(new
Blockly.FieldImage("../../media/Cone.svg",
40, 40))
.appendTitle("Cone")
.appendTitle(" H =")
.appendTitle(new
Blockly.FieldTextInput("100"), "H")
.appendTitle("R =")
.appendTitle(new
Blockly.FieldTextInput("50"), "R");
this.appendDummyInput()
.appendTitle("
Positin")
.appendTitle("X =
")
.appendTitle(new
Blockly.FieldTextInput("0"), "X")
.appendTitle("Y = ")
.appendTitle(new
Blockly.FieldTextInput("0"), "Y");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip('');
}
};
Blockly.JavaScript.webgl_b17_cone = function()
{
var text_h = this.getTitleValue('H');
var text_r = this.getTitleValue('R');
var text_x = this.getTitleValue('X');
var text_y = this.getTitleValue('Y');
var code =
'addConde('+text_r+','+text_h+','+text_x+','+t
ext_y+');n';
return code;
};

10. Блок include THREE
Blockly.Language.webgl_b17_include_lib = {
category: 'WebGL',
init: function() {
this.setColour(290);
this.appendDummyInput()
.appendTitle("include THREE")
.appendTitle("src=")
.appendTitle(new Blockly.FieldTextInput("src/three.min.js"),
"NAME");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip('');
}
};
Blockly.JavaScript.webgl_b17_include_lib = function() {
var text_name = this.getTitleValue('NAME');
var code = 'n&lt;script src="'+text_name+'"&gt;&lt;/script&gt;';
return code;
};

11. Блок check html5
Blockly.Language.webgl_b17_check_html5 = {
category: 'WebGL',
helpUrl: 'http://www.example.com/',
init: function() {
this.setColour(160);
this.appendDummyInput()
.appendTitle("Check html5")
this.appendStatementInput("support")
.appendTitle(" html5 support");
this.appendStatementInput("not_support")
.appendTitle(" html5 not
support");
this.setPreviousStatement(true);
this.setNextStatement(true);
this.setTooltip('');
}
};

12. Блок check html5Blockly.JavaScript.webgl_b17_check_html5 = function() {
var statements_support = Blockly.JavaScript.statementToCode(this, 'support');
var statements_not_support = Blockly.JavaScript.statementToCode(this, 'not_support');
var scriptStart = 'n&lt;script&gt;';
var animate = 'nfunction animate(){n'+
'trenderer.render(scene, camera);n'+
'trequestAnimationFrame(function(){ animate(); });n'+
'}n';
var variable = 'var renderer = new THREE.WebGLRenderer();n' +
'renderer.setSize(window.innerWidth, window.innerHeight);n'+
'document.body.appendChild(renderer.domElement);n'+
'var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1,
1000);n'+
'camera.position.z = 700;n'+
'var scene = new THREE.Scene();n';
var addCone = 'function addConde(r,h,x,y){n'+
'tvar cylinder = new THREE.Mesh(new THREE.CylinderGeometry(0, r, h, 50, 50, false), new
THREE.MeshNormalMaterial());n'+
'tcylinder.overdraw = true;n'+
'tscene.add(cylinder);n'+
'}n';
var strif = 'nif (supports_canvas()) {' + animate + variable + addCone +
statements_support+'animate();n' + 'n} else {n'+statements_not_support+'n}';
var check = 'nfunction supports_canvas() { n return
!!document.createElement('canvas').getContext;n}';
var scriptEnd = 'n&lt;/script&gt;';
var code = scriptStart + strif + check + scriptEnd;
return code;
};

13. Генерация кода
<HTML>
</HTML>
<head>
</head>
<body>
</body>
<title>title for web browser</title>
addConde(50,100,0,0);
<script
src="src/three.min.js"></script>

14. Генерация кода
<script>
if (supports_canvas()) {
function animate(){
renderer.render(scene, camera);
requestAnimationFrame(function(){ animate(); });
}
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth /
window.innerHeight, 1, 1000);
camera.position.z = 700;
var scene = new THREE.Scene();
function addConde(r,h,x,y){
var cylinder = new THREE.Mesh(new
THREE.CylinderGeometry(0, r, h, 50, 50, false), new
THREE.MeshNormalMaterial());
cylinder.overdraw = true;
scene.add(cylinder);
}
animate();
} else {
}
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
</script>

15. Спасибо за внимание