OpenLIME

Howto

Classes

Annotation
AudioPlayer
BoundingBox
Cache
Camera
Canvas
Color
Colormap
ColormapLegend
Controller
Controller2D
ControllerFocusContext
ControllerLens
ControllerPanZoom
CoordinateSystem
Draggable
EditorSvgAnnotation
Erase
FocusContext
GeoreferenceManager
Layer
LayerAnnotation
LayerAnnotationImage
LayerBRDF
LayerCombiner
LayerDstretch
LayerHDR
LayerImage
LayerLens
LayerMaskedImage
LayerMultispectral
LayerNeuralRTI
LayerRTI
LayerSvgAnnotation
Layout
LayoutTileImages
LayoutTiles
LensDashboard
LensDashboardNavigator
LensDashboardNavigatorRadial
LightSphereController
MultispectralUI
PointerManager
Raster
Raster16Bit
Ruler
ScaleBar
Shader
ShaderAnisotropicDiffusion
ShaderBRDF
ShaderCombiner
ShaderDstretch
ShaderEdgeDetection
ShaderFilter
ShaderFilterBrightness
ShaderFilterColormap
ShaderFilterGrayscale
ShaderFilterOpacity
ShaderFilterTest
ShaderFilterVector
ShaderFilterVectorGlyph
ShaderGammaFilter
ShaderHDR
ShaderLens
ShaderMultispectral
ShaderNeural
ShaderRTI
Skin
TextToSpeechPlayer
Tile
Transform
UIBasic
UIDialog
Units
Util
Viewer

Members

<constant> RenderingMode :string

Defines rendering modes for lens and background areas.

Type:
  • string
Properties:
Name Type Default Description
draw string

"fill:white;" Shows content in the specified area
hide string

"fill:black;" Hides content in the specified area
draw string fill:white;
hide string fill:black;
Source:

Methods

addSignals(proto, signals)

Adds event handling capabilities to a prototype. Creates a simple event system that allows objects to emit and listen to events.

The function modifies the prototype by adding:

  • Event registration methods
  • Event emission methods
  • Signal initialization
  • Signal storage

Implementation Details

The signal system works by:

  1. Extending the prototype with signal tracking properties
  2. Maintaining arrays of callbacks for each signal type
  3. Providing methods to register and trigger callbacks

Signal Storage Structure:

{
    signals: {
        'eventName1': [callback1, callback2, ...],
        'eventName2': [callback3, callback4, ...]
    },
    allSignals: ['eventName1', 'eventName2', ...]
}

Performance Considerations:

  • Callbacks are stored in arrays for fast iteration
  • Signals are initialized lazily on first use
  • Direct property access for quick event emission

Usage Notes:

  • Events must be registered before they can be used
  • Multiple callbacks can be registered for the same event
  • Callbacks are executed synchronously
  • Parameters are passed through to callbacks unchanged
Parameters:
Name Type Argument Description
proto Object

The prototype to enhance with signal capabilities
signals string <repeatable>

Names of signals to register
Source:
Examples
```javascript
// Add events to a class
class MyClass {}
addSignals(MyClass, 'update', 'change');

// Use events
const obj = new MyClass();
obj.addEvent('update', () => console.log('Updated!'));
obj.emit('update');
```
```javascript
// Multiple signals
class DataHandler {}
addSignals(DataHandler, 
    'dataLoaded',
    'dataProcessed',
    'error'
);

const handler = new DataHandler();
handler.addEvent('dataLoaded', (data) => {
    console.log('Data loaded:', data);
});
```

simplify(points, tolerance)

Simplifies a polyline via the Douglas-Peucker algorithm.

Parameters:
Name Type Description
points Array.<Point>

A polyline.
tolerance *

The tolerance is the maximum distance between the original polyline and the simplified polyline. It has the same metric as the point coordinates.
Source:
Returns:

The simplified polyline.

Type
Array.<Point>

smooth(points, cornerThres, match)

Uses Bezier Curve to smooth a polyline

Parameters:
Name Type Description
points Array.<Point>

A polyline.
cornerThres number

The angular threshold (in degrees). Two segments are smoothed if their angle is less then the threshold.
match bool

Whether the smoothed curve should traverse the original points or approximate them.
Source:
Returns:

The smoothed polyline.

Type
Array.<BezierPoint>

smoothToPath(smoothed)

Converts a smoothed polyline into an SVG path.

Parameters:
Name Type Description
smoothed Array.<BezierPoint>

The smoothed polyline.
Source:
Returns:

The SVG path.

Type
Array.<String>

taskCallback(e)

Callback function fired by a 'click' event on a lens dashboard element.

Parameters:
Name Type Description
e Event

The DOM event.
Source:

Type Definitions

APoint

A tuple of [x, y] representing a 2D point.

Type:
  • Array.<number>
Properties:
Name Type Description
0 number

X coordinate
1 number

Y coordinate
Source:
Example
```javascript
const point: APoint = [10, 20]; // [x, y]
const x = point[0];  // x coordinate
const y = point[1];  // y coordinate
```

AnnoClass

Type:
  • Object
Properties:
Name Type Description
stroke string

CSS color for SVG elements (lines, text, outlines)
label string

Display name for the class
Source:

AnnoClasses

Map of class names to their visual properties

Type:
Source:

BezierPoint

A [x, y, xc, yc] point.

Properties:
Name Type Description
p.0 number

The x-coordinate.
p.1 number

The y-coordinate.
p.2 number

The x-coordinate of the control point.
p.3 number

The y-coordinate of the control point.
Source:

DataLoaderCallback(tile, gl, options)

Parameters:
Name Type Description
tile Object

The tile information object
gl WebGL2RenderingContext

The WebGL2 rendering context
options Object

Additional options for the data loader
Source:
Returns:

The loaded data object with properties:

  • data: TypedArray or Image data
  • width: Width of the image
  • height: Height of the image
  • channels: Number of channels in the data
Type
Promise.<Object>

EasingFunction

Animation easing function type

Type:
  • 'linear' | 'ease-out' | 'ease-in-out'
Source:

Focus

Type:
  • Object
Properties:
Name Type Description
position Object

Lens center position in dataset coordinates

Properties
Name Type Description
x number

X coordinate
y number

Y coordinate
radius number

Lens radius in dataset units
Source:

LayerAnnotationImageOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
url string <optional>

URL to the annotations JSON file
path string <optional>

Base path for annotation image files
format string <optional>
 'vec4'

Raster format for image data
Source:

LayerAnnotationOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
style string <optional>

CSS styles for annotation rendering
annotations string | Array.<Annotation> <optional>
 []

URL of JSON annotation data or array of annotations
overlay boolean <optional>
 true

Whether annotations render as overlay
selected Set.<string> <optional>
 new Set()

Set of selected annotation IDs
annotationsListEntry Object <optional>
 null

UI entry for annotations list
Source:

LayerBRDFOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
channels Object

Required channels for BRDF rendering

Properties
Name Type Description
kd string

URL to diffuse color map (required)
ks string

URL to specular color map (optional)
normals string

URL to normal map (required)
gloss string

URL to glossiness/roughness map (optional)
colorspaces Object <optional>

Color space definitions for material properties

Properties
Name Type Argument Default Description
kd 'linear' | 'srgb' <optional>
 'linear'

Color space for diffuse map
ks 'linear' | 'srgb' <optional>
 'linear'

Color space for specular map
brightness number <optional>
 1.0

Overall brightness adjustment
gamma number <optional>
 2.2

Gamma correction value
alphaLimits Array.<number> <optional>
 [0.01, 0.5]

Range for glossiness/roughness
monochromeMaterial Array.<number> <optional>
 [0.80, 0.79, 0.75]

RGB color for monochrome rendering
kAmbient number <optional>
 0.1

Ambient light coefficient
Source:

LayerCombinerOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
layers Array.<Layer>

Array of layers to be combined (required)
shaders Object.<string, Shader> <optional>

Map of available shaders
type string <optional>
 'combiner'

Must be 'combiner' when using Layer factory
visible boolean <optional>
 true

Whether the combined output is visible
Source:

LayerDStretchOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
url string

URL to the image to be processed (required)
eulerRotation Array.<number> <optional>
 [0,0,0]

Initial Euler rotation angles
worldRotation number <optional>
 0

Global rotation offset for canvas/layer
Source:

LayerHDROptions

Type:
  • Object
Properties:
Name Type Argument Default Description
url string

URL of the image to display (required)
layout string | Layout <optional>
 'image'

Layout format for image display
format string <optional>
 'rgba16f'

Image data format for WebGL processing
debug boolean <optional>
 false

Enable debug output
Source:

LayerImageOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
url string

URL of the image to display (required)
layout string | Layout <optional>
 'image'

Layout format for image display
format string <optional>
 'vec4'

Image data format for WebGL processing
type string <optional>
 'image'

Must be 'image' when using Layer factory
Source:

LayerLensOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
overlay boolean <optional>
 true

Whether the lens renders as an overlay
radius number <optional>
 100

Initial lens radius in pixels
borderColor Array.<number> <optional>
 [0.078, 0.078, 0.078, 1]

RGBA border color
borderWidth number <optional>
 12

Border width in pixels
borderEnable boolean <optional>
 false

Whether to show lens border
dashboard Object <optional>
 null

Dashboard UI component for lens control
camera Camera

Camera instance (required)
Source:

LayerMaskedImageOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
url string

URL of the masked image to display (required)
format string <optional>
 'vec4'

Image data format
type string <optional>
 'maskedimage'

Must be 'maskedimage' when using Layer factory
Source:

LayerMultispectralOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
url string

URL to multispectral info.json file (required)
layout string

Layout type: 'image', 'deepzoom', 'google', 'iiif', 'zoomify', 'tarzoom', 'itarzoom'
defaultMode string <optional>
 'single_band'

Initial visualization mode ('rgb' or 'single_band')
server string <optional>

IIP server URL (for IIP layout)
linearRaster boolean <optional>
 true

Whether to use linear color space for rasters (recommended for scientific accuracy)
presets string | Object

Path to presets JSON file or presets object containing CTW configurations
Source:

LayerNeuralRTIOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
url string

URL to the Neural RTI configuration JSON
layout Layout

Layout system for image loading
convergenceSpeed number <optional>
 1.2

Speed of quality convergence
maxTiles number <optional>
 40

Maximum number of tiles to process
colorspace string <optional>
 'rgb'

Color space for processing
Source:

LayerOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
layout string | Layout <optional>
 'image'

Layout/format of input raster images
type string <optional>

Identifier for specific derived layer class
id string <optional>

Unique layer identifier
label string <optional>

Display label for UI (defaults to id)
transform Transform <optional>

Transform from layer to canvas coordinates
visible boolean <optional>
 true

Whether layer should be rendered
zindex number <optional>
 0

Stack order for rendering (higher = on top)
overlay boolean <optional>
 false

Whether layer renders in overlay mode
prefetchBorder number <optional>
 1

Tile prefetch threshold in tile units
mipmapBias number <optional>
 0.4

Texture resolution selection bias (0=highest, 1=lowest)
shaders Object.<string, Shader> <optional>

Map of available shaders
controllers Array.<Controller> <optional>

Array of active UI controllers
sourceLayer Layer <optional>

Layer to share tiles with
pixelSize number <optional>
 0.0

Physical size of a pixel in mm
Source:

LayerRTIOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
url string

URL to RTI info.json file (required)
layout string

Layout type: 'image', 'deepzoom', 'google', 'iiif', 'zoomify', 'tarzoom', 'itarzoom'
normals boolean <optional>
 false

Whether to load normal maps
server string <optional>

IIP server URL (for IIP layout)
worldRotation number <optional>
 0

Global rotation offset
Source:

LayerSvgAnnotationOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
classes AnnoClasses

Annotation class definitions with styles
onClick function <optional>

Callback for annotation click events (param: selected annotation)
shadow boolean <optional>
 true

Whether to use Shadow DOM for SVG elements
overlayElement HTMLElement <optional>

Container for SVG overlay
style string <optional>

Additional CSS styles for annotations
annotationUpdate function <optional>

Custom update function for annotations
Source:

LayoutOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
width number <optional>

Image width (required for google layout)
height number <optional>

Image height (required for google layout)
suffix string <optional>
 'jpg'

Tile file extension
subdomains string <optional>
 'abc'

Available subdomains for URL templates
Source:

LayoutType

Supported image format types:

  • image: Single-resolution web images (jpg, png, etc.)
  • deepzoom: Microsoft Deep Zoom with root tile > 1px
  • deepzoom1px: Microsoft Deep Zoom with 1px root tile
  • google: Google Maps tiling scheme
  • zoomify: Zoomify format
  • iiif: International Image Interoperability Framework
  • tarzoom: OpenLIME tar-based tiling
  • itarzoom: OpenLIME indexed tar-based tiling
Type:
  • 'image' | 'deepzoom' | 'deepzoom1px' | 'google' | 'zoomify' | 'iiif' | 'tarzoom' | 'itarzoom'
Source:

Menu configuration item

Type:
  • Object
Properties:
Name Type Argument Description
title string <optional>

Large title text
section string <optional>

Section header text
html string <optional>

Raw HTML content
button string <optional>

Button text
group string <optional>

Button group identifier
layer string <optional>

Associated layer ID
mode string <optional>

Layer visualization mode
onclick function <optional>

Click handler
oninput function <optional>

Input handler for sliders
list Array.<MenuEntry> <optional>

Nested menu entries
Source:

Point

Object representation of a 2D point

Type:
  • Object
Properties:
Name Type Description
x number

X coordinate
y number

Y coordinate
Source:

ShaderMultispectralOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
mode string <optional>
 'rgb'

Initial rendering mode ('rgb' or 'single_band')
debug boolean <optional>
 false

Enable debug output in console
wavelength Array.<number> <optional>

Array of wavelengths in nanometers
Source:

SignalHandler

Type:
  • Object
Properties:
Name Type Description
signals Object.<string, Array.<function()>>

Map of event names to arrays of callback functions
allSignals Array.<string>

List of all registered signal names
Source:

SkinIcon

A UI icon element from the skin file

Type:
  • Object
Properties:
Name Type Description
class string

CSS class name (must start with 'openlime-')
element SVGElement

SVG DOM element
Source:

TextToSpeechOptions

Type:
  • Object
Properties:
Name Type Argument Default Description
language string <optional>
 'it-IT'

Language code for speech synthesis (e.g., 'en-US', 'it-IT')
rate number <optional>
 1.0

Speech rate (0.1 to 10)
volume number <optional>
 1.0

Speech volume (0 to 1)
cleanText boolean <optional>
 true

Whether to remove HTML tags and format text
voiceSelected number <optional>
 -1

Index of preferred voice (-1 for auto-selection)
Source:

TileObj

Type:
  • Object
Properties:
Name Type Argument Description
level number

Zoom level in the image pyramid
x number

Horizontal position in tile grid
y number

Vertical position in tile grid
index number

Unique tile identifier
start number <optional>

Starting byte position in dataset (for tar formats)
end number <optional>

Ending byte position in dataset (for tar formats)
missing number

Number of pending channel data requests
tex Array.<WebGLTexture>

Array of textures (one per channel)
time number

Tile creation timestamp for cache management
priority number

Loading priority for cache management
size number

Total tile size in bytes
Source:

TileProperties

Type:
  • Object
Properties:
Name Type Description
index number

Unique identifier for the tile
bbox Array.<number>

Bounding box coordinates [minX, minY, maxX, maxY]
level number

Zoom level in the pyramid (for tiled layouts)
x number

Horizontal grid position
y number

Vertical grid position
w number

Tile width (for image layouts)
h number

Tile height (for image layouts)
start number

Starting byte position in dataset (for tar-based formats)
end number

Ending byte position in dataset (for tar-based formats)
tex Array.<WebGLTexture>

Array of WebGL textures (one per channel)
missing number

Count of pending channel data requests
time number

Creation timestamp for cache management
priority number

Loading priority for cache management
size number

Total size in bytes for cache management
Source:

TransformParameters

Type:
  • Object
Properties:
Name Type Argument Default Description
x number <optional>
 0

X translation component
y number <optional>
 0

Y translation component
a number <optional>
 0

Rotation angle in degrees
z number <optional>
 1

Scale factor
t number <optional>
 0

Timestamp for animations
Source:

UIAction

Action configuration for toolbar buttons

Type:
  • Object
Properties:
Name Type Argument Description
title string

Display title for the action
display boolean

Whether to show in toolbar
key string <optional>

Keyboard shortcut key
task function

Callback function for action
icon string <optional>

Custom SVG icon path or content
html string <optional>

HTML content for help dialog
Source:

ViewerOptions

Configuration options for Viewer initialization

Type:
  • Object
Properties:
Name Type Argument Default Description
background string <optional>

CSS background style
autofit boolean <optional>
 true

Auto-fit camera to scene
canvas Object <optional>
 {}

Canvas configuration options
camera Camera <optional>

Custom camera instance
Source:

Viewport

Defines a rectangular viewing region inside a canvas area.

Type:
  • Object
Properties:
Name Type Description
x number

X-coordinate of the lower-left corner
y number

Y-coordinate of the lower-left corner
dx number

Width of the viewport
dy number

Height of the viewport
w number

Total canvas width
h number

Total canvas height
Source:

Viewport

Type:
  • Object
Properties:
Name Type Description
x number

Viewport x position
y number

Viewport y position
dx number

Viewport horizontal offset
dy number

Viewport vertical offset
w number

Viewport width
h number

Viewport height
Source:

Viewport

Viewport configuration

Type:
  • Object
Properties:
Name Type Description
x number

Left coordinate
y number

Top coordinate
dx number

Width in pixels
dy number

Height in pixels
w number

Total width
h number

Total height
Source:

updatePosition(x, y)

Callback for position updates.

Parameters:
Name Type Description
x number

X coordinate in the range [-1, 1]
y number

Y coordinate in the range [-1, 1]
Source: