HTML Puzzles

These puzzles manipulate HTML DOM elements.

Contents

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.

Notes:

Besides creating an HTML element, this puzzle also sets its CSS property position to "absolute". If you don't need this thing, you can set this CSS property to "initial" with a set style puzzle.

get attribute

Gets an attribute 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).

set attribute

Sets an attribute 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.

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.

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. To do this, retrieve the canvas texture by its ID specified in the puzzle:

var canvasTex = v3d.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;

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.

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.

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:

See the Custom Image demo in your Verge3D distribution for a working example.

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:

The "in parent doc" checkbox should be enabled if the window of an external HTML document is required (in which Verge3D application'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:

See the Custom Image demo in your Verge3D distribution for a working example.

download file

Downloads content specified in Data URI format to a file.

This puzzle can be used, for example, to save previously taken screenshots, or to save some information in a text file:

open file and "opened 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 in Data URI format.

Having Troubles with Puzzles?

Seek help on the forums!