What is hauzd Embed SDK

The Embed SDK is a suite of Javascript APIs delivered as a Javascript library for consumption by the host app.

As an abstracted embedded interface that wraps an iFrame element, it comes packed with features to programmatically:

• Hook to an existing iFrame element and use it for hauzd app
• Subscribe to various events fired within hauzd app
• Execute commands like setting current unit or adding/removing filters
• Access information such as state and project inventory of the hauzd app within the iFrame

The Embed SDK expands the basic capabilities of iFrames by utilizing postMessage communication between hauzd app and the host page.

This technique is commonly used for basic integration, but the SDK takes out all the hassle and risk involved in manually implementing this, significantly speeding up development/integration.

Setup

Import the SDK library

To use the Embed SDK, you will have to include the SDK Javascript library in your host page using a <script> HTML tag:

<script src="https://hauzd.app/frame/js"></script>

And then import the HauzdFrame class from the SDK:

const { HauzdFrame, enums } = window['hauzd.embed'];

Note that enums is optional, and contains values for different options in the SDK such as event names.

Creating an instance of HauzdFrame

Each iFrame containing the hauzd application on your host page will be represented by an instance of the HauzdFrame class imported from the SDK.

You will need an existing iFrame element on your page, such as:

<iframe id="my-iframe"></iframe>

You will also need:

• The URL of your hauzd project, such as https://sample.hauzd.app

Create an instance of the HauzdFrame class:

const hauzdFrame = new HauzdFrame({
	url: 'https://sample.hauzd.app',
	settings: {
		showUI: false,
		showCameraCtrl: true,
		disableDiscl: true,
		disableEnvMapBack: true,
		backLinearGrad:[{color:[0.8,0.8,0.8,1],ratio:0.0},{color:[1,1,1,1],ratio:0.5}],
		backColor:[1,1,1],
	},
	state: {
		scr:enums.SCR_NODE,
		scrPopup:'',
		lang:'En',
	},
	element: document.getElementById('my-iframe')
});

Interacting with the iFrame and hauzd application

All commands available in the Embed SDK work asynchronously and return Javascript Promise objects that resolve when the operation is complete.

For example:

hauzdFrame.setState({addr: 'T/Apt101'}).then(() => {
	console.log("State was set!");
});

Configuring the UI

Whether during the creation of the iFrame (via the constructor) or later using the updateSettings() method, you can configure which elements of UI are available by passing in the following configuration.

For example:

hauzdFrame.updateSettings({
	showUI: false,
	showCameraNav: true
}).then(() => {
	 console.log("New settings applied!");
});

Getting information

You can retrieve information from the hauzd application, such as information about the inventory and hierarchy of the project.

For example:

hauzdFrame.getProjectHierarchy().then((projectStructure) => {
	console.log("Project structure obtained!");
});

You can get current loading pressure (range from min of 0.0 to max of 1.0):

hauzdFrame.getLoadPressure().then((response) => {
	console.log("getLoadPressure result:", response);
});

Events

You can subscribe to events fired by the hauzd application and react to them on your host page. You can also unsubscribe handlers from events.

For example:

function hauzdAppStateChanged(args) {
	console.log("State changed!");
}
hauzdFrame.on(enums.STATE_CHANGED, hauzdAppStateChanged);
hauzdFrame.off(enums.STATE_CHANGED, hauzdAppStateChanged);

function hauzdAppStructureChanged(args) {
	console.log("Structure changed!");
}
hauzdFrame.on(enums.STRUCTURE_CHANGED, hauzdAppStructureChanged);
hauzdFrame.off(enums.STRUCTURE_CHANGED, hauzdAppStructureChanged);

function hauzdAppLoadPressureChanged(args) {
	console.log("Load pressure changed!");
}
hauzdFrame.on(enums.LOAD_PRESSURE_CHANGED, hauzdAppLoadPressureChanged);
hauzdFrame.off(enums.LOAD_PRESSURE_CHANGED, hauzdAppLoadPressureChanged);