Photo Sphere Viewer

# SettingsPlugin Styles

NPM version NPM Downloads jsDelivr Hits
API Documentation

This plugin does nothing on it's own but is required by other plugins.

This plugin is available in the @photo-sphere-viewer/settings-plugin (opens new window) package.

# Usage

Once enabled the plugin will add a new "Settings" button which other plugins can use to display various settings in the side panel.

const viewer = new PhotoSphereViewer.Viewer({
    plugins: [PhotoSphereViewer.SettingsPlugin],
});

# Example

The following example manually adds two settings.

# Adding a setting

Registering a new setting is done by calling the addSetting on the plugin. There are currently two types of setting.

# Toggle setting

This a setting which has only two values : true and false. It is required to provide the active(): boolean and toggle(): void functions.

let enabled = false;

settings.addSetting({
    id: 'custom-toggle-setting',
    label: 'Toggle setting',
    type: 'toggle',
    active: () => enabled,
    toggle: () => (enabled = !enabled),
});

# Options setting

This is a setting which has multiple available values (or options). It is required to provide the current(): string, options(): Options[] and apply(option: string): void functions.

let currentOption = 'A';

settings.addSetting({
    id: 'custom-options-setting',
    label: 'Options setting',
    type: 'options',
    options: () => [
        { id: 'A', label: 'Option A' },
        { id: 'B', label: 'Option B' },
    ],
    current: () => currentOption,
    apply: (option) => (currentOption = option),
});

# Button badge

A setting can also have a badge function, which return value will be used as a badge on the settings button itself. Only one setting can declare a badge.

settings.addSetting({
  ...,
  badge: () => currentOption,
});

# Configuration

# persist

  • type: boolean
  • default: false
  • updatable: no

Should the settings be persisted. The persistence storage can be configured.

# storage

  • type:
{
  get(settingId: string): boolean | string | Promise<boolean | string>;
  set(settingId: string, value: boolean | string);
}
  • default: LocalStorage with key psvSettings
  • updatable: no

Custom storage solution, for example LocalForage, NgRx, HTTP service, etc.

# lang

  • type: object
  • default:
lang: {
    settings: 'Settings',
}

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

# Events

# setting-changed(settingId, settingValue)

Triggered when the resolution is changed.

settingsPlugin.addEventListener('setting-changed', ({ settingId, settingValue }) => {
    console.log(`${settingId}: ${settingValue}`);
});

# Buttons

This plugin adds buttons to the default navbar:

  • settings allows to open the settings panel

If you use a custom navbar you will need to manually add the buttons to the list.

← StereoPlugin →