JSDoc: Class: Display

new Display()

The Guacamole display. The display does not deal with the Guacamole protocol, and instead implements a set of graphical operations which embody the set of operations present in the protocol. The order operations are executed is guaranteed to be in the same order as their corresponding functions are called.

Source:

Display.js, line 31

Classes

VisibleLayer

Members

cursorHotspotX :Number

The X coordinate of the hotspot of the mouse cursor. The hotspot is the relative location within the image of the mouse cursor at which each click occurs.

Type:

Number

Source:

Display.js, line 84

cursorHotspotY :Number

The Y coordinate of the hotspot of the mouse cursor. The hotspot is the relative location within the image of the mouse cursor at which each click occurs.

Type:

Number

Source:

Display.js, line 93

cursorX :Number

The current X coordinate of the local mouse cursor. This is not necessarily the location of the actual mouse - it refers only to the location of the cursor image within the Guacamole display, as last set by moveCursor().

Type:

Number

Source:

Display.js, line 103

cursorY :Number

Type:

Number

Source:

Display.js, line 113

Methods

arc(layer, x, y, radius, startAngle, endAngle, negative)

Add the specified arc to the current path.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The X coordinate of the center of the circle which will contain the arc.
`y`	Number	The Y coordinate of the center of the circle which will contain the arc.
`radius`	Number	The radius of the circle.
`startAngle`	Number	The starting angle of the arc, in radians.
`endAngle`	Number	The ending angle of the arc, in radians.
`negative`	Boolean	Whether the arc should be drawn in order of decreasing angle.

Source:

Display.js, line 752

clip(layer)

Clip all future drawing operations by the current path. The current path is implicitly closed. The current path can continue to be reused for other operations (such as fillColor()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to affect.

Source:

Display.js, line 812

close(layer)

Closes the current path by connecting the end point with the start point (if any) with a straight line.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.

Source:

Display.js, line 781

copy(srcLayer, srcx, srcy, srcw, srch, dstLayer, x, y)

Copy a rectangle of image data from one Layer to this Layer. This operation will copy exactly the image data that will be drawn once all operations of the source Layer that were pending at the time this function was called are complete. This operation will not alter the size of the source Layer even if its autosize property is set to true.

Parameters:

Name	Type	Description
`srcLayer`	Guacamole.Layer	The Layer to copy image data from.
`srcx`	Number	The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
`srcy`	Number	The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
`srcw`	Number	The width of the rectangle within the source Layer's coordinate space to copy data from.
`srch`	Number	The height of the rectangle within the source Layer's coordinate space to copy data from.
`dstLayer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The destination X coordinate.
`y`	Number	The destination Y coordinate.

Source:

Display.js, line 706

createBuffer() → {Guacamole.Layer}

Creates a new buffer. Buffers are invisible, off-screen surfaces. They are implemented in the same manner as layers, but do not provide the same nesting semantics.

Source:

Display.js, line 364

Returns:

The newly-created buffer.

Type: Guacamole.Layer

createLayer() → {Guacamole.Display.VisibleLayer}

Creates a new layer. The new layer will be a direct child of the default layer, but can be moved to be a child of any other layer. Layers returned by this function are visible.

Source:

Display.js, line 351

Returns:

The newly-created layer.

Type: Guacamole.Display.VisibleLayer

curveTo(layer, cp1x, cp1y, cp2x, cp2y, x, y)

Starts a new path at the specified point.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`cp1x`	Number	The X coordinate of the first control point.
`cp1y`	Number	The Y coordinate of the first control point.
`cp2x`	Number	The X coordinate of the second control point.
`cp2y`	Number	The Y coordinate of the second control point.
`x`	Number	The X coordinate of the endpoint of the curve.
`y`	Number	The Y coordinate of the endpoint of the curve.

Source:

Display.js, line 769

dispose(layer)

Removes the given layer container entirely, such that it is no longer contained within its parent layer, if any.

Parameters:

Name	Type	Description
`layer`	Guacamole.Display.VisibleLayer	The layer being removed from its parent.

Source:

Display.js, line 1010

distort(layer, a, b, c, d, e, f)

Applies the given affine transform (defined with six values from the transform's matrix) to the given layer.

Parameters:

Name	Type	Description
`layer`	Guacamole.Display.VisibleLayer	The layer being distorted.
`a`	Number	The first value in the affine transform's matrix.
`b`	Number	The second value in the affine transform's matrix.
`c`	Number	The third value in the affine transform's matrix.
`d`	Number	The fourth value in the affine transform's matrix.
`e`	Number	The fifth value in the affine transform's matrix.
`f`	Number	The sixth value in the affine transform's matrix.

Source:

Display.js, line 1041

draw(layer, x, y, url)

Draws the image at the specified URL at the given coordinates. The image will be loaded automatically, and this and any future operations will wait for the image to finish loading.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The destination X coordinate.
`y`	Number	The destination Y coordinate.
`url`	String	The URL of the image to draw.

Source:

Display.js, line 579

drawBlob(layer, x, y, blob)

Draws the image contained within the specified Blob at the given coordinates. The Blob specified must already be populated with image data.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The destination X coordinate.
`y`	Number	The destination Y coordinate.
`blob`	Blob	The Blob containing the image data to draw.

Source:

Display.js, line 544

drawImage(layer, x, y, image)

Draws the specified image at the given coordinates. The image specified must already be loaded.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The destination X coordinate.
`y`	Number	The destination Y coordinate.
`image`	Image	The image to draw. Note that this is an Image object - not a URL.

Source:

Display.js, line 521

fillColor(layer, r, g, b, a)

Fills the current path with the specified color. The current path is implicitly closed. The current path can continue to be reused for other operations (such as clip()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`r`	Number	The red component of the color to fill.
`g`	Number	The green component of the color to fill.
`b`	Number	The blue component of the color to fill.
`a`	Number	The alpha component of the color to fill.

Source:

Display.js, line 853

fillLayer(layer, srcLayer)

Fills the current path with the image within the specified layer. The image data will be tiled infinitely within the stroke. The current path is implicitly closed. The current path can continue to be reused for other operations (such as clip()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`srcLayer`	Guacamole.Layer	The layer to use as a repeating pattern within the fill.

Source:

Display.js, line 892

flatten() → {HTMLCanvasElement}

Returns a canvas element containing the entire display, with all child layers composited within.

Source:

Display.js, line 1131

Returns:

A new canvas element containing a copy of the display.

Type: HTMLCanvasElement

flush(callback)

Flush all pending draw tasks, if possible, as a new frame. If the entire frame is not ready, the flush will wait until all required tasks are unblocked.

Parameters:

Name	Type	Description
`callback`	function	The function to call when this frame is flushed. This may happen immediately, or later when blocked tasks become unblocked.

Source:

Display.js, line 379

getCursorLayer() → {Guacamole.Display.VisibleLayer}

Returns the cursor layer of this display. Each Guacamole display contains a layer for the image of the mouse cursor. This layer is a special case and exists above all other layers, similar to the hardware mouse cursor.

Source:

Display.js, line 340

Returns:

The cursor layer.

Type: Guacamole.Display.VisibleLayer

getDefaultLayer() → {Guacamole.Display.VisibleLayer}

Returns the default layer of this display. Each Guacamole display always has at least one layer. Other layers can optionally be created within this layer, but the default layer cannot be removed and is the absolute ancestor of all other layers.

Source:

Display.js, line 329

Returns:

The default layer.

Type: Guacamole.Display.VisibleLayer

getElement() → {Element}

Returns the element which contains the Guacamole display.

Source:

Display.js, line 299

Returns:

The element containing the Guacamole display.

Type: Element

getHeight() → {Number}

Returns the height of this display.

Source:

Display.js, line 317

Returns:

The height of this display;

Type: Number

getScale() → {Number}

Returns the scale of the display.

Source:

Display.js, line 1120

Returns:

The scale of the display.

Type: Number

getWidth() → {Number}

Returns the width of this display.

Source:

Display.js, line 308

Returns:

The width of this display;

Type: Number

lineTo(layer, x, y)

Add the specified line to the current path.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The X coordinate of the endpoint of the line to draw.
`y`	Number	The Y coordinate of the endpoint of the line to draw.

Source:

Display.js, line 732

move(layer, parent, x, y, z)

Moves the upper-left corner of the given layer to the given X and Y coordinate, sets the Z stacking order, and reparents the layer to the given parent layer.

Parameters:

Name	Type	Description
`layer`	Guacamole.Display.VisibleLayer	The layer being moved.
`parent`	Guacamole.Display.VisibleLayer	The parent to set.
`x`	Number	The X coordinate to move to.
`y`	Number	The Y coordinate to move to.
`z`	Number	The Z coordinate to move to.

Source:

Display.js, line 1067

moveCursor(x, y)

Sets the location of the local cursor to the given coordinates. For the sake of responsiveness, this function performs its action immediately. Cursor motion is not maintained within atomic frames.

Parameters:

Name	Type	Description
`x`	Number	The X coordinate to move the cursor to.
`y`	Number	The Y coordinate to move the cursor to.

Source:

Display.js, line 463

moveTo(layer, x, y)

Starts a new path at the specified point.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The X coordinate of the point to draw.
`y`	Number	The Y coordinate of the point to draw.

Source:

Display.js, line 719

play(layer, mimetype, duration, url)

Plays the video at the specified URL within this layer. The video will be loaded automatically, and this and any future operations will wait for the video to finish loading. Future operations will not be executed until the video finishes playing.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`mimetype`	String	The mimetype of the video to play.
`duration`	Number	The duration of the video in milliseconds.
`url`	String	The URL of the video to play.

Source:

Display.js, line 607

pop(layer)

Pop layer state off stack.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.

Source:

Display.js, line 914

push(layer)

Push current layer state onto stack.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.

Source:

Display.js, line 903

put(srcLayer, srcx, srcy, srcw, srch, dstLayer, x, y)

Put a rectangle of image data from one Layer to this Layer directly without performing any alpha blending. Simply copy the data.

Parameters:

Name	Type	Description
`srcLayer`	Guacamole.Layer	The Layer to copy image data from.
`srcx`	Number	The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
`srcy`	Number	The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
`srcw`	Number	The width of the rectangle within the source Layer's coordinate space to copy data from.
`srch`	Number	The height of the rectangle within the source Layer's coordinate space to copy data from.
`dstLayer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The destination X coordinate.
`y`	Number	The destination Y coordinate.

Source:

Display.js, line 678

rect(layer, x, y, w, h)

Add the specified rectangle to the current path.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The X coordinate of the upper-left corner of the rectangle to draw.
`y`	Number	The Y coordinate of the upper-left corner of the rectangle to draw.
`w`	Number	The width of the rectangle to draw.
`h`	Number	The height of the rectangle to draw.

Source:

Display.js, line 798

reset(layer)

Reset the layer, clearing the stack, the current path, and any transform matrix.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.

Source:

Display.js, line 926

resize(layer, width, height)

Changes the size of the given Layer to the given width and height. Resizing is only attempted if the new size provided is actually different from the current size.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to resize.
`width`	Number	The new width.
`height`	Number	The new height.

Source:

Display.js, line 484

scale(scale)

Sets the scale of the client display element such that it renders at a relatively smaller or larger size, without affecting the true resolution of the display.

Parameters:

Name	Type	Description
`scale`	Number	The scale to resize to, where 1.0 is normal size (1:1 scale).

Source:

Display.js, line 1097

setChannelMask(layer, mask)

Sets the channel mask for future operations on this Layer. The channel mask is a Guacamole-specific compositing operation identifier with a single bit representing each of four channels (in order): source image where destination transparent, source where destination opaque, destination where source transparent, and destination where source opaque.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to modify.
`mask`	Number	The channel mask for future operations on this Layer.

Source:

Display.js, line 981

setCursor(hotspotX, hotspotY, layer, srcx, srcy, srcw, srch)

Sets the hotspot and image of the mouse cursor displayed within the Guacamole display.

Parameters:

Name	Type	Description
`hotspotX`	Number	The X coordinate of the cursor hotspot.
`hotspotY`	Number	The Y coordinate of the cursor hotspot.
`layer`	Guacamole.Layer	The source layer containing the data which should be used as the mouse cursor image.
`srcx`	Number	The X coordinate of the upper-left corner of the rectangle within the source layer's coordinate space to copy data from.
`srcy`	Number	The Y coordinate of the upper-left corner of the rectangle within the source layer's coordinate space to copy data from.
`srcw`	Number	The width of the rectangle within the source layer's coordinate space to copy data from.
`srch`	Number	The height of the rectangle within the source layer's coordinate space to copy data from.

Source:

Display.js, line 410

setMiterLimit(layer, limit)

Sets the miter limit for stroke operations using the miter join. This limit is the maximum ratio of the size of the miter join to the stroke width. If this ratio is exceeded, the miter will not be drawn for that joint of the path.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to modify.
`limit`	Number	The miter limit for stroke operations using the miter join.

Source:

Display.js, line 997

setTransform(layer, a, b, c, d, e, f)

Sets the given affine transform (defined with six values from the transform's matrix).

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to modify.
`a`	Number	The first value in the affine transform's matrix.
`b`	Number	The second value in the affine transform's matrix.
`c`	Number	The third value in the affine transform's matrix.
`d`	Number	The fourth value in the affine transform's matrix.
`e`	Number	The fifth value in the affine transform's matrix.
`f`	Number	The sixth value in the affine transform's matrix.

Source:

Display.js, line 944

shade(layer, alpha)

Sets the opacity of the given layer to the given value, where 255 is fully opaque and 0 is fully transparent.

Parameters:

Name	Type	Description
`layer`	Guacamole.Display.VisibleLayer	The layer whose opacity should be set.
`alpha`	Number	The opacity to set.

Source:

Display.js, line 1083

showCursor(shownopt)

Sets whether the software-rendered cursor is shown. This cursor differs from the hardware cursor in that it is built into the Guacamole.Display, and relies on its own Guacamole layer to render.

Parameters:

Name	Type	Attributes	Default	Description
`shown`	Boolean	<optional>	true	Whether to show the software cursor.

Source:

Display.js, line 438

strokeColor(layer, cap, join, thickness, r, g, b, a)

Stroke the current path with the specified color. The current path is implicitly closed. The current path can continue to be reused for other operations (such as clip()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`cap`	String	The line cap style. Can be "round", "square", or "butt".
`join`	String	The line join style. Can be "round", "bevel", or "miter".
`thickness`	Number	The line thickness in pixels.
`r`	Number	The red component of the color to fill.
`g`	Number	The green component of the color to fill.
`b`	Number	The blue component of the color to fill.
`a`	Number	The alpha component of the color to fill.

Source:

Display.js, line 835

strokeLayer(layer, cap, join, thickness, srcLayer)

Stroke the current path with the image within the specified layer. The image data will be tiled infinitely within the stroke. The current path is implicitly closed. The current path can continue to be reused for other operations (such as clip()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to draw upon.
`cap`	String	The line cap style. Can be "round", "square", or "butt".
`join`	String	The line join style. Can be "round", "bevel", or "miter".
`thickness`	Number	The line thickness in pixels.
`srcLayer`	Guacamole.Layer	The layer to use as a repeating pattern within the stroke.

Source:

Display.js, line 875

transfer(srcLayer, srcx, srcy, srcw, srch, dstLayer, x, y, transferFunction)

Transfer a rectangle of image data from one Layer to this Layer using the specified transfer function.

Parameters:

Name	Type	Description
`srcLayer`	Guacamole.Layer	The Layer to copy image data from.
`srcx`	Number	The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
`srcy`	Number	The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
`srcw`	Number	The width of the rectangle within the source Layer's coordinate space to copy data from.
`srch`	Number	The height of the rectangle within the source Layer's coordinate space to copy data from.
`dstLayer`	Guacamole.Layer	The layer to draw upon.
`x`	Number	The destination X coordinate.
`y`	Number	The destination Y coordinate.
`transferFunction`	function	The transfer function to use to transfer data from source to destination.

Source:

Display.js, line 653

transform(layer, a, b, c, d, e, f)

Applies the given affine transform (defined with six values from the transform's matrix).

Parameters:

Name	Type	Description
`layer`	Guacamole.Layer	The layer to modify.
`a`	Number	The first value in the affine transform's matrix.
`b`	Number	The second value in the affine transform's matrix.
`c`	Number	The third value in the affine transform's matrix.
`d`	Number	The fourth value in the affine transform's matrix.
`e`	Number	The fifth value in the affine transform's matrix.
`f`	Number	The sixth value in the affine transform's matrix.

Source:

Display.js, line 962

Events

oncursor

Fired whenever the local cursor image is changed. This can be used to implement special handling of the client-side cursor, or to override the default use of a software cursor layer.

Parameters:

Name	Type	Description
`canvas`	HTMLCanvasElement	The cursor image.
`x`	Number	The X-coordinate of the cursor hotspot.
`y`	Number	The Y-coordinate of the cursor hotspot.

Source:

Display.js, line 135

onresize

Fired when the default layer (and thus the entire Guacamole display) is resized.

Parameters:

Name	Type	Description
`width`	Number	The new width of the Guacamole display.
`height`	Number	The new height of the Guacamole display.

Source:

Display.js, line 123