Getting Started
There is only a few steps that you need to do to get CADViewer JS up running!
Reference Script libraries
In addtion to the CADViewer JS core Java Script libraries: cadviewer_min.js and cadviewer_setup_min.js and some help libraries and stylesheets, CADViewer JS uses the open source snap Snap.svg.
<script src="../javascripts/cadviewerjs_min.js" type="text/javascript" ></script> <script src="../javascripts/cadviewerjs_setup_min.js" type="text/javascript" ></script> <script src="../javascripts/cvjs_api_styles_2_0_22.js" type="text/javascript" ></script> <script src="../javascripts/snap.svg-min.js" type="text/javascript" ></script> <link href="../stylesheets/cvjs_54.css" media="screen" rel="stylesheet" type="text/css" /> <script src="../javascripts/rgbcolor.js" type="text/javascript" ></script> <script src="../javascripts/stackBlur.js" type="text/javascript" ></script> <script src="../javascripts/canvg.js" type="text/javascript" ></script>
CADViewer JS uses jQuery as well as Bootstrap and jQuery Qtip for modals when used for dynamic interaction with room polygons.
<script src="../javascripts/jquery-2.1.0.js" type="text/javascript"></script> <script src="../javascripts/jquery.qtip.min.js" type="text/javascript"></script> <script src="../javascripts/jquery-ui.min.js" type="text/javascript"></script> <script src="../javascripts/bootstrap.min.js" type="text/javascript"></script> <link href="../stylesheets/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" /> <link href="../stylesheets/jquery-ui.min.css" media="screen" rel="stylesheet" type="text/css" /> <link href="../stylesheets/jquery.qtip.min.css" media="screen" rel="stylesheet" type="text/css" />
Define HTML and CSS elements
Define a <svg> element
CADViewer JS needs to reference a <svg> element in the <body> and will use that as canvas. This will be used
<body> <svg id="floorPlan" style="border:0px none;width:1000;height:800;"> </svg> </body>
Define a <div> element for tooltip
CADViewer JS references the <div> element tip for creating tooltips.
<body> <div id="tip"></div> </body>
Define a <div> element for file load modal display
CADViewer JS references the <div> element wait_looper for file load modal display.
<body> <div id="wait_looper"></div> </body>
Define a <canvas> element for highresolution print
CADViewer JS references the <canvas> element floorPlanCanvasObject for creating print objects.
<body> <canvas id="floorPlanCanvasObject" width="10" height="10"></canvas> </body>
Define a <div> element for pan and zoom tools
CADViewer JS should be set up to references the <div> element gMenu for setting up pan and zoom disk environment.
<body> <div id="gMenu" style="float:left;clear:none;margin-top:30px;margin-left:20px;" > </div> </body>
Set up Image Maps for functional interaction
Funtional interaction with CADViewer JS can be done through the icon interface below, or can be controlled directly from the API, see: Full API Reference.
There are a number of image maps that users can choose between, they are typically controlled through the variable isSmartPhoneOrTablet controls if on a smart phone device, this can be used to change the funtional image map dynamically from within the $j(document).ready(function(){}).
if (!isSmartPhoneOrTablet)
$('#gMenu').html("<img src=\"../images/PanZoomFull.png\" usemap=\"#PanZoomMap\" border=\"0\" height=\"267\" width=\"79\" class=\"map\" hidefocus=\"true\">");
else
$('#gMenu').html("<img src=\"../images/ZoomExtentsDevice.png\" usemap=\"#ZoomExtentsDeviceMap\" border=\"0\" height=\"176\" width=\"79\" class=\"map\" hidefocus=\"true\">");
PanZoomMap - A <map> element for zoom and pan on both desktop and devices
<body> <map name="PanZoomMap" > <area shape="rect" alt="" title="Zoom Extents" coords="16,6,69,58" href="javascript:cvjs_resetZoomPan();"/> <area shape="rect" alt="" title="Zoom In" coords="16,66,69,115" href="javascript:cvjs_zoomIn();"/> <area shape="rect" alt="" title="Zoom Out" coords="16,116,69,161" href="javascript:cvjs_zoomOut();"/> <area shape="rect" alt="" title="Zoom Window" coords="16,162,69,210" href="javascript:cvjs_zoomWindow();"/> <area shape="rect" alt="" title="Load Last Page" coords="16,220,69,255" href="javascript:cvjs_lastPage();"/> <area shape="rect" alt="" title="Load Next Page" coords="16,256,69,289" href="javascript:cvjs_nextPage();"/> <area shape="rect" alt="" title="Load Previous Page" coords="16,290,69,324" href="javascript:cvjs_previousPage();"/> <area shape="rect" alt="" title="Load First Page" coords="16,325,69,360" href="javascript:cvjs_firstPage();"/> </map> </body>
$('#gMenu').html("<img src=\"../images/PanZoomWindowFullPages7t.png\" usemap=\"#PanZoomMap\" border=\"0\" height=\"363\" width=\"78\" class=\"map\" hidefocus=\"true\">");
cvjsToolbarMap_1 - A <map> element for basic interaction on desktop
<body> <map name="cvjsToolbarMap_1"> <area shape="rect" alt="" title="Layers" coords="5,6,29,30" href="javascript:cvjs_layerList();"/> <area shape="rect" alt="" title="Print" coords="32,6,57,30" href="javascript:cvjs_printCanvasPaperSize();"/> <area shape="rect" alt="" title="Zoom In" coords="5,33,29,57" href="javascript:cvjs_zoomIn();"/> <area shape="rect" alt="" title="Zoom Out" coords="32,33,56,57" href="javascript:cvjs_zoomOut();"/> <area shape="rect" alt="" title="Zoom Extents" coords="6,60,29,85" href="javascript:cvjs_resetZoomPan();"/> <area shape="rect" alt="" title="Zoom Window" coords="33,61,57,85" href="javascript:cvjs_zoomWindow();"/> <area shape="rect" alt="" title="Load Previous Page" coords="5,87,29,111" href="javascript:cvjs_previousPage();"/> <area shape="rect" alt="" title="Load Next Page" coords="32,88,57,111" href="javascript:cvjs_nextPage();"/> <area shape="rect" alt="" title="Load First Page" coords="5,114,29,139" href="javascript:cvjs_firstPage();"/> <area shape="rect" alt="" title="Load Last Page" coords="32,114,56,138" href="javascript:cvjs_lastPage();"/> </map> </body>
$('#gMenu').html("<img src=\"../images/cvjsToolbar_6_z.png\" style=\"margin-left: 10px; margin-top: 10px;\" usemap=\"#cvjsToolbarMap_1\" border=\"0\" height=\"145\" width=\"62\" class=\"map\" hidefocus=\"true\">");
cvjsToolbarMap_2 - A <map> element for markup and redlining on desktop
<body> <map name="cvjsToolbarMap_2"> <area shape="rect" alt="" title="Save Local Copy" coords="5,6,29,30" href="javascript:cvjs_saveLocalCopyOfDrawning();"/> <area shape="rect" alt="" title="Print" coords="32,6,57,30" href="javascript:cvjs_printCanvasPaperSize();"/> <area shape="rect" alt="" title="Zoom In" coords="5,33,29,57" href="javascript:cvjs_zoomIn();"/> <area shape="rect" alt="" title="Zoom Out" coords="32,33,56,57" href="javascript:cvjs_zoomOut();"/> <area shape="rect" alt="" title="Zoom Extents" coords="6,60,29,85" href="javascript:cvjs_resetZoomPan();"/> <area shape="rect" alt="" title="Zoom Window" coords="33,61,57,85" href="javascript:cvjs_zoomWindow();"/> <area shape="rect" alt="" title="Load Previous Page" coords="5,87,29,111" href="javascript:cvjs_previousPage();"/> <area shape="rect" alt="" title="Load Next Page" coords="32,88,57,111" href="javascript:cvjs_nextPage();"/> <area shape="rect" alt="" title="Load First Page" coords="5,114,29,139" href="javascript:cvjs_firstPage();"/> <area shape="rect" alt="" title="Load Last Page" coords="32,114,56,138" href="javascript:cvjs_lastPage();"/> <area shape="rect" alt="" title="Save Redline" coords="5,164,29,188" href="javascript:cvjs_saveStickyNotesRedlinesUser();"/> <area shape="rect" alt="" title="Load Redline" coords="32,164,57,188" href="javascript:cvjs_loadStickyNotesRedlinesUser();"/> <area shape="rect" alt="" title="Draw Freehand Redline" coords="5,191,29,214" href="javascript:cvjs_drawRedline_Freehand_setValues();"/> <area shape="rect" alt="" title="Delete Last Redline" coords="32,191,56,214" href="javascript:cvjs_deleteLastRedline();"/> <area shape="rect" alt="" title="Make StickyNote" coords="6,218,29,242" href="javascript:cvjs_drawStickyNote_setValues();"/> <area shape="rect" alt="" title="None!" coords="33,218,57,242" href="javascript:cvjs_drawSomething();"/> </map> </body>
$('#gMenu').html("<img src=\"../images/cvjsToolbar_9t.png\" style=\"margin-left: 10px; margin-top: 10px;\" usemap=\"#cvjsToolbarMap_2\" border=\"0\" height=\"247\" width=\"62\" class=\"map\" hidefocus=\"true\">");
Initialize and Load a Drawing
Use the initialization method that corresponds to the attribute controls you want to run CADViewer JS with. The minimum initialization must reference a svg element <svg>. Have the initialization inside $(document).ready(function(){}).
// Initalize CADViewer JS, referencing a svg div with id "floorplan" and no attributes controls
cvjs_InitCADViewerJS("floorPlan");
Load a drawing
The drawing file to be loaded into CADViewer JS, is a set of four SVG/JS files, these are generated from either from the Tailor Made Software CADViewer Pro Authoring Tool or from the Tailor Made Software AutoXchange AX2011/AX2014 Conversion Tool. Tthe load methods should be inside $(document).ready(function(){})
// Open a drawing instance
var FileNameNoExtension = "T2-03"; // Name of the drawing file to be loaded into CADViewer JS, it contains of a set of 4 files, produced from
// either CADViewer Pro authoring tool or from AutoXchange conversion tool
var FileNamePath = "../drawings/"; // Path to the drawing file to be loaded into CADViewer JS, path is relative from the calling document
cvjs_LoadDrawing("floorPlan", FileNamePath, FileNameNoExtension);
Load a drawing directly into CADViewer JS using on-the-fly conversion - se specific sample
Load an AutoCAD DWG, DXF or DWF into CADViewer JS, through an external REST Api alternatively through the AutoXchange converter installed on an internal server. See specific documentation on how to set up calls to TailorMade REST API or on how to install a local copy of the controlling PHP for on-the-fly conversion.
// Open a drawing instance
var FileNameUrl = "http://creator.vizquery.com/City_map.dwg";
var FileNameUrlNoExtension = "City_map";
cvjs_LoadDrawing_Conversion("floorPlan", FileNameUrl, FileNameUrlNoExtension, "", "");
Load a SVG drawing directly into CADViewer JS - see specific sample
Alternatively, loading an externally produced SVG or SVGZ file into CADViewer JS, use the process below.
// Open a drawing instance
var FileNameNoExtension = "init"; // Init file, setting up CADViewer JS
var FileNamePath = "../javascripts/"; // Path to the location of the init files, located in the standard /javascripts folder
cvjs_LoadDrawing_SVG("floorPlan", FileNamePath, "VA413000_2.txt", "../javascripts/");
Note:
It is recommended that $(document).ready(function(){}) must be declared and contain variable declarations and intializations of CADViewer JS as described above
The $(window).resize(function(){}) should be declared and contain call to to CADViewer JS cvjs_windowResize() method method to resize the canvas after an external resize of browser window has taken place. See Full API Reference for a listing of resize methods depending on positioning and size of canvas compared to browser window size. See the full API on how to control cvjs_windowResize!
$(window).resize(function() {
cvjs_windowResize_position(true, "floorPlan" );
});
Call-back Methods
Generic Call back method cvjs_ObjectSelected(rmid) for when an object on the canvas has been clicked. Note that this method should be implemented, even if it empty.
function cvjs_ObjectSelected(rmid){
// rmid : ID of the object clicked
// generic callback method when room object has been clicked
// fill in your own stuff here, API REST calls to get information about the object, do your specific highlight, etc.
// this method MUST be retained as a dummy method! - if not implemeted -
}
Generic Call back method cvjs_OnLoadEnd() when an drawing has been loaded. Note that this method should be implemented, even if it empty.
// generic callback method, called when drawing or page is fully loaded
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 -
cvjs_resetZoomPan();
}
Converting drawings to CADViewer JS
The drawings displayed by CADViewer JS are converted using the Tailor Made Software converter AutoXchange AX2015. The conversions can be done either standalone or using a process to connect to CADViewer JS on the fly.
AutoXchange AX2015
Conversion of AutoCAD drawings in the formats DWG, DXF and DWF are done using the conversion tool AutoXchange AX2015, which can be downloaded from: AutoXchange AX2015 download. In CADViewer JS, use myoutputfile as FileNameNoExtension.
>ax2015 -i=mypath/myinputfile.dwg -o=mypath/myoutputfile.js -f=js -size=2800 -prec=1 -ml=0.4
Listing Control Parameters
The conversion are controlled through a number of parameters, a full list can be found by using:
>ax2015 -?
Control Parameters for CADViewer JS creation
There is a number of parameter that must be included when creating CADViewer JS files:
- The variable -i contains the input file.
- The variable -o contains the output file. Note that the output file name is what is used as filename in CADViewer JS
- The variable -f=js tells the converter that we are converting into CADViewer JS file format.
- The variable -size=2800 defines the SVG coordinate space, the parameter is optional and AutoXchange will determine a suitable value, but for large very detailed drawings it can be increased, for example -size=4800.
- The variable -prec=1 indicate precision in output. Precision 1 will typically work for most files, but if zooming in on objects does not seems accurate, use a larger precision -prec=2. Note that with increased precision, the filesize will increase.
- The variable -ml=0.4 sets the minimum line width. The parameter is optional and AutoXchange will determine a suitable value, but for large very detailed drawings it can be decreased if lines appears "too fat", for example -ml=0.2.The influence of filesize is not marked.
- The variable -basic converts all layouts in a DWG file. Omitting this parameter will convert Modelspace only
CADViewer JS drawing files
When converting a file using AutoXchange AX2015 to CADViewer JS, four JS files are created and will be referenced by CADViewer JS:
- The file myfile.js contains the business logic of the converted file.
- The file myfile-full.js contains geometry of the converted file.
- The file myfile-nodes.js contains geometry associated with the business logic of the converted file.
- The file myfile-thumb.js contains geometry for fast zoom and pan.
Note that converting using -basic, four files for each Layout will be created. CADViewer JS will navigate through all of these files based on opening myfile defined as FileNameNoExtension
Control Parameters for CADViewer JS creation with dynamic highlight
When your drawings contains defined room polygons on a given layer and a text identifier on another layer, AutoXchange can match these two layers into a logical grouping which through the CADViewer JS API can be used for dynamic highlight, setting of textural information, hatching, etc :
- The variable -i contains the input file.
- The variable -o contains the output file. Note that the output file name is what is used as filename in CADViewer JS
- The variable -f=js tells the converter that we are converting into CADViewer JS file format.
- The variable -rl=myroomlayer "room layer" tells which layer to look for geometries.
- The variable -tl=myroomlayer "text layer" tells which layer to look for text ids which to merge with the geometries found on the "room layer".
- The variable -size=2800 defines the SVG coordinate space, the parameter is optional and AutoXchange will determine a suitable value, but for large very detailed drawings it can be increased, for example -size=4800.
- The variable -prec=1 indicate precision in output. Precision 1 will typically work for most files, but if zooming in on objects does not seems accurate, use a larger precision -prec=2. Note that with increased precision, the filesize will increase.
- The variable -ml=0.4 sets the minimum line width. The parameter is optional and AutoXchange will determine a suitable value, but for large very detailed drawings it can be decreased if lines appears "too fat", for example -ml=0.2.The influence of filesize is not marked.
License Key
CADViewer JS goes from trial to release mode by adding a license key cvlicense.js into a directory of choice.
License key folder
Set the license key folder as part of the declaration of CADViewer JS
cvjs_setLicenseKeyPath("../javascripts/");
To learn more about licensing, please contact us at: Tailor Made Software
Online Demo and Download
Go back to the main page and pick any of the samples!