DOCSEARCHbyAlgolia
Submit Docs

Photo Sphere Viewer

website·Indexed 30 days ago

https://photo-sphere-viewer.js.org

A TypeScript and SASS based viewer for panoramas. It features a wide range of plugins including MarkersPlugin, VirtualTourPlugin, ResolutionPlugin, and StereoPlugin, as well as support for various adapters such as Equirectangular, Cubemap, and Dual fisheye. The library provides reusable components like tooltips, notifications, and panels to customize the user experience.

Tokens
94.1K
Snippets
629
Records
881
Agent score
71%

What's inside Photo Sphere Viewer

  1. Handle errors using the PSVError class

    The PSVError class is used by Photo Sphere Viewer to throw library-specific errors. It extends the standard JavaScript Error object and allows for an optional reason parameter to provide additional context about why the error occurred.
    // Creating a new PSVError
const error = new PSVError('An error occurred', { detail: 'Invalid image format' });

console.log(error.message);
console.log(error.name);
console.log(error.stack);

  2. Display HTML content in a sidebar using the Panel component

    The Panel component provides a sidebar on the right of the viewer to display HTML content. It supports custom widths, margin removal, and accessibility features where the first focusable element is automatically focused upon opening. Note: Content is rendered as HTML; untrusted input must be sanitized before being passed to the content parameter.

  3. Access device and browser capabilities via the SYSTEM constant

    The SYSTEM constant provides general information about the user's system, including hardware support for WebGL, touch capabilities, and screen properties. This is useful for conditionally rendering UI or adjusting performance settings based on the device's capabilities.
    // Example usage of SYSTEM properties
if (SYSTEM.isWebGLSupported) {
  console.log('WebGL is supported on this device');
}

if (SYSTEM.isTouchEnabled) {
  console.log('Touch events are supported');
}

console.log(`Device pixel ratio: ${SYSTEM.pixelRatio}`);

  4. Use the Animation class for property interpolation

    The Animation<T> class is an interpolation helper used to animate properties over a specified duration. It implements the PromiseLike<boolean> interface, allowing developers to chain actions after an animation finishes. The promise resolves to true if the animation completes naturally and false if it is cancelled via the cancel() method.
    const anim = new Animation({
    properties: {
        width: {start: 100, end: 200}
    },
    duration: 5000,
    onTick: (properties) => element.style.width = `${properties.width}px`;
});

anim.then((completed) => {
    if (completed) {
        console.log('Animation finished successfully');
    } else {
        console.log('Animation was cancelled');
    }
});

// To stop the animation prematurely:
anim.cancel();

  7. Understand the ViewerEventAbstract base class

    The ViewerEventAbstract class serves as the base class for all events dispatched by the Viewer in Photo Sphere Viewer. It extends TypedEvent<Viewer>, providing a standardized structure for viewer-specific events such as animation, rendering, rotation, and user interactions (clicks, keypresses).

  8. Install and integrate VideoPlugin for Photo Sphere Viewer

    The VideoPlugin module provides functionality to integrate video playback within a Photo Sphere Viewer instance. It is distributed as a separate NPM package.
    npm install @photo-sphere-viewer/video-plugin

  10. Use TypedEvent as a base class for custom events

    The TypedEvent<TTarget> class is an abstract base class for events dispatched by a TypedEventTarget. It extends the standard Web Event API, providing a type-safe target property that refers to the object that dispatched the event.
    // Example of a class extending TypedEvent
// TTarget should extend TypedEventTarget
class MyCustomEvent<TTarget extends TypedEventTarget<any>> extends TypedEvent<TTarget> {
  constructor(type: string, cancelable?: boolean) {
    super(type, cancelable);
  }
}

  11. Supported panorama formats in Photo Sphere Viewer

    Photo Sphere Viewer supports two primary types of panoramic imagery: standard equirectangular panoramas and cubemaps.

  12. Display a message overlay in Photo Sphere Viewer

    The Overlay component is used to display a message with an optional illustration on top of the viewer. Content passed to the overlay is rendered as HTML; therefore, untrusted input must be sanitized before being passed to the title, text, or image options to prevent XSS.