cadviewer-testapp-react-01
Advanced tools
Readme
1: Install a sample React App implementing CADViewer API and Canvas: npm i cadviewer-testapp-react-01
NOTE: Please use Github to download/clone this sample: cadviewer-testapp-react-01 as the preferred route!
As an alternative:
2A: Install CADViewer from: npm i cadviewer , see: https://www.npmjs.com/package/cadviewer
2B: There are some general image and XML configuration files that CADViewer needs during execution, please download react_public_folder_cadviewer_6_4.zip and place in your React /public/ project folder. (These files are included in this download)
For both methods 1: and 2: , then do the following:
Download the Node JS CAD Conversion server (or alternatively PHP, .NET or Servlet implementations): Go to: https://cadviewer.com/download/, register and receive email and then download from CADViewer Handler/Connector Scripts.
Download the CAD Converter AutoXchange 2020: Go to: https://cadviewer.com/download/, register and receive email and then download from AutoXchange 2020 Downloads.
Use the Github CADViewer 6.4 ReactJS 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 React application encapulating CADViewer.
var ServerBackEndUrl = "http://localhost:3000/";
var ServerUrl = "http://localhost:8000/";
var ServerLocation = "c:/nodejs/cadviewerServer/";
Use the CADViewer API to open and manipulate drawings in your application.
The CADViewer React JS general install instructions are at: https://cadviewer.com/cadviewertechdocs/handlers/reactjs/
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 2020 is found at: https://tailormade.com/ax2020techdocs/.
The CADViewer API is found at: https://cadviewer.com/cadviewerproapi/global.html.
On Angular and VueJS, Install CADViewer with: npm i cadviewer, see instructions in: https://www.npmjs.com/package/cadviewer
FAQs
CADViewer - JavaScript CAD Viewer sample implementation for ReactJS
We found that cadviewer-testapp-react-01 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.