Dash Pannellum - Interactive 360° 🧿 Panorama Component

[PipInstallPython]

Hey!

Dash Pannellum is a Dash component that integrates the Pannellum panorama viewer into your Dash applications. It allows you to display interactive 360° panoramas, including equirectangular images, create tours, and host 360° videos.

• Display equirectangular panoramas
• Support for multi-resolution panoramas
• 360° video playback
• Tour mode with multiple scenes and hotspots
• Customizable controls
• Center dot option for orientation
• pinpoint location of where the user is within the component
• autoload feature
• adjustable props
• supports keyboard controls [left arrow] [right arrow] [up arrow] [down arrow] to move, [shift] zoom in and [control] to zoom out

Install via :

pip install dash-pannellum

Documentation:

Dash Pip Components | Dash Pannellum

Github

GitHub - pip-install-python/dash_pannellum: pannellum.org for Plotly Dash

Help Wanted!

Could someone with a VR set test out this component for me would be cool to know if the full screen mode worked for VR.

Thought this would be a fun component to build out for story telling or in addition to leaflet maps, could make some more improvements. Test it out, give some feedback and let me know where you’d like to see this component expanded.

Follow me on github:

Also if you like this project check out my other dash packages I’ve built:

• Dash Swiper - A Swiper Component for Dash
• Dash Summernote - A rich text WYSIWYG Editor for Dash
• Dash Insta Stories - A Instagram Stories Component for Dash
• Dash Image Gallery - A Image Gallery Component for Dash
• Full-Calendar-Component - A Full Calendar Component for Dash
• Dash Emoji Mart - A Slack-like Emoji Picker for Dash
• Dash Dynamic Grid Layout - A Dynamic Grid Layout Component for Dash
• Dash Discord - Discord integration for the Dash framework
• Dash Pannellum - 360 Panorama Viewer for Images and Video for Dash
• Dash Nivo - A Nivo Area Bump & Responsive Circle Graph for Dash
• Dash Credit Cards - A Credit Card Component for Dash
• Dash Charty - A Charting Library for Dash

Cheers,
Pip

[adamschroeder]

Another great library added to the growing famous list. Thank you @PipInstallPython

Have you used this in your own work or projects yet?

[PipInstallPython]

Just purchased an insta 360 and im moving in that direction.

For fun, im thinking a geo guessing app where you arrive to a random place with that panorama view and you have to click on a leaflet map to guess the location of the image.

Have only started on some rough draft apps but think with a little bit of creativity the component could make a nice addition to some projects

[adamschroeder]

I would definitely play that geo guessing game

[PipInstallPython]

Updated this project to include some new props.

We are currently on 0.0.6 release.

The new props are:
compass
northOffset

This basically adds a compass in the right bottom corner of the component allowing the user to know where north is within the panorama and show what direction you are pointing within the component.

Outside of that I also added an experimental prop:
useHttpStreaming

This can allow the component to use .m3u8 files for live stream. Made some progress but haven’t fully cracked the code not fully working and pretty buggy.

Also fun way to use this component, is it will automatically wrap even regular pictures and yes video (.mp4) in a 360 view. To showcase this, I have an example for a regular video turned into a 360 video if you really wanna trip (please don’t try this specific example if you have epilepsy or are sensitive to motion / lights)

video_config = {
    "sources": [
        {"src": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4", "type": "video/mp4"},
    ],
    "poster": "https://bitmovin-a.akamaihd.net/content/playhouse-vr/poster.jpg"
}

dash_pannellum.DashPannellum(
        id='video-component',
        video=video_config,
        showCenterDot=True,
        autoLoad=True,
        width='100%',
        height='400px',
        compass=True,
        northOffset=90
    ),

Also apparently you can tell Ai to make 360 images and create some pretty cool immersive experiences:

example prompt:

can you make me a image seamlessly and display as a 360-degree panorama, adjust the image to ensure that the elements blend smoothly across the edges. Present it in a 360-degree view format. Make the image ________