pex-gui

GUI controls for the pex library.

Usage

const createContext = require('pex-context')
const createGUI = require('pex-gui')

const State = {
  rotation: 0
}

const ctx = createContext()
const gui = createGUI(ctx)

gui.addParam('Rotation', State, 'rotation', {
  min: -Math.PI / 2,
  max: Math.PI / 2
})

ctx.frame(() => {
  gui.draw()
})

API

GUI

gui = createGUI(ctx [, options])

ctx: Context - gl context from pex-context
options.theme: Object - optional theme customiser object. Colors defined by rgba() strings. See theme file for all options.

const createGUI = require('pex-gui')

const gui = createGUI(ctx)

`gui.draw()`

Renders the GUI. Should be called at the end of the frame.

`gui.addTab(title)`

Add a tab component.

option	info	type
`title`	Control title	String

gui.addTab('Example')

`gui.addColumn(title)`

Add a column component.

option	info	type
`title`	Control title	String

gui.addColumn('Inputs')

`gui.addSeparator()`

Add some breathing space between controls.

gui.addSeparator()

`gui.addParam(title, object, propName, [, opts, onChange])`

option	info	type
`title`	Control title	String
`object`	Source object holding the value	Object
`propName`	Source object property to control	String
`opts.min`	Minimum value	Number
`opts.min`	Maximum value	Number
`onChange(value)`	Callback triggered on change	Function

gui.addParam('Checkbox', State, 'rotate')

gui.addParam('Text message', State, 'text', {}, function(value) {
  console.log(value)
})

gui.addParam('Slider', State, 'range', {
  min: -Math.PI / 2,
  max: Math.PI / 2
})

gui.addParam('Multi Slider', State, 'position', {
  min: 0,
  max: 10
})

gui.addParam('Color [RGBA]', State, 'color')

gui.addParam('Texture', State, 'texture')
gui.addParam('Texture Cube', State, 'textureCube')

`gui.addButton(title, onClick)`

Add a clickable button.

option	info	type
`title`	Control title	String
`onClick`	Callback triggered on click	Function

gui.addButton('Button', () => {
  console.log('Called back')
})

`gui.addRadioList(title, object, index, items, onChange)`

Add a radio list with options.

option	info	type
`title`	Control title	String
`object`	Source object holding the value	Object
`index`	Index of the initial option	Number
`items`	List of options	Array of `{ name: String, value: Int }`
`onChange`	Callback triggered on change	Function

gui.addRadioList(
  'Radio list',
  State,
  'currentRadioListChoice',
  State.radioListChoices
)

`gui.addTexture2D(title, texture)`

Add a texture visualiser (from pex-context).

option	info	type
`title`	Control title	String
`texture`	Texture object	Texture2D

gui.addTexture2D('Single', State.textures[1])

Notes: texture cannot be updated once created.

`gui.addTexture2DList(title, object, index, items, itemsPerRow, onChange)`

Add a texture visualiser for multiple textures (from pex-context).

option	info	type
`title`	Control title	String
`object`	Source object holding the value	Object
`index`	Index of the initial texture	Number
`items`	List of textures	Array of `{ texture: Texture2D, value: Int }`
`itemsPerRow`	Number of items per row	Number (default 4)
`onChange`	Callback triggered on change	Function

gui.addTexture2DList(
  'List',
  State,
  'currentTexture',
  State.textures.map((tex, index) => ({ texture: tex, value: index }))
)

Notes: texture cannot be updated once created.

`gui.addTextureCube(title, texture, options)`

Add a cube texture visualiser (from pex-context).

option	info	type
`title`	Control title	String
`texture`	Texture object	Texture2D
`options.flipEnvMap`	should be 1 for dynamic cubemaps and -1 for cubemaps from file with X axis flipped	Number

gui.addTextureCube('Cube', State.cubeTexture)

Notes: texture cannot be updated once created.

`gui.addFPSMeeter()`

Add a FPS counter.

gui.addFPSMeeter()

`gui.setEnabled(state)`

Enable or disable the gui visibility.

`gui.isEnabled()`

Check if the gui is enabled.

`gui.toggleEnabled()`

Toggle the gui visibility.

`gui.serialize()`

Retrieve a serialized value of the current GUI's state.

`gui.deserialize(data)`

Deserialize a previously serialized data state GUI's state.

`gui.dispose()`

Remove events listeners, empty list of controls and dispose of the gui's resources.

License

MIT, see LICENSE.md for details.