• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Blockly
 

Blockly

on

  • 275 views

 

Statistics

Views

Total Views
275
Views on SlideShare
275
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Blockly Blockly Presentation Transcript

    • Лабораторная работа № 1 на тему «Фабрика Blockly» Выполнила студентка группы ПОС-10А Дрозд Юлия
    • Страница Blockly.Language.webgl_a09_html = { category: 'WebGL', helpUrl: 'http://www.example.com/', init: function() { this.setColour(330); this.appendValueInput("HTML") .setAlign(Blockly.ALIGN_CENTRE) .appendTitle("HTML"); this.appendStatementInput("HTML"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); this.appendValueInput("VALUE") .appendTitle(new Blockly.FieldImage("../../media/html.svg", 64, 48)); } }; Blockly.JavaScript.webgl_a09_html = function() { var value_html = Blockly.JavaScript.valueToCode(this, 'HTML', Blockly.JavaScript.ORDER_ATOMIC); var statements_html = Blockly.JavaScript.statementToCode(this, 'HTML'); var code = '<html>'/* + value_html + '< html>' */ return code; };
    • Тело Blockly.Language.webgl_a09_body = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html', init: function () { this.setColour(65); this.appendStatementInput("BODY") .appendTitle("Body"); this.appendStatementInput("NAME"); this.appendStatementInput("NAME"); this.appendDummyInput() .appendTitle("canvas id=") .appendTitle(new Blockly.FieldTextInput("canv"), "canv") this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_a09_body = function() { var statements_body = Blockly.JavaScript.statementToCode(this, 'BODY'); var statements_name = Blockly.JavaScript.statementToCode(this, 'NAME'); var statements_name = Blockly.JavaScript.statementToCode(this, 'NAME'); var code = '<body>&lt"'+statements_body+'"></body>n'; return code; };
    • Blockly.Language.webgl_a09_header = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html', init: function() { this.setColour(65); this.appendStatementInput("HEADER") .appendTitle("Header"); this.setOutput(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_a09_header = function() { var statements_header = Blockly.JavaScript.statementToCode(this, 'HEADER'); // TODO: Assemble JavaScript into code variable. var code = 'n<header>n' + value_header + 'n</header>' // TODO: Change ORDER_NONE to the correct strength. return [code, Blockly.JavaScript.ORDER_NONE]; }; Голова
    • Заголовок Blockly.Language.webgl_a09_title = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html', init: function() { this.setColour(160); this.appendDummyInput() .appendTitle("title") .appendTitle(new Blockly.FieldTextInput("Blockly"), "NAME"); this.setPreviousStatement(true); this.setNextStatement(true); //this.appendValueInput("TITLE") // .appendTitle("Title"); // this.setOutput(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_a09_title = function() { var value_title = Blockly.JavaScript.valueToCode(this, 'TITLE', Blockly.JavaScript.ORDER_ATOMIC); // TODO: Assemble JavaScript into code variable. //var code = 'n<title&gtn;' + statements_title + 'n</title>' var code = "'<title&gt'" + value_title.toString() +"'&lt Blockly ></canvas>" //return [code, Blockly.JavaScript.ORDER_NONE]; return code; };
    • Blockly.Language.a09_img = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/webgl_a09_headerhtml5.help.html', init: function() { this.setColour(280); this.appendDummyInput() .appendTitle("img") .appendTitle(new Blockly.FieldTextInput("canvas"), "NAME"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); } }; Blockly.JavaScript.a09_canvas = function() { var text_name_canvas = this.getTitleValue('NAME'); var code = "<canvas id='" + text_name_canvas.toString() +"' width="120" height="120" ></canvas>" canvas_name = text_name_canvas; return code; }; Canvas
    • Отрисовкакруга Blockly.Language.webgl_a09_circle = { category: 'WebGL_2d', helpUrl: '../webgl/webgl_a08_headerhtml5.help.html', init: function() { this.setColour(350); this.appendDummyInput() .appendTitle(new Blockly.FieldImage("../../media/html1.svg", 64, 48)) .appendTitle("Set coordinates A(x,y)& radius of the round:"); this.appendValueInput("x") .setCheck(Number) .setAlign(Blockly.ALIGN_RIGHT) .appendTitle("x"); this.appendValueInput("y") .setCheck(Number) .setAlign(Blockly.ALIGN_RIGHT) .appendTitle("y"); this.appendValueInput("r") .setCheck(Number) .setAlign(Blockly.ALIGN_RIGHT) .appendTitle("radius"); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); } }; Blockly.JavaScript.webgl_a09_circle = function() { var value_canv_id = Blockly.JavaScript.valueToCode(this, 'canv_id', Blockly.Java Script.ORDER_ATOMIC); var value_x = Blockly.JavaScript.valueToCode(this, 'x', Blockly.JavaScript. ORDER_ATOMIC); var value_y = Blockly.JavaScript.valueToCode(this, 'y', Blockly.JavaScript. ORDER_ATOMIC); var value_w = Blockly.JavaScript.valueToCode(this, 'radius', Blockly.JavaSc ript.ORDER_ATOMIC); // TODO: Assemble JavaScript into code variable. var code="var ctx = document.getElementById("+ value_canv_id + ").getContext('2d');n" code += 'ctx.save();n'; code += 'ctx.beginPath();n'; code += 'ctx.translate('+ value_x+',' + value_y+');n'; code += 'ctx.scale('+value_w +', 1);n'; code += "n gl.arc(" + parseInt(text_x) + ", "+parseInt(text_y)+", "+parseInt(text_radius)+", 0, 2 * Math.PI, false);"; code += 'ctx.restore();n'; code += 'ctx.closePath();n'; code += 'ctx.fill();n'; return code; };
    • html> <head> <title> Blockly</title> </head> <body> <canvas id ='canvas' width="1000" height=“800"> </canvas> <script> if (window.WebGLRenderingContext){ var c = document.getElementById('canvas'); var gl = c.getContext('2d'); gl.beginPath(); gl.arc(75,75, 37, 0, 2 * Math.PI, false); gl.lineWidth = 1; gl.strokeStyle = '#FFFFFF'; gl.stroke(); } </script> </body> JavaScriptкодпрограммы иеерезультат
    • Блок-представление программы
    • ИсходныйтекстSVG-файла <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <image xlink:href="images/logo.png" opacity="0.5" id="svg_1" height="0" width="0" y="279" x="422"/> <image xlink:href="images/logo.png" opacity="0.5" id="svg_2" height="0" width="0" y="305" x="450"/> <polyline id="svg_3" points="630,301 " opacity="0.5" stroke-linecap="round" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_4" points="612,296 " opacity="0.5" stroke-linecap="round" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_6" points="637,303 " opacity="0.5" stroke-linecap="round" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_7" points="684,348 " opacity="0.5" stroke-linecap="round" stroke-width="5" stroke="#000000" fill="none"/> <line id="svg_9" y2="242" x2="394" y1="242" x1="394" opacity="0.5" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_36" points="625,301 " opacity="0.5" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> <polyline id="svg_37" points="650,269 " opacity="0.5" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> <ellipse stroke="#000000" ry="32" rx="35" id="svg_54" cy="61" cx="61" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#7f007f"/> <rect stroke="#000000" id="svg_63" height="41" width="44" y="41" x="39" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <ellipse stroke="#000000" ry="16" rx="17" id="svg_64" cy="62" cx="61" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#7f007f"/> <path stroke="#000000" id="svg_66" d="m58.93317,57.45358c-36.4599,27.56387 23.01157,5.06276 12.85065,0.56253c-10.16098,-4.50021 -2.09198,4.78149 -13.74719,14.62572" stroke-linecap="round" stroke- linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path transform="rotate(-128.608 103.024 53.9096)" id="svg_69" d="m106.69904,45.42442c27.60645,12.37745 -13.16621,19.80392 -13.16621,19.80392c0,0 -14.44026,-32.18137 13.16621,-19.80392z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00" stroke="#000000"/> <path transform="rotate(-83.13 102.338 84.342)" id="svg_70" d="m105.51985,74.63885c23.89774,14.15408 -11.39735,22.64655 -11.39735,22.64655c0,0 -12.50031,-36.80064 11.39735,-22.64655z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00" stroke="#000000"/> <path stroke="#000000" transform="rotate(-49.8739 78 103)" id="svg_71" d="m81.56476,94.13998c26.77625,12.92422 -12.77014,20.67876 -12.77014,20.67876c0,0 -14.00601,-33.60297 12.77014,-20.67876z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" transform="rotate(-12.1443 48 103.5)" id="svg_72" d="m51.33182,94.45209c25.02625,13.19833 -11.93561,21.11731 -11.93561,21.11731c0,0 -13.09064,-34.31563 11.93561,-21.11731z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" transform="rotate(59.3227 16.5 64.5)" id="svg_73" d="m19.88998,57.05505c25.46347,10.86002 -12.1441,17.37604 -12.1441,17.37604c0,0 -13.31931,-28.23602 12.1441,-17.37604z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" transform="rotate(7.12499 25.5 89)" id="svg_74" d="m28.36844,80.64304c21.54562,12.19043 -10.2756,19.50465 -10.2756,19.50465c0,0 -11.27005,-31.69504 10.2756,-19.50465z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" transform="rotate(88.1524 22 38)" id="svg_79" d="m25.13297,29.83795c23.5329,11.90613 -11.22336,19.0498 -11.22336,19.0498c0,0 -12.30951,-30.95595 11.22336,-19.0498z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path stroke="#000000" id="svg_80" transform="rotate(151.221 63.9286 17.1252)" d="m66.61398,8.423c20.17049,12.69402 -9.61975,20.31042 -9.61975,20.31042c0,0 -10.55069,-33.00444 9.61975,-20.31042z" stroke- linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> <path id="svg_81" transform="rotate(-170.073 92.9287 26.1252)" d="m96.8252,16.2766c29.2678,14.3662 -13.9586,22.986 -13.9586,22.986c0,0 -15.3091,-37.35224 13.9586,-22.986z" stroke-linecap="round" stroke- linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00" stroke="#000000"/> <path stroke="#000000" id="svg_83" transform="rotate(138.983 41.9287 22.6252)" d="m44.97488,13.80811c22.88126,12.86157 -10.91257,20.57852 -10.91257,20.57852c0,0 -11.96866,-33.44011 10.91257,-20.57852z" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ffff00"/> </g> </svg>
    • ИзображениеSVG-файла
    • МасштабированиеSVG- файла 100% 175% 250%
    • Спасибо за внимание!