new Viewer(div [, options])
Creates a new Viewer instance
Parameters:
Name | Type | Argument | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
div |
HTMLElement | string | Container element or selector |
|||||||||||
options |
ViewerOptions |
<optional> |
Configuration options Properties
|
Fires:
Throws:
-
If container element not found
Component Setup:
- Creates/configures canvas element
- Sets up overlay system
- Initializes camera
- Creates pointer manager
- Sets up resize observer
- Type
- Error
Example
```javascript // Basic viewer setup const viewer = new OpenLIME.Viewer('#container'); // Add image layer const layer = new OpenLIME.Layer({ layout: 'image', type: 'image', url: 'image.jpg' }); viewer.addLayer('main', layer); // Access components const camera = viewer.camera; const canvas = viewer.canvas; ```
Methods
-
addController(controller)
-
Adds a device event controller to the viewer.
Parameters:
Name Type Description controller
Controller An OpenLIME controller.
-
addLayer(id, layer)
-
Adds layer to viewer
Parameters:
Name Type Description id
string Unique layer identifier
layer
Layer Layer instance
Fires:
Example
```javascript const layer = new OpenLIME.Layer({ type: 'image', url: 'image.jpg' }); viewer.addLayer('background', layer); ```
-
redraw()
-
Schedules next frame for rendering Uses requestAnimationFrame for optimal performance
-
removeLayer(layer)
-
Removes layer from viewer
Parameters:
Name Type Description layer
Layer | string Layer instance or ID
Fires:
-
setSplitViewport(enabled, leftLayerIds, rightLayerIds)
-
Enables or disables split viewport mode and sets which layers appear on each side
Parameters:
Name Type Description enabled
boolean Whether split viewport mode is enabled
leftLayerIds
Array.<string> Array of layer IDs to show on left side
rightLayerIds
Array.<string> Array of layer IDs to show on right side
Fires: