Setting up
The default gui, or your own. Importing devui makes gui, but a GUI does nothing until it's first used: something added or shown, a timeline, load(), linkFile(), persist(id), save() or clearSaved(). Only then does it read what's saved and listen for its hotkey (a command with a key listens as soon as it's added). gui.configure({ autoShow, hotkey, persist }) changes those options (persist before first use), and createGUI(options) makes another GUI with its own. Call configure() before anything that uses gui: a module imported ahead of your entry file that adds a control starts it first.
import { createGUI, gui } from '@haxiomic/devui';
gui.configure({ hotkey: 'g', autoShow: false }); // the default gui, before first use
const tools = createGUI({ title: 'Tools', side: 'left', persist: 'tools' }); // or one of your own| Option | |
|---|---|
persist | Where values and layout are saved: an id (default location.pathname), false for nowhere, or { id, values, layout } (see Saving and loading) |
autoShow | Show the panel when the first control is added (default true) |
hotkey | The key that shows and hides the panel (default h, null for none) |
title | The panel's title (default devui) |
side | The side it docks to at first, 'right' (default) or 'left' |
container | The element the panel's host goes in (default document.body) |
theme, labelWidth | Its colours and label column (see Themes) |
compareKey | The key held for A/B (default `, null for none) |
extensions | Extensions to use from the start, as gui.use() does |
gesture | The scrub gesture's constants: thresholds, the edge lock, the long-press time, gearing |
hdr | HDR in the panel (the texture inspector's HDR view, HDR colours' swatches): 'auto' (on HDR displays, following the window, the default), 'force' or 'off' |
The panel: gui.show() (it loads the first time), gui.hide(), gui.toggle(), gui.show(visible); await gui.ready() waits until it's mounted; gui.dispose() takes it all away. gui.hide({ remember: false }) hides it without keeping it hidden on the next load.
Events: gui.on(name, fn) returns a function that removes it.
| Event | When |
|---|---|
change | A value changed: { path, control, value, source, transient } (transient while a drag is still going) |
finish | A change finished: the end of a drag, an edit, a preset |
press | A button was pressed |
command | A command ran, from the palette, a hotkey or code |
visibility | The panel showed or hid |
compare | A/B started or ended, or A changed |
file | The linked values file's status changed |
theme | The panel's theme changed |
insets | What windows docked full length along the edges cover changed (see Windows) |
frame | You called gui.update() after rendering, which lets texture views copy from the frame you just drew |