Guide to Add or Modify Hotspots & Images

CADViewer, with it’s flexible design and use of standard toolkits, can be integrated with any Database Management Application and be used with a multitude of custom data-driven applications.

This Tutorial

This tutorial builds on top of the CADViewer tutorial Automated Creation of Hotspots, where a base CAD drawing containing space poloygons on a designated layer been made interactive in CADViewer.

This tutorial will outline various ways of:

1: Interactively Adding new polygon shaped hotspots.
2: Interactively Adding new interactive SVG or bitmap icons.
3: Programatically Adding new interactive SVG or bitmap icons through the API.
4: Modifying the Interactive Hotspots, created using Automated Creation of Hotspots
5: Modifying the interactively added polygon shaped hotspots.
6: Modifying the interactively added interactive SVG or bitmap icons.
7: Saving interative content through the interface.
8: Manipulating interactive content through the API.
9: Saving interactive content through the API.
10: Loading interative content through the API.
11: Loading interactively content through the Icon Interface.

The steps outlined below can be tested in our Download versions of CADViewer. Furhermore, use our online reference sample CADViewer_space_objects_canvas_API_640.html as the base for this tutorial

1: Interactively adding new Polygon Shaped Hotspots

Navigate to the last Icon Menu Page in the CADViewer top left Menu bar.

You can add new space objects, currently exposed are Rectangles, Polygons and Circles as commands:

Drawing a space object:

These objects will internally in the datastructure be represented with a JSON object that can be retrieved throught the API, see 7: Manipulating interactive content.

In addition to this, our Custom Canvas API allows developer to build their own higher level canvas methods.

2: Interactively adding new interactive SVG or bitmap icons

The CADViewer API can be used to place out Image Space Objects or custom objects on the canvas:

In the online reference sample, two helper arrays has been created:

1: To the upper left, a set of input fields have been added controlling the Space Type, Space ID, and Space SVG/Bitmap Image used when placing out an object on the canvas. When placing out an object, the Space ID field (loadSpaceImage_ID) will be automatically incremented after placement of image.

These fields controls the variables: loadSpaceImage_Location, loadSpaceImage_ID, loadSpaceImage_Type, loadSpaceImage_Layer.

2: To the central left, an image array has been placed out to select graphical objects. Selecting a graphical object from the image array and place it on the canvas, will automatically trigger an increment of the Space ID field defined under 1: after placement of image.

When placing out a space image objects, using either 1: or 2: , the following three methods are used:

where the JavaScript code is as follows:

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

Please refere to the CADViewer API and Download our code samples.

3: Programatically adding new interactive SVG or bitmap icons through the API

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", svgx, svgy);

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: Location of the image object, by either http or relative location.
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){}

Object Insertion - using SVG Coordinates

The object is inserted at a given location in SVG coordinates (xcor, ycor), by using the method cvjs_addFixedSizeImageSpaceObjectXY().

/**
 * Add a Fixed Size Image Space Object in SVG coordinates
 * @param {string} floorplan_div - name of div containing CADViewer canvas
 * @param {int} xcor - x coordinate in SVG coordinates
 * @param {int} ycor - y coordinate in SVG coordinates
 
 */
  
function cvjs_addFixedSizeImageSpaceObjectXY(floorplan_div, xcor, ycor){}

Object Insertion - using Global Coordinates

Insert a Space Object in Global (DWG) coordinates by using the method: cvjs_addFixedSizeImageSpaceObject_GlobalXY


/**
 * Add a Fixed Size Image Space Object in Global (DWG) Coordinates
 * @param {string} floorplan_div - name of div containing CADViewer canvas
 * @param {int} xcor - x coordinate in Global (DWG) coordinates
 * @param {int} ycor - y coordinate in Global (SVG) coordinates
 
 */
  
 function cvjs_addFixedSizeImageSpaceObject_GlobalXY(floorplan_div, xcor, ycor){}

When converting an AutoCAD DWG file, MicroStation DGN, Adobe PDF or any raster format using AutoXchange 2020, AutoXchange 2020 creates a tranformation matrix that CADViewer uses for global coordinates, measurement, etc.


<text id="cadviewer_worldUnits">
{ "globalOrigin": { "x": -729.978, "y" : -441.783}, 
						"units": "mm",
						"svgToWorldUnits": 1.13728
}
</text>
<text id="cadviewer_drawingCoordinates">
{ "DWG": 
    { "lowerLeft": { "x": -744.6, "y" : -450.59}, 
      "upperRight": { "x": 1526.34, "y" : 879.656} 
    },
 "SVG": 
    { "lowerLeft": { "x": 0, "y" : 1512.93}, 
      "upperRight": { "x": 2500, "y" : 0.0705953} 
    },
 "Drawing Height": 1513
}
</text>

Use the CADViewer API, for methods to directly convert between SVG and Global Coordinates.

The following methods are described in the API: cvjs_getGlobal_X_fromSVG, cvjs_getSVG_X_fromGlobal, cvjs_getGlobal_Y_fromSVG and cvjs_getSVG_Y_fromGlobal.

4: 5: 6: Dynamically Modifying Interactive Content

Navigate to the last Icon Menu Page in the CADViewer top left Menu bar.

You can edit space objects, currently exposed commands are: Resize, Move, Rotate and Delete:

The interface supports space objects created either through pre-processing or added dynamically, as well as SVG or bitmap image objects.

The interaction process is:

1: Select Icon Command
2: On canvas, click on Space Object to select it
3A: For Resize, Move and Rotate, after selection drag on object to modify the object
3B: For Delete, first click on object will delete it

Below is highlight, prior to selection of object for Resize/Move/Rotate:

The menu interface additionally allows you to do a number of modifications to your loaded Space Objects

Open the icon command , select and change the settings of a Space Object.

In addition to this, our Custom Canvas API allows developer to build their own higher level canvas methods based on a set of core functionality that involves object selection, creation and manipulation

6: Saving interactive content through the interface

When the modification of the Spaces are completed, save of objects can be done through the interface or through the API.

Use the command Save Space Objects :

7: Manipulating interactively content through the API

There are API commands that allows users to manipulate Space Objects through the API, these are retrieval and settings of all space objects, and retrieval and setting of individual objects.

Please see the full CADViewer API and Download our code samples.

Return content of a single Space ID

function cvjs_returnSpaceObjectID, returns the content of a Space Object as a JSON object, that can be manipulated.

/**
 * Return a JSON structure of all content of a given ID: <br>
 * 	var jsonStructure =  	{	"path":   path, <br>
 *								"tags": tags, <br>
 *								"node": node, <br>
 *								"area": area, <br>
 *								"outerhtml": outerHTML, <br>
 *								"occupancy": occupancy, <br>
 *								"name": name, <br>
 *								"type": type, <br>
 *								"id": id, <br>
 *								"defaultcolor": defaultcolor, <br>
 *								"layer": layer, <br>
 *								"group": group, <br>
 *								"linked": linked, <br>
 *								"attributes": attributes, <br>
 *								"attributeStatus": attributeStatus, <br>
 *								"displaySpaceObjects": displaySpaceObjects, <br>
 *								"translate_x": translate_x, <br>
 *								"translate_y": translate_y, <br>
 *								"scale_x": scale_x ,<br>
 *								"scale_y": scale_y ,<br>
 *								"rotate": rotate, <br>
*								"transform": transform, <br>
 *								"svgx": svgx, <br>
 *								"svgy": svgx, <br>
 *								"dwgx": dwgx, <br>
 *								"dwgy": dwgy } <br>
 * @param {string} spaceID - Id of the Space Object to return
 * @return {Object} jsonSpaceObject - Object with the entire space objects content
 */

function cvjs_returnSpaceObjectID(spaceID){}

Return all Space Objects

function cvjs_returnAllSpaceObjects, returns the content of all Space Objects as JSON object.

/**
 * Return a JSON structure with  all Space Object content, each entry is of the form: <br>
 * 	SpaceObjects :[  	{	"path":   path, <br>
 *								"tags": tags, <br>
 *								"node": node, <br>
 *								"area": area, <br>
 *								"outerhtml": outerHTML, <br>
 *								"occupancy": occupancy, <br>
 *								"name": name, <br>
 *								"type": type, <br>
 *								"id": id, <br>
 *								"defaultcolor": defaultcolor, <br>
 *								"layer": layer, <br>
 *								"group": group, <br>
 *								"linked": linked, <br>
 *								"attributes": attributes, <br>
 *								"attributeStatus": attributeStatus, <br>
 *								"displaySpaceObjects": displaySpaceObjects, <br>
 *								"translate_x": translate_x, <br>
 *								"translate_y": translate_y, <br>
 *								"scale_x": scale_x ,<br>
 *								"scale_y": scale_y ,<br>
 *								"rotate": rotate, <br>
 *								"transform": transform, <br>
 *								"svgx": svgx, <br>
 *								"svgy": svgx, <br>
 *								"dwgx": dwgx, <br>
 *								"dwgy": dwgy } <br>
 * @param {string} spaceID - Id of the Space Object to return
 * @return {Object} jsonSpaceObject - Object with all space objects content
 */

function cvjs_returnAllSpaceObjects(){}

Add single or all Space Objects

function cvjs_setSpaceObjectDirect, creates a Space Object struture based on a JSON object array. This method can set single SpaceID or an entire array of SpaceIDs.


/**
 * Using a JSON structure to create a new Space Object <br>
 * 	var jsonStructure =  	{	"path":   path, <br>
 *								"tags": tags, <br>
 *								"node": node, <br>
 *								"area": area, <br>
 *								"outerhtml": outerHTML, <br>
 *								"occupancy": occupancy, <br>
 *								"name": name, <br>
 *								"type": type, <br>
 *								"id": id, <br>
 *								"defaultcolor": defaultcolor, <br>
 *								"layer": layer, <br>
 *								"group": group, <br>
 *								"linked": linked, <br>
 *								"attributes": attributes, <br>
 *								"attributeStatus": attributeStatus, <br>
 *								"displaySpaceObjects": displaySpaceObjects, <br>
 *								"translate_x": translate_x, <br>
 *								"translate_y": translate_y, <br>
 *								"scale_x": scale_x ,<br>
 *								"scale_y": scale_y ,<br>
 *								"rotate": rotate, <br>
 *								"transform": transform, <br>
 *								"svgx": svgx, <br>
 *								"svgy": svgx, <br>
 *								"dwgx": dwgx, <br>
 *								"dwgy": dwgy } <br>
* @param {Object} jsonSpaceObject - Object with the entire space objects content
 * @return {boolean} flag - true if created, otherwise false
 */

function cvjs_setSpaceObjectDirect(jsonSpaceObject){}

8: Saving interactively content through the API

Use the API methods above in Section 7:, to retrieve any JSON content. Then simply pass this object over to your application storage.

9: Loading interactively content through the API

When editing of Space Object for a given Drawing has been completed and saved, it can now be reused next time the drawing is loaded. The Space Objects can be loaded either through the Icon Interface or through the API.

NOTE: Make sure that there is no Space Object processing RL/TL processing in conversion, as only the overlaid Space Objects are needed.

1: In the callback method cvjs_OnLoadEnd() for when a drawing is loaded, use the CADViewer API to load the a flat-file with the JSON objects.

function cvjs_OnLoadEnd(){
        // generic callback method, called when the drawing is loaded
        // here you fill in your stuff, call DB, set up arrays, etc..
        // this method MUST be retained as a dummy method! - if not implemeted -

        // here I can load my JSON Object with Modified Spaces
        cvjs_loadSpaceObjectsDirect("floorPlan", ServerUrl + "content/spaceObjects/relaylock-11b.json");

}

2: Alternatively, programatically load the JSON structure from a DataBase and place it directly onto the canvas using function cvjs_setSpaceObjectDirect() , see section 7: above.

The load and setting of cvjs_setSpaceObjectDirect() content are done inside the cvjs_OnLoadEnd() callback, once the drawing is loaded.

10: Loading interactively content through the Icon Interface

NOTE: Make sure that there is no Space Object processing RL/TL processing in conversion, as only the overlaid Space Objects are needed.

Use the command Load Space Objects :

Guide to Add or Modify Hotspots & Images