Skip to content
Gallery
zea-favicon
Zea Knowledge Base
Zea Knowledge Base
Zea Partner Program
Release Notes
More
Share
Explore
Zea Illustrations

icon picker
Embedding an Illustration

Applicable for website and 3rd party applications
zea-favicon
Applicable to the following products and plans:
Zea Illustrations
The following page describes how an Illustration can be embedded into a host application and then optionally controlled by that host application.

List of Events

An Illustration emits events that the host page can listen to:
'loaded': emitted once the IH project has completed loading. The payload could include data about the loaded project, including which views are available. We could also output the full tree of the loaded scene.(optional)
'viewActivated': emitted when a user activates a view. A payload could be included to specify the name and index of the view that was activated.
'pointerOverGeom': When the mouse pointer moves over a geometry in the scene.
The payload to this event would be the path in the scene to the geometry. This path would include the names of the body, part, sub-assembly, instance, parent assembly.. etc up to the root. The host page would be able to walk the path and detect if the item in question is relevant to the host page. For example, if the item happens to be in a BOM displayed in the host page, the host page could highlight the BOM item.
'pointerLeaveGeom': the inverse of the previous event. Used to remove highlights from BOM items.
'pointerClickedOnGeom': Similar to the above. A payload containing the path could be provided and parsed by the host page.

List of Commands

The host page can control the embedded Illustration by sending events. The following are examples of events handled by the Illustration .
'activateView': A payload would be included to specify the name or index of the view to activate.
'addHighlight': Add a visual highlight to the item specified in the payload. The payload would include the path to the item to highlight and the color of the highlight. This path could be based on a path received from the host page in one of the previous events.
'removeHighlight': Removes a previously added visual highlight from an item specified in the payload.
URL params can be added to the URL to control loading.
DISABLE_CAMERA_ROTATION: The camera manipulator would prevent changes to camera orientation affected by the pointer. Activating views would still work as normal.
megaphone
Note: None of the details suggested here constrain the host page to any particular workflow. The host page could be a page of repair/work instruction with a sequence of steps or parts page with a BOM or simple table of contents page where a model is being presented for the user to select an item of interest.
This enables a published IH page to replace a static image like an SVG, while leaving the host page to provide all the UI components and interaction model.

Example Embed Page

Download the following source code, and enter the URL of a published illustration into the text box provided.
<!doctype html>
<html>
<head>
<title>Test Embed Illustration</title>
<meta name="description" content="Our first page" />
<script type="module">
const disableRotationInput = document.getElementById('disableRotation')
const urlInput = document.getElementById('url')
const iframe = document.getElementById('ih-embed')
const output = document.getElementById('output')

const updateUrl = () => {
iframe.src = `${urlInput.value}?${
disableRotationInput.checked ? 'DISABLE_CAMERA_ROTATION' : ''
}`
}
disableRotationInput.addEventListener('change', updateUrl)
urlInput.addEventListener('change', updateUrl)

let mouseOverHighlighted = []
let mouseClickHighlighted = []
window.addEventListener('message', function (event) {
output.textContent = JSON.stringify(event.data)

switch (event.data.type) {
case 'pointerOverGeom': {
const path = event.data.path
if (path[5] == '369-331') {
mouseOverHighlighted = path.slice(0, 5)
iframe.contentWindow.postMessage(
{
type: 'addHighlight',
key: 'mouse-over',
path: mouseOverHighlighted,
color: '#ff0000',
fill: 0.0,
},
'*',
)
}
break
}
case 'pointerLeaveGeom': {
const path = event.data.path
if (path[5] == '369-331') {
const newHighlighted = path.slice(0, 5)
if (
!newHighlighted.some(
(elem, index) => elem != mouseOverHighlighted[index],
)
) {
iframe.contentWindow.postMessage(
{
type: 'removeHighlight',
key: 'mouse-over',
path: mouseOverHighlighted,
},
'*',
)
mouseOverHighlighted = []
}
}
break
}
case 'pointerClickedOnGeom': {
const path = event.data.path
if (path[5] == '369-331') {
const newHighlighted = path.slice(0, 5)
if (
!newHighlighted.some(
(elem, index) => elem != mouseClickHighlighted[index],
)
) {
iframe.contentWindow.postMessage(
{
type: 'removeHighlight',
key: 'selection',
path: mouseClickHighlighted,
},
'*',
)
mouseClickHighlighted = []
return
}
mouseClickHighlighted = path.slice(0, 5)
iframe.contentWindow.postMessage(
{
type: 'addHighlight',
key: 'selection',
path: mouseClickHighlighted,
color: '#ffbb00',
fill: 0.2,
},
'*',
)
}
break
}
}
})
</script>
<meta name="keywords" content="html tutorial template" />
<style>
body {
background-color: linen;
}
.container {
display: flex; /* or inline-flex */
flex-direction: column;
justify-content: space-between;
padding: 10px;
}
#url {
width: 80%;
}
.wh-full {
width: 100%;
height: 100%;
}
#ih-embed {
width: calc(100% - 20px);
height: 600px;
border: none;
}
</style>
</head>
<body class="wh-full">
<h2>Embedded Illustration Example</h2>
<div class="container">
<label for="url">Published Url:</label>
<input type="text" id="url" name="url" required size="100" />
<div>
<label for="disableRotation">Disable Rotation:</label>
<input type="checkbox" id="disableRotation" name="disableRotation" />
</div>
</div>
<iframe
src=""
id="ih-embed"
allow="xr-spatial-tracking"
allowfullscreen=""
></iframe>
<div id="output"></div>
</body>
</html>

List of Events
List of Commands
Example Embed Page
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.