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 Space Command Icon Page
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
Icon Interface - Change Space Object ID, Type and Layer -or Unlink -
Open the icon command 
, select and change the settings of a Space Object.
API Interface - Change Space Object ID, Type and Layer -or Unlink -
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){}