1: Install CADViewer with npm i cadviewer on all framework platforms. See specifics below for each platform on how to add auxillary files and connect with the back-end CAD conversion server.
2: In your /src (Angular) or /public (NodeJS/VueJS) folder create the assets/cadviewer/ folder, then unzip and add the content from the CADViewer assets file: assets_cadviewer.zip (the folder structure will be /assets/cadviewer/app/...). The assets can also be found in the /node_modules/cadviewer/dist/assets/ folder after installation.
3: If you are using typescript, then cadviewer.d.ts is in the /node_modules/cadviewer/dist/ */ folder after installation and is referenced through package.json. The types definitions can also be pulled from DefinitelyTyped, with npm i @types/cadviewer.
Note 1: For any installation issues, please refer to CADViewer FAQ
Note 2: For plain-vanilla JavaScript top-level library, please use our GitHub repository cadviewer-script-library.
Note 3: Always install the back-end cadviewer-conversion-server (windows) or cadviewer-conversion-server-linux (linux) for CAD conversion, Redlines and Space Object management. (see 5: below)
To see how a CAD Canvas is set up with callback methods and initialization of CADViewer, as an alternative to 1: - 3: above, use the following samples as a template:
4A: ReactJS - download the CADViewer React implementation sample from the Github repository cadviewer-testapp-react-01.
4B: VueJS - download the CADViewer VueJS implementation sample from Github repository cadviewer-testapp-vue-01.
4C: Angular - download a CADViewer Angular implementation sample from the repositories either Github - Angular 11 (cadviewer-testapp-angular-v01) or Github - Angular 13 with TypeScript (cadviewer-testapp-angular-v02).
These samples illustrates initialization and loading of CADViewer as well as illustrates the functional interface for highlight and adding interactive image content to the CAD canvas.
5: Install a back-end CAD Conversion server to process CAD files and communicate with CADViewer.
Download the Node JS CAD Conversion server (or alternatively the PHP, .NET or Servlet Server implementations). Go to: https://cadviewer.com/download/, register and receive email and then download from CADViewer Handler/Connector Scripts.
Note: that the preferred CAD Server with React/Vue/Angular, is the CADViewer NodeJS CAD Conversion Server which can be downloaded directly from the Github repositories cadviewer-conversion-server (windows) or cadviewer-conversion-server-linux (linux).
You can always update the back-end CAD Converter AutoXchange 2023 in the server structure: Go to: https://cadviewer.com/download/, register, receive email and then download from AutoXchange 2023 Downloads.
Note that the path book-keeping is important for proper initialization, where the ServerBackEndUrl and ServerLocation is the location and Url of the CAD Server and ServerUrl is the Url of the React/VueJS/Angular application encapulating CADViewer.
var ServerBackEndUrl = "http://localhost:3000/";
var ServerUrl = "http://localhost:8000/"; // react
// var ServerUrl = "http://localhost:8080/"; // vue
// var ServerUrl = "http://localhost:4200/"; // angular
var ServerLocation = ""; // leave blank (only use for dev purposes)
The CADViewer Back-End install instructions are at: https://cadviewer.com/cadviewertechdocs/handlers/.
The CADViewer Front-End install instructions are at: https://cadviewer.com/cadviewertechdocs/frontend/.
LICENSE: TMS 1.0: Use freely on localhost. Commercial use requires licensing, both using entirely or in parts. Contact Tailor Made Software, https://cadviewer.com/contact, for more information.
The general documentation on CADViewer is found at: https://cadviewer.com/cadviewertechdocs/.
The general documentation on AutoXchange 2023 is found at: https://tailormade.com/ax2020techdocs/.
The CADViewer API is found at: https://cadviewer.com/cadviewerproapi/global.html.
Read the Guide on how to create hotspots and modify hotspots, this will help you work with the code in the integrated samples. Also please reference the general documentation on Space Management.