@panoramax/web-viewer

<a name="Panoramax.components.ui.Photo"></a> ## Panoramax.components.ui.Photo ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code> **Kind**: static class of <code>Panoramax.components.ui</code> **Extends**: <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code> **Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed), [<code>ready</code>](#Panoramax.components.ui.Photo+event_ready), [<code>annotations-toggled</code>](#Panoramax.components.ui.Photo+event_annotations-toggled), <code>Panoramax.components.ui.Photo#event:annotation-click</code>, [<code>annotation-focused</code>](#Panoramax.components.ui.Photo+event_annotation-focused), [<code>annotations-unfocused</code>](#Panoramax.components.ui.Photo+event_annotations-unfocused) * [.Photo](#Panoramax.components.ui.Photo) ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code> * [new Photo(parent, container, [options])](#new_Panoramax.components.ui.Photo_new) * [.getPictureMetadata()](#Panoramax.components.ui.Photo+getPictureMetadata) ⇒ <code>object</code> * [.getPictureId()](#Panoramax.components.ui.Photo+getPictureId) ⇒ <code>string</code> \| <code>null</code> * [.goToNextPicture()](#Panoramax.components.ui.Photo+goToNextPicture) * [.goToPrevPicture()](#Panoramax.components.ui.Photo+goToPrevPicture) * [.goToPosition(lat, lon)](#Panoramax.components.ui.Photo+goToPosition) ⇒ <code>Promise</code> * [.getXY()](#Panoramax.components.ui.Photo+getXY) ⇒ <code>object</code> * [.getXYZ()](#Panoramax.components.ui.Photo+getXYZ) ⇒ <code>object</code> * [.getPictureOriginalHeading()](#Panoramax.components.ui.Photo+getPictureOriginalHeading) ⇒ <code>number</code> * [.getPictureRelativeHeading()](#Panoramax.components.ui.Photo+getPictureRelativeHeading) ⇒ <code>number</code> * [.clearPictureMetadataCache()](#Panoramax.components.ui.Photo+clearPictureMetadataCache) * [.setXYZ(x, y, z)](#Panoramax.components.ui.Photo+setXYZ) * [.setHigherContrast(enable)](#Panoramax.components.ui.Photo+setHigherContrast) * [.getTransitionDuration()](#Panoramax.components.ui.Photo+getTransitionDuration) ⇒ <code>number</code> * [.setTransitionDuration(value)](#Panoramax.components.ui.Photo+setTransitionDuration) * [.showErrorOverlay(e, label, dissmisable)](#Panoramax.components.ui.Photo+showErrorOverlay) * [.playSequence()](#Panoramax.components.ui.Photo+playSequence) * [.stopSequence()](#Panoramax.components.ui.Photo+stopSequence) * [.isSequencePlaying()](#Panoramax.components.ui.Photo+isSequencePlaying) ⇒ <code>boolean</code> * [.toggleSequencePlaying()](#Panoramax.components.ui.Photo+toggleSequencePlaying) * [.getPicturesNavigation()](#Panoramax.components.ui.Photo+getPicturesNavigation) ⇒ <code>string</code> * [.setPicturesNavigation(pn)](#Panoramax.components.ui.Photo+setPicturesNavigation) * [.areAnnotationsVisible()](#Panoramax.components.ui.Photo+areAnnotationsVisible) ⇒ <code>boolean</code> * [.getSelectedAnnotations()](#Panoramax.components.ui.Photo+getSelectedAnnotations) ⇒ <code>Array.<string></code> * [.toggleAllAnnotations(visible)](#Panoramax.components.ui.Photo+toggleAllAnnotations) * [.focusOnAnnotation(id, [blockFocus], [skipEvent])](#Panoramax.components.ui.Photo+focusOnAnnotation) * [.unfocusAnnotation([skipEvent], [skipBlocked])](#Panoramax.components.ui.Photo+unfocusAnnotation) * [.forceRefresh()](#Panoramax.components.ui.Photo+forceRefresh) * ["ready"](#Panoramax.components.ui.Photo+event_ready) * ["picture-loading"](#Panoramax.components.ui.Photo+event_picture-loading) * ["picture-preview-started"](#Panoramax.components.ui.Photo+event_picture-preview-started) * ["picture-preview-stopped"](#Panoramax.components.ui.Photo+event_picture-preview-stopped) * ["view-rotated"](#Panoramax.components.ui.Photo+event_view-rotated) * ["picture-loaded"](#Panoramax.components.ui.Photo+event_picture-loaded) * ["picture-tiles-loaded"](#Panoramax.components.ui.Photo+event_picture-tiles-loaded) * ["transition-duration-changed"](#Panoramax.components.ui.Photo+event_transition-duration-changed) * ["sequence-playing"](#Panoramax.components.ui.Photo+event_sequence-playing) * ["sequence-stopped"](#Panoramax.components.ui.Photo+event_sequence-stopped) * ["pictures-navigation-changed"](#Panoramax.components.ui.Photo+event_pictures-navigation-changed) * ["annotations-toggled"](#Panoramax.components.ui.Photo+event_annotations-toggled) * ["annotation-focused"](#Panoramax.components.ui.Photo+event_annotation-focused) * ["annotations-unfocused"](#Panoramax.components.ui.Photo+event_annotations-unfocused) * ["annotation-drawn"](#Panoramax.components.ui.Photo+event_annotation-drawn) <a name="new_Panoramax.components.ui.Photo_new"></a> ### new Photo(parent, container, [options]) Photo is the component showing a single picture. It uses Photo Sphere Viewer as a basis, and pre-configure dialog with STAC API. Note that all functions of [PhotoSphereViewer Viewer class](https://photo-sphere-viewer.js.org/api/classes/core.viewer) are available as well. | Param | Type | Default | Description | | --- | --- | --- | --- | | parent | <code>Panoramax.components.core.basic</code> | | The parent view | | container | <code>Element</code> | | The DOM element to create into | | [options] | <code>object</code> | | The viewer options. Can be any of [Photo Sphere Viewer options](https://photo-sphere-viewer.js.org/guide/config.html#standard-options) | | [options.transitionDuration] | <code>number</code> | | The number of milliseconds the transition animation should be. | | [options.position] | <code>Array.<number></code> | | Initial geographical coordinates (as [latitude, longitude]) to find picture nearby. Only used if no picture ID is set. | | [options.shouldGoFast] | <code>function</code> | | Function returning a boolean to indicate if we may skip loading HD images. | | [options.picturesNavigation] | <code>string</code> | <code>"any"</code> | The allowed pictures navigation ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) | | [options.displayAnnotations] | <code>boolean</code> | <code>false</code> | Should pictures annotations show up automatically if they are present ? Set to true to enable. | **Example** ```js const psv = new Panoramax.components.ui.Photo(viewer, psvNode, {transitionDuration: 500}) ``` <a name="Panoramax.components.ui.Photo+getPictureMetadata"></a> ### photo.getPictureMetadata() ⇒ <code>object</code> Access currently shown picture metadata **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>object</code> - Picture metadata <a name="Panoramax.components.ui.Photo+getPictureId"></a> ### photo.getPictureId() ⇒ <code>string</code> \| <code>null</code> Get current picture ID, or loading picture ID if any. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>string</code> \| <code>null</code> - Picture ID (current or loading), or null if none is selected. <a name="Panoramax.components.ui.Photo+goToNextPicture"></a> ### photo.goToNextPicture() Displays next picture in current sequence (if any) **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Throws**: - <code>Error</code> If no picture is selected, or no next picture available <a name="Panoramax.components.ui.Photo+goToPrevPicture"></a> ### photo.goToPrevPicture() Displays previous picture in current sequence (if any) **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Throws**: - <code>Error</code> If no picture is selected, or no previous picture available <a name="Panoramax.components.ui.Photo+goToPosition"></a> ### photo.goToPosition(lat, lon) ⇒ <code>Promise</code> Displays in viewer a picture near to given coordinates **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Fulfil**: <code>string</code> Picture ID if picture found **Reject**: <code>Error</code> If no picture found | Param | Type | Description | | --- | --- | --- | | lat | <code>number</code> | Latitude (WGS84) | | lon | <code>number</code> | Longitude (WGS84) | <a name="Panoramax.components.ui.Photo+getXY"></a> ### photo.getXY() ⇒ <code>object</code> Get 2D position of sphere currently shown to user **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>object</code> - Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top) } <a name="Panoramax.components.ui.Photo+getXYZ"></a> ### photo.getXYZ() ⇒ <code>object</code> Get 3D position of sphere currently shown to user **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>object</code> - Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top), z: zoom (0 = wide, 100 = zoomed in) } <a name="Panoramax.components.ui.Photo+getPictureOriginalHeading"></a> ### photo.getPictureOriginalHeading() ⇒ <code>number</code> Get capture orientation of current picture, based on its GPS. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>number</code> - Picture original heading in degrees (0 to 360°) <a name="Panoramax.components.ui.Photo+getPictureRelativeHeading"></a> ### photo.getPictureRelativeHeading() ⇒ <code>number</code> Computes the relative heading of currently selected picture. This gives the angle of capture compared to sequence path (vehicle movement). **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>number</code> - Relative heading in degrees (-180 to 180) <a name="Panoramax.components.ui.Photo+clearPictureMetadataCache"></a> ### photo.clearPictureMetadataCache() Clears the Photo Sphere Viewer metadata cache. It is useful when current picture or sequence has changed server-side after first load. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) <a name="Panoramax.components.ui.Photo+setXYZ"></a> ### photo.setXYZ(x, y, z) Change the shown position in picture **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) | Param | Type | Description | | --- | --- | --- | | x | <code>number</code> | X position (in degrees) | | y | <code>number</code> | Y position (in degrees) | | z | <code>number</code> | Z position (0-100) | <a name="Panoramax.components.ui.Photo+setHigherContrast"></a> ### photo.setHigherContrast(enable) Enable or disable higher contrast on picture **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) | Param | Type | Description | | --- | --- | --- | | enable | <code>boolean</code> | True to enable higher contrast | <a name="Panoramax.components.ui.Photo+getTransitionDuration"></a> ### photo.getTransitionDuration() ⇒ <code>number</code> Get the duration of stay on a picture during a sequence play. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>number</code> - The duration (in milliseconds) <a name="Panoramax.components.ui.Photo+setTransitionDuration"></a> ### photo.setTransitionDuration(value) Changes the duration of stay on a picture during a sequence play. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) | Param | Type | Description | | --- | --- | --- | | value | <code>number</code> | The new duration (in milliseconds, between 100 and 3000) | <a name="Panoramax.components.ui.Photo+showErrorOverlay"></a> ### photo.showErrorOverlay(e, label, dissmisable) Display an error message to user on screen **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) | Param | Type | Description | | --- | --- | --- | | e | <code>object</code> | The initial error | | label | <code>str</code> | The main error label to display | | dissmisable | <code>boolean</code> | Is error dissmisable | <a name="Panoramax.components.ui.Photo+playSequence"></a> ### photo.playSequence() Goes continuously to next picture in sequence as long as possible **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) <a name="Panoramax.components.ui.Photo+stopSequence"></a> ### photo.stopSequence() Stops playing current sequence **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) <a name="Panoramax.components.ui.Photo+isSequencePlaying"></a> ### photo.isSequencePlaying() ⇒ <code>boolean</code> Is there any sequence being played right now ? **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>boolean</code> - True if sequence is playing <a name="Panoramax.components.ui.Photo+toggleSequencePlaying"></a> ### photo.toggleSequencePlaying() Starts/stops the reading of pictures in a sequence **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) <a name="Panoramax.components.ui.Photo+getPicturesNavigation"></a> ### photo.getPicturesNavigation() ⇒ <code>string</code> Get current pictures navigation mode. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>string</code> - The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) <a name="Panoramax.components.ui.Photo+setPicturesNavigation"></a> ### photo.setPicturesNavigation(pn) Switch the allowed navigation between pictures. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) | Param | Type | Description | | --- | --- | --- | | pn | <code>string</code> | The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) | <a name="Panoramax.components.ui.Photo+areAnnotationsVisible"></a> ### photo.areAnnotationsVisible() ⇒ <code>boolean</code> Are there any picture annotations shown ? **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>boolean</code> - True if annotations are visible <a name="Panoramax.components.ui.Photo+getSelectedAnnotations"></a> ### photo.getSelectedAnnotations() ⇒ <code>Array.<string></code> Get all selected annotations **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) **Returns**: <code>Array.<string></code> - List of selected annotations IDs <a name="Panoramax.components.ui.Photo+toggleAllAnnotations"></a> ### photo.toggleAllAnnotations(visible) Toggle visibility of picture annotations **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) | Param | Type | Description | | --- | --- | --- | | visible | <code>boolean</code> | True to make visible, false to hide | <a name="Panoramax.components.ui.Photo+focusOnAnnotation"></a> ### photo.focusOnAnnotation(id, [blockFocus], [skipEvent]) Make view centered and zoomed on given annotation. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) | Param | Type | Default | Description | | --- | --- | --- | --- | | id | <code>string</code> | | The annotation UUID | | [blockFocus] | <code>boolean</code> | <code>false</code> | Set to true to disable user unselect | | [skipEvent] | <code>boolean</code> | <code>false</code> | Set to true to avoid launching annotation-focused event | <a name="Panoramax.components.ui.Photo+unfocusAnnotation"></a> ### photo.unfocusAnnotation([skipEvent], [skipBlocked]) Remove focus styling on annotations. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) | Param | Type | Default | Description | | --- | --- | --- | --- | | [skipEvent] | <code>boolean</code> | <code>false</code> | Set to true to avoid launching annotations-unfocused event | | [skipBlocked] | <code>boolean</code> | <code>false</code> | Set to true to not unfocus blocked annotations | <a name="Panoramax.components.ui.Photo+forceRefresh"></a> ### photo.forceRefresh() Force reload of texture and tiles. **Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo) <a name="Panoramax.components.ui.Photo+event_ready"></a> ### "ready" Triggered once when the panorama image has been loaded and the viewer is ready to perform the first render. **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **See**: [Photo Sphere Viewer documentation](https://photo-sphere-viewer.js.org/guide/events.html#ready) <a name="Panoramax.components.ui.Photo+event_picture-loading"></a> ### "picture-loading" Event for picture starting to load **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.picId | <code>string</code> | The picture unique identifier | | detail.lon | <code>number</code> | Longitude (WGS84) | | detail.lat | <code>number</code> | Latitude (WGS84) | | detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) | | detail.y | <code>number</code> | New y position (in degrees) | | detail.z | <code>number</code> | New z position (0-100) | | detail.first | <code>boolean</code> | True if first picture loaded | <a name="Panoramax.components.ui.Photo+event_picture-preview-started"></a> ### "picture-preview-started" Event for picture preview **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.picId | <code>string</code> | The picture ID | | detail.coordinates | <code>Array.<number></code> | [x,y] coordinates | | detail.direction | <code>number</code> | The theoretical picture orientation | <a name="Panoramax.components.ui.Photo+event_picture-preview-stopped"></a> ### "picture-preview-stopped" Event for end of picture preview **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.picId | <code>string</code> | The picture ID | <a name="Panoramax.components.ui.Photo+event_view-rotated"></a> ### "view-rotated" Event for viewer rotation **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) | | detail.y | <code>number</code> | New y position (in degrees) | | detail.z | <code>number</code> | New Z position (between 0 and 100) | <a name="Panoramax.components.ui.Photo+event_picture-loaded"></a> ### "picture-loaded" Event for picture load (low-resolution image is loaded) **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.picId | <code>string</code> | The picture unique identifier | | detail.lon | <code>number</code> | Longitude (WGS84) | | detail.lat | <code>number</code> | Latitude (WGS84) | | detail.x | <code>number</code> | New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West) | | detail.y | <code>number</code> | New y position (in degrees) | | detail.z | <code>number</code> | New z position (0-100) | | detail.first | <code>boolean</code> | True if first picture loaded | <a name="Panoramax.components.ui.Photo+event_picture-tiles-loaded"></a> ### "picture-tiles-loaded" Event launched when all visible tiles of a picture are loaded **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.picId | <code>string</code> | The picture unique identifier | <a name="Panoramax.components.ui.Photo+event_transition-duration-changed"></a> ### "transition-duration-changed" Event for transition duration change **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.duration | <code>string</code> | New duration (in milliseconds) | <a name="Panoramax.components.ui.Photo+event_sequence-playing"></a> ### "sequence-playing" Event for sequence starting to play **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) <a name="Panoramax.components.ui.Photo+event_sequence-stopped"></a> ### "sequence-stopped" Event for sequence stopped playing **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) <a name="Panoramax.components.ui.Photo+event_pictures-navigation-changed"></a> ### "pictures-navigation-changed" Event for pictures navigation mode change **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.value | <code>string</code> | New mode (any, pic, seq) | <a name="Panoramax.components.ui.Photo+event_annotations-toggled"></a> ### "annotations-toggled" Event for pictures annotation visibility change **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.visible | <code>boolean</code> | True if they are visible | <a name="Panoramax.components.ui.Photo+event_annotation-focused"></a> ### "annotation-focused" Event launched on annotation focus **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.annotationId | <code>string</code> | The annotation UUID | <a name="Panoramax.components.ui.Photo+event_annotations-unfocused"></a> ### "annotations-unfocused" Event for pictures annotation unfocus **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) <a name="Panoramax.components.ui.Photo+event_annotation-drawn"></a> ### "annotation-drawn" Event for annotation drawn **Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.shape | <code>string</code> | The annotation geometry, or null if latest draw is invalid |