Skip to main content

Interactive Blueprint & Defect Pin Mapper

This page walkthrough demonstrates how to build an interactive floor plan or blueprint inspector. Users can pan and zoom across a complex architectural background scenery image, witness outstanding facility issues, and click directly onto the blueprint to drop customized status-colored defect pins.

Prerequisites​

Before diving into this walkthrough, complete the Quick Start guide to set up <kritzel-editor> in your Angular application.

This example makes use of the following core concepts. Click on the links below to go into the details:

  • Objects — seeding background images and creating shape objects as defect markers
  • Viewport — converting screen coordinates to world coordinates with screenToWorld() and focusing the camera with setViewport()
  • Tools — switching to the selection tool programmatically during pin placement mode
  • Components — hiding built-in controls and driving all interactions from a custom sidebar

Facilities Blueprint and Defect Monitor​

The interactive workspace provides a pre-seeded Facilities blueprint image. Users can toggle "Defect Pin Placement Mode", click on the floor plan to drop brand-new outstanding issues, and monitor existing defects from the side inspector card. Clicking any row in the Reported Defects list automatically pans and focuses on that specific defect marker.

:::info Viewport Camera Centering vs Object Centering In Kritzel, centerObjectInViewport() moves the actual target object under the hood to align with the viewport center. For static blueprints or stationary marker pins, calling centerObjectInViewport() would shift their positions on the canvas, drifting them off their physical location.

Instead, to center the camera viewport on a static image background or a stationary pin without mutating its coordinates, use setViewport(x, y, scale) to seamlessly adjust the camera matrix. :::

The background scenery is registered directly in onReady() when the canvas activates. Because we want user-drawn drawings or shapes to sit on top of the architectural drawing, the image scenery item is loaded and pushed first. The custom pointer-events: none property applied to the blueprint layer allows users to select manually added pins or draw arrows over the blueprint scenery without dragging the floorplan background by mistake.

To convert a standard mouse or pointer click into coordinate units, we measure the click relative to our <kritzel-editor> bounds and pass it to screenToWorld(x, y). The resulting absolute coordinates act as the center pivot when constructing our customized circular KritzelShape pin objects on the canvas.