Web SDK Reference - Context

Use the methods below on the context object: see the Create context reference documentation.

Method setValue

The method setValue() allows to update the value of a parameter.

setValue(
    parameterId: string,
    value: string | number
): void,

CODE

Parameters

Name	Type	Description
parameterId	`string`	The ID of the parameter, unique in the product. Can be retrieved from the parameter HTML element or parameter data.
value	`string \| number`	New parameter value to set.

Example usage

context.setValue("52-wheel-patterns-38-select-a-pattern", "Cross");

CODE

Method save

Calling the save() method stores the current product configuration (i.e. parameter settings) on the Twikit server. An overview of all stored configurations can be viewed at https://configurations.twikit.com.

save(callback : (err? , data) => void): void

CODE

Example usage

context.save(function(err, data) {
    if (err) {
       // An error happened while saving the configuration.
    }
    console.log('Configuration ID:', data.configurationId);
    console.log('Preview URL:', data.previewUrl);
    console.log('Data sent to Twikit', saveData.savedData);
 });

CODE

Method setEnvironment (not fully supported)

context.setEnvironment can be called to select a predefined environment. The environment contains all settings regarding:

3D scene
Camera
Animations
Rendering effects (ambient occlusion, bloom, blur, …)

setEnvironment(name: string): void

CODE

Example usage

context.setEnvironment("myEnvironmentName")

CODE

This method is not fully supported yet in the current version of the software.

Method renderPreview

The method context.renderPreview() can be called to render a preview image of the current 3D view.

renderPreview(options, callback): void

CODE

Parameters

Name

Type

Description

options

IRenderPreviewOptions

Rendering options.

IRenderPreviewOptions: {
    backgroundColor?: string;
    resolution?: { height: number, width: number };
    // Optional, by default the current user parameters will be used.
    cameraState?: { pitch: number, yaw: number, roll, number, zoomDistance: number };
    download?: { fileName: string } | boolean;
}

CODE

-

function

Callback function that is called when preview image is rendered.

Example usage

IRenderPreviewOptions: {
    backgroundColor?: string;
    resolution?: { height: number, width: number };
    cameraState?: { pitch: number, yaw: number, roll, number, zoomDistance: number };
    download?: { fileName: string } | boolean;
}

renderPreview(
    {
        backgroundColor: '#123422',
        resolution: { height: 70, width: 100},
        cameraState: { pitch: 30 /* deg */, yaw: 60 /* deg */, roll: 90 /* deg */, zoomDistance: 300 /* mm */ },
        download?: { fileName: string } | boolean;
    },
    function(base64EncodedImageUrl) {
       // Store image.
    }
);

CODE