HTML Puzzles
These puzzles manipulate HTML DOM elements.

Contents
- What is HTML DOM?
- Puzzles Reference
- add HTML element
- remove HTML element
- set property
- get property
- create css rule
- set style
- get style
- set css rule
- event
- get event property
- query selector
- 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 URI Links
What is HTML DOM?
HTML DOM (Document Object Model, see techie stuff here) is a programmatic interface to an HTML page. Basically, this means you can modify your app not only by editing its text, but also by executing various Puzzle blocks. For example, you can add new HTML elements, customize how the page looks, draw something on top of your models, take sceenshots, download files etc.
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.

remove HTML element
Removes an HTML element with a specified identifier.

set property
Sets an property for an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's .html file is embedded using iframe). Also works with lists of element ids.

Property | Description |
---|---|
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. |
download | Specifies that the target will be downloaded when a user clicks on the hyperlink. |
disabled | Specifies that the specified element/group of elements should be disabled. |
height | Specifies the height of the element. |
href | Specifies the URL of the page the link goes to. |
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. |
muted | Specifies that the audio/video should be muted. |
rel | Specifies the relationship between the current document and the linked document. |
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. |
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. |
title | Specifies extra information about an element. |
type | Specifies the type of element. |
value | Specifies the value of the element. |
volume | Specifies volume for the audio/video element. |
width | Specifies the width of the element. |
get property
Gets an property from an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's .html file is embedded using iframe).

Property | Description |
---|---|
alt | Gets an alternate text when the original element fails to display. |
checked | Gets the checked state of the checkbox/radio element. |
className | Gets the value of the class attribute of an element. |
download | Gets the download attribute on the element. |
disabled | Gets the disabled state of the element. |
height | Gets the elemnt height. |
href | Gets the URL of the page the link goes to. |
id | Gets a unique id for an element. |
innerHTML | Gets the HTML content of an element. |
loop | Gets looping state of the audio/video element. |
muted | Gets muted state of the audio/video element. |
rel | Gets the relationship between the current document and the linked document. |
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. |
src | Gets the URL of the loaded file. |
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. |
title | Gets extra information about an element. |
type | Gets the type of element. |
value | Gets the value of the element. |
volume | Gets the volume of the audio/video element. |
width | Gets the width of the 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 (in which Verge3D application's .html file is embedded using iframe).

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 an external HTML document (in which Verge3D application's .html file is embedded using iframe). 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 an external HTML document (in which Verge3D application'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 an external HTML document (in which Verge3D application's .html file is embedded using iframe).

event
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 an external HTML document (in which Verge3D application'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.

get event property
Outputs the value of a property of an event generated by the "event" puzzle.

DOM object selector
Represents the canvas container element - an HTML element which contains a rendered scene, DOM window object - a browser tab or an iframe to which an HTML document is loaded, DOM document object - the root node of an HTML document, or DOM body object - the <body> element of an HTML document.

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

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):
var canvasTex = puzzles.canvasTextures['my_canvas'];
After that, you can access the HTML canvas element as follows:
var 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:
var 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 dynamic:
canvasTex.needsUpdate = true;

For usage example, check out the following demo from the Asset Store: Canvas Texture.
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 an external HTML document (in which Verge3D application's .html file is embedded using iframe). You can also set the width, color and offset for the line.

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 an external HTML document (in which Verge3D application'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 an external HTML document (in which Verge3D application'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. iOS Safari).

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 event 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.

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 following demo from the Asset Store: Custom Image.
take screenshot
Takes a screenshot of the viewport and outputs it in Data URI format.

Notes:
You should also enable screenshots for your app using the configure application puzzle, otherwise black images will be produced.
get URL data
Retrieves URL data of the window to which an application is loaded:
- Entire URL - text, e.g. "https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg"
- Parameters - dictionary, e.g. {"image_url": "https://www.uploadserver.com/path/to/image.jpg"}
- Host name - text, e.g. "www.example.com"

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 following demo from the Asset Store: Custom Image.
download file
Downloads content specified in Data URI 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 URI.

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 URI 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. audio/mpeg MP3 file. image/jpeg JPEG image. image/png PNG 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 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 specified relatively to the app HTML:
- my_scene.gltf or ./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.
- 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 URI
- 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 here.
Data URI Links
Data URI (aka Data URL) is a convenient method to embed various assets, such as images, glTF 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 URI 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 URI format.
For usage example, check out the following demo from the Asset Store: Custom Image.
It's also quite easy to debug data in Data URI format. Simply use the print to console puzzle, then open the browser console to observe the output, then click on the printed URI inside the console to preview the data in the separate browser tab.

Having Troubles with Puzzles?
Seek help on the forums!