CADViewer JS Samples

Install Notes:

The folder ./html/ in this CADViewer JS download contains a set of samples to help you get going with CADViewer JS.

High resolution print in CADViewer JS as well as file load/save modals, redlines save/load, images insert save/load and DWG/DWF on-the-fly conversion requires that PHP is installed on the server.
Use PHP version 5.6.30 or above.
The print object will open on a web separate page, therefore allow pop-up's from the launching site in your browser.

Edit configuration file CV-JS_config.php in folder ./php to point to your server structure.

If PHP is not installed on your server, see section SAMPLE SETTINGS FOR SERVLETS - ALTERNATIVE TO DEFAULT PHP SETTING in the .html samples in the ./html folder in this download on how to set up alternatively handlers. Currently Servlets are provides as an alternative to PHP for high resolution print and API controlled save/load of redlines. Download Servlets from: CV-JS_Servlets_01.zip. Sample with Servlets running under Tomcat controlling high resolution print and API controlled save/load of redlines, PDF multipage loading and SVG multipage index generation can be dowloaded from: CV-JS_2_3_7_servlets_based_demo.zip

If the user implementation is using sources from either different domains or different ports under the same domain, calling PHP may give a cross-domain error message. To set up the PHP files to allow multiple domains, edit the variable $allowed_domains to include all domains and ports from the user application. Download PHP files from: php-crossDomain.zip, edit and overwrite the PHP files into ./php folder in this download..

To load PDF files, Java needs to be installed on your server. Once Java is installed update the configuration file ./php/CV-JS_config.php to point at your Java and folder settings, alternatively update the web.xml parameters if running Servlets under Tomcat.

On Linux:
The converter AutoXchange ax2017_L64_01 in folder /CV-JS_2_5_2/converters/ax2017/linux needs full read write and executable rights, chmod 777.
To provide php with the proper access rights so it can execute AutoXchange, do edit User and Group in Apache environment variables /ect/apache2/apache2.conf (or similar), to point to your designated user.
The pdf creation script run_pdf.sh, needs full read write and executable rights, chmod 777.
To run the php scripts to save image as thumbnails and to save as multipage pdf, the gd library needs to be installed under php: user@user:mypath$ sudo apt-get install php5-gd.
To debug, use the apache and php log files, by default they can typically be found in /var/log/apache2/error.log.
Php typically have permissions set to chmod 755. For foders /php/temp_print, /php/temp_thumbnails, /php/tcpdf/batchconvert/files and /pdf/data_host_connectors, that has content written into them please set full access rights chmod 777.

On Windows:
If you are using XAMPP, simply place the CV-JS_2_5_2 folder structure under C:\xampp\htdocs , alternatively C:\xampp\tomcat\webapps for Servlet version.

Generic Samples

The three Generic Samples links below points to the CADViewer JS Server and is not part of the download samples.

View a sample SVGZ file with classic icon skin

Tailor Made logo

Open a sample Redlining and Markup file.

Tailor Made logo

Test PNG bitmap viewing with classic icon skin.

Tailor Made logo


General Samples

All the following samples are as part of this download and the source html files can be found in the ./html/ folder.

Samples which can be run standalone - no server -

1) Loading and display of CAD drawing pre-converted with AutoXchange.
See file: CVJS_viewing_only_41.html

Tailor Made logo

2) Loading and display of DWG drawing. Connects with an external server for on-the-fly conversion of CAD file.
See file: CVJS_viewing_serverload_41.html.

Tailor Made logo

Tailor Made logo


Samples which requires server (localhost, 127.0.0.1 or Url) with php and AutoXchange:

Follow instructions in Install Notes above. NOTE: Edit the php configuration through CV-JS_config.php in the folder ./php, edit the ServerLocation and ServerURL variables in the .html files to point to your server locations.

File Load and Redlines Handling

3) File-Load: CADViewer JS is set up with interactive modals for file-loading and redlines. Links with AutoXchange for own server on-the-fly conversion control of CAD drawings.
See file: CVJS_fileloader_41.html.

Tailor Made logo

4) Redlines: Redline control icon disk displayed at load. Links with AutoXchange for own server on-the-fly conversion control of CAD drawings.
See file: CVJS_fileloader_red_41.html.

Tailor Made logo

5) Redlines Overlay: Multiple overlay load of redlines are enabled. Links with AutoXchange for own server on-the-fly conversion control of CAD drawings and is set up for interactive modals for file-loading and redlines.
See file: CVJS_fileloader_red_overlay_41.html.

Tailor Made logo

6) Embedded Redlines Control: Sample for embedding CADViewer JS in an encapsulating application. Redline handling of features such as locked users, hidden users, etc. are all Javascript API controlled. File and redline load/save are all done through API calls. See file: CVJS_redline_api_41.html.

Tailor Made logo

Tailor Made logo

Tailor Made logo

Insert Image Objects and Compare Drawings

7) Insert Image Objects: Sample with image handling and object count menu page activated (icon menu page three). Images can be externally loaded and added to a location on the drawing. See file: CVJS_insert_image_41.html.

Tailor Made logo

8) Compare Drawings: Sample with compare drawings menu page activated (icon menu page three). Two drawings are loaded and overlaid to expose differencies. See file: CVJS_compare_drawings_41.html.

Tailor Made logo

Tailor Made logo

Dynamic Highlight API

For a more indept description on creating the dynamic hotspots on drawings, as used in this examples, see document: CADViewer JS-AutoXchange - Generating Automated Hotspots.pdf

9) Dynamic Highlight: Sample illustrating the dynamic highlight API for coloring and labelling objects in a drawing. Sample also illustrates thumbnail generator and PDF generation of screen image with dynamic highlight (for reporting). See file: CVJS_loaddynamic_highlight_41.html.

Tailor Made logo

Tailor Made logo

Tailor Made logo

Various Functionality

10) Batch Conversion to PDF for Print: Minimized version of CADViewer JS is used to batch convert a set of drawings to a multipage PDF. See file: CVJS_batchprint_to_pdf_41.html.

Tailor Made logo

11) Add Click Handlers to SVG: Handlers are added to SVG file so group of objects (layers) responds to mouse over, mouse click, etc. See file: CVJS_svg_clickhandler_41.html.

Tailor Made logo

12) Build a page change structure from 3rd party SVG tool: Multiple SVG files are indexed for page browsing. See file: CVJS_svg_multipage_41.html.

Tailor Made logo

Sample which requires server with php and MySQL

Follow instructions in Install Notes above. NOTE: Edit the php configuration through CV-JS_config.php in the folder ./php, edit the ServerLocation and ServerURL variables in the .html files to point to your server locations. Install database ./CV-JS_2_5_2/databases/vizquery_public_demo.sql prior to running this sample.

Dynamic Interaction between drawing and Database

For a more indept description on creating the dynamic hotspots on drawings, as used in this examples, see document: CADViewer JS-AutoXchange - Generating Automated Hotspots.pdf

13) Visual Query: AngularJS and PHP are used to dynamically load content from a MySQL database for two-way interaction with content in drawing. See file: CVJS_visual_query_41.html.

Tailor Made logo

Tailor Made logo

Tailor Made logo



Sample which requires server with php and Java

Follow instructions in Install Notes above. NOTE: Edit the php configuration through CV-JS_config.php in the folder ./php, edit the ServerLocation and ServerURL variables in the .html files to point to your server locations.

Dynamic load of multipage PDF

14) PDF: Loading and display of multipage PDF document using on-the-fly conversion. See file: CVJS_pdf_multipage_41.html.

Tailor Made logo

Tailor Made logo

Tailor Made logo


License Keys


License Key - CADViewer JS

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


License Key - AutoXchange



AutoXchange goes from trial to release mode by adding a license key axlic.key into a directory of choice.


License key folder

Set the license key location as part of the initalization in the php file CV-JS_config.php in the AutoXchange download.

//  Path to the location of the license key axlic.key file
	$licenseLocation = "/home/cadviewer/tms-restful-api/converters";

To learn more about licensing, please contact us at: Tailor Made Software