### Start Local Web Server

Source: https://github.com/mpetroff/pannellum/blob/master/readme.md

Start a local HTTP server to view Pannellum examples or generated configurations. Ensure you are in the correct directory before running.

```bash
cd ../..
python3 -m http.server
```

```bash
python3 -m http.server
```

--------------------------------

### Copy Example Panorama

Source: https://github.com/mpetroff/pannellum/blob/master/utils/multires/readme.md

Copies an example panorama image to the current directory for processing.

```bash
$ cp ../../examples/examplepano.jpg .

```

--------------------------------

### touchstart

Source: https://github.com/mpetroff/pannellum/blob/master/doc/events.md

Fired when a touch starts.

```APIDOC
## touchstart

### Description
Fired when a touch starts.

### Parameters
- **event** (TouchEvent) - The TouchEvent object.
```

--------------------------------

### Start Local HTTP Server

Source: https://github.com/mpetroff/pannellum/blob/master/utils/multires/readme.md

Starts a Python HTTP server in the project root to serve the generated panorama tiles and configuration.

```bash
$ cd ../..
$ python3 -m http.server

```

--------------------------------

### Install Local Dependencies for Tile Generation

Source: https://github.com/mpetroff/pannellum/blob/master/utils/multires/readme.md

Installs necessary Python packages and Hugin tools on Ubuntu for local tile generation.

```bash
$ sudo apt install python3 python3-pil python3-numpy python3-pip hugin-tools
$ pip3 install --user pyshtools

```

--------------------------------

### Generate Tiles with Local Dependencies

Source: https://github.com/mpetroff/pannellum/blob/master/utils/multires/readme.md

Executes the `generate.py` script to create multi-resolution tiles from a panorama image using locally installed dependencies.

```bash
python3 generate.py examplepano.jpg

```

--------------------------------

### Build Docker Image for Tile Generation

Source: https://github.com/mpetroff/pannellum/blob/master/utils/multires/readme.md

Builds a Docker image named 'generate-panorama' to run the tile generation script without local dependency installation.

```bash
$ docker build -t generate-panorama .

```

--------------------------------

### HTTP Server Request Log

Source: https://github.com/mpetroff/pannellum/blob/master/utils/multires/readme.md

Example log output from the Python HTTP server showing requests for panorama assets.

```log
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/standalone/pannellum.htm HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/css/pannellum.css HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/standalone/standalone.css HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/js/libpannellum.js HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/js/pannellum.js HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/standalone/standalone.js HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /utils/multires/output/config.json HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/css/img/background.svg HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/css/img/sprites.svg HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:24] "GET /src/css/img/compass.svg HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:26] "GET /src/css/img/grab.svg HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:27] "GET /utils/multires/output//1/r0_0.jpg HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:27] "GET /utils/multires/output//1/f0_0.jpg HTTP/1.1" 200 -
127.0.0.1 - - [09/Aug/2019 09:41:27] "GET /utils/multires/output//1/u0_0.jpg HTTP/1.1" 200 -
...

```

--------------------------------

### View Generated Panorama

Source: https://github.com/mpetroff/pannellum/blob/master/utils/multires/readme.md

URL to access the multi-resolution panorama in a browser after starting the HTTP server.

```html
http://localhost:8000/src/standalone/pannellum.htm#config=../../utils/multires/output/config.json

```

--------------------------------

### viewer.setYaw / getYaw / setYawBounds / getYawBounds

Source: https://context7.com/mpetroff/pannellum/llms.txt

Gets or sets the horizontal viewing angle (yaw) in degrees [-180, 180], animating via the shortest path.

```APIDOC
## viewer.setYaw / getYaw / setYawBounds / getYawBounds

### Description
Gets or sets the horizontal viewing angle (yaw) in degrees [-180, 180], animating via the shortest path.

### Methods
- **getYaw()**: Returns the current horizontal viewing angle.
- **setYaw(yaw, animated, callback)**: Sets the horizontal viewing angle.
- **getYawBounds()**: Returns the current yaw bounds `[minYaw, maxYaw]`.
- **setYawBounds(bounds)**: Sets the yaw bounds.

### Parameters
- **yaw** (number) - The horizontal viewing angle in degrees.
- **animated** (number) - Optional - Duration in milliseconds for animation.
- **callback** (function) - Optional - Function to call after animation completes.
- **bounds** (array) - An array containing the minimum and maximum yaw values `[minYaw, maxYaw]`.

### Request Example
```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true,
  yaw: 0,
  minYaw: -90,
  maxYaw: 90
});

console.log(viewer.getYaw());

// Animated yaw change (800ms)
viewer.setYaw(45, 800, function() {
  console.log('Yaw reached:', viewer.getYaw());
});

// Check yaw bounds
console.log(viewer.getYawBounds());

// Expand yaw limits dynamically
viewer.setYawBounds([-180, 180]);
```
```

--------------------------------

### Standalone viewer via <iframe>

Source: https://context7.com/mpetroff/pannellum/llms.txt

Embed Pannellum without JavaScript using URL hash parameters with the standalone `pannellum.htm` file. This is suitable for simple equirectangular panoramas or complex setups via a JSON config file.

```APIDOC
## Standalone viewer via `<iframe>` with URL parameters

### Description
Pannellum can be embedded without writing JavaScript by using URL hash parameters with the standalone `pannellum.htm` file, suitable for simple equirectangular panoramas.

### Method
HTML (iframe embed)

### Endpoint
`pannellum.htm`

### Parameters (URL Hash Parameters)
- **panorama** (String) - URL of the panorama image.
- **autoLoad** (Boolean) - Whether to automatically load the panorama.
- **title** (String) - Title of the panorama.
- **hfov** (Number) - Horizontal Field of View.
- **pitch** (Number) - Initial pitch.
- **yaw** (Number) - Initial yaw.
- **compass** (Boolean) - Whether to show the compass.
- **showZoomCtrl** (Boolean) - Whether to show the zoom controls.
- **config** (String) - URL to a JSON configuration file for more complex setups.

### Request Example
```html
<!-- Embed a panorama using iframe and URL hash config -->
<iframe
  width="600"
  height="400"
  allowfullscreen
  src="pannellum.htm#panorama=my-panorama.jpg&autoLoad=true&title=My+View&hfov=100&pitch=0&yaw=0&compass=true&showZoomCtrl=true">
</iframe>

<!-- Link to a JSON config file for more complex setups -->
<iframe
  width="600"
  height="400"
  allowfullscreen
  src="pannellum.htm#config=config.json">
</iframe>
```
```

--------------------------------

### Display Help for generate.py

Source: https://github.com/mpetroff/pannellum/blob/master/readme.md

View all available options for the generate.py script by running the help command.

```bash
python3 generate.py --help
```

--------------------------------

### viewer.setHfov / getHfov / setHfovBounds / getHfovBounds

Source: https://context7.com/mpetroff/pannellum/llms.txt

Gets or sets the horizontal field of view (zoom level) in degrees.

```APIDOC
## viewer.setHfov / getHfov / setHfovBounds / getHfovBounds

### Description
Gets or sets the horizontal field of view (zoom level) in degrees.

### Methods
- **getHfov()**: Returns the current horizontal field of view.
- **setHfov(hfov, animated, callback)**: Sets the horizontal field of view.
- **getHfovBounds()**: Returns the current HFOV bounds `[minHfov, maxHfov]`.
- **setHfovBounds(bounds)**: Sets the HFOV bounds.

### Parameters
- **hfov** (number) - The horizontal field of view in degrees.
- **animated** (number | boolean) - Optional - Duration in milliseconds or `false` for instant animation.
- **callback** (function) - Optional - Function to call after animation completes.
- **bounds** (array) - An array containing the minimum and maximum HFOV values `[minHfov, maxHfov]`.

### Request Example
```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true,
  hfov: 100,
  minHfov: 50,
  maxHfov: 150
});

console.log(viewer.getHfov());
console.log(viewer.getHfovBounds());

// Zoom in over 1 second
viewer.setHfov(60, 1000, function() {
  console.log('Zoomed in, hfov:', viewer.getHfov());
});

// Zoom out instantly
viewer.setHfov(120, false);

// Adjust zoom limits
viewer.setHfovBounds([40, 120]);
```
```

--------------------------------

### Control Dynamic Content Updates

Source: https://context7.com/mpetroff/pannellum/llms.txt

Use `setUpdate(true)` to enable continuous redrawing for dynamic panorama sources like video elements, and `setUpdate(false)` to disable it. This is often integrated with video playback events.

```javascript
// Integrate with Video.js plugin for 360° video
// Include videojs-pannellum-plugin.js and call:
// player.pannellum({ northOffset: 0 });

// Or manually with a video element
var vid = document.getElementById('pano-video');
var viewer = pannellum.viewer('container', {
  type: 'equirectangular',
  panorama: vid,      // Pass the video element directly
  dynamic: true,
  dynamicUpdate: false,
  autoLoad: true,
  showZoomCtrl: false
});

vid.addEventListener('play', function() {
  viewer.setUpdate(true);
});
vid.addEventListener('pause', function() {
  viewer.setUpdate(false);
});
```

--------------------------------

### Generate Tiles using Docker

Source: https://github.com/mpetroff/pannellum/blob/master/utils/multires/readme.md

Runs the Docker container to generate panorama tiles, mounting the current directory to '/data' for input and output.

```bash
$ docker run -it -v $PWD:/data generate-panorama --output /data/output /data/examplepano.jpg

```

--------------------------------

### viewer.setPitch / getPitch / setPitchBounds / getPitchBounds

Source: https://context7.com/mpetroff/pannellum/llms.txt

Gets or sets the vertical viewing angle (pitch) in degrees, with optional bounds clamping.

```APIDOC
## viewer.setPitch / getPitch / setPitchBounds / getPitchBounds

### Description
Gets or sets the vertical viewing angle (pitch) in degrees, with optional bounds clamping.

### Methods
- **getPitch()**: Returns the current vertical viewing angle.
- **setPitch(pitch, animated, callback, callbackArgs)**: Sets the vertical viewing angle.
- **getPitchBounds()**: Returns the current pitch bounds `[minPitch, maxPitch]`.
- **setPitchBounds(bounds)**: Sets the pitch bounds.

### Parameters
- **pitch** (number) - The vertical viewing angle in degrees.
- **animated** (number) - Optional - Duration in milliseconds for animation.
- **callback** (function) - Optional - Function to call after animation completes.
- **callbackArgs** (object) - Optional - Custom arguments to pass to the callback.
- **bounds** (array) - An array containing the minimum and maximum pitch values `[minPitch, maxPitch]`.

### Request Example
```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true,
  minPitch: -60,
  maxPitch: 30
});

// Read current pitch
console.log(viewer.getPitch());

// Set pitch with 1.5 second animation + callback
viewer.setPitch(-30, 1500, function(args) {
  console.log('setPitch done, args:', args);
}, { info: 'custom' });

// Read allowed pitch range
console.log(viewer.getPitchBounds());

// Dynamically update pitch bounds
viewer.setPitchBounds([-45, 45]);
```
```

--------------------------------

### Utility Methods: getConfig, getContainer, isLoaded, resize

Source: https://context7.com/mpetroff/pannellum/llms.txt

These methods provide utilities for querying the viewer's state and managing its DOM container. `getConfig` retrieves the current configuration, `getContainer` returns the DOM element, `isLoaded` checks if the panorama is loaded, and `resize` handles programmatic resizing of the viewer.

```APIDOC
## viewer.getConfig / getContainer / isLoaded / resize

### Description
Miscellaneous utility methods for querying viewer state and managing the DOM.

### Methods
- `viewer.isLoaded()`: Returns `true` if the panorama is loaded, `false` otherwise.
- `viewer.getConfig()`: Returns the full current configuration object.
- `viewer.getContainer()`: Returns the DOM element that contains the viewer.
- `viewer.resize()`: Notifies the viewer to resize, typically after its container has been programmatically resized.

### Request Example
```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true
});

viewer.on('load', function() {
  // Check if panorama is loaded
  console.log(viewer.isLoaded()); // true

  // Get the full current configuration object
  var cfg = viewer.getConfig();
  console.log(cfg.panorama); // 'pano.jpg'

  // Get container element
  var el = viewer.getContainer();
  console.log(el.id); // 'panorama'
});

// After programmatic resize of the container div, notify the viewer
document.getElementById('resize-btn').addEventListener('click', function() {
  document.getElementById('panorama').style.height = '600px';
  viewer.resize();
});
```
```

--------------------------------

### Manage Scenes Dynamically

Source: https://context7.com/mpetroff/pannellum/llms.txt

Use `loadScene` to switch scenes, `getScene` to query the current scene, `addScene` to add new scenes, and `removeScene` to remove existing scenes.

```javascript
var viewer = pannellum.viewer('panorama', {
  default: { firstScene: 'scene1', sceneFadeDuration: 1000 },
  scenes: {
    scene1: {
      title: 'Scene 1',
      type: 'equirectangular',
      panorama: 'pano1.jpg',
      autoLoad: true
    },
    scene2: {
      title: 'Scene 2',
      type: 'equirectangular',
      panorama: 'pano2.jpg'
    }
  }
});

console.log(viewer.getScene()); // 'scene1'

// Switch to scene2, landing at specific pitch/yaw/hfov
viewer.loadScene('scene2', -5, 90, 100);

// Add a new scene dynamically
viewer.addScene('scene3', {
  title: 'Scene 3',
  type: 'equirectangular',
  panorama: 'pano3.jpg'
});

// Navigate to the new scene
viewer.loadScene('scene3');

// Remove a non-current scene
var success = viewer.removeScene('scene2');
console.log('Removed scene2:', success); // true
```

--------------------------------

### Build Pannellum

Source: https://github.com/mpetroff/pannellum/blob/master/readme.md

Execute the build script to create a minified version of Pannellum. This process requires Python 3.2+ and Java.

```bash
cd utils/build
./build.sh
```

--------------------------------

### Device Orientation: startOrientation, stopOrientation, isOrientationSupported, isOrientationActive

Source: https://context7.com/mpetroff/pannellum/llms.txt

Enable gyroscope/device-orientation–based panorama control on supported mobile devices. These methods allow you to start and stop the orientation control, and check if it is supported and active.

```APIDOC
## viewer.startOrientation / stopOrientation / isOrientationSupported / isOrientationActive

### Description
Enable gyroscope/device-orientation–based panorama control on supported mobile devices (requires HTTPS).

### Methods
- `viewer.startOrientation()`: Starts device orientation control.
- `viewer.stopOrientation()`: Stops device orientation control.
- `viewer.isOrientationSupported()`: Returns `true` if device orientation is supported, `false` otherwise.
- `viewer.isOrientationActive()`: Returns `true` if device orientation is currently active, `false` otherwise.

### Request Example
```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true,
  orientationOnByDefault: false
});

document.getElementById('gyro-btn').addEventListener('click', function() {
  if (viewer.isOrientationSupported()) {
    if (viewer.isOrientationActive()) {
      viewer.stopOrientation();
      console.log('Gyro off');
    } else {
      viewer.startOrientation();
      console.log('Gyro on');
    }
  } else {
    console.warn('Device orientation not supported');
  }
});
```
```

--------------------------------

### Initialize Pannellum Viewer with Multiple Scenes

Source: https://github.com/mpetroff/pannellum/blob/master/tests/tests.html

Initializes the Pannellum viewer with default settings and defines multiple scenes, including cubemap and equirectangular types. Use this for setting up a multi-scene panorama viewer.

```javascript
viewer = pannellum.viewer('panorama', {
  "default": {
    "author": "testauthor",
    "firstScene": "equirectangular",
    "autoLoad": true
  },
  "scenes": {
    "cube": {
      "title": "cube title",
      "type": "cubemap",
      "cubeMap": [
        "../examples/multires/1/f00.png",
        "../examples/multires/1/r00.png",
        "../examples/multires/1/b00.png",
        "../examples/multires/1/l00.png",
        "../examples/multires/1/u00.png",
        "../examples/multires/1/d00.png"
      ],
      "hotSpots": [
        {
          "pitch": -12,
          "yaw": 170,
          "type": "info",
          "text": "info test"
        },
        {
          "pitch": -10,
          "yaw": -50,
          "type": "info",
          "text": "link test",
          "URL": "https://github.com/mpetroff/pannellum"
        },
        {
          "pitch": 0,
          "yaw": -10,
          "type": "scene",
          "text": "scene test",
          "sceneId": "multires"
        }
      ]
    },
    "equirectangular": {
      "title": "equirectangular title",
      "panorama": "../examples/examplepano.jpg"
    },
    "multires": {
      "title": "multires title",
      "type": "multires",
      "hfov": 85,
      "multiRes": {
        "basePath": "../examples/multires",
        "path": "/%l/%s%x%y",
        "fallbackPath": "/fallback/%s",
        "extension": "png",
        "tileResolution": 256,
        "maxLevel": 4,
        "cubeResolution": 2048
      },
      "hotSpots": [
        {
          "pitch": 20,
          "yaw": 20,
          "type": "info",
          "text": "drag test",
          "draggable": true,
          "dragHandlerFunc": console.log
        }
      ]
    }
  }
});
```

--------------------------------

### Orientation Correction: getNorthOffset, setNorthOffset, getHorizonPitch, setHorizonPitch, getHorizonRoll, setHorizonRoll

Source: https://context7.com/mpetroff/pannellum/llms.txt

These methods allow for correcting compass north offset and non-level panorama horizons. You can set and get the north offset, as well as adjust the pitch and roll of the horizon to correct for a tilted camera.

```APIDOC
## viewer.getNorthOffset / setNorthOffset / getHorizonPitch / setHorizonPitch / getHorizonRoll / setHorizonRoll

### Description
Correct compass north offset and non-level panorama horizons.

### Methods
- `viewer.setNorthOffset(offset)`: Sets the compass north offset in degrees.
- `viewer.getNorthOffset()`: Returns the current compass north offset in degrees.
- `viewer.setHorizonPitch(pitch)`: Sets the horizon pitch correction in degrees.
- `viewer.getHorizonPitch()`: Returns the current horizon pitch correction in degrees.
- `viewer.setHorizonRoll(roll)`: Sets the horizon roll correction in degrees.
- `viewer.getHorizonRoll()`: Returns the current horizon roll correction in degrees.

### Request Example
```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true,
  compass: true,
  northOffset: 0,
  horizonPitch: 0,
  horizonRoll: 0
});

// Adjust compass north alignment
viewer.setNorthOffset(135);
console.log(viewer.getNorthOffset()); // 135

// Correct a tilted camera (horizon pitch/roll in degrees)
viewer.setHorizonPitch(3.5);
viewer.setHorizonRoll(-1.2);
console.log(viewer.getHorizonPitch()); // 3.5
console.log(viewer.getHorizonRoll());  // -1.2
```
```

--------------------------------

### load

Source: https://github.com/mpetroff/pannellum/blob/master/doc/events.md

Fired when a panorama finishes loading.

```APIDOC
## load

### Description
Fired when a panorama finishes loading.

### Parameters
This event does not pass any parameters to its handler.
```

--------------------------------

### Query Viewer State and Manage DOM with Utility Methods

Source: https://context7.com/mpetroff/pannellum/llms.txt

Use these methods to check if a panorama is loaded, retrieve the current configuration, and access the viewer's container element. The `resize()` method should be called after programmatic changes to the container's dimensions.

```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true
});

viewer.on('load', function() {
  // Check if panorama is loaded
  console.log(viewer.isLoaded()); // true

  // Get the full current configuration object
  var cfg = viewer.getConfig();
  console.log(cfg.panorama); // 'pano.jpg'
  console.log(cfg.hfov);     // 100

  // Get container element
  var el = viewer.getContainer();
  console.log(el.id); // 'panorama'
  el.style.border = '2px solid blue';
});

// After programmatic resize of the container div, notify the viewer
document.getElementById('resize-btn').addEventListener('click', function() {
  document.getElementById('panorama').style.height = '600px';
  viewer.resize();
});
```

--------------------------------

### Generate Multiresolution Tiles with Python

Source: https://context7.com/mpetroff/pannellum/llms.txt

Use `generate.py` to convert an equirectangular image into multiresolution tiles and a `config.json`. Requires `nona`, Pillow, and NumPy. Specify `nona` path, custom output directory, or use a Docker environment.

```bash
# Basic usage — output goes to ./output/
cd utils/multires
python3 generate.py pano_image.jpg
```

```bash
# Specify path to nona if not on PATH
python3 generate.py -n /usr/local/bin/nona pano_image.jpg
```

```bash
# Specify custom output directory
python3 generate.py --output /var/www/html/mypano pano_image.jpg
```

```bash
# Specify a Dockerfile-based environment instead
docker build -t pannellum-generate .
docker run --rm -v $(pwd):/data pannellum-generate pano_image.jpg
```

```bash
# View the result with Python's built-in server
cd ../..
python3 -m http.server
# Open: http://localhost:8000/src/standalone/pannellum.htm#config=../../utils/multires/output/config.json
```

--------------------------------

### Generate Multiresolution Tiles

Source: https://context7.com/mpetroff/pannellum/llms.txt

Use this bash script to generate multiresolution tiles and a configuration file from a source equirectangular image. Navigate to the multires directory before running.

```bash
cd utils/multires
python3 generate.py pano_image.jpg
```

--------------------------------

### Run Selenium Tests

Source: https://github.com/mpetroff/pannellum/blob/master/readme.md

Execute the Selenium-based test suite. This requires Python 3, Selenium bindings, Pillow, NumPy, and a WebDriver.

```bash
python3 run_tests.py
```

```bash
python3 tests/run_tests.py --create-ref
```

```bash
python tests/run_tests.py --help
```

--------------------------------

### Dynamic Content Updates: setUpdate

Source: https://context7.com/mpetroff/pannellum/llms.txt

For dynamic panorama sources like video elements, this method controls whether the viewer redraws continuously. Set to `true` for continuous updates (e.g., during video playback) and `false` to pause updates.

```APIDOC
## viewer.setUpdate(bool)

### Description
For dynamic panorama sources such as `<video>` elements, controls whether the viewer redraws continuously.

### Parameters
#### Path Parameters
- `bool` (boolean) - `true` to enable continuous updates, `false` to disable.

### Request Example
```javascript
// Integrate with Video.js plugin for 360° video
// Include videojs-pannellum-plugin.js and call:
// player.pannellum({ northOffset: 0 });

// Or manually with a video element
var vid = document.getElementById('pano-video');
var viewer = pannellum.viewer('container', {
  type: 'equirectangular',
  panorama: vid,      // Pass the video element directly
  dynamic: true,
  dynamicUpdate: false,
  autoLoad: true,
  showZoomCtrl: false
});

vid.addEventListener('play', function() {
  viewer.setUpdate(true);
});
vid.addEventListener('pause', function() {
  viewer.setUpdate(false);
});
```
```

--------------------------------

### Create Pannellum Viewer Instance with JavaScript API

Source: https://context7.com/mpetroff/pannellum/llms.txt

Embed Pannellum programmatically by providing a container element and a configuration object. Event listeners for 'load' and 'error' are demonstrated. Ensure Pannellum assets are included.

```html
<!-- Include Pannellum assets -->
<link rel="stylesheet" href="pannellum.css"/>
<script src="pannellum.js"></script>

<div id="panorama" style="width: 100%; height: 400px;"></div>

<script>
  var viewer = pannellum.viewer('panorama', {
    type: 'equirectangular',
    panorama: 'my-panorama.jpg',
    title: 'My Panorama',
    author: 'Jane Smith',
    autoLoad: true,
    hfov: 110,
    pitch: -5,
    yaw: 30,
    minHfov: 50,
    maxHfov: 120,
    compass: true,
    northOffset: 45,
    showControls: true,
    friction: 0.15
  });

  viewer.on('load', function() {
    console.log('Panorama loaded!');
    console.log('Pitch:', viewer.getPitch());  // -5
    console.log('Yaw:', viewer.getYaw());      // 30
    console.log('HFOV:', viewer.getHfov());    // 110
  });

  viewer.on('error', function(msg) {
    console.error('Viewer error:', msg);
  });
</script>
```

--------------------------------

### messageshown

Source: https://github.com/mpetroff/pannellum/blob/master/doc/events.md

Fired when a message is shown.

```APIDOC
## messageshown

### Description
Fired when a message, e.g., for needing `ctrl` + scroll to zoom, is shown.
```

--------------------------------

### Generate Multiresolution Panoramas

Source: https://github.com/mpetroff/pannellum/blob/master/readme.md

Use this script to generate image tiles and a config.json file for multiresolution panoramas. Ensure 'nona' is in your system path or specify its location with the -n flag.

```bash
python3 generate.py pano_image.jpg
```

```bash
cd utils/multires
python3 generate.py pano_image.jpg
```

```bash
cd utils/multires
python3 generate.py -n /path/to/nona pano_image.jpg
```

--------------------------------

### pannellum.viewer(container, config)

Source: https://context7.com/mpetroff/pannellum/llms.txt

The primary entry point for embedding Pannellum programmatically. It accepts a container DOM element and a configuration object, returning a Viewer instance.

```APIDOC
## pannellum.viewer(container, config) — Create a viewer instance

### Description
The primary entry point for embedding Pannellum programmatically. Accepts a container DOM element (or its string ID) and an initial configuration object. Returns a `Viewer` instance exposing all API methods.

### Method
JavaScript

### Parameters
#### Path Parameters
- **container** (DOM Element or String) - The DOM element or its ID where the viewer will be rendered.
- **config** (Object) - An object containing configuration options for the viewer.

### Request Example
```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'my-panorama.jpg',
  title: 'My Panorama',
  author: 'Jane Smith',
  autoLoad: true,
  hfov: 110,
  pitch: -5,
  yaw: 30,
  minHfov: 50,
  maxHfov: 120,
  compass: true,
  northOffset: 45,
  showControls: true,
  friction: 0.15
});

viewer.on('load', function() {
  console.log('Panorama loaded!');
  console.log('Pitch:', viewer.getPitch());
  console.log('Yaw:', viewer.getYaw());
  console.log('HFOV:', viewer.getHfov());
});

viewer.on('error', function(msg) {
  console.error('Viewer error:', msg);
});
```

### Response
#### Success Response
- **Viewer Instance** - An object with methods to control and interact with the panorama viewer.
```

--------------------------------

### Event System

Source: https://context7.com/mpetroff/pannellum/llms.txt

Allows subscribing to and unsubscribing from various viewer events, such as loading, scene changes, zoom changes, and errors.

```APIDOC
## viewer.on

### Description
Subscribes a callback function to a specific viewer event.

### Parameters
- **eventName** (string) - Required - The name of the event to subscribe to (e.g., 'load', 'scenechange', 'zoomchange', 'error').
- **callback** (function) - Required - The function to execute when the event is triggered.

### Request Example
```javascript
viewer.on('load', function() {
  console.log('Panorama loaded');
});
```

## viewer.off

### Description
Unsubscribes a callback function from a specific viewer event, or removes all listeners for an event type, or removes all listeners.

### Parameters
- **eventName** (string) - Optional - The name of the event to unsubscribe from. If omitted, all listeners are removed.
- **callback** (function) - Optional - The specific callback function to remove. If omitted and eventName is provided, all listeners for that eventName are removed.

### Request Example
```javascript
// Remove a specific listener
viewer.off('error', errorHandler);

// Remove all listeners for 'zoomchange'
viewer.off('zoomchange');

// Remove all listeners for all events
viewer.off();
```
```

--------------------------------

### JSON configuration file — Cubemap panorama

Source: https://context7.com/mpetroff/pannellum/llms.txt

Configure a cubemap panorama using a JSON file with the `type: "cubemap"` setting and a `cubeMap` array specifying the six face image URLs.

```APIDOC
## JSON configuration file — Cubemap panorama

### Description
Cubemap panoramas are specified with `type: "cubemap"` and a `cubeMap` array of six face image URLs in the order: front, right, back, left, up, down.

### Method
JSON

### Parameters (JSON fields)
- **title** (String) - Title of the panorama.
- **author** (String) - Author of the panorama.
- **preview** (String) - URL of a preview image.
- **type** (String) - Type of panorama ('cubemap').
- **cubeMap** (Array) - Array of six image URLs for the cube map faces (front, right, back, left, up, down).
- **autoLoad** (Boolean) - Whether to automatically load the panorama.
- **hotSpots** (Array) - Array of hot spot configurations.
  - **pitch** (Number) - Pitch of the hot spot.
  - **yaw** (Number) - Yaw of the hot spot.
  - **type** (String) - Type of hot spot ('info', 'scene', etc.).
  - **text** (String) - Text to display for the hot spot.
  - **URL** (String) - URL to navigate to (for 'scene' or external links).

### Request Example
```json
{
  "title": "Jordan Pond (Cube)",
  "author": "Matthew Petroff",
  "preview": "./preview.jpg",
  "type": "cubemap",
  "cubeMap": [
    "./cube_front.jpg",
    "./cube_right.jpg",
    "./cube_back.jpg",
    "./cube_left.jpg",
    "./cube_up.jpg",
    "./cube_down.jpg"
  ],
  "autoLoad": true,
  "hotSpots": [
    {
      "pitch": -12,
      "yaw": 170,
      "type": "info",
      "text": "This is Jordan Pond, located in Acadia National Park."
    },
    {
      "pitch": -10,
      "yaw": -50,
      "type": "info",
      "text": "GitHub link",
      "URL": "https://github.com/mpetroff/pannellum"
    }
  ]
}
```
```

--------------------------------

### fullscreenchange

Source: https://github.com/mpetroff/pannellum/blob/master/doc/events.md

Fired when the browser's fullscreen status changes.

```APIDOC
## fullscreenchange

### Description
Fired when browser fullscreen status changed.

### Parameters
- **status** (boolean) - The new fullscreen status (true if fullscreen, false otherwise).
```

--------------------------------

### generate.py

Source: https://context7.com/mpetroff/pannellum/llms.txt

A Python 3 utility script to convert a single equirectangular image into a set of multiresolution tiles and a `config.json` file. It requires `nona`, Pillow, and NumPy.

```APIDOC
## generate.py

### Description
Converts a single equirectangular image into a set of multiresolution tiles and a `config.json` file. Requires `nona` (from Hugin), Pillow, and NumPy.

### Usage
```bash
# Basic usage — output goes to ./output/
cd utils/multires
python3 generate.py pano_image.jpg

# Specify path to nona if not on PATH
python3 generate.py -n /usr/local/bin/nona pano_image.jpg

# Specify custom output directory
python3 generate.py --output /var/www/html/mypano pano_image.jpg

# Specify a Dockerfile-based environment instead
docker build -t pannellum-generate .
docker run --rm -v $(pwd):/data pannellum-generate pano_image.jpg

# View the result with Python's built-in server
cd ../..
python3 -m http.server
# Open: http://localhost:8000/src/standalone/pannellum.htm#config=../../utils/multires/output/config.json
```
```

--------------------------------

### JSON Configuration for Cubemap Panorama

Source: https://context7.com/mpetroff/pannellum/llms.txt

Configure a cubemap panorama using a JSON file. Specify the six faces of the cube map using the `cubeMap` array in the order: front, right, back, left, up, down. Includes settings for hot spots.

```json
{
  "title": "Jordan Pond (Cube)",
  "author": "Matthew Petroff",
  "preview": "./preview.jpg",
  "type": "cubemap",
  "cubeMap": [
    "./cube_front.jpg",
    "./cube_right.jpg",
    "./cube_back.jpg",
    "./cube_left.jpg",
    "./cube_up.jpg",
    "./cube_down.jpg"
  ],
  "autoLoad": true,
  "hotSpots": [
    {
      "pitch": -12,
      "yaw": 170,
      "type": "info",
      "text": "This is Jordan Pond, located in Acadia National Park."
    },
    {
      "pitch": -10,
      "yaw": -50,
      "type": "info",
      "text": "GitHub link",
      "URL": "https://github.com/mpetroff/pannellum"
    }
  ]
}
```

--------------------------------

### Multiresolution Panorama JSON Configuration

Source: https://context7.com/mpetroff/pannellum/llms.txt

Configure a multiresolution panorama by specifying paths for tile images, fallback images, and other parameters like tile resolution and maximum zoom level.

```json
{
  "title": "Multires Panorama",
  "type": "multires",
  "autoLoad": true,
  "multiRes": {
    "basePath": "./multires",
    "path": "/%l/%s%x%y",
    "fallbackPath": "/fallback/%s",
    "extension": "jpg",
    "tileResolution": 512,
    "maxLevel": 4,
    "cubeResolution": 8192
  }
}
```

--------------------------------

### Manage Viewer Events

Source: https://context7.com/mpetroff/pannellum/llms.txt

Use `viewer.on` to subscribe to events like 'load', 'scenechange', 'zoomchange', 'animatefinished', and 'error'. Use `viewer.off` to unsubscribe.

```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true
});

// Load event: fires when panorama finishes loading
viewer.on('load', function() {
  console.log('Panorama loaded');
});

// Scene change event: fires when a new scene starts loading (tour only)
viewer.on('scenechange', function(sceneId) {
  console.log('Switching to scene:', sceneId);
});

// Zoom change event: fires when HFOV changes
viewer.on('zoomchange', function(hfov) {
  console.log('New HFOV:', hfov);
});

// Animation finished event: fires when all movement stops
viewer.on('animatefinished', function(data) {
  console.log('Final pitch:', data.pitch, 'yaw:', data.yaw, 'hfov:', data.hfov);
});

// Error event
var errorHandler = function(msg) {
  console.error('Error:', msg);
};
viewer.on('error', errorHandler);

// Remove a specific listener
viewer.off('error', errorHandler);

// Remove all listeners for an event type
viewer.off('zoomchange');

// Remove all listeners
viewer.off();
```

--------------------------------

### JSON Configuration for Equirectangular Panorama

Source: https://context7.com/mpetroff/pannellum/llms.txt

Configure a single equirectangular panorama or a virtual tour using a JSON file. This file can be referenced via the `config` URL parameter for embedding without JavaScript. Includes settings for auto-rotation, hot spots, and background color.

```json
{
  "title": "Jordan Pond",
  "author": "Matthew Petroff",
  "authorURL": "https://mpetroff.net/",
  "type": "equirectangular",
  "panorama": "pano.jpg",
  "preview": "pano-preview.jpg",
  "autoLoad": true,
  "autoRotate": -2,
  "autoRotateInactivityDelay": 5000,
  "hfov": 100,
  "pitch": 0,
  "yaw": 0,
  "minHfov": 50,
  "maxHfov": 120,
  "minPitch": -85,
  "maxPitch": 85,
  "compass": true,
  "northOffset": 90,
  "backgroundColor": [0, 0, 0],
  "hotSpotDebug": false,
  "hotSpots": [
    {
      "pitch": -10,
      "yaw": 50,
      "type": "info",
      "text": "This is a point of interest.",
      "id": "poi-1"
    },
    {
      "pitch": 0,
      "yaw": -90,
      "type": "info",
      "text": "Visit our website",
      "URL": "https://example.com",
      "attributes": { "target": "_blank" }
    }
  ]
}
```

--------------------------------

### Virtual Tour JSON Configuration

Source: https://context7.com/mpetroff/pannellum/llms.txt

Define a virtual tour with a default scene and multiple scenes. Hotspots of type 'scene' can link between different scenes, specifying target positions.

```json
{
  "default": {
    "author": "Matthew Petroff",
    "firstScene": "pond",
    "sceneFadeDuration": 2000
  },
  "scenes": {
    "pond": {
      "title": "Jordan Pond",
      "type": "equirectangular",
      "panorama": "./pano-pond.jpg",
      "autoLoad": true,
      "hotSpots": [
        {
          "pitch": 0,
          "yaw": 100,
          "type": "scene",
          "text": "Go to Cube View",
          "sceneId": "pondCube",
          "targetPitch": -10,
          "targetYaw": "sameAzimuth"
        }
      ]
    },
    "pondCube": {
      "title": "Jordan Pond (Cube)",
      "type": "cubemap",
      "cubeMap": [
        "./cube_f.jpg", "./cube_r.jpg", "./cube_b.jpg",
        "./cube_l.jpg", "./cube_u.jpg", "./cube_d.jpg"
      ],
      "hotSpots": [
        {
          "pitch": 0,
          "yaw": -60,
          "type": "scene",
          "text": "Back to Equirectangular",
          "sceneId": "pond"
        }
      ]
    }
  }
}
```

--------------------------------

### scenechange

Source: https://github.com/mpetroff/pannellum/blob/master/doc/events.md

Fired when a scene change is initiated. A `load` event will be fired when the new scene finishes loading.

```APIDOC
## scenechange

### Description
Fired when a scene change is initiated. A `load` event will be fired when the new scene finishes loading.

### Parameters
- **sceneId** (string) - The ID of the scene that is being changed to.
```

--------------------------------

### viewer.lookAt

Source: https://context7.com/mpetroff/pannellum/llms.txt

Smoothly animates the viewer to a new pitch, yaw, and/or HFOV. Any parameter can be undefined to leave it unchanged. 'animated' is a duration in milliseconds (default 1000) or false for instant.

```APIDOC
## viewer.lookAt(pitch, yaw, hfov, animated, callback)

### Description
Smoothly animates the viewer to a new pitch, yaw, and/or HFOV. Any parameter can be `undefined` to leave it unchanged. `animated` is a duration in milliseconds (default `1000`) or `false` for instant.

### Method
```javascript
viewer.lookAt(pitch, yaw, hfov, animated, callback)
```

### Parameters
- **pitch** (number) - Optional - The vertical viewing angle in degrees.
- **yaw** (number) - Optional - The horizontal viewing angle in degrees.
- **hfov** (number) - Optional - The horizontal field of view in degrees.
- **animated** (number | boolean) - Optional - Duration in milliseconds or `false` for instant animation.
- **callback** (function) - Optional - Function to call after animation completes.

### Request Example
```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true
});

// Animate to a specific position over 2 seconds, then log completion
viewer.lookAt(-10, 90, 80, 2000, function() {
  console.log('Animation complete');
});

// Instant jump with no animation
viewer.lookAt(0, 0, 100, false);

// Change only yaw (leave pitch and hfov unchanged)
viewer.lookAt(undefined, 180, undefined, 500);
```
```

--------------------------------

### Animate Viewer Camera Position

Source: https://context7.com/mpetroff/pannellum/llms.txt

Use the `lookAt` method to smoothly animate the viewer's pitch, yaw, and HFOV. Parameters can be left undefined to maintain their current values. Animation duration is in milliseconds, or `false` for an instant change.

```javascript
var viewer = pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'pano.jpg',
  autoLoad: true
});

// Animate to a specific position over 2 seconds, then log completion
viewer.lookAt(-10, 90, 80, 2000, function() {
  console.log('Animation complete');
  console.log('Now at pitch:', viewer.getPitch()); // -10
  console.log('Now at yaw:', viewer.getYaw());     // 90
  console.log('Now at hfov:', viewer.getHfov());   // 80
});

// Instant jump with no animation
viewer.lookAt(0, 0, 100, false);

// Change only yaw (leave pitch and hfov unchanged)
viewer.lookAt(undefined, 180, undefined, 500);
```

--------------------------------

### touchend

Source: https://github.com/mpetroff/pannellum/blob/master/doc/events.md

Fired when a touch ends.

```APIDOC
## touchend

### Description
Fired when a touch ends.

### Parameters
- **event** (TouchEvent) - The TouchEvent object.
```