Class Dmd

constructor

• new Dmd(canvas, options): Dmd

• Parameters

  • canvas: HTMLCanvasElement
  • options: DmdOptions

  Returns Dmd

Static Readonly version

layerIds

• get layerIds(): string[]

• Ids of the top-level layers in rendering order (index 0 = bottom-most). An id's index here is the index moveLayer() expects for that position.

  Returns string[]

brightness

• get brightness(): number

• Get Dmd brightness

  Returns number

dotShape

• get dotShape(): DotShape

• Get current dot shape

  Returns DotShape

dotSize

• get dotSize(): number

• Get current dot size

  Returns number

dotSpace

• get dotSpace(): number

• Get current dot spacing

  Returns number

minDotSpace

• get minDotSpace(): number

• Get minimum dot spacing for the current shape

  Returns number

bgHSP

• get bgHSP(): number

• Perceptual brightness (HSP) of the off-dot background color.

  Returns number

bgBrightness

• get bgBrightness(): number

• Raw brightness value of the off-dot background (0–255).

  Returns number

offDotColor

• get offDotColor(): {
      r: number;
      g: number;
      b: number;
  }

• Get the current off-dot color (RGB, each component 0–1).

  Returns {
      r: number;
      g: number;
      b: number;
  }

  • r: number

  • g: number

  • b: number

monochrome

• get monochrome(): boolean

• Get current monochrome mode state.

  Returns boolean

monochromeColor

• get monochromeColor(): {
      r: number;
      g: number;
      b: number;
  }

• Get the current monochrome tint color.

  Returns {
      r: number;
      g: number;
      b: number;
  }

  • r: number

  • g: number

  • b: number

monoLevels

• get monoLevels(): number

• Returns number

visibleDotsX

• get visibleDotsX(): number

• Get the number of visible dots horizontally at the current dot size.

  Returns number

visibleDotsY

• get visibleDotsY(): number

• Get the number of visible dots vertically at the current dot size.

  Returns number

version

• get version(): string

• Get the H5DMD library version (delegates to the static Dmd.version).

  Returns string

canvas

• get canvas(): HTMLCanvasElement

• Get canvas

  Returns HTMLCanvasElement

context

• get context(): GPUCanvasContext

• Get WebGPU canvas context (available after init)

  Returns GPUCanvasContext

width

• get width(): number

• Return width of the DND (dots)

  Returns number

height

• get height(): number

• Return height of the DND (dots)

  Returns number

screenWidth

• get screenWidth(): number

• Return width of the canvas (pixels)

  Returns number

screenHeight

• get screenHeight(): number

• Return height of the canvas (pixels)

  Returns number

fps

• get fps(): number

• Get current fps value

  Returns number

showFPS

• get showFPS(): boolean

• Show or hide the FPS overlay at runtime.

  Returns boolean
• set showFPS(visible): void

• Parameters

  • visible: boolean

  Returns void

init

• init(): Promise<void>

• Init Dmd renderer

  Returns Promise<void>

  Promise

run

• run(): void

• Start rendering layers

  Returns void

stop

• stop(): void

• Stop Dmd rendering

  Returns void

fadeOut

• fadeOut(duration): Promise<void>

• Fade dmd brightness out

  Parameters

  • duration: number

    in ms

  Returns Promise<void>

fadeIn

• fadeIn(duration): Promise<void>

• Fade Dmd brightness in

  Parameters

  • duration: number

    in ms

  Returns Promise<void>

setBrightness

• setBrightness(b): void

• Set Dmd opacity between 0 and 255

  Parameters

  • b: number

  Returns void

addLayerGroup

• addLayerGroup(id, options?): LayerGroup

• Add a LayerGroup to the DMD. The dedicated entry point for groups: a group has no content of its own, so it takes none of the loaded/updated/playback listeners leaf layers accept - those slots are internal plumbing a group uses to stay in sync with its children.

  Parameters

  • id: string
  • Optional options: Options<OptionsObject> | Partial<BaseLayerOptions>

    group options (dimensions, position, background, renderers, ...)

  Returns LayerGroup

addLayer

• addLayer(layerClass, id, options?, layerLoadedListener?, layerUpdatedListener?): LayerGroup

• Parameters

  • layerClass: typeof LayerGroup
  • id: string
  • Optional options: Options<OptionsObject> | Partial<BaseLayerOptions>
  • Optional layerLoadedListener: ((layer) => void | Promise<void>)
    • • (layer): void | Promise<void>

      • Parameters

        • layer: LayerGroup

        Returns void | Promise<void>

  • Optional layerUpdatedListener: ((layer) => void | Promise<void>)
    • • (layer): void | Promise<void>

      • Parameters

        • layer: LayerGroup

        Returns void | Promise<void>

  Returns LayerGroup

  Deprecated

  Adding a LayerGroup through addLayer is deprecated and will be removed in the next major version - use addLayerGroup instead.

• addLayer<T>(layerClass, id, options?, layerLoadedListener?, layerUpdatedListener?, layerOnPlayListener?, layerOnPauseListener?, layerOnStopListener?): T

• Add a new layer to the Dmd. The layer is created and added to the internal layers dictionary, and its position in the rendering order is determined by its zIndex (or the order of addition if zIndex is not specified).

  Type Parameters

  • T extends BaseLayer

  Parameters

  • layerClass: (new (...args) => T)

    concrete BaseLayer subclass to instantiate

    • • new (...args): T

      • Parameters

        • Rest ...args: never[]

        Returns T

  • id: string

    unique layer id within the Dmd
  • Optional options: LayerOptionsByInstance<T>

    layer options (dimensions, position, class-specific settings, ...)
  • Optional layerLoadedListener: ((layer) => void | Promise<void>)

    called once the layer's content is loaded

    • • (layer): void | Promise<void>

      • Parameters

        • layer: T

        Returns void | Promise<void>

  • Optional layerUpdatedListener: ((layer) => void | Promise<void>)

    called whenever the layer redraws its content

    • • (layer): void | Promise<void>

      • Parameters

        • layer: T

        Returns void | Promise<void>

  • Optional layerOnPlayListener: LayerPlayListenerByInstance<T>

    video/animation layers only: called on play
  • Optional layerOnPauseListener: LayerPlayListenerByInstance<T>

    video/animation layers only: called on pause
  • Optional layerOnStopListener: LayerStopListenerByInstance<T>

    animation layers only: called on stop

  Returns T

  the created layer instance

removeLayer

• removeLayer(id): void

• Remove specified layer

  Parameters

  • id: string

  Returns void

moveLayer

• moveLayer(id, toIndex): void

• Move a layer to a new position in the rendering order.

  Parameters

  • id: string

    layer id to move
  • toIndex: number

    target index in the sorted array (0 = bottom)

  Returns void

setLayerVisibility

• setLayerVisibility(id, state): void

• Show/Hide specified layer

  Parameters

  • id: string
  • state: boolean

  Returns void

fadeLayerIn

• fadeLayerIn(id, duration, easing?): Promise<void>

• Fade a layer in (opacity 0 → 1). Makes the layer visible if it isn't already.

  Parameters

  • id: string

    layer id
  • duration: number

    fade duration in ms
  • Optional easing: EasingFunction

    easing function (defaults to easeOutSine)

  Returns Promise<void>

fadeLayerOut

• fadeLayerOut(id, duration, easing?): Promise<void>

• Fade a layer out (opacity → 0) then hide it.

  Parameters

  • id: string

    layer id
  • duration: number

    fade duration in ms
  • Optional easing: EasingFunction

    easing function (defaults to easeOutSine)

  Returns Promise<void>

addRenderer

• addRenderer(id, renderer): void

• Add a renderer instance to the Dmd TODO : Check if really a renderer class

  Parameters

  • id: string

    (unique)
  • renderer: LayerRenderer<never>

  Returns void

reset

• reset(): void

• Reset Dmd

  Returns void

debug

• debug(): void

• Output some info in the console

  Returns void

getLayer

• getLayer(name): BaseLayer

• Get specified layer

  Parameters

  • name: string

  Returns BaseLayer

  BaseLayer

setDotShape

• setDotShape(shape): void

• Change the dot shape at runtime.

  Parameters

  • shape: DotShape

  Returns void

setDotSize

• setDotSize(size): void

• Change the dot size at runtime. Content is rescaled to fill the canvas.

  Parameters

  • size: number

  Returns void

setDotSpace

• setDotSpace(space): void

• Change the dot spacing at runtime.

  Parameters

  • space: number

  Returns void

setOffDotColor

• setOffDotColor(r, g, b): void

• Set the off-dot color (RGB, each component 0–1).

  Parameters

  • r: number
  • g: number
  • b: number

  Returns void

setMonochrome

• setMonochrome(enabled): void

• Enable or disable monochrome mode (16 brightness levels, single tint color).

  Parameters

  • enabled: boolean

  Returns void

setMonochromeColor

• setMonochromeColor(r, g, b): void

• Set the monochrome tint color (RGB, each component 0–1).

  Parameters

  • r: number

    Red component (0–1)
  • g: number

    Green component (0–1)
  • b: number

    Blue component (0–1)

  Returns void

setMonoLevels

• setMonoLevels(levels): void

• Set the number of monochrome brightness levels.

  Parameters

  • levels: number

    — one of 4, 6, 8, 10, 12, 14, 16

  Returns void