HTML Puzzles

These puzzles manipulate HTML elements.

Visual programming blocks for HTML

Contents

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

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

Adding HTML elements with visual programming blocks

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

Adding page link

Allowed 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 (specifed 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.
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.
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).

Removing HTML elements with visual coding

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.

Visual programming block to set HTML element property
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 <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.
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 maxmum value for <input> element.
min Specifies the minimum value for <input> element.
muted Specifies that the <audio>/<video> element should be muted.
rel Specifies the relationship between the current document and the linked document. Can be used for <a>, <form>, or <link> 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)..

Visual programming block to get HTML element property
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.
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.
download Gets the download attribute on the element.
disabled Gets the disabled state of 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.
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 maxmum value of <input> elements.
min Gets the minimum of <input> element.
muted Gets muted state of the <audio>/<video> element.
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.
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 height 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).

Visual programming block to create CSS rules

style constructor

Creates a string with CSS style declarations separated by semicolons.

Visual block to create CSS declarations

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

Creating CSS declarations

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.

Visual programming block to set styles for HTML elements

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

Visual programming block to get style from HTML elements

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:

Assigning background color of HTML elements with visual scripting blocks

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

Visual programming block to set CSS rule property

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.

Visual programming block to handle DOM events
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 document 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.
dblclick Event which happens when element is duble-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 document 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 also 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 also 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 registred on the body element.
resume Fires when <audio> or <video> playback has resumed.
scroll Happens then the scrollbar is being scrolled.
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 event puzzle.

Visual scripting chunk to retrieve DOM event props
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.
data Event data. Returned by input or message events.
isPrimary Indicates the primary pointer.
pageX, pageY The X and Y coordinates of the mouse pointer or touch. Works with click, dblclick, mouse..., or pointer... events.
key The keyboard key that triggered the keydown, keypress, or keyup event.
offsetX, offsetY The X and Y coordinates of the mouse pointer or touch. Works with click, dblclick, mouse..., or pointer... events.
pointerType Pointer device type: "mouse", "pen", or "touch".
target.checked State for a checkbox/radio element on which the event occured.
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: 0 — left, 1 — middle (wheel), 2 — right. This event is considered deprecated, always use the button event 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.
DOM object selector visual programming block

query selector

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

Query selector visual programming block

create canvas elem

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

Visual programming block to create HTML canvas

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; Working with HTML canvas using visual logic blocks

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 the parent HTML document (i.e. when app's .html file is embedded using iframe). You can also set the width, color and offset for the line.

Drawing lines with visual logic blocks

remove line

Removes a previously created line from a specified object.

Visual programming block to remove lines

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

Visual programming block to bind HTML element

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

Visual programming block to unbind HTML element

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

Entering fullscreen mode with visual logic blocks

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.

Visual programming block to open new pages

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.

Creating social media links with visual programming blocks

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.

Visual programming block to set URL params

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:

Example of setting URL params with logic blocks

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.

Taking screenshots with visual programming blocks

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

Getting URL data by using visual coding blocks

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:

Example of getting URL data with visual programming block

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.

Download file visual programming block

This puzzle can be used, for example:

Visual coding script to download files

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.

Open file visual programming block

opened file

Returns file contents or metadata.

Opened file visual programming block

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.

Visual programming block for dropping files to HTML page

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:

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:

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:

Company logo as Data URL image

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.

Debugging data url links in Chrome

Having Troubles with Puzzles?

Seek help on the forums!