Novel Personal Mantras

    cadviewer

    7.0.25 • Public • Published

    Installing CADViewer

    CADViewer for frameworks (ReactJS, VueJS, Angular etc.)

    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.

    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.

    Install Instructions for ReactJS and VueJS

    1: Install CADViewer from: npm i cadviewer

    To see how a CAD Canvas is set up with callback methods and initialization of CADViewer use the following samples as a template:

    2A: ReactJS - download the CADViewer React implementation sample from the Github repository cadviewer-testapp-react-01.

    2B: VueJS - download the CADViewer VueJS implementation sample from Github repository cadviewer-testapp-vue-01.

    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.

    3: 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.

    The CADViewer NodeJS CAD Conversion Server can be downloaded from Github from the repository cadviewer-conversion-server.

    You can always update the CAD Converter AutoXchange 2023 in the server structure: Go to: https://cadviewer.com/download/, register and 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 application encapulating CADViewer.

    	var ServerBackEndUrl = "http://localhost:3000/";
    	var ServerUrl = "http://localhost:8000/";
    	var ServerLocation = "";  // leave blank, for devopment purposes can be set: c:/nodejs/cadviewer-conversion-server/
    

    The CADViewer React JS general install instructions are at: https://cadviewer.com/cadviewertechdocs/handlers/reactjs/

    LICENSE: TMS 1.0: Use freely on localhost. Commercial use requires licensing, both using entirely or in parts. Forbidden to remove license key check. Contact Tailor Made Software, https://cadviewer.com/contact, for more information.

    Use the CADViewer API to open and manipulate drawings in your application.

    Read the Guide on how to create hotspots (Space Objects), it outlines how spaces can be processed on a drawing to create interactive objects.

    Read the Guide on how to modify hotspots (Space Objects), this will help you work with the code in this sample.

    Read 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.

    Install Instruction for Angular

    1A: Install CADViewer: npm i cadviewer

    1B: In angular.json , reference the cadviewer related stylesheets from ./node_modules/cadviewer:

             "styles": [
              "src/styles.css",
              "./node_modules/cadviewer/app/css/cvjs_7.css",
              "./node_modules/cadviewer/app/css/bootstrap.min.css",
              "./node_modules/cadviewer/app/css/bootstrap-cadviewer.css",
              "./node_modules/cadviewer/app/css/bootstrap-multiselect.css",
              "./node_modules/cadviewer/app/css/jquery.qtip.min.css",
              "./node_modules/cadviewer/app/css/font-awesome.min.css",
              "./node_modules/cadviewer/app/css/glyphs_cvjs.css",
              "./node_modules/cadviewer/app/css/jquery-ui-1.11.4.min.css"
            ],
    

    As an alternative:

    2: Download a CADViewer Angular implementation sample from Github repository cadviewer-testapp-angular-v01.

    For both methods 1: and 2: , then do the following:

    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.

    The CADViewer NodeJS CAD Conversion Server can be downloaded from Github from the repository cadviewer-conversion-server.

    Download the CAD Converter AutoXchange 2023: Go to: https://cadviewer.com/download/, register and receive email and then download from AutoXchange 2023 Downloads.

    Use the Github cadviewer-testapp-angular-v01 as reference sample. This sample illustrates initialization and loading of CADViewer as well as illustrates the functional interface for highlight and adding interactive image content to the CAD canvas.

    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 Angular application encapulating CADViewer.

    	var ServerBackEndUrl = "http://localhost:3000/";
    	var ServerUrl = "http://localhost:4200/";
    	var ServerLocation = "";  // leave blank, for devopment purposes can be set: c:/nodejs/cadviewer-conversion-server/
    

    The CADViewer Angular JS general install instructions are at: https://cadviewer.com/cadviewertechdocs/handlers/angular/

    LICENSE: TMS 1.0: Use freely on localhost. Commercial use requires licensing, both using entirely or in parts. Forbidden to remove license key check. Contact Tailor Made Software, https://cadviewer.com/contact, for more information.

    Use the CADViewer API to open and manipulate drawings in your application.

    Read the Guide on how to create hotspots (Space Objects), it outlines how spaces can be processed on a drawing to create interactive objects.

    Read the Guide on how to modify hotspots (Space Objects), this will help you work with the code in this sample.

    Read 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.

    Install

    npm i cadviewer

    DownloadsWeekly Downloads

    171

    Version

    7.0.25

    License

    TMS 1.0

    Unpacked Size

    6 MB

    Total Files

    452

    Last publish

    Collaborators

    • charnung