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 9 color schemes for the controls

Hierarchy

Index

Properties

VERSION

Accessors

isEnabled isVisible

Properties

`Static` VERSION

VERSION: string = '!!VERSION!!'

canvasGUI version

Accessors

isEnabled

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

Returns boolean
- Defined in index.ts:504

isVisible

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

Returns boolean
- Defined in index.ts:509

Methods

$

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

Returns
get the associated control
Parameters
- id: string | CvsBaseControl
  
  unique ID for the control to find
Returns CvsBaseControl
- Defined in index.ts:728

addScheme

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

Returns
this gui instance
Parameters
- scheme: ColorScheme
  
  the color scheme
Returns GUI
- Defined in index.ts:1195

button

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

Returns
a button
Parameters
- id: string
  
  unique id 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:339

canvasHeight

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

Returns
the height of the canvas

Returns any
- Defined in index.ts:951

canvasWidth

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

Returns
the width of the canvas

Returns any
- Defined in index.ts:943

checkbox

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

Returns
a checkbox
Parameters
- id: string
  
  unique id 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:366

corners

corners(...c: any): number[] | GUI
Get or set the default corner radii used in this GUI.

To set the radii the parameters must be one of the following
- an array of 4 numbers.
- a comma seperated list of 4 numbers.
- a single number to be used for all 4 radii.
If no parameter is passed or does not match one of the above then an array of the currently used radii values.

Returns
an array of the currently used radii values
Parameters
- Rest ...c: any
  
  valid radii combination
Returns number[] | GUI
- Defined in index.ts:969

createScheme

createScheme(destName: string, srcName: string): ColorScheme
This will create a new color scheme from an existing one. The returned scheme is a deep-copy of the source scheme and should be edited before adding it to the GUI with the addScheme(...) method. The name of the new scheme is specified in the first parameter and cannot be changed later.

The method will fail if -
- either parameter is not a string of length >0, or
- destination and source names are equal (case insensitve comparison), or
- the source scheme does not exist.
Returns
the new color scheme or null if unable to create it.
Parameters
- destName: string
  
  a unique name for the new color scheme.
- srcName: string
  
  the name of the source scheme.
Returns ColorScheme
- Defined in index.ts:1171

disable

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

Returns
this gui

Returns GUI
- Defined in index.ts:566

enable

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

Returns
this gui

Returns GUI
- Defined in index.ts:557

getPicked

getPicked(x: number, y: number): { control: any; part: number }
If the [x, y] display position is over a controls pick region then return an object containing the 'control' and the pick region ('part') number.

Returns
an object containing the control hit and the control part number
Parameters
- x: number
  
  horizontal pixel location
- y: number
  
  vertical pixel location
Returns { control: any; part: number }
- control: any
- part: number
- Defined in index.ts:1262

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.

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

hide

hide(): GUI
Hides all the controls for this gui

Returns
this gui

Returns GUI
- Defined in index.ts:548

hidePanes

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

Returns void
- Defined in index.ts:1010

joystick

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

Returns
a joystick control
Parameters
- id: string
  
  unique id 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:431

knob

knob(id: string, x: number, y: number, w: number, h: number): any
Create a knob control

Returns
a knob control
Parameters
- id: string
  
  unique id 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:444

label

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

Returns
a label
Parameters
- id: string
  
  unique id 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:392

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

option

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

Returns
an option button
Parameters
- id: string
  
  unique id 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:379

pane

pane(id: 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
- id: string
  
  unique id 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:484

panel

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

Returns
a label
Parameters
- id: string
  
  unique id 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:405

ranger

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

Returns
ranger control
Parameters
- id: string
  
  unique id 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:326

scheme

scheme(csName?: string): any
Set or get the existing global color scheme.

Returns
this gui instance
Parameters
- Optional csName: string
  
  name of the color scheme to set
Returns any
- Defined in index.ts:1122

show

show(): GUI
Render any controls for this gui

Returns
this gui

Returns GUI
- Defined in index.ts:539

showBuffer

showBuffer(cvsID: string, bfr?: Renderer): void
Display the control pick buffer in a canvas element with the given id. If there is no HTML element with this id or if it is not a canvas element a new canvas element will be created and appended to the body section.

Every control that can respond to mouse, touch or pointer events is given a unique pick color when it is created. The control is drawn on the pick buffer using the pick color and the color under the event's XY position identifies the control to handle it.
Parameters
- cvsID: string
  
  the id of a canvas element
- bfr: Renderer = ...
Returns void
- Defined in index.ts:809

showPanes

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

Returns void
- Defined in index.ts:1021

slider

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

Returns
slider control
Parameters
- id: string
  
  unique id 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:313

textFont

textFont(gtf?: any): string | GUI
Sets or gets the global text font.

If the parameter is a true-type-font or the name of a system font it will be used as the global font and this gui will be returned.

Recognised font names are :-
```
'arial'             'verdana'   'tahoma'        'trebuchet ms'
'times new roman'   'georgia'   'courier new'   'brush script mt'
'impact'            'serif'     'sans-serif'    'monospace'
```
Invalid fonts are ignored and the global font is unchanged.

If no parameter is passed then the current font is returned.

Returns
this gui
Parameters
- Optional gtf: any
  
  A true-type-font or the name (case-insensitive) of a valid system font.
Returns string | GUI
- Defined in index.ts:887

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 gui.

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

textStyle

textStyle(gty?: string): string | GUI
Sets or gets the global text style.

The 4 recognised font styles are :-
```
NORMAL    BOLD   ITALIC   BOLDITALIC
```
Unrecognized styles are ignored and the global style is unchanged.

If no parameter is passed then the current style is returned.

Returns
this gui
Parameters
- Optional gty: string
  
  the font style to use.
Returns string | GUI
- Defined in index.ts:909

textfield

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

Returns
a textfield
Parameters
- id: string
  
  unique id 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:352

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

tooltipTimes

tooltipTimes(show?: number, repeat?: number): GUI
Controls how long a tooltip is shown and how long to wait before it can be shown again. This helps avoid the tip flicking on and off as the mouse moves over the control.

Returns
this gui
Parameters
- show: number = TT_SHOW_TIME
  
  show duration (ms)
- repeat: number = TT_REPEAT_TIME
  
  duration before the tip can be shown again
Returns GUI
- Defined in index.ts:580

viewer

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

Returns
an image viewer
Parameters
- id: string
  
  unique id 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:418

`Static` $$

$$(name: string): GUI
Get the GUI with the given name. If no such GUI exists then the function returns undefined.

The global function getGUI(...) is an alternative method that accepts the same parameters performs exactly the same task.

Returns
the matching GUI controller or undefined if not found.
Parameters
- name: string
  
  the name of the GUI to get
Returns GUI
- Defined in index.ts:1292

`Static` create

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

If a GUI with this name already exists 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 a randomly generated name will be used instead.

The global function createGUI(...) accepts the same parameters is the preferred method to create a GUI.

Returns
a GUI controller existing or new GUI with the given name.
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 GUI
- Defined in index.ts:1348

`Static` get

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

This method is included for compatibility with canvasGUI V1 and has beed deprecated. The createGUI(...) method should be used instead as it fits the p5.js scheme of using create???(...) methods when an object instance is being initiated.

To remain compatible with canvasGUI V2 where every GUI requires a unique name, a randomly generated name will be used.

Deprecated

Returns
a GUI controller existing or new GUI with the given name.
Parameters
- p5c: Renderer
  
  the renderer - the display canvas
- p: p5 = p5.instance
  
  the processing instance (required in Instance mode)
Returns GUI
- Defined in index.ts:1310

`Static` getNamed

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

This method is included for compatibility with canvasGUI V1 and has beed deprecated. The createGUI(...) method should be used instead as it fits the p5.js scheme of using create???(...) methods when an object instance is being initiated.

Deprecated

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 GUI
- Defined in index.ts:1329

Class GUI

Hierarchy

Index

Properties

Accessors

Methods

Properties

Static VERSION

Accessors

isEnabled

Returns

Returns boolean

isVisible

Returns

Returns boolean

Methods

$

Returns

Parameters

id: string | CvsBaseControl

Returns CvsBaseControl

addScheme

Returns

Parameters

scheme: ColorScheme

Returns GUI

button

Returns

Parameters

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

id: string

x: number

y: number

w: number

h: number

Returns any

corners

Returns

Parameters

Rest ...c: any

Returns number[] | GUI

createScheme

Returns

Parameters

destName: string

srcName: string

Returns ColorScheme

disable

Returns

Returns GUI

enable

Returns

Returns GUI

getPicked

Returns

Parameters

x: number

y: number

Returns { control: any; part: number }

control: any

part: number

grid

Returns

Parameters

x: number

y: number

`Static` VERSION

`Optional` x: number

`Optional` y: number

`Optional` w: number

`Optional` h: number

`Rest` ...c: any