HTML Puzzles Reference — Soft8Soft
Description: How to use Verge3D Puzzles to manipulate HTML DOM elements.

# HTML Puzzles

These puzzles are used to create and modify HTML elements, to adjust how the page looks, or to perform any other tasks on the web page of your 3D web application (such as handling user events, taking screenshots, downloading files etc.).

## Contents

- What is HTML DOM?
- Puzzles Reference
  - 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
- How to specify URL paths to web resources
- Data URL Links

#

## What is HTML DOM?

HTML DOM (Document Object Model, see techie stuff here) is a programmatic interface to HTML. This means you can edit your web page not only at its creation (by editing its source code), but also when the page is already opened in the browser. The DOM represents the page content with a set of elementary objects, which can be easily manipulated with Puzzles (or JavaScript).

#

## Puzzles Reference

#

### add HTML element

Creates an HTML element with a specified type and identifier (corresponds to id attribute) and adds it to, right before, or right after the specified existing HTML element.

The in parent doc checkbox should be enabled if the created element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`).

For example, to create a red-colored link to the Soft8Soft website, you might use the following puzzles:

Supported elements:

Element | Description
--- | ---
a | Hyperlink. Use the `"href"` property to define the link destination, and `"textContent"` or `"innerHTML"` to define the link text. Alternatively, you can add any clickable elements directly to this element by using the same add HTML element puzzle.
b | Display inner text (specified with `"textContent"` or `"innerHTML"` property) with the bold font.
br | Insert like brake.
button | Creates a clickable button.
canvas | Low-level element used to render 2D or 3D graphics.
dialog | Defines a dialog element.
div | Defines a container for other elements. Also, by using CSS, it can be modified to represent just everything — icons, images, buttons, preloaders, etc.
form | Defines a form, a container element for `<input>` or `<textarea>` elements used to represent user input.
h1..h6 | Page headings from bigger to smaller. The heading text specified with the `"textContent"` property.
iframe | Defines an inline frame, aka sub-page. The URL of the sub-page is defined by the `"src"` property.
img | Image element. The URL to the image asset should be provided in the `"src"` property.
input | Input element. Use the `"type"` property to specify the type of this element, such as: `"text"`, `"checkbox"`, `"file"`, `"radio"`, `"number"`, etc.
label | Label element. Used to specify text labels for form fields such as `<input>` or `<textarea>`.
li | List item. Should be inserted in `<ul>` or `<ol>` to define unordered or ordered list.
link | Element used to include files with CSS styles or define browser favicons.
ol | Ordered list. Use the `<li>` elements to define the list items.
option | Option item in the `<select>` element.
p | Defines a paragraph. The paragraph text can be specified with the `"textContent"` property.
script | Used to include (and run) JavaScript. The URL to the script should be provided in the `"src"` property.
select | Defines a selection list. Use the `<option>` element to define the list items.
span | Defines a container for some text.
style | Used to include CSS styles directly into the page. To provide CSS code, use the `"textContent"` property.
table | Table element.
td | Defines a cell in a `<table>`.
th | Defines a header cell in a `<table>`.
tr | Defines a row in a `<table>`.
textarea | Multiline text input.
ul | Unordered list. Use the `<li>` elements to define the list items.
video | Video element. The URL to the video file should be provided in the `"src"` property.

#

### remove HTML element

Removes an HTML element with a specified identifier. The in parent doc checkbox should be enabled if the removed element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`).

#

### set property

Sets a property for an HTML element with a specified id. The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`). This puzzle also works with lists of element ids.

Property | Description
--- | ---
action | Specifies action URL for the `<form>` element.
alt | Specifies an alternate text when the original element fails to display.
checked | Specifies checked state for a checkbox/radio element.
className | Sets the value of the `class` attribute of an element.
cols | Specifies width of the `<textarea>` element (in characters).
disabled | Specifies that the specified element/group of elements should be disabled.
download | Specifies that the target will be downloaded when a user clicks on the hyperlink.
height | Specifies the height of the `<img>`, `<audio>`, `<video>`, `<canvas>`, or `<iframe>` element. To specify dimensions for other elements use CSS properties.
href | Specifies the URL of the page the link goes to.
htmlFor | Specifies target element ID for the `<label>` element.
id | Specifies a unique id for an element.
innerHTML | Sets the HTML content of an element.
loop | Specifies that the `<audio>`/`<video>` will start over again, every time it is finished.
max | Specifies the maximum value for `<input>` element.
method | Specifies how to submit the contents of the `<form>` element to the server. Also can be set to `"dialog"` for the special dialog forms.
min | Specifies the minimum value for `<input>` element.
muted | Specifies that the `<audio>`/`<video>` element should be muted.
name | Specifies element name. In most cases this name is used to reference data upon form submissions.
placeholder | Hint that describes what should be typed in `<input>` or `<textarea>` element.
rel | Specifies the relationship between the current document and the linked document. Can be used for `<a>`, `<form>`, or `<link>` element.
required | Boolean value which specifies whether the form element value is required.
returnValue | Value returned when `<dialog>` element is closed.
rows | Specifies a number of lines in `<textarea>` element.
scrollLeft | Sets the number of pixels an element's content is scrolled horizontally.
scrollTop | Sets the number of pixels an element's content is scrolled vertically.
src | Specifies the URL of the loaded file for `<img>`, `<video>`, `<script>`, or `<iframe>` elements.
step | Sets increment/decrement value for `<input>` elements of type `"number"`, `"range"`, or `"date"`.
style | Specifies an inline CSS style for an element.
tabIndex | Sets the tabIndex property for an element.
target | Specifies the target for where to open the linked document or where to submit the form.
textContent | Sets the text content of an element.
title | Specifies extra information about an element.
type | Specifies the type of the `<input>` element, e.g. `"number"`, `"text"`, `"file"`, `"radio"`.
value | Specifies the value of the `<input>`, `<button>`, or `<option>` element.
volume | Specifies volume for the `<audio>`/`<video>` element.
width | Specifies the width of the `<img>`, `<audio>`, `<video>`, `<canvas>`, or `<iframe>` element. To specify dimensions for other elements use CSS properties.

#

### get property

Gets a property from an HTML element with a specified id. The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`).

Property | Description
--- | ---
action | Gets action URL for the `<form>` element.
alt | Gets an alternate text when the original element fails to display.
checked | Gets the checked state of the checkbox/radio element.
children | Gets the list of parented HTML elements. It returns an iterable list of ids, so naturally the result includes only elements with an id.
className | Gets the value of the `class` attribute of an element.
clientHeight | Gets the element height including padding, but excluding border, scrollbar, or margin.
clientWidth | Gets the element width including padding, but excluding border, scrollbar, or margin.
cols | Gets width of the `<textarea>` element (in characters).
dataset | Gets a dictionary with the `data-` attributes assigned on the HTML element. Very useful to attach/obtain custom data right on the elements (without using additional variables). For example, you can create a configurator with a swatch of textures, with URLs of the corresponding images assigned on the swatch's clickable HTML elements.
disabled | Gets the disabled state of the element.
download | Gets the download attribute on the element.
duration | Gets playback duration for `<audio>`/`<video>` element.
ended | Returns `true` if `<audio>`/`<video>` playback has ended.
height | Gets the height specified for `<img>`, `<audio>`, `<video>`, `<canvas>`, or `<iframe>` element.
href | Gets the URL of the page the link goes to.
htmlFor | Gets target element ID for the `<label>` element.
id | Gets a unique id for an element.
innerHTML | Gets the HTML content of an element.
innerHeight | Gets the browser window viewport height, including scrollbar (if any).
innerWidth | Gets the browser window viewport width, including scrollbar (if any).
loop | Gets looping state of the `<audio>`/`<video>` element.
max | Gets the maximum value of `<input>` elements.
method | Shows how the contents of the `<form>` element should be submitted: `"get"`, `"post"`, or `"dialog"`.
min | Gets the minimum of `<input>` element.
muted | Gets muted state of the `<audio>`/`<video>` element.
name | Element name. In most cases this name is used to reference data upon form submissions.
offsetHeight | Gets the element height including padding, border, and scrollbar, but not margin.
offsetWidth | Gets the element width including padding, border, and scrollbar, but not margin.
paused | Returns `true` if `<audio>`/`<video>` playback was paused.
placeholder | Hint that describes what should be typed in `<input>` or `<textarea>` element.
rel | Gets the relationship between the current document and the linked document. This property can be obtained from `<a>`, `<form>`, or `<link>` element.
required | Boolean value which specifies whether the form element value is required.
returnValue | Value returned when `<dialog>` element is closed.
rows | A number of lines in `<textarea>` element.
scrollHeight | Gets the element height including padding, but excluding border, scrollbar, or margin. Contrary to `clientHeight` this value includes total height of the element, including the content that is not viewable due to scrolling.
scrollLeft | Gets the number of pixels an element's content is scrolled horizontally.
scrollTop | Gets the number of pixels an element's content is scrolled vertically.
scrollWidth | Gets the element width including padding, but excluding border, scrollbar, or margin. Contrary to `clientWidth` this value includes total width of the element, including the content that is not viewable due to scrolling.
scrollX | Gets the number of pixels the browser window is scrolled horizontally.
scrollY | Gets the number of pixels the browser window is scrolled vertically.
src | Gets the URL of the loaded file.
step | Gets the increment/decrement value for `<input>` elements of type `"number"`, `"range"`, or `"date"`.
style | Gets an inline CSS style for an element.
tabIndex | Gets the tabIndex property of the element.
target | Gets the target for where to open the linked document or where to submit the form.
textContent | Gets the text content of an element (and all its children).
title | Gets extra information about an element.
type | Gets the type of the `<input>` element.
value | Gets the value of the `<input>`, `<button>`, or `<option>` element.
volume | Gets the volume of the `<audio>`/`<video>` element.
width | Gets the width specified for `<img>`, `<audio>`, `<video>`, `<canvas>`, or `<iframe>` element.

#

### create css rule

Creates a new CSS rule. The in parent doc checkbox should be enabled if the style sheets belong to an external HTML document (i.e. when app's .html file is embedded using `<iframe>`).

#

### style constructor

Creates a string with CSS style declarations separated by semicolons.

For example, you can use the following puzzles to create a green button located in the top left corner:

#

### set style

Sets a CSS property for an HTML element with a specified id. The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`). This puzzle also works with lists of element ids.

#

### get style

Gets a CSS property from an HTML element with a specified id. The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`).

This puzzle can be very useful to make 3D configurators. For example, you can use the following setup to assign material color from the background color of some HTML element:

#

### set css rule

Sets a CSS property for a specified CSS rule (found in .css files of an application). The in parent doc checkbox should be enabled if the style sheets belong to the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`).

#

### on event of

Registers an event listener for an HTML element with a specified id. The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`). Once an event occurs, the puzzles placed in the do slot are triggered. Also works with lists of element ids.

Event | Description
--- | ---
beforeunload | Happens when the page is about to unload.
blur | Occurs when some element loses focus. In most cases this one is registered on the window object to detect when the browser tab is no longer active.
change | Happens when `<input>`, `<select>`, or `<textarea>` is changed.
click | Event which happens when element is clicked. This is the most widely used event.
contextmenu | Event which happens when browser's standard right-click menu is invoked. It allows you to override or disable this menu.
dblclick | Event which happens when element is double-clicked.
deviceready | Used only for Cordova applications. Fires when the app is fully loaded.
ended | Fires when `<audio>` or `<video>` playback has finished.
focus | Occurs when some element gets focus. In most cases this one is registered on the window object to detect when the browser tab is active again.
fullscreenchange | Occurs when element switched to (or from) fullscreen mode. In most cases this event is registered on the document object.
input | Happens when `<input>` or `<textarea>` is changed.
keydown | Fires when the user presses on some keyboard key. The event `key` property contains the key pressed. See how it works in the Keyboard Controls library.
keypress | Fires when user press on some keyboard key. This event is considered deprecated, always use `keydown` event instead.
keyup | Fires when the user releases some keyboard key. The event `key` property contains the key released. See how it works in the Keyboard Controls library.
load | Occurs when page or element is loaded. The most frequently used entities to register the event for is window (for entire page) and `<img>` (to handle the moment the image is fully loaded).
message | Used to handle incoming messages from another frames, possibly located on a different hosts. The event `data` property contains the message received.
mousedown | Happens when the mouse button is pressed over the element.
mouseenter | Happens when the mouse pointer is moved onto the element.
mouseleave | Happens when the mouse pointer is moved out of the element.
mousemove | Happens when the mouse pointer is moved over the element.
mouseout | Happens when the mouse pointer is moved out of the element.
mouseover | Happens when the mouse pointer is moved onto the element.
mouseup | Happens when the mouse button is released over the element.
pause | Fires when `<audio>` or `<video>` playback has paused.
pointercancel | Occurs when there are unlikely to be any more pointer events.
pointerdown | Happens when the pointer is pressed over the element.
pointerenter | Fires when the pointer is moved onto the element.
pointerleave | Happens when the pointer is moved out of the element.
pointermove | Happens when the pointer is moved over the element.
pointerout | Happens when the pointer is moved out of the element.
pointerover | Fires when the pointer is moved onto the element.
pointerup | Happens when the pointer is released over the element.
resize | Occurs when the browser window has been resized. Should be registered on the body element.
resume | Fires when `<audio>` or `<video>` playback has resumed.
scroll | Happens then the scrollbar is being scrolled.
submit | Happens then a `<form>` is submitted.
touchend | Occurs when a finger is removed from a touch screen.
touchemove | Fires when a finger is dragged over the screen.
touchstart | Happends when a finger is placed on a touch screen.
wheel | Occurs when the mouse wheel rolls over the element.

#

### get event property

Outputs the value of a property of an event generated by the on event of puzzle. Also supported inside when clicked, when hovered, and when dragged puzzles.

Event Property | Description
--- | ---
button | Mouse button pressed: `0` — left, `1` — middle (wheel), `2` — right.
code | The code of the key that triggered the `keydown`, `keypress`, or `keyup` event. For example, code `"ArrowLeft"` is used for the left arrow key, while `"KeyA"` is used for the A key (lower or uppercase).
data | Event data. Set for `input` or `message` events.
deltaY | Amount of vertical scrolling (in pixels) for `wheel` event.
isPrimary | Indicates the primary pointer. Assigned for pointer events, e.g. `pointerdown`.
pageX, pageY | The X and Y coordinates of the mouse pointer or touch. Works with `click`, `dblclick`, `mouse...`, or `pointer...` events. Does not work with `touch...` events (use touches[].pageX/pageY or targetTouches[].pageX/pageY properties instead).
key | The name of keyboard key that triggered the `keydown`, `keypress`, or `keyup` event. For example, `"ArrowLeft"` is used for the left arrow key, while `"а"` is used for the lowercase A key.
offsetX, offsetY | The X and Y coordinates of the mouse pointer or touch. Works with `click`, `dblclick`, `mouse...`, or `pointer...` events. Does not work with `touch...` events.
pointerId | Pointer identifier. Used to handle multi-touch interactions.
pointerType | Pointer device type: `"mouse"`, `"pen"`, or `"touch"`.
target.checked | State for a checkbox/radio element on which the event occurred.
target.id | ID of the element on which the event occurred.
target.value | Value of the `<input>`, `<button>`, or `<option>` element on which the event occurred.
touches.length | A number of touches that are currently in contact with the surface.
touches[0].pageX, touches[0].pageY touches[1].pageX, touches[1].pageY | The X and Y coordinates of the first/second pointer.
targetTouches.length | A number of touches that are currently in contact with the surface.
targetTouches[0].pageX, targetTouches[0].pageY targetTouches[1].pageX, targetTouches[1].pageY | The X and Y coordinates of the first/second pointer.
which | Mouse button pressed: `1` — left, `2` — middle (wheel), `3` — right. This property is considered deprecated, always use the `button` property instead.

#

### DOM object selector

Depending on the selected entity this puzzle returns:

container
  Canvas container element — an HTML element which contains a rendered scene.
window
  DOM window object — a browser tab or an `<iframe>` to which an HTML document is loaded.
document
  DOM document object — the root node of an HTML document.
body
  DOM body object — the `<body>` element of an HTML document.

#

### query selector

Returns the first HTML element that matches a specified CSS selector.

The query all elements checker in the gear popup activates the query selector all mode in which all matched HTML elements are returned:

Here is the list of most commonly used selectors (can be combined together):

Selector | Example | Description
--- | --- | ---
element | div | Selects elements by type, e.g. `div`, `button`, `p`, `form`, `span`.
.class | .myClass | Selects elements by class name.
#id | #myElem | Selects elements by id.
elementA elementB | div span | Selects "B" elements inside "A" element.
element * | div * | Selects all elements inside given element.
elementA > elementB | div > span | Selects "B" elements which are direct children of "A" element.
elementA, elementB | div, span | Selects elements A and B (independently).
[attribute=value] | input[type="password"] | Selects elements by attribute name and value.

#

### call method

Call method for the specified DOM object: element or event.

The supported methods include:

blur
  Bring the specified HTML element out of focus.
click
  Simulate click on the element.
close
  Close the element. This method works only for `<dialog>` elements and `window` object.
focus
  Set the focus at the specified HTML element. Focused elements receive keyboard inputs, e.g. when the user presses Enter/Space keys.
postMessage
  Send the message to the specified `<iframe>` element or `window` object. The message can be of any type: string, number, array, dictionary, etc.
preventDefault

  Should be called inside event handler. Upon execution, the browser won't react to the current event. For example, if you assign the `click` event handler to some checkbox and call `preventDefault`, the checker won't react.

show
  Show the `<dialog>` window.
showModal
  Show the `<dialog>` window and prevent any interaction with the page until the dialog is closed.
stopPropagation

  Should be called inside event handler. Upon execution, the browser forbids propagations of the current event (e.g. calling event handlers for other elements). For example, if you assign the `keydown` event handler to `document` and call `stopPropagation`, the keyboard won't work for the scene (e.g. WASD or arrow keys won't move the camera).

#

### create canvas elem

Creates a canvas element with id, width, and height attributes. Use this puzzle with replace texture to create canvas textures.

Once created, the canvas becomes available for drawing on it via JavaScript. You can update the canvas inside the runCode() function of your_app_name.js module or by using the exec script puzzle.

To update the canvas, retrieve the canvas texture by its ID (specified as id attribute):

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

After that, you can access the HTML canvas element as follows:

`const canvas = canvasTex.image;`

You can use the standard methods available for drawing on the HTML canvas. For example, the following listing draws a blue smiling face on white background:

`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); // outer circle ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false); // mouth (clockwise) ctx.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // left eye ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // right eye ctx.stroke();`

Finally, if you’d like the updates to become immediately visible in the 3D rendering, you should mark the canvas texture as follows:

`canvasTex.needsUpdate = true;`

For usage example, check out the Canvas Texture demo (source files available in the Asset Store).

#

### draw line

Connects a specified 3D object with a specified HTML element by a dynamically updated line.

The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`). You can also set the width (in pixels), color (CSS), and offset (in pixels) for the line. This puzzle also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

This puzzles supports only one line for a single object. The created line object will obtain a distinct name, e.g. `"CubeLine"` if the original object is named `"Cube"`. The line object will be added to this object as its child.

#

### remove line

Removes a previously created line from a specified object.

#

### bind element

Makes a specified HTML element follow the center of a specified 3D object in screen space. The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`).

Notes:

You can use the add annotation puzzle instead and customize the look of the annotations as described here.

#

### unbind element

Unbinds the specified HTML element, previously binded to an object. The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`).

#

### init fullscreen

Makes a specified HTML element behave as a fullscreen mode button — the first click on it triggers entering the fullscreen mode, the second click exits fullscreen. Puzzles placed in the on enter do and on exit do slots are triggered upon entering or exiting the fullscreen mode. Puzzles placed in the "if unavailable do" are triggered if fullscreen is not supported by the browser (e.g. Safari browser on iPhones).

#

### open web page

When this puzzle is triggered, a specified URL is opened in a new or in the same browser tab depending on the drop-down selection. When triggered from the Puzzles editor, it will ask for a user confirmation before leaving the tab.

Options:

a new tab
  Open URL in a new tab. To overcome the browser restriction which prevents opening new tabs, you must use this puzzle inside when clicked or on event of puzzle.
the same tab
  Open in the same tab.
the same tab (ignore frames)
  Open in the same tab. Used for iframe-ed apps to open page inside the top-most browsing context.
the same tab (parent frame)
  Open in the same tab. Used for iframe-ed apps to open page inside the parent browsing context.
replace URL (no reload)
  Just put a given URL to the browser address bar.

#

### social share link

Generates a link for sharing your application in popular social media.

In most cases this puzzle is used to pass the link as input to the open web page puzzle or to specify the `href` property of the `<a>` element.

#

### set URL param

Assigns or updates a value of a parameter in a specified URL by automatically forming a valid query string if necessary, and returns the updated URL.

This puzzle may be useful in situations when the configuration data of an application are stored in its URL. For example, you can specify an image to be used as a texture in the following way:

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

You can upload a texture, retrieve its server-side path and save it to the image_url parameter of the app URL as follows:

For usage example, check out the Custom Image demo (source files available in the Asset Store).

#

### take screenshot

Takes a screenshot of the viewport and outputs it in Data URL format. In the drop-down list you can specify the format of the resulting image.

For example, you can offer the users to save a "photo" of your product:

You should also enable screenshots for your app using the configure application puzzle, otherwise blank images will be produced.

#

### get URL data

Retrieves URL data of the window to which an application is loaded:

entire URL
  Full page URL, e.g. "https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg".
page name
  Name part of the URL, e.g. "my_awesome_app.html" for "https://www.example.com/my_awesome_app.html".
parameters
  Dictionary with page parameters, e.g. {"image_url": "https://www.uploadserver.com/path/to/image.jpg"}.
host name
  Host name, e.g. "www.example.com".

The in parent doc checkbox should be enabled if the HTML element is located in the parent HTML document (i.e. when app's .html file is embedded using `<iframe>`).

This puzzle may be useful in situations when the configuration data of an application are stored in its URL. For example, you can specify an image to be used as a texture in the following way:

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

Then you can retrieve the image_url parameter, load and apply the texture as follows:

For usage example, check out the Custom Image demo (source files available in the Asset Store).

#

### download file

Downloads content specified in Data URL format to a file. You can also pass text, dictionary, or list data to be downloaded as text or JSON file. In such case, the given object will be automatically converted to the appropriate Data URL.

This puzzle can be used, for example:

- to save previously taken screenshots
- to preserve application state by saving a dictionary (or a list) to a *.json file
- to export models in glTF format for further processing
- to generate textual pricing information, quotes, reports etc.

#

### open file

Invokes the browser's native dialog window for selecting files from the user's device. Once the user have selected a file, returns the file's contents/info by means of the opened file puzzle.

#

### opened file

Returns file contents or metadata.

Options:

data
  File contents encoded in Data URL format.
name
  File name.
extension
  File extension without leading dot: txt, jpg, mp3, etc...
size
  File size in bytes.
mime type

  File media type (aka MIME type). List of mime types typically used by Verge3D applications include:

  application/json | JSON file, can also be used for glTF assets.
  application/octet-stream | Binary (.bin) file.
  application/pdf | PDF document.
  audio/mpeg | MP3 audio.
  image/jpeg | JPEG image.
  image/png | PNG image.
  image/webp | WebP image.
  text/csv | A file with comma-separated values (CSV).
  text/plain | Plain text file (TXT).
  video/mp4 | MPEG-4 video.

#

### drop file to

Returns a file dragged from a file manager (or other program) and dropped to the given HTML element inside the browser window. Once the user have dropped the file, returns its contents/info by means of the opened file puzzle.

You can activate the optional drag over slot to handle file movement events. For example, you can use it along with the raycast puzzle to highlight the objects below the cursor/touch.

#

## How to specify URL paths to web resources

For some puzzles one should specify the URL (aka URI) paths to some web resource, e.g:

- open web page — web page to go.
- replace texture — path to the texture.
- load sound — path to the sound asset.
- load video — path to the video asset.
- load scene — glTF asset.
- create text object — font.

When talking about URL paths, you need to understand that these are completely different from the paths you see on your local machine because all resources on the web are accessed indirectly, by means of web browsers that fetch resources from web servers.

Basically that means you never specify URL paths like these:

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

Paths on the web specified only with forward slashes (/) and can be:

Relative

  These paths are specified relatively to the application main HTML file:

  - my_scene.gltf — the scene located in the same directory as the app HTML file.
  - ./my_scene.gltf — the scene located in the same directory as the app HTML file.
  - sounds/my_sound.mp3 — the sound located in the sounds subdirectory of the directory where app HTML stored.
  - ../textures/my_texture.jpg — the texture located in the textures directory which is located one level up (thats why two dots for) from the directory of the app HTML file.

  You should use relative paths with most relevant puzzles.

Absolute

  These used to specify paths when you know where exactly the resource is located on the web server:

  - https://www.my-host.com/my_app/my_scene.gltf — the scene stored in the my_app directory on the my-host server.
  - /my_app/fonts/my_font.woff — the font stored in the fonts subdirectory of the my_app directory on whatever (its name is not known or does not matter) host.
Data URL
  Special kind of URL which represents encoded resource which is not stored on a web server. We use such links to return data generated or retrieved by some puzzles. Read more about them below.

Also, since most servers run Linux, which has case-sensitive file system (also true for Verge3D Network), you should always pay attention to how you name your resources. E.g. the following paths:

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

represent different textures!

#

## Data URL Links

Data URL (aka Data URI) is a convenient method to embed various assets, such as images, glTF scenes (models), sounds, JSON or CSV inside links (techie stuff).

For example, the following link represents small Verge3D logo:

`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`

Copy the entire snippet and past to the browser address bar to display the logo:

In Puzzles, we use Data URL links extensively, as they provide convenient way to pass file-like data between different Puzzles blocks. For example, you can use the open file or drop file to puzzles to load some file (image or data). Then you can make changes in your scene according to that file. After that, you can upload the modified scene (or maybe some data, such as price list document) back to the user machine by using the download file, or maybe upload that file to the server with send data puzzle. In all these cases, the data will be transferred using the Data URL format.

For usage example, check out the Custom Image demo (source files available in the Asset Store).

It's also quite easy to debug data in Data URL format. Simply use the print to console puzzle, then open the browser console to observe the output, then click on the printed URL inside the console to preview the data in the separate browser tab.

## Having Troubles with Puzzles?

Seek help on the forums!