Getting Started

Install Dash Pannellum and embed your first interactive 360° panorama in a Dash app

Installation

pip install dash-pannellum

Dash Pannellum targets Dash 4.2+ and works on every Dash backend (Flask, FastAPI, Quart). The viewer itself — Pannellum — is loaded from its CDN at runtime, so the Python wheel stays tiny and there is nothing else to install.

Dash Pannellum 2.0.0 is the modernized revival of the original 0.0.6 component: rebuilt against Dash 4.x and React 18, documented with the live examples on this site, and repackaged with pyproject.toml.

Your first panorama

A single 360° image is just a tour with one scene. Set autoLoad=True to skip the click-to-load screen and compass=True to display a heading indicator:

# File: docs/getting-started/basic_panorama.py

from dash_pannellum import DashPannellum

component = DashPannellum(
    id="gs-basic-panorama",
    tour={
        "default": {"firstScene": "alma", "author": "Pip Install Python"},
        "scenes": {
            "alma": {
                "title": "ALMA Observatory",
                "type": "equirectangular",
                "panorama": "https://pannellum.org/images/alma.jpg",
                "autoLoad": True,
            }
        },
    },
    autoLoad=True,
    compass=True,
    width="100%",
    height="450px",
)

Drag to look around, scroll to zoom, and use the controls in the top-left corner. Everything you see is rendered with WebGL — no browser plug-ins.

The three viewer modes

DashPannellum picks its mode from whichever configuration prop you pass:

Each mode has its own documentation page with a live example — see Virtual Tours, Multi-Resolution and 360° Video.

Reading the viewer state in callbacks

The component continuously reports the camera orientation back to Dash. Use pitch, yaw and currentScene as callback Inputs:

from dash import Input, Output, callback

@callback(
    Output("readout", "children"),
    Input("my-panorama", "pitch"),
    Input("my-panorama", "yaw"),
)
def show_view(pitch, yaw):
    return f"Looking at pitch {pitch}°, yaw {yaw}°"

Updates are change-detected and throttled to 4 per second, so idle panoramas don't spam your callback graph.

Next steps

• Virtual Tours — connect multiple scenes with hotspots
• Callback Hotspots — make hotspots fire Dash callbacks
• API Reference — the full prop table

Source: /getting-started