Class Guacamole.Display

Defined in: Display.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	Guacamole.Display() The Guacamole display.

Field Summary
Field Attributes	Field Name and Description
	cursorHotspotX The X coordinate of the hotspot of the mouse cursor.
	cursorHotspotY The Y coordinate of the hotspot of the mouse cursor.
	cursorX The current X coordinate of the local mouse cursor.
	cursorY The current X coordinate of the local mouse cursor.

Method Summary
Method Attributes	Method Name and Description
	arc(layer, x, y, radius, startAngle, endAngle, negative) Add the specified arc to the current path.
	clip(layer) Clip all future drawing operations by the current path.
	close(layer) Closes the current path by connecting the end point with the start point (if any) with a straight line.
	copy(srcLayer, srcx, srcy, srcw, srch, dstLayer, x, y) Copy a rectangle of image data from one Layer to this Layer.
	createBuffer() Creates a new buffer.
	createLayer() Creates a new layer.
	curveTo(layer, cp1x, cp1y, cp2x, cp2y, x, y) Starts a new path at the specified point.
	draw(layer, x, y, url) Draws the image at the specified URL at the given coordinates.
	drawImage(layer, x, y, image) Draws the specified image at the given coordinates.
	fillColor(layer, r, g, b, a) Fills the current path with the specified color.
	fillLayer(layer, srcLayer) Fills the current path with the image within the specified layer.
	flatten() Returns a canvas element containing the entire display, with all child layers composited within.
	flush(callback) Flush all pending draw tasks, if possible, as a new frame.
	getCursorLayer() Returns the cursor layer of this display.
	getDefaultLayer() Returns the default layer of this display.
	getElement() Returns the element which contains the Guacamole display.
	getHeight() Returns the height of this display.
	getScale() Returns the scale of the display.
	getWidth() Returns the width of this display.
	lineTo(layer, x, y) Add the specified line to the current path.
	moveCursor(x, y) Sets the location of the local cursor to the given coordinates.
	moveTo(layer, x, y) Starts a new path at the specified point.
	play(layer, mimetype, duration, url) Plays the video at the specified URL within this layer.
	pop(layer) Pop layer state off stack.
	push(layer) Push current layer state onto stack.
	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.
	rect(layer, x, y, w, h) Add the specified rectangle to the current path.
	reset(layer) Reset the layer, clearing the stack, the current path, and any transform matrix.
	resize(layer, width, height) Changes the size of the given Layer to the given width and height.
	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.
	setChannelMask(layer, mask) Sets the channel mask for future operations on this Layer.
	setCursor(hotspotX, hotspotY, layer, srcx, srcy, srcw, srch) Sets the hotspot and image of the mouse cursor displayed within the Guacamole display.
	setMiterLimit(layer, limit) Sets the miter limit for stroke operations using the miter join.
	setTransform(layer, a, b, c, d, e, f) Sets the given affine transform (defined with six values from the transform's matrix).
	strokeColor(layer, cap, join, thickness, r, g, b, a) Stroke the current path with the specified color.
	strokeLayer(layer, cap, join, thickness, srcLayer) Stroke the current path with the image within the specified layer.
	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.
	transform(layer, a, b, c, d, e, f) Applies the given affine transform (defined with six values from the transform's matrix).

Event Summary
Event Attributes	Event Name and Description
	onresize(width, height) Fired when the default layer (and thus the entire Guacamole display) is resized.

Class Detail

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

Field Detail

{Number} cursorHotspotX

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.

{Number} cursorHotspotY

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.

{Number} cursorX

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().

{Number} cursorY

Method Detail

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

Add the specified arc to the current path.

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

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:
{Guacamole.Layer} layer: The layer to affect.

close(layer)

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

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.

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:
{Guacamole.Layer} srcLayer: The Layer to copy image data from.
{Number} srcx: The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcy: The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcw: The width of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srch: The height of the rectangle within the source Layer's coordinate space to copy data from.
{Guacamole.Layer} dstLayer: The layer to draw upon.
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.

{Guacamole.Layer} createBuffer()

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.

Returns:: {Guacamole.Layer} The newly-created buffer.

{Guacamole.Display.VisibleLayer} createLayer()

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.

Returns:: {Guacamole.Display.VisibleLayer} The newly-created layer.

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

Starts a new path at the specified point.

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.
{Number} cp1x: The X coordinate of the first control point.
{Number} cp1y: The Y coordinate of the first control point.
{Number} cp2x: The X coordinate of the second control point.
{Number} cp2y: The Y coordinate of the second control point.
{Number} x: The X coordinate of the endpoint of the curve.
{Number} y: The Y coordinate of the endpoint of the curve.

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:
{Guacamole.Layer} layer: The layer to draw upon.
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.
{String} url: The URL of the image to draw.

drawImage(layer, x, y, image)

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

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.
{Image} image: The image to draw. Note that this is an Image object - not a URL.

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:
{Guacamole.Layer} layer: The layer to draw upon.
{Number} r: The red component of the color to fill.
{Number} g: The green component of the color to fill.
{Number} b: The blue component of the color to fill.
{Number} a: The alpha component of the color to fill.

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:
{Guacamole.Layer} layer: The layer to draw upon.
{Guacamole.Layer} srcLayer: The layer to use as a repeating pattern within the fill.

{HTMLCanvasElement} flatten()

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

Returns:: {HTMLCanvasElement} A new canvas element containing a copy of the display.

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:
{function} callback: The function to call when this frame is flushed. This may happen immediately, or later when blocked tasks become unblocked.

{Guacamole.Display.VisibleLayer} getCursorLayer()

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.

Returns:: {Guacamole.Display.VisibleLayer} The cursor layer.

{Guacamole.Display.VisibleLayer} getDefaultLayer()

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.

Returns:: {Guacamole.Display.VisibleLayer} The default layer.

{Element} getElement()

Returns the element which contains the Guacamole display.

Returns:: {Element} The element containing the Guacamole display.

{Number} getHeight()

Returns the height of this display.

Returns:: {Number} The height of this display;

{Number} getScale()

Returns the scale of the display.

Returns:: {Number} The scale of the display.

{Number} getWidth()

Returns the width of this display.

Returns:: {Number} The width of this display;

lineTo(layer, x, y)

Add the specified line to the current path.

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.
{Number} x: The X coordinate of the endpoint of the line to draw.
{Number} y: The Y coordinate of the endpoint of the line to draw.

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:
{Number} x: The X coordinate to move the cursor to.
{Number} y: The Y coordinate to move the cursor to.

moveTo(layer, x, y)

Starts a new path at the specified point.

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.
{Number} x: The X coordinate of the point to draw.
{Number} y: The Y coordinate of the point to draw.

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:
{Guacamole.Layer} layer: The layer to draw upon.
{String} mimetype: The mimetype of the video to play.
{Number} duration: The duration of the video in milliseconds.
{String} url: The URL of the video to play.

pop(layer)

Pop layer state off stack.

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.

push(layer)

Push current layer state onto stack.

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.

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:
{Guacamole.Layer} srcLayer: The Layer to copy image data from.
{Number} srcx: The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcy: The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcw: The width of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srch: The height of the rectangle within the source Layer's coordinate space to copy data from.
{Guacamole.Layer} dstLayer: The layer to draw upon.
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.

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

Add the specified rectangle to the current path.

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.
{Number} x: The X coordinate of the upper-left corner of the rectangle to draw.
{Number} y: The Y coordinate of the upper-left corner of the rectangle to draw.
{Number} w: The width of the rectangle to draw.
{Number} h: The height of the rectangle to draw.

reset(layer)

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

Parameters:
{Guacamole.Layer} layer: The layer to draw upon.

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:
{Guacamole.Layer} layer: The layer to resize.
{Number} width: The new width.
{Number} height: The new height.

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:
{Number} scale: The scale to resize to, where 1.0 is normal size (1:1 scale).

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:
{Guacamole.Layer} layer: The layer to modify.
{Number} mask: The channel mask for future operations on this Layer.

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

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

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

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:
{Guacamole.Layer} layer: The layer to modify.
{Number} limit: The miter limit for stroke operations using the miter join.

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

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

Parameters:
{Guacamole.Layer} layer: The layer to modify.
{Number} a: The first value in the affine transform's matrix.
{Number} b: The second value in the affine transform's matrix.
{Number} c: The third value in the affine transform's matrix.
{Number} d: The fourth value in the affine transform's matrix.
{Number} e: The fifth value in the affine transform's matrix.
{Number} f: The sixth value in the affine transform's matrix.

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:
{Guacamole.Layer} layer: The layer to draw upon.
{String} cap: The line cap style. Can be "round", "square", or "butt".
{String} join: The line join style. Can be "round", "bevel", or "miter".
{Number} thickness: The line thickness in pixels.
{Number} r: The red component of the color to fill.
{Number} g: The green component of the color to fill.
{Number} b: The blue component of the color to fill.
{Number} a: The alpha component of the color to fill.

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:
{Guacamole.Layer} layer: The layer to draw upon.
{String} cap: The line cap style. Can be "round", "square", or "butt".
{String} join: The line join style. Can be "round", "bevel", or "miter".
{Number} thickness: The line thickness in pixels.
{Guacamole.Layer} srcLayer: The layer to use as a repeating pattern within the stroke.

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:
{Guacamole.Layer} srcLayer: The Layer to copy image data from.
{Number} srcx: The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcy: The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcw: The width of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srch: The height of the rectangle within the source Layer's coordinate space to copy data from.
{Guacamole.Layer} dstLayer: The layer to draw upon.
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.
{Function} transferFunction: The transfer function to use to transfer data from source to destination.

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

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

Parameters:
{Guacamole.Layer} layer: The layer to modify.
{Number} a: The first value in the affine transform's matrix.
{Number} b: The second value in the affine transform's matrix.
{Number} c: The third value in the affine transform's matrix.
{Number} d: The fourth value in the affine transform's matrix.
{Number} e: The fifth value in the affine transform's matrix.
{Number} f: The sixth value in the affine transform's matrix.

Event Detail

onresize(width, height)

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

Parameters:
{Number} width: The new width of the Guacamole display.
{Number} height: The new height of the Guacamole display.

Classes

Class Guacamole.Display