The Resolution plugin adds a resolution selector to the viewer’s settings panel. It requires the Settings plugin.
The Resolution plugin is not compatible with the Gallery plugin.
Installation
npm install @photo-sphere-viewer/resolution-plugin
Usage
Load the Settings plugin before the Resolution plugin, then provide the list of available resolutions.
import { Viewer } from '@photo-sphere-viewer/core';
import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
const viewer = new Viewer({
panorama: 'sphere.jpg',
plugins: [
SettingsPlugin,
ResolutionPlugin.withConfig({
defaultResolution: 'SD',
resolutions: [
{
id: 'SD',
label: 'Small',
panorama: 'sphere_small.jpg',
},
{
id: 'HD',
label: 'Normal',
panorama: 'sphere.jpg',
},
],
}),
],
});
Configuration
List of available resolutions. Not updatable — use setResolutions() instead.Each resolution object has the following properties:| Property | Type | Description |
|---|
id | string | Unique identifier |
label | string | Display name shown in the settings panel |
panorama | any | Panorama value passed to viewer.setPanorama() |
panoData | PanoData | Optional panorama data |
ID of the resolution to load initially. Falls back to the first resolution if not set.This setting is ignored when a panorama is already configured on the viewer.
Show the current resolution ID as a badge on the settings button. Not updatable after init.
Localization strings merged with the main viewer lang object.lang: {
resolution: 'Quality',
}
Methods
setResolutions(resolutions, defaultResolution?)
Replaces the available resolutions. Optionally pass a new defaultResolution ID.
Events
resolution-changed
Triggered when the user selects a different resolution.
resolutionPlugin.addEventListener('resolution-changed', ({ resolutionId }) => {
console.log(`Current resolution: ${resolutionId}`);
});
