OpenLIME

Class: UIBasic

UIBasic

UIBasic implements a complete user interface for OpenLIME viewers. Provides toolbar controls, layer management, and interactive features.

Core Features:

  • Customizable toolbar
  • Layer management
  • Light direction control
  • Camera controls
  • Keyboard shortcuts
  • Scale bar
  • Measurement tools

Built-in Actions:

  • home: Reset camera view
  • fullscreen: Toggle fullscreen mode
  • layers: Show/hide layer menu
  • zoomin/zoomout: Camera zoom controls
  • rotate: Rotate view
  • light: Light direction control
  • ruler: Distance measurement
  • help: Show help dialog
  • snapshot: Save view as image

Implementation Details

Layer Management:

  • Layers can be toggled individually
  • Layer visibility affects associated controllers
  • Overlay layers behave independently
  • Layer state is reflected in menu UI

Mouse/Touch Interaction:

  • Uses PointerManager for event handling
  • Supports multi-touch gestures
  • Handles drag operations for light control
  • Manages tool state transitions

Menu System:

  • Hierarchical structure
  • Dynamic updates based on state
  • Group-based selection
  • Mode-specific entries

Controller Integration:

  • Light direction controller
  • Pan/zoom controller
  • Measurement controller
  • Priority-based event handling

Dialog System:

  • Modal blocking of underlying UI
  • Non-modal floating windows
  • Content injection system
  • Event-based communication

Skin System:

  • SVG-based icons
  • Dynamic loading
  • CSS customization
  • Responsive layout

Keyboard Support:

  • Configurable shortcuts
  • Action mapping
  • Mode-specific keys
  • Focus handling

See the complete example in: GitHub ui-custom example

new UIBasic(viewer [, options])

Creates a new UIBasic instance

Parameters:
Name Type Argument Description
viewer Viewer

OpenLIME viewer instance
options UIBasic~Options <optional>

Configuration options
Source:
Fires:
  • UIBasic#event:lightdirection
Example
```javascript
const ui = new UIBasic(viewer, {
    // Enable specific actions
    actions: {
        light: { display: true },
        zoomin: { display: true },
        layers: { display: true }
    },
    // Add measurement support
    pixelSize: 0.1,
    // Add attribution
    attribution: "© Example Source"
});
```

Methods

addUniformUI(layer, originalUniformName, uiName, uiType, uiMinDisplayed, uiMaxDisplayed, uiMin, uiMax, uiNStepDisplayed)

Adds a UI control for a shader uniform

Parameters:
Name Type Default Description
layer Layer

Layer containing the shader
originalUniformName string

Original name of the uniform in shader or filter
uiName string

Display name for the UI
uiType string

Control type ('checkbox'|'line-edit'|'slider')
uiMinDisplayed number 0

Minimum displayed value (for slider/line-edit)
uiMaxDisplayed number 100

Maximum displayed value (for slider/line-edit)
uiMin number 0

Minimum actual uniform value
uiMax number 1

Maximum actual uniform value
uiNStepDisplayed number 100

Number of steps for slider (granularity control)
Source:
Returns:

Whether the uniform was found and UI created

Type
boolean

setLayer(layer_on)

Sets active layer and updates UI

Parameters:
Name Type Description
layer_on Layer | string

Layer or layer ID to activate
Source:

showOverlayMessage(msg [, duration])

Shows overlay message

Parameters:
Name Type Argument Default Description
msg string

Message to display
duration number <optional>
 2000

Display duration in ms
Source: