Embedding an Illustration
Applicable for website and 3rd party applications
Applicable to the following products and plans:
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:
List of Commands
The host page can control the embedded Illustration by sending events. The following are examples of events handled by the Illustration .
URL params can be added to the URL to control loading.
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>
