HTML Puzzles

These puzzles manipulate HTML elements.

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
  • event
  • 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 an HTML page. Basically, this means you can modify your app not only by editing its source code, 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 screenshots, 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.

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:

#

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.

#

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

#

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

#

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

#

get event property

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

#

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.

#

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

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.

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

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!