Introduction - CADViewer JS API - Loading of AutoCAD DWG files on-the-flyToggle Menu


CADViewer JS is an web infrastructure component developed by Tailor Made Software that allows you to plug in CAD and other high resolution floorplans in vector and bitmap format into a webpage and through dynamic highlight interact with objects defined in the drawing. In addition to funtional interaction, CADViewer JS also supports zoom, pan and pinch controls.




Getting Started


It only requires a few basic steps to get started with CADViewer JS Viewing. Once you have the basics, continue to the sample below.



Code Sample - Advanced viewing on-the-fly


We use the follwing coding in the CADViewer JS client side implementation to make CADViewer JS point to a server side implementation of AutoXchange.

On how to setup the server, please look at: Setting up server for CADViewer JS


var FileNameUrl = "http://creator.vizquery.com/City_base_map.dwg";  // file for server to pick up
//var FileNameUrl = "/home/cadviewer/creator/City_base_map.dwg";   // file for server to pick up, it can also be a local path on the server
var FileNameUrlNoExtension = "City_base_map";


// load via REST

	// I need to set variables to point to my server where I have installed AutoXchange and the controlling scripts,
	cvjs_setRestApiControllerLocation("http://myserver/autoxchange_js_environment/");
	cvjs_setRestApiController("call-Api_JS_04_05.php");


	// First we check which rest API the current CADViewer JS version is initialized to:
	var mycontroller = cvjs_restApiController();

	// Then we check which rest API location the current CADViewer JS version is initialized to:
	var mycontrollerlocation = cvjs_restApiControllerLocation();

	// We also would like the recommended converter
	var converter = cvjs_restApiConverter();

	// We also would like to know the recommended converter version
	var converterVersion = cvjs_restApiConverterVersion();

	window.alert("The server with the rest API is  at :"+mycontrollerlocation+"\nThe php doc is: "+mycontroller+"\nThe converter is: "+converter+"\nThe recommended version is: "+converterVersion);


	// If I want to overwrite these values with settings for my own server where I have installed AutoXchange and the controlling scripts,
	//  I can control whem with the methods:
	//      cvjs_Init_ConversionServer(rest_api_url, rest_api_php, username, password);
	// or:  cvjs_setConverterCredentials(username, password);
	// or:  cvjs_setConverter(converter, version);



	// Now I want to set up the parameters for the conversion call, if I do not do anything, the conversion is set up to load FileNameUrl as a file (see RestAPI for other methods),
	// the resulting is located on the server as a stream. This means that CADViewer JS will read up the file and it is deleted on server after reading.
	// The conversion parameters are standard set-up from within AutoXchange:  -prec=2, -size=2800 -ml=0.4
	// When browsing through multiple layouts in a file, for each layout a new conversion will be triggered.

	// cvjs_LoadDrawing_Conversion("floorPlan", FileNameUrl, FileNameUrlNoExtension, "", "");



	// If I want to control the parameters controls in conversions I will call some of the following methods prior to conversion , see API documentation

	// I want to clear all pre-set autoxchange conversion parameters
	 cvjs_conversion_clearAXconversionParameters();
	// now I want to increase the size of the output drawing, this is useful for large drawings with much detail
	// cvjs_conversion_addAXconversionParameter("size", "4800");
	// now I want to make the minimum lines thinner, this is useful for large drawings with much detail
	// cvjs_conversion_addAXconversionParameter("ml", "0.4");
	// I also make a slightly lower precision to make the resulting file smaller, the original drawing is designed in a good resolution space
	cvjs_conversion_addAXconversionParameter("prec", "1");


	// For the server, I want to tell which path to the xrefs I want to use in this conversion, this is preset on the server to ./files/xref
	// cvjs_conversion_addAXconversionParameter("xpath", "/myserverlocation/files/xrefs2");


	// Now as an alternative, I want to set the content response to file instead of stream. This means that the server will keep a copy of the file (randomly named)
	// The pros is that I can quicker browse throught the multipages in the file
	// The cons is that loading of first page takes longer and that I need to clean up the server when I leave the page (or at the end of the day)
	// For this to work, I need to set the conversion parameter -basic, so that all pages in the set are converted initially

	// cvjs_conversion_setContentResponse("file");
	// cvjs_conversion_addAXconversionParameter("basic", "");



	// Now I will have the rest server pick up the dwg file at http://creator.vizquery.com/City_base_map.dwg, which is not password protected,
	// If the file is on the same server as the converter, I can pass over a local file and path: /home/cadviewer/creator/City_skyway_map.dwg
	// convert it, and send it up to CADViewer JS in this document for display


	cvjs_LoadDrawing_Conversion("floorPlan", FileNameUrl, FileNameUrlNoExtension, "", "");


Online Demo and Download



For online demo and download of CADViewer JS set up for loading AutoCAD DWG CAD files, using the Tailor Made Software REST Api please use the links below:


Online Demo

View online at: Advanced DWG viewing on-the-fly Demo


Download Trial

Please download the CADViewer JS infrastructure components: CADViewer JS and converter AutoXchange AX2019.