Viewer API Interaction

Expivi provides a communication layer through window.expivi.*. The complete communication layer of Expivi’s namespace consist as below:

{
     _events: {
        onReady: new ReplaySubject(1),
        onChange: new Subject()
    },
    _dispatch: Promise<any>,
    _create: _create,
    _destroy: _destroy,
    managers: {
        resolveMaterialGroups: Promise<any>,
        resolveMaterialGroupManager: Promise<any>,
        resolveOffsetGroups: Promise<any>,
        resolveMaterials: Promise<any>,
        resolveTextures: Promise<any>,
        resolveMaterialManager: Promise<any>
    },
    getProductAttributes: Promise<any>,
    setProductAttribute: Promise<any>,
    setProductAttributeNamed: Promise<any>,
    getActiveMaterial: Promise<any>,
    setActiveMaterial: Promise<any>,
    getScreenshot: Promise<any>,
    getPrice: Promise<any>,
    setNodeProperty: Promise<any>,
    changeCameraZoom: Promise<any>,
    saveConfiguration: Promise<any>,
    loadConfiguration: Promise<any>,
    loadPreset: Promise<any>,
    selectProductNode: Promise<any>,
    autoRotateYAxis: Promise<any>,
    deselect: Promise<any>,
    deleteNode: Promise<any>
}

Event handling

Once the Expivi viewer has been initialized, you will have the ability to subscribe to events/changes regarding its state. There are two streams to subscribe to. The streams exist under window.expivi._events.

onReady

This event is sent only once after Expivi viewer has initialized and is ready to interact with.

window.expivi._events.onReady.subscribe(function(){});

note

onReady event is of ReplaySubject type. Meaning once it has received the ready event, it will keep resending it on any new subscription, even when the subscription has taken place after the initial ready event is sent.

onChange

On every change in the viewer, an event is sent to the client, often these changes are requested by the client itself. The client could respond to changes, such as change in attribute selection from rules, if needed.

window.expivi._events.onChange.subscribe(function(event){
    console.log('Event name:' + event.name + 'Event payload:', event.payload);
});

onChange Event Payload

Property	Description	Type
name	The name of the event received.	string
payload	Event’s payload. Based on every event, the payload can differ or not exist. [nullable]	any

Possible Events

• frame: The viewer has updated the rendered view.
• zoom: The zoom of the camera has changed.
• buildready: Sent once after the initial build of a product is ready.
• buildupdated: Sent every time the product configuration has been updated.
• attribute: Sent every time an attribute of the configuration has been changed.
• material: Sent every time a material of a product has been changed.

Attribute Payload:

Property	Description	Type
attribute_id	The ID of the changed attribute.	number
attribute_type	The type of the attribute.	string
attribute_value	The new value of the attribute.	any
attribute_value_id	The ID of the changed value.	number
attribute_value_name	String representation of the changed value.	string
product_id	The ID of the changed product (catalogue ID).	number
product_scene_id	The ID of the product in the scene.	number
rebuild	Whether the 3D view will be updated after this change.	boolean

Material Payload:

Property	Description	Type
group	Material group name (unique).	string
id	ID of the material group.	number
material_id	ID of the selected material.	number
product_uuid	UUID of the product on which the material has changed.	string
ref_id	ID of the selected material reference in the material group.	number