Class GUI

Core class for the canvasGUI library

Use an instance of GUI (the controller) to control all aspects of your gui.

Create the UI controls e.g. buttons, sliders
Provides 7 color schemes for the controls

Hierarchy

Properties

`Static` `Private` _announced

_announced: boolean = false

`Static` `Private` _guis

_guis: {} = {}

Type declaration

Methods

$

$(name: string | CvsBaseControl): CvsBaseControl
Get the control given it's unique name.

Returns
get the associated control
Parameters
- name: string | CvsBaseControl
  
  control's unique name for this control
Returns CvsBaseControl
- Defined in index.ts:431

`Private` _addKeyEventHandlers

_addKeyEventHandlers(): void
Returns void
- Defined in index.ts:349

`Private` _addMouseEventHandlers

_addMouseEventHandlers(): void
Returns void
- Defined in index.ts:334

`Private` _handleFocusEvents

_handleFocusEvents(e: FocusEvent): void
Parameters
- e: FocusEvent
Returns void
- Defined in index.ts:359

`Private` _initColorSchemes

_initColorSchemes(): void
Returns void
- Defined in index.ts:671

`Private` _selectDrawMethod

_selectDrawMethod(): void
Returns void
- Defined in index.ts:419

addControl

addControl(control: any): any
Adds a child control to this one.

Returns
the control just added
Parameters
- control: any
  
  the child control to add
Returns any
- Defined in index.ts:440

addScheme

addScheme(schemename: string, scheme: __Scheme): GUI
Adds a new color scheme to those already available. It does not replace an existing scheme.

Returns
this gui instance
Parameters
- schemename: string
  
  the name of the color schmem
- scheme: __Scheme
  
  the color scheme
Returns GUI
- Defined in index.ts:727

button

button(name: string, x?: number, y?: number, w?: number, h?: number): any
Create a button control

Returns
a button
Parameters
- name: string
  
  unique name for this control
- Optional x: number
  
  left-hand pixel position
- Optional y: number
  
  top pixel position
- Optional w: number
  
  width
- Optional h: number
  
  height
Returns any
- Defined in index.ts:130

canvasHeight

canvasHeight(): any
Get the height of the HTML canvas tag

Returns
the height of the canvas

Returns any
- Defined in index.ts:516

canvasWidth

canvasWidth(): any
Get the width of the HTML canvas tag

Returns
the width of the canvas

Returns any
- Defined in index.ts:508

checkbox

checkbox(name: string, x: number, y: number, w: number, h: number): any
Create a checkbox control

Returns
a checkbox
Parameters
- name: string
  
  unique name for this control
- x: number
  
  left-hand pixel position
- y: number
  
  top pixel position
- w: number
  
  width
- h: number
  
  height
Returns any
- Defined in index.ts:157

corners

corners(c?: number[]): number[]
Set or get the corner radii used for the controls

Returns
an array with the 4 corner radii
Parameters
- Optional c: number[]
  
  an array of 4 corner radii
Returns number[]
- Defined in index.ts:525

disable

disable(): GUI
Disable mouse/key event handling for this gui

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:293

enable

enable(): GUI
Enable mouse/key event handling for this gui

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:283

hide

hide(): GUI
Do not render any controls for this gui

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:265

hidePanes

hidePanes(): void
Hide all side panes. This will also close any pane that is open. Replaces hideAll

Since
0.9.3

Returns void
- Defined in index.ts:563

is3D

is3D(): boolean
Is this a 3D renderer?

Returns
true for WEBGL and false for P2D

Returns boolean
- Defined in index.ts:543

isEnabled

isEnabled(): boolean
Returns
true if this gui can respond to mouse/key events

Since
0.9.3

Returns boolean
- Defined in index.ts:302

isVisible

isVisible(): boolean
Returns
true if gui rendering is allowed

Returns
this gui

Since
0.9.3

Returns boolean
- Defined in index.ts:274

label

label(name: string, x: number, y: number, w: number, h: number): any
Create a label control

Returns
a label
Parameters
- name: string
  
  unique name for this control
- x: number
  
  left-hand pixel position
- y: number
  
  top pixel position
- w: number
  
  width
- h: number
  
  height
Returns any
- Defined in index.ts:183

option

option(name: string, x: number, y: number, w: number, h: number): any
Create an option (radio button) control

Returns
an option button
Parameters
- name: string
- x: number
  
  left-hand pixel position
- y: number
  
  top pixel position
- w: number
  
  width
- h: number
  
  height
Returns any
- Defined in index.ts:170

pane

pane(name: string, location: string, depth: number): CvsPane
Create a side pane. The pane location is either 'north', 'south', 'east' or 'west'.

The pane will fill the whole width/height of the canvas depending on its position. The user controls how far the pane extends into the canvas when open.

Returns
a side pane
Parameters
- name: string
  
  unique name for this control
- location: string
  
  the pane position ('north', 'south', 'east' or 'west')
- depth: number
  
  the maximum depth the pane expands into the canvas
Returns CvsPane
- Defined in index.ts:235

ranger

ranger(name: string, x: number, y: number, w: number, h: number): any
Create a ranger control

Returns
ranger control
Parameters
- name: string
  
  unique name for this control
- x: number
  
  left-hand pixel position
- y: number
  
  top pixel position
- w: number
  
  width
- h: number
  
  height
Returns any
- Defined in index.ts:117

scheme

scheme(schemename?: string): GUI | __Scheme
Set or get an existing global color scheme.

Returns
this gui instance
Parameters
- Optional schemename: string
  
  color scheme to set
Returns GUI | __Scheme
- Defined in index.ts:688

show

show(): GUI
Render any controls for this gui

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:255

showPanes

showPanes(): void
Show all pane tabs. All panes will be shown closed. Replaces showAll

Since
0.9.3

Returns void
- Defined in index.ts:576

slider

slider(name: string, x: number, y: number, w: number, h: number): any
Create a slider control

Returns
slider control
Parameters
- name: string
  
  unique name for this control
- x: number
  
  left-hand pixel position
- y: number
  
  top pixel position
- w: number
  
  width
- h: number
  
  height
Returns any
- Defined in index.ts:104

startEventHandling

startEventHandling(): void
Start handling mouse and key events

Since
0.9.4

Returns void
- Defined in index.ts:318

stopEventHandling

stopEventHandling(): void
Stop handling mouse and key events

Since
0.9.4

Returns void
- Defined in index.ts:310

textSize(gts?: number): number | GUI
Sets or gets the global text size.

If no parameter is passed then the global text size is returned otherwise it returns this control.

Returns
the global text size or this control
Parameters
- Optional gts: number
  
  new global text size
Returns number | GUI
- Defined in index.ts:480

textfield

textfield(name: string, x?: number, y?: number, w?: number, h?: number): any
Create a single line text input control

Returns
a textfield
Parameters
- name: string
  
  unique name for this control
- Optional x: number
  
  left-hand pixel position
- Optional y: number
  
  top pixel position
- Optional w: number
  
  width
- Optional h: number
  
  height
Returns any
- Defined in index.ts:143

tipTextSize

tipTextSize(gtts?: number): number | GUI
Sets or gets the global tip text size. If no parameter is passed then the global tip text size is returned otherwise it returns this control

Returns
the global tip text size or this control
Parameters
- Optional gtts: number
  
  new global tip text size
Returns number | GUI
- Defined in index.ts:497

viewer

viewer(name: string, x: number, y: number, w: number, h: number): any
Create a viewer

Returns
an image viewer
Parameters
- name: string
  
  unique name for this control
- x: number
  
  left-hand pixel position
- y: number
  
  top pixel position
- w: number
  
  width
- h: number
  
  height
Returns any
- Defined in index.ts:210

`Static` get

get(p5c: Renderer, p?: p5): any
Creates and returns a GUI controller for a given canvas element.

Returns
a GUI controller
Parameters
- p5c: Renderer
- p: p5 = p5.instance
Returns any
- Defined in index.ts:813

`Static` getNamed

getNamed(name: any, p5c: Renderer, p?: p5): any
Creates and returns a named GUI controller.

Added in V0.9.4

Returns
a GUI controller
Parameters
- name: any
  
  unique name for the gui
- p5c: Renderer
- p: p5 = p5.instance
Returns any
- Defined in index.ts:830

Class GUI

Hierarchy

Index

Properties

Methods

Properties

Static Private _announced

Static Private _guis

Type declaration

Methods

$

Returns

Parameters

name: string | CvsBaseControl

Returns CvsBaseControl

Private _addKeyEventHandlers

Returns void

Private _addMouseEventHandlers

Returns void

Private _handleFocusEvents

Parameters

e: FocusEvent

Returns void

Private _initColorSchemes

Returns void

Private _selectDrawMethod

Returns void

addControl

Returns

Parameters

control: any

Returns any

addScheme

Returns

Parameters

schemename: string

scheme: __Scheme

Returns GUI

button

Returns

Parameters

name: string

Optional x: number

Optional y: number

Optional w: number

Optional h: number

Returns any

canvasHeight

Returns

Returns any

canvasWidth

Returns

Returns any

checkbox

Returns

Parameters

name: string

x: number

y: number

w: number

h: number

Returns any

corners

Returns

Parameters

Optional c: number[]

Returns number[]

disable

Returns

Since

Returns GUI

enable

Returns

Since

Returns GUI

hide

Returns

Since

Returns GUI

hidePanes

`Static` `Private` _announced

`Static` `Private` _guis

`Private` _addKeyEventHandlers

`Private` _addMouseEventHandlers

`Private` _handleFocusEvents

`Private` _initColorSchemes

`Private` _selectDrawMethod

`Optional` x: number

`Optional` y: number

`Optional` w: number

`Optional` h: number

`Optional` c: number[]

`Optional` schemename: string