Embedded Diagram

Embed an interactive cutting layout visualisation on your website using a simple iframe. It displays the optimised cut layout for a given calculation result. It can also talk to the surrounding page via postMessage.

Quick Start

<!-- Replace the result value with your calculation job ID -->
<div id="smartcut-vis-message">Loading...</div>

<iframe
  id="smartcut-vis"
  src="https://cutlistevo.com/embed/?result=1733"
  allowtransparency="true"
  frameborder="0"
  height="0"
></iframe>

Set the src attribute dynamically using the jobId returned by the /v3/calculate API call:

const jobId = 1733 // returned by /v3/calculate
document.getElementById('smartcut-vis').src =
  `https://cutlistevo.com/embed/?result=${jobId}`

A live example is available at: https://cutlistevo.com/embed/?result=1733

Parameters

Pass parameters as query string values on the iframe src URL.

Parameter	Description
`result`	Required. The calculation job ID to display
`dn`	Set to `true` to disable the stock navigation controls
`hs`	Set to `true` to hide the stock information header

Colours

Customise the colour scheme using HEX values (without the # prefix).

Parameter	Description
`pca`	Part colour A
`pcb`	Part colour B
`pch`	Part colour on hover
`pcs`	Part colour when selected
`sc`	Stock (board) background colour
`tc`	Text colour

Example:

https://cutlistevo.com/embed/?result=1733&pca=BAD0F5&pcb=346AC9&pch=E09318&pcs=D35A5A&sc=EBEB58

iframe Messages

Communicate with the embed using the browser’s postMessage API.

Messages from the iframe

Listen for these events on window:

Type	Description
`resize`	The embed has resized. `w` and `h` carry the new dimensions in pixels.
`loaded`	The visualisation has loaded and a result was found. `payload` carries the stock IDs.
`noResult`	No result was found for the given job ID.
`error`	An error occurred. `message` carries the error text.
`partClick`	A part was clicked. `message` carries part data.

Messages to the iframe

Send these events to the iframe using contentWindow.postMessage:

Type	Fields	Description
`navigate`	`stockID`	Navigate to a specific stock item by its ID (e.g. `'1.0'`)

Notes

The embed must be hosted on a page served over HTTPS. It will not work on HTTP.
The iframe height starts at 0. The resize message sets it.

Full Example

HTML

<div id="smartcut-vis-message">Loading...</div>

<iframe
  id="smartcut-vis"
  src="https://cutlistevo.com/embed/?result=1733"
  allowtransparency="true"
  frameborder="0"
  height="0"
></iframe>

JavaScript

window.addEventListener('message', (e) => {
  if (!e.data) return
  if (e.data?.origin !== 'smartcut') return

  switch (e.data.type) {
    case 'resize':
      document.getElementById('smartcut-vis').style.height = e.data.h + 'px'
      break
    case 'loaded':
      document.getElementById('smartcut-vis-message').style.display = 'none'
      document.getElementById('smartcut-vis').style.visibility = 'visible'
      break
    case 'noResult':
      document.getElementById('smartcut-vis-message').innerText = 'No result found'
      break
    case 'error':
      document.getElementById('smartcut-vis-message').innerText = e.data.message
      break
    case 'partClick':
      console.log(e.data.message)
      break
  }
}, false)

// Navigate to a specific stock item
document.getElementById('smartcut-vis').contentWindow.postMessage(
  { type: 'navigate', stockID: '1.0' }
)

CSS

#smartcut-vis,
#smartcut-vis-message {
  width: 100%;
  max-width: 1000px;
}

#smartcut-vis {
  background-color: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  visibility: hidden;
}

API guide covers producing the layout this diagram renders.
Hosted store is the ready-made alternative to embedding.
WordPress plugin does the same thing without writing code.