CADViewer Technical Documentation, Installation Guide and Reference Samples Library

Dynamic Insertion of Space Objects

Space objects can be inserted in two ways, either through the Space Object Menu Interface, or directly through API commands:


Application programmers can through the API for Custom Space Object Menu add Space Objects as either standard SVG, layered Inkscape SVGs or standard bitmaps. The Custom Space Object Menu includes a scaling tool for insertion, and the funtional implementation of the call-back method cvjs_graphicalObjectOnChange can be used to extract the JSON definition of the space object and set it’s properties such as ID, name, etc.



API control of Insertion of Space Objects

The CADViewer API can programmatically be used to place out Image Space Objects or custom objects on the canvas. When placing out a space image objects, the following three methods are used:


where the JavaScript code is as follows:

        // place the icon on the canvas programmatically
        cvjs_setImageSpaceObjectParameters(loadSpaceImage_LocationOrbase64Object, loadSpaceImage_ID, loadSpaceImage_Type, loadSpaceImage_Layer);
        cvjs_setGlobalSpaceImageObjectScaleFactor(1.0);  // 1.0  = no change in icon size
        cvjs_addFixedSizeImageSpaceObject("floorPlan");


Parameter settings

The Space Object images defined in method cvjs_setImageSpaceObjectParameters() can be either SVG or bitmaps.

The parameter loadSpaceImage_LocationOrbase64Object controls the insert object , the parameter loadSpaceImage_ID is a unique ID of the insert object that developers use for control of the object, the parameter loadSpaceImage_Type is the type definition of the object that displays when its click-modal is active, and the parameter loadSpaceImage_Layer defines the layer on which to place the Space Object for on/off control.

The parameter loadSpaceImage_LocationOrbase64Object can take two object types:

  1. 1: Location of the image object, by either http or relative location.
  2. 2: A base64 encoded object. If SVG the object shall be of the type: “data:image/svg+xml;base64,codedcontent….” or if a PNG the object shall be of the type: “data:image/png;base64,codedcontent….”


/**
 * Sets the parameters when creating an Image Space Object
 * @param {string} loadSpaceImage_LocationOrbase64Object - location of the image object (SVG or bitmap)  NOTE: the image can also be base64 encoded of type: data:image/svg+xml;base64,PHN.... or  data:image/png;base64,PHN....
 * @param {string} loadSpaceImage_ID - ID of the Image Space Object
 * @param {string} loadSpaceImage_Type - Type of the Image Space Object
 * @param {string} loadSpaceImage_Layer - name of the layer where the Space Object is positioned
 */

function cvjs_setImageSpaceObjectParameters(loadSpaceImage_LocationOrbase64Object, loadSpaceImage_ID, loadSpaceImage_Type, loadSpaceImage_Layer){}

Object Scaling

If the object needs to be scaled at insertion, the method cvjs_setGlobalSpaceImageObjectScaleFactor() can be applied.


/**
 * Sets a scale factor of Image Space Objects when placed out in the canvas
 * @param {float} factor - scalefactor, default is 1.0
 */
function cvjs_setGlobalSpaceImageObjectScaleFactor(factor){}

Please also see the Guide Programatically adding new interactive SVG or bitmap icons through the API. The links below will open the command documentation in the CADViewer JavaScript API.

Last updated on 10 Aug 2022
Published on 13 Mar 2020