Embedding a high-fidelity CAD viewer in your application using the Apryse WebViewer

By Apryse | 2023 Sep 20

5 min

Introduction

Computer-Aided Design (CAD) files are essential for creating and visualizing complex designs, whether they're architectural plans, mechanical schematics, or artistic creations. While CAD software is the ideal tool for creating and editing these files, sharing them with clients, team members, or stakeholders who might not have the same software, or the specialized skills to use the software, can be a hurdle.

In this article we will look at how we can view the CAD drawings in DWG, DWF, DXF, DGN and RVT format, directly within the browser.

See the CAD Rendering in Action

If you visit the Apryse Showcase then you can see many examples of the wealth of functionality that is available within WebViewer. The CAD Viewer sample allows you to load, inspect and work with CAD files.

Figure 1 - An example CAD drawing being rendered in the WebViewer showcase.

Individual layers of the Drawing can be shown or hidden, the drawing can be rotated, annotations can be added, and when you are ready you can save the drawing as a PDF.

That is some awesome functionality!

Learn more about comprehensive tools for BIM and CAD file management. Read the blog.

Getting this Functionality for Your Business

WebViewer is extremely easy to integrate into your code. And there are lots of examples on the Apryse website about how to do it in a range of different languages. You will need to create an account, get a trial license, and download the WebViewer library.

Download a WebViewer Sample

There are samples that are written for many JavaScript and other frameworks. In this article I will use the React example which can be found at https://docs.apryse.com/documentation/web/get-started/react/

That sample will lead you through how to get a license and get started with displaying a PDF froma hard-coded location.

Figure 2 - The WebViewer React sample displaying a PDF.

TheWebViewer is great straight out of the box, but it does have some limitations. Displaying CAD drawings is complex, and to support doing so, some of the processing needs to be performed by a separate process – the WebViewer Server.

WebViewer Server (WVS) is primarily used when additional file formats need to be supported. It is available as a Windows Service, but the recommended deployment is via a Docker container, which can be quickly set up either on in-house hardware or hosted in the Cloud.

There is lots of information on using the WebViewer Server available here, which provides an in-depth description of how to get started.

Download the WebViewer Server

While installment via Docker is recommended, for the purposes of this article, the WebViewer Server was installed as a Windows Service from https://docs.apryse.com/documentation/web/guides/wv-server-deploying-without-docker/

Click on Download WVS Installer

Figure 3 - the web page that allows the WebViewer Server to be downloaded.

Note that the installer is over 1GB in size, so it may take a while to download.

Figure 4 - The installer after download.

Once it has downloaded, double click on the file and follow the instructions, which will include setting up the wvs_config.json file that controls the configurable aspects of the WebViewer server.

Figure 5 - A view of part of the installation process.

Use the default values unless you need to change them.

It should now be possible to see the WebViewer-Server running in the list of Windows Services. If it is not visible, then something has gone wrong and needs to be solved before proceeding.

Figure 6 - A view of the Windows Services, showing that WebViewer-Server has been installed.

Update the WebViewer Sample Code to use the WebViewer Server

With Apryse, you can leverage your existing knowledge into new areas. The WebViewer sample was created to just demonstrate how to view and annotate a PDF.

Although CAD files are fundamentally different from PDFs, the WebViewer supports working with CAD files, by the addition of just a single line of code – adding a URL for the webviewerServer.

WebViewer( 
       { 
         path: '/webviewer/lib', 
         webviewerServerURL: 'http://127.0.0.1:8090', 
      // initialDoc: '../files/doc_to_sign.pdf', 
        licenseKey: YOUR LICENSE KEY'  // sign up to get a free trial key at https://dev.apryse.com 
       }, 
       viewer.current, 
     ).then((instance) => { 
       const { documentViewer } = instance.Core; 
       const { Feature } = instance.UI; 
       instance.UI.enableFeatures([Feature.FilePicker]); 
      documentViewer.addEventListener('documentLoaded', () => { 
       }); 
    });

The React App is now ready to run using npm start.

The webpage will open with an empty WebViewer, which is expected, since no initialDoc is specified.

Next use the FilePicker (the Open file menu item) and choose a local CAD file.

Figure 7 - The Open File option that appears if the FilePicker option is enabled.

What is likely to happen is that the sample will appear to hang.

Figure 8 – The browser appears to hang, indicating that there is a problem with the Server.

The sample code is extremely basic and does not provide information about errors. If it did it would tell you that the connection to the Server was refused.

Fixing the Connection Refused Issue

Although the WebViewer-Server service was installed correctly, it does not automatically start.

In this scenario it is therefore necessary to manually start it.

This is just a configuration issue and is not a problem in production.

Using the WebViewer UI with the WebViewer Server Running

Having started the service, reload the CAD document within the WebViewer.

The server will process the file, which will then be displayed in the browser.

Figure 9 - The WebViewer showing the CAD drawing.

It is then possible to zoom into the drawing to levels way beyond competitors’ offerings. Zooming is possible either via the Mouse wheel, from the control ribbon, or using the Marquee Zoom tool.

Figure 10 - A zoomed in view of the Drawing.

Marquee Zoom allows a small area to be selected, which is then zoomed into the extent that it entirely fills the view. This allows very small parts of the drawing to be seen at a level of detail not normally available outside of dedicated CAD software.

Figure 11 - Part of the document zoomed in to 22000%, using the Marquee Zoom tool.

Since this functionality is provided by WebViewer, all the normal WebViewer functionality - annotation, addition and page manipulation and rotation -is available, as is the ability to save the file as a PDF.

Working with Layers

CAD drawings often contain layers of information that relate to sets of data within the drawing. In a CAD drawing for a house, for example, these could include structural elements for the walls and roof, and data for plumbing, ventilation, and drainage. Being able to see just a subset of the layers that are available can help the viewer to understand the drawing, hiding information that is not currently relevant.

The PDF specification has supported layers since 2003, and the Apryse WebViewer contains a layer viewer by default if layers are available within the PDF.

In the case of a CAD drawing, the easiest way to enable layer extraction is to specify forceClientSideInit:true, in the WebViewer constructor.

WebViewer( 
       { 
         path: '/webviewer/lib', 
         webviewerServerURL: 'http://127.0.0.1:8090', 
         forceClientSideInit:true, 
         licenseKey: 'LICENSE KEY' // sign up to get a free trial key at https://dev.apryse.com 
       }, 
       viewer.current, 
     ).then((instance) => {

With this in place the Panel window now shows an extra option.

Figure 12 - The Panel, showing the Layers option when layers are present.

Clicking on this option shows the list of layers that are present, and the user is then able to click on which ones they wish to see.

Figure 13 - The same CAD drawing with three of the layers hidden.

That is a whole lot of additional functionality available with almost no additional work required.

Conclusion

The Apryse WebViewer already has huge power, allowing PDFs and Office Documents to be created, viewed and modified. With a few simple changes supported by the easily deployed WebViewer Server, that functionality can be extended to provide support for CAD drawings, without the need for additional specialized software to handle such files.

This reduces the need to license tools from multiple vendors and avoids the need for users to learn how to use such tools.

When you are ready to get started, see the documentation for the SDK to get started quickly. Don’t forget, you can also reach out to us on Discord if you have any issues.