PSPDFKit is used by thousands of apps and millions of end users across different industries like aviation, board meetings, construction, e-learning, e-readers, and magazines.
In this post, we’ll see how to configure PSPDFKit for the construction industry. More specifically, we’ll discuss how to use PSPDFKit to show an apartment floorplan for a field construction engineer.
The best way to follow along and explore the construction app is to install PDF Viewer from the App Store on your iOS device and open the construction example via Settings > PSPDFKit Catalog.
The Use Case
When you open the construction example, you’ll notice that it shows a PDF of an apartment floorplan with a few annotations added to it to reflect what a construction engineer or architect might see when inspecting a construction document.
In the paragraphs below, we’ll discuss how and why we customized the user interface and annotation tools, and how we leverage the various PSPDFKit components that power our construction app.
Let’s get started!
ℹ Info: This example uses PSPDFKit’s Viewer, Annotations, Indexed Search, and Replies components.
Customizing the Navigation Bar and Its Buttons
We customized the main toolbar to include only the buttons that are relevant to the construction engineer or architect reviewing the floorplan.
When you tap on the annotation visibility button (i.e. the eye icon) on the left-hand side of the toolbar, you can hide all the annotations from the document for a clearer view of the floorplan. You can show the annotations by tapping on the same button again.
In the main toolbar, on the right-hand side, you’ll find three buttons: the annotation list button, the share button, and the annotation edit button.
The annotation list button allows you to see all the annotations from the document in a list. You can use the annotation list to select any annotation, and once you do this, PSPDFKit will select the annotation on the page and make its menu visible.
The share button allows you to share the current document via email, which will prompt you to choose between sharing the PDF with the embedded annotations or without any annotations at all.
Please refer to our Document Sharing guide to learn more about how to customize the document sharing experience.
And finally, the annotation edit button will show the annotation toolbar, which allows you to enter the annotation mode. So let’s tap this button to display the annotation toolbar and its tools.
Customizing the Annotation Toolbar and Its Tools
The annotation toolbar and its tools are crucial parts of the daily workflow of construction field engineers. They need specific tools for annotating their construction plans — for example, the cloudy-bordered shape annotations, custom tools like the drop pin stamp annotation, and file attachments — all of which we’ll discuss below.
Customizing the Annotation Toolbar Appearance and Position
We forced the dark appearance for our annotation toolbar, even on devices that use the light appearance. We also adjusted the toolbar’s location to be on the top-left side of the screen, and we disabled the ability to move it to a different location. We did this because, in most construction apps, the toolbar’s position is fixed, and because we don’t want to distract our end users while they’re annotating a document.
Cloudy-Bordered Shape Annotations
Cloudy-bordered shape annotations are widely used in construction apps because they allow the user to visually distinguish between a cloudy square annotation and a square in the floorplan representing a room.
Drop Pin Custom Stamp Annotations
Drop pin stamp annotations are also a popular tool in any construction app because they allow field engineers to mark specific locations on the floorplan and associate them with tasks. In the construction example, we created this custom tool using a custom stamp annotation and the PSPDFKit Replies component.
File Annotations with Embedded Files
We also added the file attachment tool, which allows the end user to attach files to the floorplan. The file attachment tool is useful for the field engineer, as it enables them to attach another floorplan document for a specific room.
If you want to learn more about attaching files to PDF documents or embedding files using file annotations, take a look at our How to Embed Files Using File Annotations blog post.
For more information and sample code showing how to customize the annotation toolbar and its tools, please refer to our documentation.
Customizing the Menu
We customized the menu to add the file attachment tool as a quickly accessible shortcut. You can attach files by long-pressing anywhere on the page and then selecting the file attachment menu, like so:
For more details, please refer to our documentation about customizing menus.
If you’re curious about how PSPDFKit is used in other industries, please take a look at our other blog posts from this series: