ResolutionPlugin

Adds a button to choose between multiple resolutions of the panorama. Requires the Settings plugin.

This plugin is available in the @photo-sphere-viewer/resolution-plugin package.

WARNING

ResolutionPlugin is not compatible with GalleryPlugin.

Usage

Once enabled the plugin will add a new setting the user can use to change the resolution of the panorama.

import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';

const viewer = new Viewer({
    plugins: [
        SettingsPlugin,
        [ResolutionPlugin, {
            defaultResolution: 'SD',
            resolutions: [
                {
                    id: 'SD',
                    label: 'Small',
                    panorama: 'sphere_small.jpg',
                },
                {
                    id: 'HD',
                    label: 'Normal',
                    panorama: 'sphere.jpg',
                },
            ],
        }],
    ],
});

Example

The following example provides two resolutions for the panorama, "small" is loaded by default.

Configuration

resolutions

• type: object[]
• updatable: no, use setResolutions() method

List of available resolutions. Each resolution consists of an object with the properties id, label, panorama and panoData (optional).

defaultResolution

• type: string
• updatable: no

The id of the default resolution to load. If not provided the first resolution will be used.

WARNING

If a panorama is initially configured on the viewer, this setting is ignored.

showBadge

• type: boolean
• default: true
• updatable: no

Show the resolution id as a badge on the settings button.

lang

• type: object
• default:

lang: {
    resolution: 'Quality',
}

Note: this option is not part of the plugin but is merged with the main lang object.

Methods

setResolutions(resolutions, defaultResolution?)

Changes the available resolutions.

Events

resolution-changed(id)

Triggered when the resolution is changed.

resolutionPlugin.addEventListener('resolution-changed', ({ resolutionId }) => {
    console.log(`Current resolution: ${resolutionId}`);
});