Embedding Projects

This feature is currently experimental and may change significantly in the future. Feel free to explore it, but keep in mind that some concepts discussed here might not be ideal for long-term use.

During work on a project it is often beneficial to share the flowsheet and its simulation results with other people that do not have an IPSE GO account. Public link shares allows sharing projects with other users that do not have an active account. Using this mechanism can also be used to embed a shared project on any website.

Embedding an IPSE GO project on websites is typically done for this use cases:

  • Sharing process flowsheet with stakeholders of the project.

  • Showcasing results next to a graphical representation / flowsheet.

  • Display academical advances on the website of research projects.

An example for an embedded IPSE GO project may look like the following:

In the context of the world wide web an embed typically refers to content on your website that is provided by a different service. Browsers allow the integration of foreign content via the iframe html element.

Creating an IPSE GO Project Embed

Creating an embed for your project consists of the following steps:

  1. Save the project, optionally give the specific version to be embedded a tag name

  2. Share the project publicly via share-link

  3. Modify the copied share-link to create an embed-link

While steps 1 and 2 are described in more details on different parts of this documentation we will focus on the last steps.

A typical share-link in IPSE GO looks similar to the following:

https://ipsego.app/projects/read/<SHARE-ID>

To convert the share-link to an embed-link simply take the <SHARE-ID> part and append to the embed url like so:

https://ipsego.app/projects/embed/<SHARE-ID>

Test that the embed-link works by opening it in a browser. With this publicly accessible embed-link working the next and final step is to create the iframe element that displays the content on the host website.

Snipped to embed Project with iframe in HTML
<iframe
    src="https://ipsego.app/projects/embed/<SHARE-ID>"
    width="800px" height="600px"
    frameborder="0" allowfullscreen
    allow="clipboard-read; clipboard-write">
</iframe>

Adapt the width and the height of the embed to as desired. By default iframe elements include a border that can be disabled with setting the frameborder to 0.

Use the allowfullscreen to allow the embed to be displayed in fullscreen. Additionally allow="clipboard-read; clipboard-write" allows users to copy content of the embed into their clipboard. This provides good compatibility for interactions on IPSE GO.

IPSE GO Embed Options

IPSE GO provides several parameters to alter the display and interactivity of an embedded project. The embed API expects all date values in ISO 8601 standard (YYYY-MM-DDTHH:mm:ss.sssZ).

Truthy values allowed are 1, y, yes, true while falsy values can be any value in 0, n, no, false.
Parameter Default Description

ds

Lowest dataset ID

The dataset ID to select by default.

t

none

Specifies the tag or the timestamp of the project version that should be used.

bg

none

Background color of the embedded project. Can be set to “transparent” or any valid CSS color value.

grid

false

Shows the background grid if set to a truthy value.

paper

false

Shows a paper background if set to a truthy value.

terminals

false

Shows terminals of units if set to a truthy value.

results

true

Displays available project results if set to a truthy value.

settings

false

Displays object settings if set to a truthy value.

references

false

Displays object references if set to a truthy value.

objectNames

false

Displays object names if set to a truthy value.

viewMenu

false

Displays the view menu if set to a truthy value.

dsMenu

false

Displays the dataset menu if set to a truthy value. Can be used to allow users of embedded projects the switching of datasets.

chartMenu

false

Displays all charts in an overlay menu if set to a truthy value. Can be used to grant users access to project charts in embedded projects.

zoom

true

Allows zooming if set to a truthy value.

scroll

true

Allows scrolling if set to a truthy value.

selection

false

Allows selection if set to a truthy value.

focus

none

A comma-separated list of object names to focus on (e.g. “sink001,sink002,source001”).

focusMargin

0

Margin applied to the viewport after focusing objects. Only applies if focus is set.

focusClip

none

How objects outside the focus are clipped. Possible values: “none”, “default”, “rect”, “rectangle”, “convex”.

focusStrategy

default

How objects should be focused. Possible values: “none”, “default”, “fill”.

connectionArrows

true

Displays connection arrows if set to a truthy value.