The OpenConfiguration.Host can be installed through either of the
following methods
Creating the host
Start by creating an instance of the host class with a reference
to an iframe element.
import { Host } from "https://unpkg.com/@intelligentgraphics/openconfiguration.host@latest/dist/openconfiguration.host.mjs";
/**
* @type {HTMLIFrameElement}
*/
const configuratorIframe = document.querySelector("#configurator");
const host = new Host(configuratorIframe);
Starting the configurator
Afterwards you can use the host instance to open a configurator.
The promise returned by the openConfigurator method resolves
whenever the configurator has been loaded and fully initialized.
await host.openConfigurator({
url: "https://showcase.intelligentgraphics.ag/",
data: {
type: "none",
}
});
Depending on your needs, you can open it on the start page, as
shown prior, or you can directly open a previously saved
planning.
await host.openConfigurator({
url: "https://showcase.intelligentgraphics.ag/",
data: {
type: "planning",
pin: "",
},
});
The promise returned by this invocation of the openConfigurator
method will also resolve when the configurator has been loaded
and fully initialized, but before the planning is ready. You can
wait for the planning and 3d to be loaded by listening to the
Started event.
await host.openConfigurator({
url: "https://showcase.intelligentgraphics.ag/",
data: {
type: "planning",
pin: "",
},
});
// Wait for the first start event
await host.once("Started");
// At this point the configurator is ready and 3d is visible.
You can also open a configurator with an initial article. The
informations required for the initial article depend on the used
configurator.
await host.openConfigurator({
url: "https://showcase.intelligentgraphics.ag/",
data: {
type: "article",
articleNumber: "IGSHOWCASE.Couch_Kombis"
}
});
Instead of passing an articleNumber string, you can also pass an
article number object. See available fields
here
await host.openConfigurator({
url: "https://showcase.intelligentgraphics.ag/",
data: {
type: "article",
articleNumber: {
baseArticleNumber: "IGSHOWCASE.Couch_Kombis"
}
}
});
After starting the configuration, you can also export a gltf of
the active configuration if the configurator supports it. This
gltf export can be executed at any time while the configurator
is active. Support for gltf export is built into the
ig.Configurator.
const urlToGltf = await host.exportConfigurationAsGLTF({
highResolution: false,
});
Export images
You can also export images of the current configuration. Images
may be exported through the `exportConfigurationAsImage` method
of the host instance. This method takes a parameter object with
the following properties:
type
The type of the image. The following values are supported:
-
orthographicTop -> Renders an image using an
orthographic camera looking down at the center of the
scene from above.
-
architectural -> Renders an image of the scene
using an architectural camera. The image rendered by
this type can be treated as a primary image showing the
scene from the front or from a side. The exact
positioning of the camera depends on the configurator
and the settings of the current configuration.
-
perspective -> Renders an image of the scene
using a perspective camera. The image rendered by this
type can be treated as a primary image showing the scene
from the front or from a side. The exact positioning of
the camera depends on the configurator and the settings
of the current configuration.
measurement
Defines wether measurement should be visible in the rendered
image. Defaults to false.
fronts
Defines wether fronts should be visible in the rendered
image. Defaults to true.
const result = await host.exportConfigurationAsImage({
type: "perspective"
});
window.open(`data:${result.mimeType};base64,${result.content}`);
Overriding prices
You can also specify a
calculatePrices method within the
host operations to manipulate the prices shown in the
configurator. This method is called with the current total price
and should return a total price.
const host = new Host(configuratorIframe, {
calculatePrices: (request) => {
// Add 100 to the total price
const newTotalPrice = request.totalPrice + 100;
return {
totalPrice: newTotalPrice,
};
}
});
Exiting the configurator
By listening to the exit event, you can get notified when the
user clicks on an exit button in the configurator.
await host.once("Exit");
The configurator will emit a different event `Finish` whenever
the user requested the configuration to be finished and added to
a basket.
await host.once("Finish");
Afterwards the configurator can be closed through the host.
host.closeConfigurator();