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 modifying the Interactive Hotspots, created using Automated Creation of Hotspots and store these for continued use.

The steps outlined below can be tested in our Download versions of CADViewer.

Manipulate Space Objects

Follow the steps below to modify, save and re-use your processed Space Objects.

Ensure you have a drawing with interactive hotspots.

You can check this, by clicking on an interactive hotspot (Space Object), and it will open a custom controllable pop-up modal and highlight the Space Object.

As learned from the tutorial CADViewer tutorial Automated Creation of Hotspots, the base drawing contains two layers with specific content that through an automated process are matched to generate a set of interactive objects.

  • 1: A layer with text object IDs. – The Text Layer.
  • 2: A layer with polygons that surrounds the text object IDs. – The Room Layer.

These layers have been combined into Space Objects in CADViewer, either through direct pre-conversion using RL/TL parameters in AutoXchange or through the CADViewer general settings interface.


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



Make Changes to your processed Space Objects

The menu interface 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.

From the CADViewer API, the content of a Space Object can be retrieved as JSON object, that can be manipulated. Please see the full CADViewer API and Download our code samples.

/**
 * 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)



Add new Space Objects

CADViewer Icon commands

You can add new space objects, currently exposed are Rectangles, Polygons and Circles as commands: . In addition to this, our Custom Canvas API allows developer to build their own higher level canvas methods.

Drawing a space object:

Use CADViewer API to place out Image Space Objects

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

Please reference the CADViewer API and Download our code samples.

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



Edit Space Object

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

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

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:

.



Save Changes

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

Save through Icon Interface to Folder Location

Use the command Save Space Objects :

API controlled Save to user Application



Reuse New Space Objects

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.

Load from Icon Commands

Use the command Load Space Objects :

Load from API

In the callback method cvjs_OnLoadEnd() for when a drawing is loaded, use the CADViewer API to load the drawing.

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");

}

Alternatively, programatically load the JSON structure from a DataBase and place it directly onto the canvas using cvjs_setSpaceObjectDirect() after the cvjs_OnLoadEnd() callback:

/**
 * 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){}




ENJOY - and get in touch!