Create an image pane to mount into a layout. More...

#include "remoto!stdlib:js/panes/panes/image.js"

Inheritance diagram for imagePane:

Public Member Functions
	imagePane (layout)
	No options are accepted in the layout. The subscribed `.img` file must contain all settings. More...

	animateTo (z, p, post)
	This is called when 'animate=true' is set on an incoming diff. More...

	applyDiff (diff, user)
	Apply a diff to this image view. More...

	applySettings (settings)
	No settings are accepted from the layout. More...

	averagePointers ()
	Average the list of pointers in `this._pointers`, and return in normalized container coordinates. More...

	calculatePosition ()
	Calculate the css position, which is non-obvious. More...

	calculateZoom ()
	Calculate the css zoom. More...

	createHTML ()
	Create a hidden image for loading, and a div with a background for view. More...

	destroy ()
	Destroy _keyboard and _pointers and call base destructor. More...

	enablePinchAndZoom (enabled)
	Enable or disable pinch and zoom functions. More...

	frameDefault ()
	Set the view to the default, which is `this._position=[0,0]` and `this._zoom=1.0`. More...

	fromImageCoordinates (p)
	We want to invert normalized image coordinates to normalized screen coordinates. More...

	imageLoaded ()
	Image load is complete. More...

	imageLoadError ()
	A load error has happened. More...

	pointerDown (evt)
	Add a pointer to `this._pointers` and set initial values. More...

	pointerMove (evt)
	Adjust the view based on `this._pointers`. More...

	pointerUp (evt)
	Remove a pointer from `this._pointers` and set initial values. More...

	removeEvent (evt)
	Remove an event from the _pointers list, if it exists. More...

	requestResize ()
	Request a resize calculation on the next frame. More...

	resize ()
	Resize the pane, taking into account pinch and zoom if enabled. More...

	toImageCoordinates (p)
	We want to report/record the normalized position of the image that is at the center of the screen. More...

	wheelzoom (evt)
	Respond to a wheel event, which will modify zoom. More...

Getters & Setters
getter	pinchAndZoom
	A getter, returns the pinch and zoom enabled state. More...

getter	zoom
	A getter, returns this._zoom. More...

getter	position
	A getter, returns this._position. More...

setter	caption
	A setter, sets the caption html for this image. More...

Public Member Functions inherited from pane
	pane (layout, object)

	activate ()
	DOCME. More...

	applyDiff (data, user)

	applyReleaseLock (data)

	applyRequestError (command, id, reason)

	applyRequestLock (data)

	applyRequestSuccess (command, id, data, metadata)

	applySettings (settings)

	applySubscription (data, metadata)

	area ()

	attach ()
	Provides an opportunity for a pane to pass an attach command to its object. More...

	attached ()
	Detects is this pane is attached to the DOM. More...

	createHTML ()

	deactivate ()
	If a `deactivate` method is present on this pane's _object, call it. More...

	destroy ()
	DOCME. More...

	detach ()
	Detach `this._html` and call `this._object.detach()`. More...

	find (p, type)

	hasHelp ()

	mounted (mountState)
	Notify this pane that the mounted state has changed. More...

	rename (name)

	resize ()
	DOCME. More...

	saveLayout ()
	Build the layout for this pane. More...

	triggerCurrentPane ()
	DOCME. More...

getter	help
	A getter that will return a pane object's help message, or a default message indicating that no help is available. More...

getter	paneType
	A getter which will calculate the pane type based on the _object, or return the default "pane". More...

Detailed Description

Create an image pane to mount into a layout.

This will load an image over http(s), optionally with sizing and pinch and zoom functions. By default it will show the whole image as a contain with no background.

See also: imagePane::applyDiff()

Constructor & Destructor Documentation

◆ imagePane()

imagePane ( layout )

No options are accepted in the layout. The subscribed .img file must contain all settings.

Parameters

layout The layout

Member Function Documentation

◆ animateTo()

animateTo	(	z,
		p,
		post
	)

This is called when 'animate=true' is set on an incoming diff.

Parameters

z	The zoom value to animate to
p	The position value to animate to
post	Boolean whether to emit a postUpdate when animation is complete.

◆ applyDiff()

applyDiff	(	diff,
		user
	)

Apply a diff to this image view.

Parameters

diff	The diff to apply
user	The user applying a change. This will never be seen in this context.

Diff values may be:

url - The image url. Must observe http(s) stuff, of course.
background - a css value for whatever is revealed outside the image
size - can only be "cover" or "contain". This is ignored if pinchAndZoom is true.
pinchAndZoom - boolean, enables or disables pinch and zoom functions.
zoom - float where 1.0 means 100% height. Only used if pinchAndZoom is enabled.
position - [x,y] array in normalized image coordinates. The position received here will become the center of the view. Only used if pinch and zoom is enabled.
normal - The "default" zoom size. Defaults to 1.0. If your image has no border or margin, use something like 0.9.

◆ applySettings()

applySettings ( settings )

No settings are accepted from the layout.

Parameters

settings

◆ averagePointers()

averagePointers ( )

Average the list of pointers in this._pointers, and return in normalized container coordinates.

◆ calculatePosition()

calculatePosition ( )

Calculate the css position, which is non-obvious.

We calculate position different from css here. We use values based on percentage so that another viewer will have roughly the same view as this one after diffs are emitted. A second viewer may not have the same aspect ratio.

The _scaleMode is 0 if the view is wider than the image, 1 if the view is narrower than the image.

The smaller dimension (scaleMode) anchor, where with a zoom of 1.0 the image is full size in the container it's given on that dimension.

Position is normalized on [-1,1] in X and Y. This position point will be mapped to the center of the container.

A position of [-1,-1] means the upper left corner of the image is at the center of the container. A position of [0,0] and zoom=1 means centered image, full height or width in its container (basically the same as a contain css value).

◆ calculateZoom()

calculateZoom ( )

Calculate the css zoom.

We calculate values based on percentage so that another viewer receiving diffs will have roughly the same view as this one.

◆ caption()

setter caption

A setter, sets the caption html for this image.

Parameters

c	The caption html string.

You will want to set an imageCaption class somewhere in css to make this look the way you want.

◆ createHTML()

createHTML ( )

Create a hidden image for loading, and a div with a background for view.

Returns: this._html

Attaches listeners for when the image is loaded or fails to load.

◆ destroy()

destroy ( )

Destroy _keyboard and _pointers and call base destructor.

◆ enablePinchAndZoom()

enablePinchAndZoom ( enabled )

Enable or disable pinch and zoom functions.

Parameters

enabled boolean state

◆ frameDefault()

frameDefault ( )

Set the view to the default, which is this._position=[0,0] and this._zoom=1.0.

This is only in effect if pinch and zoom is enabled.

◆ fromImageCoordinates()

fromImageCoordinates ( p )

We want to invert normalized image coordinates to normalized screen coordinates.

Parameters

p	The coordinates in image normalized space

◆ imageLoaded()

imageLoaded ( )

Image load is complete.

Returns: false

This triggers "paneLoadComplete".

◆ imageLoadError()

imageLoadError ( )

A load error has happened.

Returns: false

This will still trigger "paneLoadComplete" even though it is an error. Default image dimensions are set, but in an unknown state at that point.

◆ pinchAndZoom()

setter pinchAndZoom

A getter, returns the pinch and zoom enabled state.

A setter, receives true or false to enable pinch and zoom functions.

◆ pointerDown()

pointerDown ( evt )

Add a pointer to this._pointers and set initial values.

Parameters

evt	The pointer event

◆ pointerMove()

pointerMove ( evt )

Adjust the view based on this._pointers.

Parameters

evt	The pointer event

◆ pointerUp()

pointerUp ( evt )

Remove a pointer from this._pointers and set initial values.

Parameters

evt	The pointer event

◆ position()

setter position

A getter, returns this._position.

A setter, sets the position state from a 2 element array of floats which represent percent offset.

Parameters

p	The position as a 2 coordinate array.

The coordinates are in image space. The intention is to be able to specify what part of the image is in view. Coordinates are normalized on [-1,1] for x and y. To view the center of the image, set position to [0,0]. To put the lower left corner of the image at the center of the view, use [-1,1].

◆ removeEvent()

removeEvent ( evt )

Remove an event from the _pointers list, if it exists.

Parameters

evt	The event to remove

If the event is not found, nothing happens.

◆ requestResize()

requestResize ( )

Request a resize calculation on the next frame.

◆ resize()

resize ( )

Resize the pane, taking into account pinch and zoom if enabled.

◆ toImageCoordinates()

toImageCoordinates ( p )

We want to report/record the normalized position of the image that is at the center of the screen.

Parameters

p	The coordinates in screen normalized space

◆ wheelzoom()

wheelzoom ( evt )

Respond to a wheel event, which will modify zoom.

Parameters

evt	The wheel event

◆ zoom()

setter zoom

A getter, returns this._zoom.

A setter, sets the zoom state, where 1.0 means full height.

The documentation for this class was generated from the following file:

image.js

Public Member Functions

Detailed Description

Constructor & Destructor Documentation

◆ imagePane()

Member Function Documentation

◆ animateTo()

◆ applyDiff()

◆ applySettings()

◆ averagePointers()

◆ calculatePosition()

◆ calculateZoom()

◆ caption()

◆ createHTML()

◆ destroy()

◆ enablePinchAndZoom()

◆ frameDefault()

◆ fromImageCoordinates()

◆ imageLoaded()

◆ imageLoadError()

◆ pinchAndZoom()

◆ pointerDown()

◆ pointerMove()

◆ pointerUp()

◆ position()

◆ removeEvent()

◆ requestResize()

◆ resize()

◆ toImageCoordinates()

◆ wheelzoom()

◆ zoom()