OpenLIME

Class: LensDashboard

LensDashboard

LensDashboard class creates an interactive container for a lens interface. It provides:

  • A square HTML container that moves with the lens
  • SVG-based circular lens border with drag interaction for resizing
  • Masking capabilities for controlling content visibility inside/outside the lens
  • Ability to add HTML elements positioned relative to the lens

new LensDashboard(viewer [, options])

Creates a new LensDashboard instance.

Parameters:
Name Type Argument Description
viewer Viewer

The OpenLIME viewer instance
options Object <optional>

Configuration options

Properties
Name Type Argument Default Description
containerSpace number <optional>
 80

Extra space around the lens for dashboard elements (in pixels)
borderColor Array.<number> <optional>
 [0.078, 0.078, 0.078, 1]

RGBA color for lens border
borderWidth number <optional>
 12

Width of the lens border (in pixels)
layerSvgAnnotation LayerSvgAnnotation <optional>
 null

Associated SVG annotation layer
Source:

Methods

append(elm)

Adds an HTML element to the dashboard container. The element should use absolute positioning relative to the container. Example:

const button = document.createElement('button');
button.style = 'position: absolute; left: 10px; top: 10px;';
lensDashboard.append(button);
Parameters:
Name Type Description
elm HTMLElement

The HTML element to add
Source:

removeMaskFromSvgLayer(svg)

Removes the lens mask from an SVG element. Returns the element to its normal, unmasked rendering.

Parameters:
Name Type Description
svg SVGElement

The SVG element to unmask
Source:

setBackgroundRenderingMode(mode)

Sets the rendering mode for the background (area outside the lens). Controls whether content outside the lens is shown or hidden.

Parameters:
Name Type Description
mode RenderingMode

The rendering mode to use
Source:

setLayerSvgAnnotation(layer)

Associates a LayerSvgAnnotation with the dashboard. This enables proper masking of SVG annotations within the lens area.

Parameters:
Name Type Description
layer LayerSvgAnnotation

The SVG annotation layer to associate
Source:

setLensRenderingMode(mode)

Sets the rendering mode for the lens area. Controls whether content inside the lens is shown or hidden.

Parameters:
Name Type Description
mode RenderingMode

The rendering mode to use
Source:

setMaskOnSvgLayer(svg)

Applies the lens mask to an SVG element. Elements with the mask will only be visible within the lens area (or outside, depending on mask configuration).

Parameters:
Name Type Description
svg SVGElement

The SVG element to mask
Source:

toggle()

Toggles the visibility of the dashboard UI elements. Uses CSS classes to show/hide the interface.

Source: