Measure (Classic) | Realsee Developer Platform

PanoMeasurePlugin

Plugin comparison

For a detailed comparison between PanoMeasurePlugin and the new MeasurePlugin, see the measurement overview.

Overview

PanoMeasurePlugin is the classic measure plugin, used to measure or display ruler data within a space. It is feature-complete, offers rich configuration options, and ships with a built-in UI controller, making it well suited for quickly integrating standard measurement functionality.

External Demo

Open the PanoMeasurePlugin demo to try the classic measurement workflow outside this documentation page.

Quick start

Declare the configuration

import type { PanoMeasurePlugin } from '@realsee/dnalogel'

const pcConfig: Parameters<typeof PanoMeasurePlugin>[1] = {
  useGuideController: true,
  useUIController: {
    useNewUI: true,
    showExit: true,
  },
  editParams: {
    pointSelectorMode: 'cursor',
    allowMeasureType: ['line', 'area'],
    autoEndConfig: { line: null },
  },
  openParams: {
    isMobile: false,
  },
  magnifierParams: {
    height: 120,
    scale: 2,
    width: 120,
    dragEnabled: false,
    autoFixPCPosition: true,
  },
  pointSelectorConfig: {
    actionIfNoIntersection: 'disable',
  },
}

Mobile

import type { PanoMeasurePlugin } from '@realsee/dnalogel'

const mobileConfig: Parameters<typeof PanoMeasurePlugin>[1] = {
  useGuideController: true,
  useUIController: {
    useNewUI: true,
  },
  editParams: {
    allowMeasureType: ['line', 'area'],
    pointSelectorMode: 'fixed',
    autoEndConfig: {
      line: 2,
    },
  },
  openParams: {
    isMobile: true,
  },
  magnifierParams: {
    height: 120,
    scale: 2,
    width: 120,
    dragEnabled: false,
    autoFixPCPosition: false,
  },
}

Initialization

Initialize via the Five SDK plugins option.

import { PanoMeasurePlugin } from '@realsee/dnalogel'
import { Five } from '@realsee/five'

// Load the Five plugin
const five = new Five({
  plugins: [
    [PanoMeasurePlugin, 'panoMeasurePlugin', pcConfig] // Choose pcConfig or mobileConfig as appropriate
  ]
})

const panoMeasurePlugin = five.plugins.panoMeasurePlugin as ReturnType<typeof PanoMeasurePlugin>

You can also initialize it yourself.

import { PanoMeasurePlugin } from '@realsee/dnalogel'

// `five` is a Five instance; choose pcConfig or mobileConfig as appropriate
const panoMeasurePlugin = PanoMeasurePlugin(five, pcConfig)

Displaying data

Fetching data

Refer to the OpenAPI to learn how to fetch ruler data. The corresponding endpoint is /open/v3/ruler/search.

Load and display data

  import type { PanoMeasurePluginPolylineJson } from '@realsee/dnalogel'

  export interface MeasurePluginServerData {
    list: { polyline: PanoMeasurePluginPolylineJson }[]
  }

  const serverData = { list: [] } as MeasurePluginServerData
  // ---
  panoMeasurePlugin.load(serverData)
  panoMeasurePlugin.enable({ mode: 'View' })

Stop displaying data

  panoMeasurePlugin.disable()

Measuring

Enable measurement

  panoMeasurePlugin.enable() // PC
  panoMeasurePlugin.enable({ mode: 'Edit' }) // mobile

Disable measurement

  panoMeasurePlugin.disable()