Home Reference Source 
import Canvas from '@jsmlt/jsmlt/src/ui/canvas.js'
public class | source

Canvas

UI canvas for displaying machine learning results.

Listeners: This class supports event listeners, meaning that the outside world can bind functions to events triggered explicitly by this class. Listeners can be added using addListener and removed by removeListener. The emit method is not intended for use by the outside world, and is used by this class to emit an event to the listeners bound to it.

Constructor Summary

Public Constructor
public

constructor(el: Object, optionsUser: Object)

Contructor.

Member Summary

Public Members
public

canvas: {"element": *, "context": *}

public
public
public

elements: *[]

public
public
public
public
public

options: {...optionsDefault: Object, ...optionsUser: Object}

public

tmp: {}

Method Summary

Public Methods
public

addDatapoint(datapoint: jsmlt.Dataset.Datapoint)

Add a data point element to the canvas, using a dataset datapoint as its model.
public

addListener(label: string, callback: function)

Add an event listener for events of some type emitted from this object.
public

clear()

Clear the canvas.
public

click(x: number, y: number)

Trigger a click at some position in the canvas.
public

Convert coordinates on a centered, double unit square (i.e., a square from (-1, -1) to (1, 1)) to feature space.
public

Calculate normalized canvas coordinates, i.e.
public

Calculate canvas coordinates (origin at (0,0)) for a 2-dimensional data point's features
public

Draw the axes on the canvas
public

Draw class boundaries
public

Draw a grid on the canvas
public

emit(label: string, args: ...mixed): boolean

Emit an event, which triggers the listener callback functions bound to it.
public

getClassColor(classIndex: number): string

Get drawing color for a class index.
public

getColors(): *

Get available drawing colors.
public

Handle mouse events on the canvas, e.g.
public

redraw()

Redraw the canvas, clearing it and drawing all elements on it.
public

Refresh (i.e.
public

removeListener(label: string, callback: function)

Remove a previously added event listener for events of some type emitted from this object.
public

resize()

Handle the canvas size for different device pixel ratios and on window resizes.
public

Set the class boundaries used for drawing the decision regions on the canvas.
public

Transform the absolute position of the mouse in the viewport to the mouse position relative to the top-left point of the canvas.

Public Constructors

public constructor(el: Object, optionsUser: Object) source

Contructor. Load DOM element and user options.

Params:

NameTypeAttributeDescription
el Object

DOM Canvas element
optionsUser Object
  • optional

User-defined options for the canvas
optionsUser.continuousClick boolean
  • optional
  • default: false

Whether the "click" callback should be called any time the mouse is down (true) or only at the moment the mouse button is first pressed (false). If true, a click event is emitted every continuousClickInterval milliseconds when the left mouse button is down
optionsUser.continuousClickInterval number
  • optional
  • default: 50

Number of milliseconds between emitting each click event when continuousClick is enabled
optionsUser.x1 number
  • optional
  • default: -2.5

Left bound of coordinate system for canvas
optionsUser.y1 number
  • optional
  • default: -2.5

Bottom bound of coordinate system for canvas
optionsUser.x2 number
  • optional
  • default: 2.5

Right bound of coordinate system for canvas
optionsUser.y2 number
  • optional
  • default: 2.5

Top bound of coordinate system for canvas

Public Members

public canvas: {"element": *, "context": *} source

public classesBoundaries: {} source

public continuousClickIntervalId: * source

public elements: *[] source

public listeners: * source

public mouseStatus: number source

public mouseX: number source

public mouseY: number source

public options: {...optionsDefault: Object, ...optionsUser: Object} source

public tmp: {} source

Public Methods

public addDatapoint(datapoint: jsmlt.Dataset.Datapoint) source

Add a data point element to the canvas, using a dataset datapoint as its model.

Params:

NameTypeAttributeDescription
datapoint jsmlt.Dataset.Datapoint

Dataset datapoint (model)

public addListener(label: string, callback: function) source

Add an event listener for events of some type emitted from this object.

Params:

NameTypeAttributeDescription
label string

Event identifier
callback function

Callback function for when the event is emitted

public clear() source

Clear the canvas.

public click(x: number, y: number) source

Trigger a click at some position in the canvas.

Params:

NameTypeAttributeDescription
x number
  • optional
  • default: -1

X-coordinate of the click. Defaults to stored mouse position from mousemove event
y number
  • optional
  • default: -1

Y-coordinate of the click. Defaults to stored mouse position from mousemove event

public convertBoundaryCoordinatesToFeatures(bx: number, by: number): Array<number> source

Convert coordinates on a centered, double unit square (i.e., a square from (-1, -1) to (1, 1)) to feature space.

Params:

NameTypeAttributeDescription
bx number

Input x-coordinate in input space
by number

Input y-coordinate in input space

Return:

Array<number>

Corresponding point in feature space (first element corresponds to x, second element corresponds to y)

public convertCanvasCoordinatesToFeatures(x: number, y: number): Array<number> source

Calculate normalized canvas coordinates, i.e. transform mouse coordinates (relative to the canvas origin = top left) to feature space for both x and y. The feature subspace shape is determined by the x1, y1, x2, and y2 parameters in the class options (see constructor).

Params:

NameTypeAttributeDescription
x number

x-coordinate in canvas
y number

y-coordinate in canvas

Return:

Array<number>

Corresponding point in feature space (first element corresponds to x, second element corresponds to y)

public convertFeaturesToCanvasCoordinates(f1: number, f2: number): Array<number> source

Calculate canvas coordinates (origin at (0,0)) for a 2-dimensional data point's features

Params:

NameTypeAttributeDescription
f1 number

First feature
f2 number

Second feature

Return:

Array<number>

Corresponding point in the canvas (first element corresponds to x, second element corresponds to y)

public drawAxes() source

Draw the axes on the canvas

public drawClassBoundaries() source

Draw class boundaries

public drawGrid() source

Draw a grid on the canvas

public emit(label: string, args: ...mixed): boolean source

Emit an event, which triggers the listener callback functions bound to it.

Params:

NameTypeAttributeDescription
label string

Event identifier
args ...mixed

Remaining arguments contain arguments that should be passed to the callback functions

Return:

boolean

Whether any listener callback functions were executed

public getClassColor(classIndex: number): string source

Get drawing color for a class index.

Params:

NameTypeAttributeDescription
classIndex number

Class index

Return:

string

Color in HEX with '#' prefix

public getColors(): * source

Get available drawing colors.

Return:

*

<Array.{string}> Colors in HEX with '#' prefix; array keys are color names

public handleMouseEvents() source

Handle mouse events on the canvas, e.g. for adding data points.

public redraw() source

Redraw the canvas, clearing it and drawing all elements on it.

public refresh() source

Refresh (i.e. redraw) everything on the canvas.

public removeListener(label: string, callback: function) source

Remove a previously added event listener for events of some type emitted from this object.

Params:

NameTypeAttributeDescription
label string

Event identifier
callback function

Callback function to remove from event

public resize() source

Handle the canvas size for different device pixel ratios and on window resizes.

public setClassBoundaries(classesBoundaries: Object<string, Array<Array<Array<number>>>>) source

Set the class boundaries used for drawing the decision regions on the canvas.

Params:

NameTypeAttributeDescription
classesBoundaries Object<string, Array<Array<Array<number>>>>

Class boundaries per class label

public transformAbsolutePositionToRelativePosition(x: number, y: number): Array<number> source

Transform the absolute position of the mouse in the viewport to the mouse position relative to the top-left point of the canvas.

Params:

NameTypeAttributeDescription
x number

Absolute mouse x-coordinate within viewport
y number

Absolute mouse y-coordinate within viewport

Return:

Array<number>

Two-dimensional array consisting of relative x- and y-coordinate