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: Map<any, any> = ...

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:481

`Private` _addKeyEventHandlers

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

`Private` _addMouseEventHandlers

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

_addTouchEventHandlers

_addTouchEventHandlers(): void
Returns void
- Defined in index.ts:371

`Private` _handleFocusEvents

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

`Private` _initColorSchemes

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

`Private` _selectDrawMethod

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

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:490

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:778

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:132

canvasHeight

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

Returns
the height of the canvas

Returns any
- Defined in index.ts:566

canvasWidth

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

Returns
the width of the canvas

Returns any
- Defined in index.ts:558

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:159

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:575

disable

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

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:306

enable

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

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:296

hide

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

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:278

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:614

is3D

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

Returns
true for WEBGL and false for P2D

Returns boolean
- Defined in index.ts:593

isEnabled

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

Since
0.9.3

Returns boolean
- Defined in index.ts:315

isVisible

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

Returns
this gui

Since
0.9.3

Returns boolean
- Defined in index.ts:287

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:185

name

name(): string
Returns the name of this GUI. If the GUI is not named then the returned value is undefined.

Returns
the name of this gui or undefined

Returns string
- Defined in index.ts:259

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:172

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:237

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:119

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:739

show

show(): GUI
Render any controls for this gui

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:268

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:627

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:106

startEventHandling

startEventHandling(): void
Start handling mouse and key events

Since
0.9.4

Returns void
- Defined in index.ts:331

stopEventHandling

stopEventHandling(): void
Stop handling mouse and key events

Since
0.9.4

Returns void
- Defined in index.ts:323

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:530

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:145

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:547

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:212

`Static` find

find(key: any): any
Returns a previously created GUI controller for a given canvas or name.

Returns
a matching GUI controller or undefined if not found
Parameters
- key: any
  
  associated canvas or GUI name
Returns any
- Defined in index.ts:910

`Static` get

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

If a GUI has already been created for this canvas it will be returned, otherwise a new GUI will be created and returned

A canvas can have more than one GUI associated with it but in that case each GUI must have a unique name.

Returns
a GUI controller
Parameters
- p5c: Renderer
  
  the renderer - the display canvas
- p: p5 = p5.instance
  
  the processing instance (required in Instance mode)
Returns any
- Defined in index.ts:870

`Static` getNamed

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

If an exisiting GUI has the same name it will be returned, otherwise a new GUI will be created and returned

If the name parameter is not of type 'string' or an empty string then the returned value is undefined.

Returns
a GUI controller if valid name provided
Parameters
- name: any
  
  unique name for the GUI
- p5c: Renderer
  
  the renderer - the display canvas
- p: p5 = p5.instance
  
  the processing instance (required in Instance mode)
Returns any
- Defined in index.ts:891

Class GUI

Hierarchy

Index

Properties

Methods

Properties

Static Private _announced

Static Private _guis

Methods

$

Returns

Parameters

name: string | CvsBaseControl

Returns CvsBaseControl

Private _addKeyEventHandlers

Returns void

Private _addMouseEventHandlers

Returns void

_addTouchEventHandlers

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

`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