Пазлы HTML — Софт Эйт Софт
Description: Как использовать пазлы Вердж3Д для манипулирования HTML-элементами.

# Пазлы HTML

Эти пазлы используются для создания и изменения HTML-элементов, настройки внешнего вида, или для выполнения любых других задач на веб-странице вашего 3Д-веб-приложения (таких как обработка пользовательских событий, создание снимков экрана, загрузка файлов и т.д.).

## Содержание

- Что такое HTML DOM?
- Перечень пазлов
  - add HTML element
  - remove HTML element
  - set property
  - get property
  - create css rule
  - style constructor
  - set style
  - get style
  - set css rule
  - on event of
  - get event property
  - DOM object selector
  - query selector
  - call method
  - create canvas elem
  - draw line
  - remove line
  - bind element
  - unbind element
  - init fullscreen
  - open web page
  - social share link
  - set URL param
  - take screenshot
  - get URL data
  - download file
  - open file
  - opened file
  - drop file to
- Как правильно указывать пути к ресурсам расположенным в интернете
- Ссылки Data URL

#

## Что такое HTML DOM?

HTML DOM (HyperText Markup Language Document Object Model, смотрите техническую документацию здесь) — это программный интерфейс к HTML-странице. Это означает, что вы можете изменять страницу приложения не только путем её редактирования в момент создания, но и после её загрузки в браузере. DOM представляет контент страницы в виде объектов-элементов, которыми легко манипулировать с помощью пазлов (либо с использованием «Ява Скрипта»).

#

## Перечень пазлов

#

### add HTML element

Создает элемент HTML с указанным типом и идентификатором (соответствует атрибуту id) и добавляет внутрь (to), непосредственно перед (before) или сразу после (after) указанного существующего HTML-элемента.

Переключатель in parent doc должен быть установлен, если создаваемый HTML-элемент должен находиться во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

Например, чтобы создать красную ссылку на официальный сайт «Софт Эйт Софт», можно использовать следующие пазлы:

Поддерживаемые элементы:

Элемент | Описание
--- | ---
a | Ссылка. Используйте свойство `"href"`, чтобы назначить адрес ссылки и `"textContent"` либо `"innerHTML"`, чтобы назначить её текст. Кроме того, вы можете добавить любой кликабельный элемент внутрь этой ссылки с использованием того же пазла add HTML element.
b | Отображает внутренний текст (назначаемый с помощью свойств `"textContent"` и `"innerHTML"`) полужирным шрифтом.
br | Разделитель строки.
button | Кнопка.
canvas | Низкоуровневый элемент для рендеринга 2Д или 3Д-графики.
dialog | Определяет диалоговый элемент.
div | Определяет контейнер для других элементов. С помощью CSS может быть настроен для представления всего: иконок, изображений, кнопок, прелоадеров и др.
form | Определяет форму — элемент-контейнер для `<input>` и `<textarea>` элементов, в свою очередь представляющих поля этой формы.
h1..h6 | Заголовки страниц, от самых больших к самым маленьким. Текст заголовка указывается в свойстве `"textContent"`.
iframe | Определяет вложенное окно страницы (или подстраницу). УРЛ подстраницы указывается в свойстве `"src"`.
img | Элемент изображения. УРЛ данного изображения указывается в свойстве `"src"`.
input | Элемент ввода пользовательских данных. Свойство `"type"` определяет тип этого элемента, например: `"text"`, `"checkbox"`, `"file"`, `"radio"`, `"number"`, и т.д.
label | Элемент метки. Используется для указания текстовых надписей к полям формы, таким как `<input>` или `<textarea>`.
li | Элемент пункта списка. Является дочерним элементом для `<ul>` и `<ol>`, определяющих неупорядоченный и упорядоченных списки соответственно.
link | Элемент, используемый для подключения CSS-стилей и для определения брузерных иконок.
ol | Упорядоченный список. Используйте элементы `<li>` чтобы определить пункты этого списка.
option | Элемент опции родительского элемента `<select>`.
p | Определяет параграф. Текстовое наполнение параграфа указывается в свойстве `"textContent"`.
script | Используется для включения (и запуска) «Ява Скрипта». УРЛ этого скрипта указывается в свойстве `"src"`.
select | Определяет выпадающий список. Используйте элементы `<option>` чтобы определить пункты этого списка.
span | Определяет контейнер для текста.
style | Используется для подключения CSS-стилей. Код CSS указывается в свойстве `"textContent"`.
table | Таблица.
td | Определяет ячейку таблицы `<table>`.
th | Определяет заголовочную ячейку таблицы `<table>`.
tr | Определяет строку таблицы `<table>`.
textarea | Многострочный текст.
ul | Неупорядоченный список. Используйте элементы `<li>` чтобы определить пункты этого списка.
video | Видео-элемент. УРЛ видео файла указывается в свойстве `"src"`.

#

### remove HTML element

Удаляет HTML-элемент с указанным идентификатором. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

#

### set property

Устанавливает свойство HTML-элемента с указанным идентификатором (id). Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`). Пазл также работает со списками идентификаторов элементов.

Свойство | Описание
--- | ---
action | Указывает на УРЛ обрабатывающий отправку формы `<form>`.
alt | Устанавливает текст элемента, показываемый в случае если элемент не может быть показан.
checked | Показывает установлен ли элемент checkbox/radio.
className | Устанавливает атрибут элемента `class`.
cols | Устанавливает ширину элемента `<textarea>` (в символах).
disabled | Указывает что данный элемент или группа элементов должна быть выключена.
download | Указывает что target данного элемента будет загружаться по клику на элементе.
height | Определяет высоту элементов `<img>`, `<audio>`, `<video>`, `<canvas>` или `<iframe>`. Чтобы указать размеры для других элементов, используйте свойства CSS.
href | Указывает УРЛ назначения для элемента-ссылки.
htmlFor | Определяет элемент, связанный с элементом-ссылкой `<label>`.
id | Определяет уникальный идентификатор элемента.
innerHTML | Устанавливает внутренний HTML элемента.
loop | Указывает на то что `<audio>`/`<video>` должны зацикливать воспроизведение.
max | Устанавливает максимальное значение для элемента `<input>`.
method | Определяет каким образом отправлять на сервер содержимое элемента-формы `<form>`. Также может быть установлен в `"dialog"`, указывающий на специальные диалоговые формы.
min | Устанавливает минимальное значение для элемента `<input>`.
muted | Указывает что `<audio>`/`<video>` элементы должны воспроизводиться без звука.
name | Определяет имя элемента. Это имя используется при отправки форм.
placeholder | Краткое указание на то, что должно находиться в элементах `<input>` и `<textarea>`.
rel | Указывает на отношение текущего документа и связанного с ним документа. Используется для `<a>`, `<form>`, или `<link>`.
required | Логическое значение указывающее на то, требуется ли вводить значение для данного поля формы.
returnValue | Значение возвращаемое после закрытия диалога `<dialog>`.
rows | Устанавливает число строк элемента `<textarea>`.
scrollLeft | Указывает количество пикселей прокручивания в горизонтальном направлении.
scrollTop | Указывает количество пикселей прокручивания в вертикальном направлении.
src | Указывает УРЛ файла, загружаемого элементами `<img>`, `<video>`, `<script>` и `<iframe>`.
step | Интервал увеличения/уменьшения значений для элементов `<input>` типов `"number"`, `"range"` и `"date"`.
style | Определяет CSS-стиль конкретного элемента.
tabIndex | Устанавливает свойство элемента tabIndex.
target | Определяет пункт назначения для ссылок или отправляемых форм.
textContent | Устанавливает текстовое содержимое элемента.
title | Дополнительная информация, появляющаяся при наведении на элемент.
type | Тип элемента `<input>`, например `"number"`, `"text"`, `"file"`, `"radio"`.
value | Значение элементов `<input>`, `<button>` или `<option>`.
volume | Уровень громкости для элементов `<audio>`/`<video>`.
width | Определяет ширину элементов `<img>`, `<audio>`, `<video>`, `<canvas>` или `<iframe>`. Чтобы указать размеры для других элементов, используйте свойства CSS.

#

### get property

Получает значение свойства HTML-элемента с заданным идентификатором id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

Свойство | Описание
--- | ---
action | Получает УРЛ обрабатывающий отправку формы `<form>`.
alt | Получает текст элемента, показываемый в случае если элемент не может быть показан.
checked | Показывает установлен ли элемент checkbox/radio.
children | Получает список с дочерними HTML-элементами. Поскольку в списке возвращаются идентификаторы элементов (свойство `id`), в нём будут присутствовать только те HTML-элементы, на которых назначен идентификатор.
className | Получает атрибут элемента `class`.
clientHeight | Получает высоту элемента, включая заполнение, но исключая рамку, прокрутку и надбавку («маржин»).
clientWidth | Получает ширину элемента, включая заполнение, но исключая рамку, прокрутку и надбавку («маржин»).
cols | Получает ширину элемента `<textarea>` (в символах).
dataset | Получает словарь с атрибутами `data-`, присвоенными HTML-элементу. Позволяет добавлять/получать пользовательские данные непосредственно из элементов (без использования дополнительных переменных). Например, вы можете создать конфигуратор с набором текстур, в котором УРЛ-адреса изображений будут присвоены кликабельным HTML-элементам, из которых состоит палитра.
disabled | Указывает что данный элемент или группа элементов должна быть выключена.
download | Указывает что target данного элемента будет загружаться по клику на элементе.
duration | Время воспроизведения элементов `<audio>`/`<video>`.
ended | Возвращает `true` если элементы `<audio>`/`<video>` закончили воспроизведение.
height | Определяет высоту элементов `<img>`, `<audio>`, `<video>`, `<canvas>` или `<iframe>`. Чтобы указать размеры для других элементов, используйте свойства CSS.
href | Указывает УРЛ-адрес назначения для элемента-ссылки.
htmlFor | Определяет элемент, связанный с элементом-ссылкой `<label>`.
id | Определяет уникальный идентификатор элемента.
innerHTML | Получает внутренний HTML элемента.
innerHeight | Получает высоту браузерного окна, включая элемент прокрутки (если есть).
innerWidth | Получает ширину браузерного окна, включая элемент прокрутки (если есть).
loop | Указывает на то что `<audio>`/`<video>` должны зацикливать воспроизведение.
max | Получает максимальное значение для элемента `<input>`.
method | Определяет каким образом отправлять на сервер содержимое элемента-формы `<form>`. Также может быть установлен в `"dialog"`, указывающий на специальные диалоговые формы.
min | Получает минимальное значение для элемента `<input>`.
muted | Указывает что `<audio>`/`<video>` элементы должны воспроизводиться без звука.
name | Определяет имя элемента. Это имя используется при отправки форм.
offsetHeight | Получает высоту элемента, включая заполнение, рамку и прокрутку, но исключая надбавку («маржин»).
offsetWidth | Получает ширину элемента, включая заполнение, рамку и прокрутку, но исключая надбавку («маржин»).
paused | Возвращает `true` если `<audio>`/`<video>` элемент поставлен на паузу.
placeholder | Краткое указание на то, что должно находиться в элементах `<input>` и `<textarea>`.
rel | Указывает на отношение текущего документа и связанного с ним документа. Используется для `<a>`, `<form>`, или `<link>`.
required | Логическое значение указывающее на то, требуется ли вводить значение для данного поля формы.
returnValue | Значение возвращаемое после закрытия диалога `<dialog>`.
rows | Получает число строк элемента `<textarea>`.
scrollHeight | Получает высоту элемента, включая заполнение, но исключая рамку, прокрутку и надбавку («маржин»). В отличие от свойства `clientHeight` это значение включает общую высоту элемента, включая область невидимую пользователю из-за прокрутки.
scrollLeft | Указывает количество пикселей прокручивания элемента в горизонтальном направлении.
scrollTop | Указывает количество пикселей прокручивания элемента в вертикальном направлении.
scrollWidth | Получает ширину элемента, включая заполнение, но исключая рамку, прокрутку и надбавку («маржин»). В отличие от свойства `clientWidth` это значение включает общую ширину элемента, включая область невидимую пользователю из-за прокрутки.
scrollX | Указывает количество пикселей прокручивания браузерного окна в горизонтальном направлении.
scrollY | Указывает количество пикселей прокручивания браузерного окна в вертикальном направлении.
src | Указывает УРЛ файла, загружаемого элементами `<img>`, `<video>`, `<script>` и `<iframe>`.
step | Интервал увеличения/уменьшения значений для элементов `<input>` типов `"number"`, `"range"` и `"date"`.
style | Определяет CSS-стиль конкретного элемента.
tabIndex | Получает свойство элемента tabIndex.
target | Определяет пункт назначения для ссылок или отправляемых форм.
textContent | Получает текстовое содержимое элемента.
title | Дополнительная информация, появляющаяся при наведении на элемент.
type | Тип элемента `<input>`, например `"number"`, `"text"`, `"file"`, `"radio"`.
value | Значение элементов `<input>`, `<button>` или `<option>`.
volume | Уровень громкости для элементов `<audio>`/`<video>`.
width | Определяет ширину элементов `<img>`, `<audio>`, `<video>`, `<canvas>` или `<iframe>`. Чтобы указать размеры для других элементов, используйте свойства CSS.

#

### create css rule

Создает новое правило CSS. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

#

### style constructor

Создаёт строку с определениями CSS-стилей, разделёнными точкой с запятой.

Следующий пример позволяет сделать зелёную кнопку, расположенную в левом верхнем углу:

#

### set style

Устанавливает CSS-свойство для HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`). Также работает со списками идентификаторов элементов.

#

### get style

Получает CSS-свойство из HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

Этот пазл бывает очень полезен для создания 3Д-конфигураторов. Например, вы можете использовать следующий блок пазлов для назначения цвета материала на основании цвета фона HTML-элемента:

#

### set css rule

Устанавливает CSS-свойство для указанного правила CSS (находится в .css файлах приложения). Переключатель in parent doc должен быть установлен, если таблицы стилей принадлежат внешнему HTML-документу (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

#

### on event of

Регистрирует обработчик события для HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`). Как только происходит событие, срабатывают пазлы, помещенные в слот do. Также работает со списками идентификаторов элементов.

Собыите | Описание
--- | ---
beforeunload | Происходит перед выгрузкой страницы.
blur | Происходит когда элемент теряет фокус. В большинстве случаев обработчик этого события регистрируется на объекте window, чтобы определить момент переключения браузерной вкладки.
change | Происходит при изменении элементов `<input>`, `<select>` и `<textarea>`.
click | Вызывается по нажатию на элемент. Это событие используется наиболее часто.
contextmenu | Происходит при появлении стандартного меню браузера, вызываемого по правой кнопке мыши. Событие используется для переопределения или отключения данного меню.
dblclick | Вызывается по двойному нажатию на элемент. Это событие используется наиболее часто.
deviceready | Используется для «Кордова»-приложений. Вызывается когда приложение полностью загружено.
ended | Происходит по окончанию воспроизведения элементов `<audio>` и `<video>`.
focus | Происходит когда элемент получает фокус. В большинстве случаев обработчик этого события регистрируется на объекте window, чтобы определить момент переключения браузерной вкладки.
fullscreenchange | Вызывается при переходе в полноэкранный режим (или возврате из него). В большинстве случаев обработчик этого события регистрируется на объекте document.
input | Происходит при изменении элементов `<input>` и `<textarea>`.
keydown | Происходит при нажатии на кнопку клавиатуры. Свойство события `key` содержит нажатую кнопку. Смотрите как это работает в библиотеке Keyboard Controls.
keypress | Происходит при нажатии на кнопку клавиатуры. Событие считается устаревшим, вместо него используйте `keydown`.
keyup | Происходит при отпускании кнопки клавиатуры. Свойство события `key` содержит отпущенную кнопку. Смотрите как это работает в библиотеке Keyboard Controls.
load | Происходит при завершении загрузки страницы или элемента. В большинстве случаев обработчик этого события регистрируется на объекте window (для всей страницы) или `<img>` (чтобы узнать момент окончания загрузки изображения).
message | Служит для получения сообщений от других браузерных окон, в том числе находящихся на других серверах. Свойство `data` события содержит полученное сообщение.
mousedown | Происходит при нажатии кнопки мыши над элементом.
mouseenter | Происходит при переходе указателя мыши на элемент.
mouseleave | Происходит при переходе указателя мыши за элемент.
mousemove | Происходит при перемещении указателя мыши над элементом
mouseout | Происходит при переходе указателя мыши за элемент.
mouseover | Происходит при переходе указателя мыши на элемент.
mouseup | Происходит при отпускании кнопки мыши над элементом.
pause | Происходит при постановке на паузу воспроизведения элементов `<audio>` и `<video>`.
pointercancel | Происходит когда больше не ожидается новое событие указателя.
pointerdown | Происходит при нажатии указателя над элементом.
pointerenter | Происходит при переходе указателя на элемент.
pointerleave | Происходит при переходе указателя за элемент.
pointermove | Происходит при перемещении указателя над элементом
pointerout | Происходит при переходе указателя за элемент.
pointerover | Происходит при переходе указателя на элемент.
pointerup | Происходит при отпускании указателя над элементом.
resize | Происходит при изменении размеров браузерного окна. Обработчик должен быть зарегистрирован на элементе body.
resume | Происходит при возобновлении воспроизведения элементов `<audio>` и `<video>`.
scroll | Происходит в момент прокрутки.
submit | Происходит при отправке формы (`<form>`).
touchend | Происходит когда палец отпускается от экрана.
touchemove | Происходит при движении пальцем над экраном.
touchstart | Происходит когда палец только что коснулся экрана.
wheel | Происходит в момент прокрутки колёсиком мыши.

#

### get event property

Выводит значение свойства события, сгенерированного пазлом on event of. Также поддерживается внутри пазлов when clicked, when hovered, and when dragged puzzles.

Свойство события | Описание
--- | ---
button | Нажатая кнопка мыши: `0` — левая, `1` — средняя (колёсико), `2` — правая.
code | Код клавиши для событий `keydown`, `keypress` и `keyup`. Например, `"ArrowLeft"` используется для клавиши левой стрелки, тогда как `"KeyA"` (лат.) для клавиши *Ф* (строчной или прописной).
data | Данные события. Устанавливается для событий `input` и `message`.
deltaY | На сколько пикселей производится прокрутка. Устанавливается для события `wheel`.
isPrimary | Указывает на первичный указатель. Устанавливается для событий указателей, например `pointerdown`.
pageX, pageY | Координаты указателя мыши или пальца. Работает с событиями `click`, `dblclick`, `mouse...` и `pointer...`. Не работает с событиями `touch...` (вместо этого используйте свойства touches[].pageX/pageY и targetTouches[].pageX/pageY).
key | Имя нажатой клавиши для событий `keydown`, `keypress`, or `keyup` event. Например, `"ArrowLeft"` используется для клавиши левой стрелки, тогда как `"ф"` для клавиши *Ф* (строчной).
offsetX, offsetY | Координаты указателя мыши или пальца. Работает с событиями `click`, `dblclick`, `mouse...` и `pointer...`. Не работает с событиями `touch...`.
pointerId | Идентификатор указателя. Используется для обработки мультитач-взаимодействий.
pointerType | Тип указательного устройства: `"mouse"` (мышь), `"pen"` (карандаш) или `"touch"` (палец).
target.checked | Состояние элемента checkbox/radio для которого произошло событие.
target.id | Идентификатор элемента для которого произошло событие.
target.value | Значение элементов `<input>`, `<button>` и `<option>` для которых произошло событие.
touches.length | Количество пальцев на экране в данный момент.
touches[0].pageX, touches[0].pageY touches[1].pageX, touches[1].pageY | Координаты первого или второго указателя (пальца).
targetTouches.length | Количество пальцев на экране в данный момент.
targetTouches[0].pageX, targetTouches[0].pageY targetTouches[1].pageX, targetTouches[1].pageY | Координаты первого или второго указателя (пальца).
which | Нажатая кнопка мыши: `1` — левая, `2` — средняя (колёсико), `3` — правая. Свойство объявлено устаревшим, вместо него следует использовать свойство `button`.

#

### DOM object selector

В зависимости от выбранного в выпадающем списке пункта возвращает:

container
  Контейнер, содержащий 3Д-холст — элемент, содержащий отображаемую сцену.
window
  window — объект представляющий браузерное окно или содержимое элемента `<iframe>`.
document
  document — корневой узел HTML-документа.
body
  body — элемент `<body>` представляющий тело HTML документа.

#

### query selector

Возвращает первый HTML-элемент, который соответствует заданному CSS-селектору.

Переключатель query all elements во всплывающем окне шестерёнки активирует режим query selector all, в котором возвращаются все элементы, соответствующие указанному CSS-селектору:

Ниже приведёт список наиболее часто используемых селекторов (их также можно смешивать в один):

Селектор | Пример | Описание
--- | --- | ---
element | div | Выбирает элемент по типу, напр. `div`, `button`, `p`, `form`, `span`.
.class | .myClass | Выбирает элемент по имени класса.
#id | #myElem | Выбирает элемент по идентификатору.
elementA elementB | div span | Выбирает элементы "B" внутри элемента "A".
element * | div * | Выбирает все элементы внутри указанного элемента.
elementA > elementB | div > span | Выбирает элементы "B", которые являются непосредственными дочерними элементами элемента "A".
elementA, elementB | div, span | Выбирает элементы A and B (независимо).
[attribute=value] | input[type="password"] | Выбирает элементы по имени и значению атрибута.

#

### call method

Вызывает метод для указанного DOM-объекта: элемента или события.

Поддерживаемые методы:

blur
  Выводит заданный HTML-элемент из фокуса.
click
  Имитирует событие нажатия на элементе.
close
  Закрывает элемент. Метод работает только для элемента `<dialog>` и объекта `window`.
focus
  Устанавливает фокус на заданном HTML-элементе. Сфокусированные элементы получают события от клавиатуры, например когда пользователь нажимает клавиши «ввод» или «пробел».
postMessage
  Отправляет событие элементу `<iframe>` или объекту `window`. Событие может быть любого типа: строка, число, массив, словарь, и т.д.
preventDefault

  Должен вызываться внутри пазла event handler. Вызов метода означает, что браузер не будет реагировать на данное событие. Например, если вы назначили обработчик события `click` на каком-нибудь переключателе, `preventDefault` будет блокировать его переключение.

show
  Показать окно диалога `<dialog>`.
showModal
  Показать окно диалога `<dialog>` и блокировать любые взаимодействия со страницей, пока этот диалог не будет закрыт.
stopPropagation

  Должен вызываться внутри пазла event handler. Вызов метода означает, что браузер заблокирует распространение текущего события (т.е. вызов обработчиков других элементов). Например, если вы назначили обработчик события `keydown` на документе `document` и вызывали `stopPropagation`, клавиатура перестанет работать (в частности клавиши ЦФЫВ больше не будут перемещать камеру).

#

### create canvas elem

Создает элемент холста с атрибутами id, width (ширина) и height (высота). Используйте этот пазл вместе с replace texture для создания текстур холста.

Созданный холст становится доступным для рисования с помощью «Ява Скрипта». Вы можете обновить холст внутри функции runCode() модуля your_app_name.js или с помощью пазла exec script.

Чтобы обновить холст, получите текстуру холста по ее идентификатору (указанному в атрибуте id):

`const canvasTex = v3d.puzzles.canvasTextures['my_canvas'];`

После этого вы можете получить доступ к элементу HTML canvas следующим образом:

`const canvas = canvasTex.image;`

Вы можете использовать стандартные методы, доступные для рисования на холсте HTML. В примере ниже, на белом фоне нарисовано синее улыбающееся лицо:

`const ctx = canvas.getContext("2d"); ctx.fillStyle = 'white'; ctx.strokeStyle = 'blue'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // внешняя окружность ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false); // улыбка (по часовой стрелке) ctx.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // левый глаз ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // правый глаз ctx.stroke();`

Наконец, если вы хотите, чтобы обновления холста сразу же отображались на текстуре, вам следует пометить текстуру холста соответствующим образом:

`canvasTex.needsUpdate = true;`

Данная функциональность используется в демо-приложении «Текстура холста» (исходные файлы доступны в магазине ассетов).

#

### draw line

Соединяет указанный 3Д-объект с указанным HTML-элементом динамически обновляемой линией

Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`). Вы также можете задать ширину (в пикселях), цвет (CSS) и смещение (в пикселях) для создаваемой линии. Данный пазл поддерживает списки объектов, группы (или списки групп), а также пазл all objects.

С помощью этого пазла вы можете назначить только одну линию на объект. Созданная линия получает новое имя, например `"CubeLine"`, в случае если исходный объект имеет называние `"Cube"`. Получившийся объект линии добавляется к этому объекту как дочерний.

#

### remove line

Удаляет ранее созданную линию из указанного объекта.

#

### bind element

Заставляет указанный HTML-элемент следовать за центром указанного 3Д-объекта в пространстве экрана. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

Замечание:

Вместо этого можно использовать пазл add annotation и настроить внешний вид аннотаций, как описано здесь.

#

### unbind element

Отвязывает указанный HTML-элемент от объекта, то есть отменяет действие пазла bind element. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

#

### init fullscreen

Заставляет указанный HTML-элемент вести себя как кнопка полноэкранного режима — первый щелчок по ней вызывает вход в полноэкранный режим, второй — выход из него. Пазлы, размещенные в слотах on enter do и on exit do, срабатывают при входе или выходе из полноэкранного режима. Пазлы, размещенные в слоте if unavailable do, срабатывают, если полноэкранный режим не поддерживается браузером (например, браузером «Сафари» на «Айфонах»).

#

### open web page

При срабатывании этого пазла указанный УРЛ открывается в новой или в той же вкладке браузера в зависимости от выпадающего выбора. При запуске из редактора пазлов он запросит подтверждение пользователя, прежде чем покинуть вкладку.

Поддерживаемые настройки:

a new tab
  Открыть в новой вкладке. Чтобы преодолеть ограничение браузера на открытие вкладок, пазл с такой настройкой должен вызываться внутри пазлов when clicked или on event of.
the same tab
  Открыть в той же вкладке.
the same tab (ignore frames)
  Открыть в той же вкладке. Используется внутри приложений, работающих внутри iframe-ов, открывает страницу в самом верхнем окне.
the same tab (parent frame)
  Открыть в той же вкладке. Используется внутри приложений, работающих внутри iframe-ов, открывает страницу в родительском окне.
replace URL (no reload)
  Помещает УРЛ в адресную строку браузера но не переходит на указанную страницу.

#

### social share link

Генерирует ссылку для обмена вашим приложением в популярных социальных сетях.

В большинстве случаев это пазл используется для подачи ссылки на вход пазла open web page или для указания свойства `href` элемента `<a>`.

#

### set URL param

Присваивает или обновляет значение параметра в указанном УРЛ, при необходимости автоматически формируя допустимую строку запроса и возвращает обновленный УРЛ.

Этот пазл может быть полезен в ситуациях, когда данные конфигурации приложения хранятся в его УРЛ. Например, вы можете указать изображение, которое будет использоваться в качестве текстуры, следующим образом:

`https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg`

Вы можете загрузить текстуру, получить путь к ней на стороне сервера и сохранить ее в параметре image_url УРЛ-адреса приложения следующим образом:

Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).

#

### take screenshot

Делает снимок экрана области просмотра и выводит его в формате Data URL. В выпадающем списке вы можете выбрать формат изображения, которое хотите получить.

В частности, вы можете предложить пользователю сохранить «фото» продукта:

Вы также должны включить скриншоты для вашего приложения с помощью пазла configure application, иначе создаваемые изображения будут совершенно черными.

#

### get URL data

Извлекает данные УРЛ окна, в которое загружено приложение:

entire URL
  Полный УРЛ страницы, например "https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg".
page name
  Имя страницы, например "my_awesome_app.html" для "https://www.example.com/my_awesome_app.html".
parameters
  Словарь параметров страницы, например {"image_url": "https://www.uploadserver.com/path/to/image.jpg"}
host name
  Имя хоста страницы, например "www.example.com"ю

Переключатель in parent doc должен быть установлен, если требуется окно внешнего HTML-документа (в который .html-файл 3Д-приложения подключается с помощью элемента `<iframe>`).

Этот пазл может быть полезен в ситуациях, когда данные конфигурации приложения хранятся в его УРЛ. Например, вы можете указать изображение, которое будет использоваться в качестве текстуры, следующим образом:

`https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg`

Затем вы можете получить параметр image_url, загрузить и применить текстуру следующим образом:

Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).

#

### download file

Загружает содержимое, указанное в формате Data URL, в файл. Вы также можете передать текст, словарь или список данных для загрузки в текстовый или JSON-файл. В этом случае заданный объект будет автоматически преобразован в соответствующий Data URL.

Примеры использования данного пазла:

- для сохранения ранее сделанных скриншотов
- для сохранения состояния приложения путем сохранения словаря (или списка) в файле *.json
- экспортировать модели в формате glTF для дальнейшей обработки
- для создания текстовой информации о ценах, котировок, отчетов и т.д.

#

### open file

Вызывает встроенное диалоговое окно браузера для выбора файлов с устройства пользователя. После того как пользователь выбрал файл, возвращает содержимое файла в пазле opened file.

#

### opened file

Возвращает содержимое или информацию о файле.

Настройки:

data
  Содержимое файла в формате Data URL.
name
  Имя файла.
extension
  Расширение файла без точки: txt, jpg, mp3, и т.д.
size
  Размер файла в байтах.
mime type

  Тип содержимого файла (MIME-тип). Список наиболее часто используемых в «Вердж3Д»-приложениях MIME-типов:

  application/json | Файл в формате JSON, также используется для glTF-сцен.
  application/octet-stream | Двоичный (бинарный) файл (.bin).
  application/pdf | Документ в формате PDF.
  audio/mpeg | Аудио в формате MP3.
  image/jpeg | JPEG-изображение.
  image/png | PNG-изображение.
  image/webp | WebP-изображение.
  text/csv | Файл со значениями, разделёнными запятой (CSV).
  text/plain | Простой текстовый файл (TXT).
  video/mp4 | Видео в формате MPEG-4.

#

### drop file to

Возвращает файл, перенесенный из файлового менеджера (или другой программы) и брошенный на заданный HTML-элемент внутри браузера. После того как пользователь перетащил файл, возвращает его содержимое в виде пазла opened file.

Вы можете включить дополнительный слот drag over для обработки событий перемещения файлов. Например, вы можете использовать его вместе с пазлом raycast для выделения объектов под курсором/касанием.

#

## Как правильно указывать пути к ресурсам расположенным в интернете

Ряд пазлов принимает на вход УРЛ-адрес (УРЛ-путь) какого-либо ресурса, в частности:

- open web page — путь к веб-странице.
- replace texture — путь к текстуре.
- load sound — путь к аудио-файлу.
- load video — путь к видео-файлу.
- load scene — glTF-файл.
- create text object — шрифт.

Когда мы говорим о УРЛ-адресах, следует иметь в виду, что они существенно отличаются от привычных нам путей к файлам на локальной машине, поскольку в доступ к ним производится не напрямую, а посредством веб-браузеров, которые в свою очередь забирают ресурсы с веб-серверов.

Это значит, что пути никогда не должны указываться так:

- C:\Users\User\Documents\verge3d_apps\my_app\my_scene.gltf
- /Users/User/Downloads/my_sound.mp3
- /home/user/Desktop/my_texture.jpg

УРЛ-пути должны использовать исключительно прямую черту (/) для разделения папок и могут быть:

Относительными

  Эти пути указываются относительно главного HTML-файла приложения:

  - my_scene.gltf — сцена расположена в той же папке, что и HTML-файл.
  - ./my_scene.gltf — сцена расположена в той же папке, что и HTML-файл.
  - sounds/my_sound.mp3 — звук расположен в подпапке sounds папки, в которой находится HTML-файл.
  - ../textures/my_texture.jpg — текстура находится в подпапке textures, которая в свою очередь находится на один уровень выше (за это отвечают две точки) той папки, где расположен HTML-файл приложения.

  Данные пути должны использоваться в большинстве пазлов.

Абсолютными

  Эти пути используются тогда, когда вы точно знаете место расположения ресурса на веб-сервере:

  - https://www.my-host.com/my_app/my_scene.gltf — сцена находится в папке my_app сервера my-host.
  - /my_app/fonts/my_font.woff — шрифт находится в подпапке fonts папки my_app на каком-то (его имя неизвестно или не имеет значения) сервере.
Data URL
  Это специальный тип УРЛ-адреса, который не находится на сервере, а кодирует ресурс напрямую. Мы часто используем такие ссылки чтобы принимать или возвращать значения ряда пазлов. Читайте об этих ссылках ниже.

Также, поскольку большинство серверов работают под управлением ОС «Линукс», которая имеет нечувствительную к регистру файловую систему (также справедливо для «Вердж3Д Нетворк»), всегда обращайте на имена ресурсов. В частности, следующие пути:

- my_texture.jpeg
- My_texture.jpeg
- My_Texture.jpeg

указывают на разные текстуры!

#

## Ссылки Data URL

Data URL (или Data URI) — это удобный метод встраивания различных ресурсов, таких как изображения, glTF-сцены (модели), звуки, JSON или CSV-файлы, внутрь ссылок (см. документацию).

Например, следующая ссылка представляет собой маленький логотип «Вердж3Д»:

`data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABvFBMVEUAAAAASKUAAFsAvukA RaMA3voAAEoARaQARKMARqQARqQARKMARaQARqQAQ6IATagCcLwCcbwATagARqQASaYARqQASKUC argASKUARqQASqYASKUAR6QAT6kAT6kAR6QAR6UASaUASaUAR6UARKMBWq8BWq8ARKMAQqECaLcC abgAQqEAQaECbboCbroAQaECbrsCbroCabcCa7kCb7sCbrsARaQARaQElNAEldEGrd4GseEDg8cD hcgGtOIGrt8Eks8I1/cFqNwBUqsAQ6IBVKwGrN4Ekc8El9IJ5/8HvOcBU6sASqYDdb8CdL4ASaYB VawHv+gJ5/4EltII0PIJ4PsCc70ARqQEjs0J4vwJ4fsEi8sARaMDdr8J4fwI0fIJ3/sGuuYATKcC ZbYI1fUHyfMHyPMI0/QCYrQATagHvecJ4PwEj80ARKMFnNQHyvMBU8IBUsEFmNII3PkHwuoIyvQH vugAS6cDecEI1/YCbrsBWK4I0vMJ5v8HyPIIz/ICcr0I2PcIz/EDgMUBXrEJ6P8I1vYBW7ADhMcC cb0Hv+kFmNMEkM4GueUJ4PoJ3/oJ3voI3foEltH///+98SuhAAAAOHRSTlMAAAAAAAAAJJPu8Jgn EWjT/v7VEAVLvvq8RwQFe/LweDXn6DdT9/hXWvn6XVv5+lz6+fn6/v7w7sPq7QcAAAABYktHRJPh A9+2AAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4QsCEC4OPIwcRgAAAQpJREFUGNNjYGBg YGRi5+Dk4uZhZmQAAUYWXj5+AQtLQSE+YRagEKOIqJi4lbWNrZ29uISkFCODtIysg6OTs4uLq5uj u5y8NIOCooenl7ePr59/QGBQsJIyg4pqSGhYeERkVHRMbFy8mjqDhmZCYlJySmpaekZmVoKWNoOO bnZObl5+QWFqUa5DnJ4+g75BsW9SSWlBQX5ZeUWxoQ6DtnhlVXVNbVpdbX1AQ6ORBoO6WlNzS6Nn a6tnW3tHk6oKg7JSkVdYpWdtrWdKZ1e3ogKDtLxcT28fSKA/0UFWRpqBUUpSwth+QmvrRHtjMVER kGdYhPmETCZZmvLz8bJA/cvKw21mzsHOBuICAHx4PYwwa1fDAAAAJXRFWHRkYXRlOmNyZWF0ZQAy MDE3LTExLTAyVDE2OjQ2OjE0KzAxOjAwKvGBdAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0xMS0w MlQxNjo0NjoxNCswMTowMFusOcgAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwa AAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMj E0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC`

Скопируйте весь фрагмент и вставьте в адресную строку браузера, чтобы отобразить логотип:

В пазлах мы широко используем ссылки Data URL, поскольку они обеспечивают удобный способ передачи файлоподобных данных между различными блоками пазлов. Например, вы можете использовать пазлы open file или drop file to, чтобы загрузить какой-либо файл (изображение или данные). Затем вы можете внести изменения в вашу сцену в соответствии с этим файлом. После этого вы можете загрузить измененную сцену (или, возможно, некоторые данные, например, документ прайс-листа) обратно на устройство пользователя с помощью download file, или загрузить этот файл на сервер с помощью пазла send data. Во всех этих случаях данные будут передаваться с использованием формата Data URL.

Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).

Также довольно легко отлаживать данные в формате Data URL. Просто используйте пазл print to console, затем откройте консоль браузера, чтобы просмотреть вывод, а затем щелкните на напечатанном URI внутри консоли, чтобы просмотреть данные в отдельной вкладке браузера.

## Проблемы с пазлами?

Обратитесь за помощью на наш форум!