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

`Private` _addKeyEventHandlers

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

`Private` _addMouseEventHandlers

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

_addTouchEventHandlers

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

`Private` _handleFocusEvents

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

`Private` _initColorSchemes

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

`Private` _selectDrawMethod

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

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

addScheme

addScheme(schemename: string, scheme: any): any
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 scheme
- scheme: any
  
  the color scheme
Returns any
- Defined in index.ts:813

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

canvasHeight

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

Returns
the height of the canvas

Returns any
- Defined in index.ts:599

canvasWidth

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

Returns
the width of the canvas

Returns any
- Defined in index.ts:591

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

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

disable

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

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:339

enable

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

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:329

grid

grid(x: number, y: number, w: number, h: number): GridLayout
Get a grid layout for a given pixel position and size in the display area. Initially the grid repreents a single cell but the number and size of horizontal and vertical cells should be set before creating the controls.

Since
1.1.0

Returns
the grid layout
Parameters
- x: number
  
  left edge position
- y: number
  
  top edge position
- w: number
  
  grid width
- h: number
  
  grid height
Returns GridLayout
- Defined in index.ts:278

hide

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

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:311

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

is3D

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

Returns
true for WEBGL and false for P2D

Returns boolean
- Defined in index.ts:626

isEnabled

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

Since
0.9.3

Returns boolean
- Defined in index.ts:348

isVisible

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

Returns
this gui

Since
0.9.3

Returns boolean
- Defined in index.ts:320

joystick

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

Returns
a joystick 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:203

knob

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

Returns
a joystick 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:216

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

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

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

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

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

scheme

scheme(schemename?: string): any
Set or get an existing global color scheme.

Returns
this gui instance
Parameters
- Optional schemename: string
  
  color scheme to set
Returns any
- Defined in index.ts:774

show

show(): GUI
Render any controls for this gui

Returns
this gui

Since
0.9.3

Returns GUI
- Defined in index.ts:301

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

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

startEventHandling

startEventHandling(): void
Start handling mouse and key events

Since
0.9.4

Returns void
- Defined in index.ts:364

stopEventHandling

stopEventHandling(): void
Stop handling mouse and key events

Since
0.9.4

Returns void
- Defined in index.ts:356

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

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

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

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

`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:945

`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:905

`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:926

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

Returns any

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

grid

Since

Returns

Parameters

`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[]