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

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: