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:


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 eithe 1: or 2: , the following two methods are used:


where the JavaScript code is as follows:

        // place the icon on the canvas
        cvjs_setImageSpaceObjectParameters(loadSpaceImage_Location, loadSpaceImage_ID, loadSpaceImage_Type, loadSpaceImage_Layer);
        cvjs_addFixedSizeImageSpaceObject("floorPlan");

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



3: 4: 5: 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>
 * @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> ]
 * @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>
 * @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

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.

Use the command Load Space Objects :



ENJOY - and get in touch!