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