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 tutorials Guide - Automate Hotspots and Guide - Add & Edit Hotspots where a base CAD drawing containing space poloygons on a designated layer been made interactive in CADViewer and then subsequently, interactive content has been added to the CAD drawing.

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: Highlight All Space Objects.

The CADViewer API provides an API call to highlight a space based on a CSS style object and a Space Object ID.

The process to highlight all, is to first extract a list with all Space objects using the API method: function cvjs_getSpaceObjectIdList() and then loop over the list of spaces and apply the CSS style object colortype to each Space using function cvjs_highlightSpace():


function highlight_all_spaces(){
	
        // selectedColor is set through color selector in Demo

	var colortype = {
			fill: selectedColor,
			"fill-opacity": "0.8",
			stroke: selectedColor,
			'stroke-width': 1,
			'stroke-opacity': "1",
			'stroke-linejoin': 'round'
		};

	var spaceObjectIds = cvjs_getSpaceObjectIdList();
	for (spc in spaceObjectIds){		
		var rmid = spaceObjectIds[spc];
		cvjs_highlightSpace(rmid, colortype);
	}

}


2: Highlight a single Space Object ID

The CADViewer API provides an API call to highlight a space based on a CSS style object and a Space Object ID, and highlight using: function cvjs_highlightSpace(). In the online sample, a check has been added, so only an existing SpaceID is highlighted.


function highlight_space_id(){

// selectedColor is set through color selector in Demo

        var spaceid = $('#image_ID').val();	
	
        var colortype = {
			fill: selectedColor,
			"fill-opacity": "0.8",
			stroke: selectedColor,
			'stroke-width': 1,
			'stroke-opacity': "1",
			'stroke-linejoin': 'round'
		};

	var spaceObjectIds = cvjs_getSpaceObjectIdList();
	for (spc in spaceObjectIds){	
		console.log(spaceid+"  "+spaceObjectIds[spc]+" "+(spaceid.indexOf(spaceObjectIds[spc])==0)+" "+((spaceid.length == spaceObjectIds[spc].length)));
		if (spaceid.indexOf(spaceObjectIds[spc])==0 && (spaceid.length == spaceObjectIds[spc].length) )
			cvjs_highlightSpace(spaceObjectIds[spc], colortype);
	}
}



3: Highlight a given Space Type

The process to highlight all given Space Types, is to first extract a list with all Space objects using the API method: function cvjs_getSpaceObjectIdList() and then loop over the list of spaces, check if space has a given type using, function cvjs_getSpaceObjectTypefromId(), and apply the CSS style object colortype to each Space using function cvjs_highlightSpace():


function highlight_space_type(){

// selectedColor is set through color selector in Demo

	var type = $('#image_Type').val();	
	
        var colortype = {
			fill: selectedColor,
			"fill-opacity": "0.8",
			stroke: '#fe50d9',
			'stroke-width': 1,
			'stroke-opacity': "1",
			'stroke-linejoin': 'round'
		};

		var spaceObjectIds = cvjs_getSpaceObjectIdList();
		for (spc in spaceObjectIds){	
			var spaceType = cvjs_getSpaceObjectTypefromId(spaceObjectIds[spc]);
			var vqid = spaceObjectIds[spc];
			console.log(spc+"  "+ vqid + "  "+spaceType+ "  "+spaceType.indexOf("Device"));		
			if (spaceType.indexOf(type)==0)
				cvjs_highlightSpace(vqid, colortype);
		}
}


4: Control style to highlight Space Object Borders

The CADViewer API provides an API call to highlight a space based on a CSS style object and a Space Object ID.

The process to highlight Space Borders, is to first extract a list with all Space objects using the API method: function cvjs_getSpaceObjectIdList() and then loop over the list of spaces and apply the CSS style object colortype, with border style, to each Space using function cvjs_highlightSpace():


function highlight_all_borders(){

// selectedColor is set through color selector in Demo

        var colortype = {
		fill: '#fff',
		"fill-opacity": 0.01,
		stroke: selectedColor,    
		'stroke-width': 3.0,
		'stroke-opacity': 1,
		'stroke-linejoin': 'round'
		};

	var spaceObjectIds = cvjs_getSpaceObjectIdList();
	for (spc in spaceObjectIds){	
	
		var rmid = spaceObjectIds[spc];
		cvjs_highlightSpace(rmid, colortype);
	}
}



5: Add Styled Text to Space Objects

The process to add styled text to Space Object, is to first extract a list with all Space objects using the API method: function cvjs_getSpaceObjectIdList() and then loop over the list of spaces and apply the text to each Space using function cvjs_AddTextOnSpaceObject().


/**
 * Add multiple of text, individually formatted and styled, inside a Space Object
 * @param {string} txtLayer - layer to apply the text
 * @param {string} Id - Id of the graphical object in which to place the text
 * @param {float} leftScale - distance from the left border of Space Object, value between 0 and 1
 * @param {array} textStringArr - Array with the lines of text
 * @param {array} textStyleArr - Array with textstyle of text lines, formattet as a java script object with css style elements, predefined is: text_style_arial_11pt_bold , text_style_arial_9pt_normal, text_style_dialog
 * @param {array} scaleTextArr - Array with relative scale of text lines, value between 0 and 1
 * @param {array} hexColorTextArr - Array of color of text lines in hex form, for example: #AA00AA
 * @param {boolean} clipping - true if clipping of text inside of Space Object, false if text to cross Space Object borders
 * @param {boolean} centering - true if centering of text inside of Space Object, false is default
 */

function cvjs_AddTextOnSpaceObject(txtLayer, Id, leftScale, textStringArr, textStyleArr, scaleTextArr, hexColorTextArr, clipping, centering){};

The function function cvjs_AddTextOnSpaceObject(), adds text on a textLayer based on the Space ID. The user must set arrays containing styles, sizes, color and the text objects. The method also povide controls to center and clip text content within the Space Object.


The online sample examplifies three different ways of placing text, as well as using Unicode FontAwesome icons.


// This is the function that illustrates how to label text inside room polygons

function customAddTextToSpaces(){

// I am making an API call to the function cvjs_getSpaceObjectIdList()
// this will give me an array with IDs of all Spaces in the drawing
var spaceObjectIds = cvjs_getSpaceObjectIdList();
var i=0;


var textString ;
var textStyles ;
var scaleText ; 
var hexColorText; 



for (var spc in spaceObjectIds)
{
	//console.log(spaceObjectIds[spc]+" "+i);

	if ((i % 3) ==0){
		textString = new Array("Custom \u2728", "settings \u2728", "\u2764\u2728\u267B");
		textStyles = new Array(text_style_arial_9pt_normal, text_style_arial_11pt_bold, text_style_dialog);
		scaleText = new Array(0.15, 0.2, 0.15 );
		hexColorText = new Array("#AB5500", "#66D200", "#0088DF");

		// here we clip the roomlables so they are inside the room polygon
		cvjs_AddTextOnSpaceObject(textLayer1, spaceObjectIds[spc],  0.05, textString, textStyles, scaleText, hexColorText, true, false);

	}
	else{
		if ((i % 3) == 1){

			textString = new Array('Unicode:\uf083\uf185\u2728', 'of custom text');
			textStyles = new Array(FontAwesome_9pt_normal, text_style_dialog);
			scaleText = new Array(0.15, 0.15 );
			hexColorText = new Array("#00D2AA", "#AB0055");

			// here we clip the roomlables so they are inside the room polygon            
			cvjs_AddTextOnSpaceObject(textLayer1, spaceObjectIds[spc],  0.1, textString, textStyles, scaleText, hexColorText, true, false);

		}
		else{

			textString = new Array("\uf028");
			textStyles = new Array(FontAwesome_9pt_normal);
			scaleText = new Array( "0.5" );
			hexColorText = new Array("#AAAAAA");
			//var hexColorText = new Array("#00AADF");

			// here we clip the roomlables so they are inside the room polygon, we center object
			cvjs_AddTextOnSpaceObject(textLayer1, spaceObjectIds[spc],  0, textString, textStyles, scaleText, hexColorText, true, true);
		}
	
	}
	i++;
}

}

/* text style for adding text into Space Objects */
var text_style_arial_11pt_bold = {
	  'font-family': "Arial",
	  'font-size': "11pt",
	  'font-weight': "bold",
	  'font-style': "none",
	  'margin': 0,
	  'cursor': "pointer",
	  'text-align': "left",
	  'z-index': 1980,
	  'opacity': 0.5
	};

/* text style for adding text into Space Objects */
var text_style_arial_9pt_normal = {
	  'font-family': "Arial",
	  'font-size': "9pt",
	  'font-weight': "normal",
	  'font-style': "none",
	  'margin': 0,
	  'cursor': "pointer",
	  'text-align': "left",
	  'z-index': 1980,
	  'opacity': 1
	};


var FontAwesome_9pt_normal = {
	  'font-family': "FontAwesome",
	  'font-size': "9pt",
	  'font-weight': "normal",
	  'font-style': "none",
	  'margin': 0,
	  'cursor': "pointer",
	  'text-align': "left",
	  'z-index': 1980,
	  'opacity': 1
	};
	  

/* text style for adding text into Space Objects */
var text_style_dialog = {
	  'font-family': "Dialog",
	  'font-size': "9pt",
	  'font-weight': "normal",
	  'font-style': "italic",
	  'margin': 0,
	  'cursor': "pointer",
	  'text-align': "left",
	  'z-index': 1980,
	  'opacity': 1
	};





6: Use the API to apply Hatching to Space Objects

The function function cvjs_hatchSpace(), hatches a Space Object based on the Space ID, hatchtype color and opacity. The method supports 14 different types of hatches.


/**
 * Apply a predefined pattern on a graphical Space Object
 * @param {string} rmid - Id of the Space Object object to add hatches
 * @param {string} graphicalPattern - name of the hatch pattern, from a predefined list of patterns:
 *  	        "pattern_45degree_standard"
 *		"pattern_45degree_fine"
 *		"pattern_45degree_wide"
 *		"pattern_90degree_standard"
 *		"pattern_90degree_fine"
 *		"pattern_90degree_wide"
 *		"pattern_135degree_standard"
 *		"pattern_135degree_fine"
 *		"pattern_135degree_wide"
 *		"pattern_0degree_standard"
 *		"pattern_0degree_fine"
 *		"pattern_0degree_wide"
 *		"pattern_45degree_crosshatch_standard"
 *		"pattern_45degree_crosshatch_fine"
 * @param {string} colorHex - color of hatch in hex form, for example: #FF0000
 * @param {float} fillOpacity - fill opacity of pattern, value between 0 and 1
 */

The process to hatch Space Object, is to first extract a list with all Space objects using the API method: function cvjs_getSpaceObjectIdList() and then loop over the list of spaces and apply the hatch method each Space using function cvjs_hatchSpace().


// hatch spaces

var hatchtype = 0;

function customHatchSpaces(){
    // I am making an API call to the function cadviewer.cvjs_getSpaceObjectIdList()
    // this will give me an array with IDs of all Spaces in the drawing
    var spaceObjectIds = cvjs_getSpaceObjectIdList();
    
    
    for (var spc in spaceObjectIds)
    {
		hatchtype++;
    	if (hatchtype >4) hatchtype=1;


		if (hatchtype == 1) cvjs_hatchSpace(spaceObjectIds[spc], "pattern_45degree_crosshatch_fine", "#550055" , "0.5");
		if (hatchtype == 2) cvjs_hatchSpace(spaceObjectIds[spc], "pattern_45degree_standard", "#AA2200" , "0.5");
		if (hatchtype == 3) cvjs_hatchSpace(spaceObjectIds[spc],  "pattern_135degree_wide", "#0055BB" , "0.5");
		if (hatchtype == 4) cvjs_hatchSpace(spaceObjectIds[spc],  "pattern_90degree_wide", "#220088" , "0.5");      
    }
    
};



7: Clear all Highlights from Space Objects

When clearing CADViewer for highlights, two different objects should be cleared:



// in the demo sample, text decorations in Space Objects are done on the layer textLayer1.

function clear_space_highlight(){

	cvjs_clearSpaceLayer();
	textLayer1 = cvjs_clearLayer(textLayer1);
}



8: Use the API to pull content from Space Objects

The function cvjs_returnAllSpaceObjects, returns the content of all Space Objects as JSON object. This JSON object can then be parsed for specific values. In the sample case below, Spaces and their calculated Area are extracted and listed.


////////// FETCH ALL SPACE OBJECTS 

function display_all_objects(){
/*
 * 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> ]
 * @param {string} spaceID - Id of the Space Object to return
 * @return {Object} jsonSpaceObject - Object with all space objects content
 */

  //   get json obhect with all spaces processed from drawing
  var allSpaceObjects = cvjs_returnAllSpaceObjects();

  var myString = "";
  for (var spc in allSpaceObjects.SpaceObjects){
    console.log(spc);
    myString += "("+allSpaceObjects.SpaceObjects[spc].id+", "+allSpaceObjects.SpaceObjects[spc].area+")";
  }

  window.alert("The spaces with area (id,area): "+myString);

}

////////// HIGHLIGHT METHODS START




9: Set up User Controls for the Pop-Up Space Modals

By calling the CADViewer API initialization method function cvjs_setCallbackForModalDisplay, application programmers can code their own dynamic modals, that are generated when user click on an active Space Object on the CAD Canvas.


//      Setting Space Object Modals Display to be based on a callback method - VisualQuery mode -
        cvjs_setCallbackForModalDisplay(true, myCustomPopUpBody, populateMyCustomPopUpBody);


Use the myCustomPopUpBody method as the placeholder for Modal content generation, and leave the method populateMyCustomPopUpBody as is.

The method myCustomPopUpBody can contain any user defined content of the Space Modal at display. Below is implemented three sample implementations of the my_cvjsPopUpBody object, which are inserted into the modal at pop-up. The design used is dependent on Space ID clicked (rmid):


	function myCustomPopUpBody(rmid){

		console.log("click on myCustomPopUpBody: "+rmid+" I now change the pop-up menu");

		// make your own popup based on callback
		var my_cvjsPopUpBody = "";


			// so we check the SpaceID = rmid, and change the space depending on 
			if (rmid==120 || rmid==121 || rmid==122 || rmid==123 || rmid==124){
				// here we remove an item.....
				my_cvjsPopUpBody = "<div class=\"cvjs_modal_1\" onclick=\"my_own_clickmenu1();\">Custom<br>Menu One<br><i class=\"glyphicon glyphicon-transfer\"></i></div>";
				my_cvjsPopUpBody += "<div class=\"cvjs_modal_1\" onclick=\"cvjs_zoomHere();\">Zoom<br>Here<br><i class=\"glyphicon glyphicon-zoom-in\"></i></div>";

			}else{  // we make a line based modal with content 
				if (rmid==100 || rmid==101 || rmid==102 || rmid==103 || rmid==104 || rmid==105 || rmid==106|| rmid==107){

					var rmid_str = rmid.toString();
					var str = " "+rmid;
					var link = "#mymodal_name_"+rmid;
					//$(link).html(str);

					my_cvjsPopUpBody = "<div>Space Id: <span id=\"mymodal_name_"+rmid+"\" >"+str+"</span><br>";

					if ((rmid_str.indexOf("100")==0) || (rmid_str.indexOf("101")==0) || (rmid_str.indexOf("102")==0))	
						str = " Presumed Wall Void";
					else
						str = " Presumed Ceiling Void";

					link = "#mymodal_survey_"+rmid;
					//$(link).html(str);

					my_cvjsPopUpBody += "Survey: <span id=\"mymodal_survey_"+rmid+"\" >"+str+"</span><br>";
					
					if ((rmid_str.indexOf("103")==0) || (rmid_str.indexOf("104")==0) || (rmid_str.indexOf("105")==0))	
						str = " Service Alert";
					else
						str = " Evaluation Pending";

					link = "#mymodal_notice_"+rmid;
					$(link).html(str);

					my_cvjsPopUpBody += "Notice: <span id=\"mymodal_notice_"+rmid+"\" >"+str+"</span><br>";
					my_cvjsPopUpBody += "Status: <a href=\"javascript:my_own_clickmenu1('"+rmid+"');\">More Info <i class=\"glyphicon glyphicon-transfer\" onclick=\"my_own_clickmenu1("+rmid+");\"></i></a> ";

				}
				else{
					// standard 3 item menu
					my_cvjsPopUpBody = "<div class=\"cvjs_modal_1\" onclick=\"my_own_clickmenu1();\">Custom<br>Menu 1<br><i class=\"glyphicon glyphicon-transfer\"></i></div>";
					my_cvjsPopUpBody += "<div class=\"cvjs_modal_1\" onclick=\"my_own_clickmenu2();\">Custom<br>Menu 2<br><i class=\"glyphicon glyphicon-info-sign\"></i></div>";
					my_cvjsPopUpBody += "<div class=\"cvjs_modal_1\" onclick=\"cvjs_zoomHere();\">Zoom<br>Here<br><i class=\"glyphicon glyphicon-zoom-in\"></i></div>";
				}

			}

			return my_cvjsPopUpBody;
	}


Leave populateMyCustomPopUpBody as is. If a Space Modal is defined with individual <div> then this method can be used to insert values.


	function populateMyCustomPopUpBody(rmid, node){
		console.log(" we actually have a second callback to change the pop-up menu (developed originally for Angular2) populateMyCustomPopUpBody: "+rmid+"  "+node);
	}




ENJOY - and get in touch!