МАПО 2013 Лекция 04 Фабрика Blockly

Фабрика Blockly

Гудаев О.А.

2013

2

Операторные схемы теоретическая основа Blockly

Лавров С.С. Программирование. Математические основы, средства, теория. – СПб: БХВ-Петербург, 2001. – 320 с.

3

4

5

6

7

8

9

Тестовое задание

• Использовать фабрику конструирования блоков Blockly для описания WebGL-сцены и документа в формате HTML5.

• Реализовать функции 2D-анимации средствами технологии Canvas в виде блоков Blockly.

10

Подготовка файлов1. Создайте папку «webgl» в корне каталога demos;

2. В папке «webgl» создайте файл в имени которого содержится буква учебной группы и номер по журналу: “webgl.<буква><номер по журналу>.js”. Буква строчная, а имя номера с 1 по 9 имеют ведущий ноль. Например, “webgl.a01.js”, “webgl.a05.js”, “webgl.a09.js”, “webgl.a17.js”;

3. Все создаваемые Вами функции описания блоков должны иметь префикс “webgl_<буква><номер>_<имя функции>”. Например, “webgl_a17_headerhtml5”;

4. В терминологии технологии Blockly примеры имен функций:

Blockly.Language.webgl_a17_headerhtml5

Blockly.JavaScript.webgl_a17_headerhtml5 = function()

11

Подключение файла с блоками webgl

В папке «demos\code» размещается файл «frame.html».

В файле «frame.html» после строчки:<script type="text/javascript" src="../../language/common/procedures.js"></script>

Добавьте строчку с подключением Вашего файла блоков «webgl»: <script type="text/javascript" src="../webgl/webgl.a17.js"></script>

12

Пример создания блока Введём JavaScript-код в тестовый файл «webgl.a17.js»:'use strict';

if (!Blockly.Language) Blockly.Language = {};

Blockly.Language.webgl_a17_headerhtml5 = { category: 'WebGL', helpUrl: 'file://localhost/C:/blockly/demos/webgl/ webgl_a17_headerhtml5.help.html',

init: function() { this.appendValueInput("VALUE") .appendTitle("Header HTML5 document. Tag <HTML>"); }};

Blockly.JavaScript.webgl_a17_headerhtml5 = function() { var code = '<HTML>' return code;};

13

Откройте в браузере файл «demos\code\index.html». В результате получим новую категорию «WebGL».

14

Генерация кода

Важно заметить, что генератор кода из строчкиcode = '<HTML>‘ сделает тег <HTML>

15

Справка о блоке

16

Справочный файл о блоке «headerhtml5» file://localhost/C:/blockly/demos/webgl/

webgl_a17_headerhtml5.help.html

17

SVG-редактор

18

Свойства документа

19

Размер изображения 64 х 48

20

Текстовый формат файла SVG

21

Подключаем SVG-файлизображение, текст. Имеем

прозрачный фон

this.appendValueInput("VALUE")// .appendTitle("Header HTML5 document. Tag <HTML>");

.appendTitle(new Blockly.FieldImage("../../media/canvas.svg", 64, 48));

22

Результат

23

Масштаб 120%

24

Масштаб 140%

25

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

Education

МАПО 2013 Лекция 04 Фабрика Blockly