📦 Panorama Floorplan Radar

PanoFloorplanRadarPlugin

External Demo

Open the Panorama Floorplan Radar demo to try the plugin outside this documentation page.

Overview

The Panorama Floorplan Radar plugin provides the ability to display a 2D floorplan in panorama mode.

Supported features:

• Radar guidance: shows the position and orientation of the current point using a "radar" icon.
• Adaptive floorplan fit: the minimum-edge size is computed automatically to keep the floorplan centered within the DOM container.
• When navigating between points in panorama mode triggers a floor change, it automatically switches to the floorplan of the current floor.
• When hoverEnable is set to true (the default), the room under the mouse hover is highlighted.

Installation

Choose either yarn or npm as needed:

npm install @realsee/dnalogel

Import via ES modules:

import { PanoFloorplanRadarPlugin } from "@realsee/dnalogel"

Development Guide

Initialization

When initializing the Five instance, configure PanoFloorplanRadarPlugin in the initialization plugin parameters.

import { Five } from '@realsee/five'
import { PanoFloorplanRadarPlugin } from "@realsee/dnalogel"

// Initialize the five instance
const five = new Five({
    plugins: [
     [PanoFloorplanRadarPlugin, 'panoFloorplanRadar', {
     // Initialization parameters
        }]
    ]
})

Loading Data

// Get the plugin instance
const pluginInstance = five.plugins.panoFloorplanRadar
// Load data
pluginInstance.load(floorplanServerData)

Core Methods

The core methods provided by PanoFloorplanRadarPlugin are:

• async load(data: FloorplanServerData) loads floorplan data;

You need to load the floorplan data manually. For the source of [FloorplanServerData], see the OpenAPI reference.

• appendTo(wrapper: Element) mounts the DOM node;

Loads the floorplan DOM module into your HTML structure.

• setState(state: Partial<State>, options: BaseOptions = {}) changes the plugin State;
• changeConfigs(config: Config, userAction = true) modifies the plugin configuration;
• setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]) displays extra content on the radar;
• async show(options: BaseOptions = {}) shows the floorplan data;
• async hide(options: BaseOptions = {}) hides the floorplan data;
• enable(options: BaseOptions = {}) enables the plugin;
• disable(options: BaseOptions = {}) disables the plugin;

Displaying Extra Content on the Radar

For some objects in the 3D scene, we can display them on the radar using special icons.

setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]) sets the list of 3D objects to display on the floorplan.

The structure of the 3D data is as follows:

// A 3D object that can be mapped onto the radar
export interface FloorplanExtraObject3D {
  id: string
  // [x, y, z]
  position: number[]
}

Configuration Parameters

• wrapper: string | Element the DOM node the plugin is mounted on.
• hoverEnable?: boolean whether to enable mouse hover highlighting of rooms.

Example configuration:

import { PanoFloorplanRadarPlugin } from "@realsee/dnalogel"
import { Five } from '@realsee/five'

const five = new Five({
  plugins: [
    [
      PanoFloorplanRadarPlugin,
      'panoFloorplanRadar',
      { 
          wrapper: '.floorplan-radar-wrapper', 
          configs: {
              hoverEnable: true
          }
      }
    ],
  ],
})

Source Reference

PanoFloorplanRadarPlugin example source