Namespace: Tutorials

USER_INTERFACE.Tutorials

Methods
Tutorial system
Source:

Methods

(static) _isMobile()

Tutorials don't lay out reliably below the same threshold the MobileBottomBar / collapsed AppBar swap kicks in at — when the viewport is mobile-shaped, the launcher shows an info notice instead of cards and `run` short-circuits with a toast. The gate reads the SAME knob the rest of the mobile UI uses, so a session that bumps `maxMobileWidthPx` also moves the tutorial gate in lock-step.
Source:

(static) add(plugidId, name, description, icon, steps, prerequisitesopt)

Register a tutorial in the UI.TutorialsModal launcher. Tutorials are driven by EnjoyHint under the hood — each step is an object whose **single** primary key is a jQuery selector string prefixed with an action verb (`" "`), and whose value is the descriptive text shown next to the highlighted element. See `src/TUTORIALS.md` for the selector cookbook (including the `[id$="-…"]` viewer-agnostic pattern) and the full step grammar.
Parameters:
Name Type Attributes Description
plugidId string owner id; pass `""` for core. Used to tag the tutorial card with the plugin name + a CSS hook `${plugidId}-plugin-root` for scoped styling.
name string short title shown on the tutorial card.
description string one-line summary on the card.
icon string Phosphor icon class (e.g. `"ph-compass"`) or a legacy Font Awesome class (`"fa-school"`). New code should prefer Phosphor. Defaults to `"fa-school"`.
steps Array.<Object> ordered step list. Each step has the shape `{ " ": "", runIf?: () => boolean }`. Supported actions: `next` (advance via the EnjoyHint NEXT button) and `click` (advance when the user actually clicks the selector — useful for opening a panel as part of the walk). Steps whose `runIf` returns false at run time are silently skipped. Step text is HTML-capable (the same sanitiser allowlist as `extra-tutorials` applies in xOpat builds that sanitise external input).
prerequisites function <optional>
 optional function executed when the tutorial actually starts (after the user clicks the card) — use it to put the UI into a known state (e.g. close floating panels) before EnjoyHint takes over.
Source:
Example
USER_INTERFACE.Tutorials.add(
  "",
  $.t('tutorials.basic.title'),
  $.t('tutorials.basic.description'),
  "ph-compass",
  [
    { 'next #viewer-container': $.t('tutorials.basic.viewer') },
    { 'click [id$="-right-menu-menu-b-opened-shaders"]': $.t('tutorials.basic.openLayers'),
      runIf: () => APPLICATION_CONTEXT.config.visualizations.length > 0 },
  ]
);

(static) hide()

Hide Tutorials
Source:

(static) run(ctx)

Run tutorial
Parameters:
Name Type Description
ctx number | Array index to the attached tutorials list (internal use) or tutorials data see add(..) steps parameter
Source:

(static) show(title, description)

Open the tutorials selection screen
Parameters:
Name Type Description
title string title to show
description string subtitle to show
Source: