Introducting Streamlit Pannellum: A component for show interactive panorama images

Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free. It can show 360 images and get interactive mode to explore it like a virtual tour.
Streamlit pannellum is the streamlit component porting of pannellum streamlit-pannellum · PyPI

A code example with two equal scene firs and second with the possibility to explore and pass from first to second scene:

from streamlit_pannellum import streamlit_pannellum

streamlit_pannellum(
    config={
      "default": {
        "firstScene": "first",
      },
      "scenes": {
        "first": {
          "title": "My first example",
          "type": "equirectangular",
          "panorama": "https://pannellum.org/images/alma.jpg",
          "autoLoad": True,
          "author": "Me",
          "hotSpots": [
            {
              "pitch": 15,
              "yaw": 0,
              "type": "info",
              "text": "This is an info."
            },
            {
              "pitch": 0,
              "yaw": -10,
              "type": "scene",
              "text": "Second scene",
              "sceneId": "second"
            }
          ],
        },
        "second": {
          "title": "My second example",
          "type": "equirectangular",
          "panorama": "https://pannellum.org/images/alma.jpg",
          "autoLoad": True,
          "author": "always Me",
          "hotSpots": [
            {
              "pitch": 15,
              "yaw": 0,
              "type": "info",
              "text": "This is an info."
            },
            {
              "pitch": 0,
              "yaw": -10,
              "type": "scene",
              "text": "First scene",
              "sceneId": "first"
            }
          ],
        }
      }
    }
)

The links “https://pannellum.org/images/alma.jpg” can be substituted with yours, and if you need to use streamlit served images read static file serving streamlit documentation Static file serving - Streamlit Docs

1 Like

Really cool component, @nicolalandro! :raised_hands:

I’ve added it to our component tracker:

Best wishes,
Charly