Remoto - VFS
|
Create an image pane to mount into a layout. More...
#include "remoto!stdlib:js/panes/panes/image.js"
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... | |
![]() | |
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... | |
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.
imagePane | ( | layout | ) |
No options are accepted in the layout. The subscribed .img
file must contain all settings.
layout | The layout |
animateTo | ( | z, | |
p, | |||
post | |||
) |
This is called when 'animate=true' is set on an incoming diff.
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 | ( | diff, | |
user | |||
) |
Apply a diff to this image view.
diff | The diff to apply |
user | The user applying a change. This will never be seen in this context. |
Diff values may be:
pinchAndZoom
is true.pinchAndZoom
is enabled.1.0
. If your image has no border or margin, use something like 0.9
. applySettings | ( | settings | ) |
No settings are accepted from the layout.
settings |
averagePointers | ( | ) |
Average the list of pointers in this._pointers
, and return in normalized container coordinates.
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 | ( | ) |
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.
setter caption |
A setter, sets the caption html for this image.
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 | ( | ) |
Create a hidden image for loading, and a div with a background for view.
this._html
Attaches listeners for when the image is loaded or fails to load.
destroy | ( | ) |
Destroy _keyboard and _pointers and call base destructor.
enablePinchAndZoom | ( | enabled | ) |
Enable or disable pinch and zoom functions.
enabled | boolean state |
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 | ( | p | ) |
We want to invert normalized image coordinates to normalized screen coordinates.
p | The coordinates in image normalized space |
imageLoaded | ( | ) |
Image load is complete.
This triggers "paneLoadComplete".
imageLoadError | ( | ) |
A load error has happened.
This will still trigger "paneLoadComplete" even though it is an error. Default image dimensions are set, but in an unknown state at that point.
setter pinchAndZoom |
A getter, returns the pinch and zoom enabled state.
A setter, receives true or false to enable pinch and zoom functions.
pointerDown | ( | evt | ) |
Add a pointer to this._pointers
and set initial values.
evt | The pointer event |
pointerMove | ( | evt | ) |
Adjust the view based on this._pointers
.
evt | The pointer event |
pointerUp | ( | evt | ) |
Remove a pointer from this._pointers
and set initial values.
evt | The pointer event |
setter position |
A getter, returns this._position.
A setter, sets the position state from a 2 element array of floats which represent percent offset.
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 | ( | evt | ) |
Remove an event from the _pointers list, if it exists.
evt | The event to remove |
If the event is not found, nothing happens.
requestResize | ( | ) |
Request a resize calculation on the next frame.
resize | ( | ) |
Resize the pane, taking into account pinch and zoom if enabled.
toImageCoordinates | ( | p | ) |
We want to report/record the normalized position of the image that is at the center of the screen.
p | The coordinates in screen normalized space |
wheelzoom | ( | evt | ) |
Respond to a wheel event, which will modify zoom.
evt | The wheel event |
setter zoom |
A getter, returns this._zoom.
A setter, sets the zoom state, where 1.0
means full height.