Pannellum

![Build Status](https://travis-ci.org/mpetroff/pannellum)
![DOI](https://doi.org/10.5281/zenodo.3334433)
![DOI](https://doi.org/10.21105/joss.01628)

About

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 be deployed easily as a single file, just 21kB gzipped, and then embedded into pages as an </code>. A configuration utility is included to generate the required code for embedding. An API is included for more advanced integrations.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Getting started</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">A set of <a href="https://pannellum.org/documentation/examples/simple-example/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">examples</a> that demonstrate the viewer's various functionality is hosted on <a href="https://pannellum.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pannellum.org</a>. This is the best place to start if you want an overview of Pannellum's functionality. They also provide helpful starting points for creating custom configurations.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If you are just looking to display a single panorama without any advanced functionality, the steps for doing so are covered on the <a href="https://pannellum.org/documentation/overview/tutorial/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">simple tutorial page</a>. Said page also includes a utility for easily creating the necessary Pannellum configuration.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If you would like to locally test or self-host Pannellum, continue to the _How to use_ section below.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">How to use</h2><br />1. Upload <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">build/pannellum.htm</code> and a full equirectangular panorama to a web server or run a development web server locally.<br /> * Due to browser security restrictions, _a web server must be used locally as well_. With Python 3, one can use <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">python3 -m http.server</code>, but any other web server should also work.<br />2. Use the included multi-resolution generator (<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">utils/multires/generate.py</code>), the configuration tool (<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">utils/config/configuration.htm</code>), or create a configuration from scratch or based on an <a href="https://pannellum.org/documentation/examples/simple-example/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">example</a>.<br />3. Insert the generated <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><iframe></code> code into a page, or create a more advanced configuration with <a href="https://pannellum.org/documentation/reference" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSON</a> or the <a href="https://pannellum.org/documentation/api/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">API</a>.</p><p class="my-3">Configuration parameters are documented in the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">doc/json-config-parameters.md</code> file, which is also available at <a href="https://pannellum.org/documentation/reference" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pannellum.org/documentation/reference/</a>. API methods are documented inline with <a href="https://jsdoc.app/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSDoc</a> comments, and generated documentation is available at <a href="https://pannellum.org/documentation/api/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pannellum.org/documentation/api/</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">For final deployment, it is recommended that one use a minified copy of Pannellum instead of using the source files in <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">src</code> directly. The easiest method is to download the most recent <a href="https://github.com/mpetroff/pannellum/releases" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">release</a> and use the pre-built copy of either <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pannellum.htm</code> or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pannellum.js</code> & <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pannellum.css</code>. If you wish to make changes to Pannellum or use the latest development copy of the code, follow the instructions in the _Building_ section below to create <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">build/pannellum.htm</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">build/pannellum.js</code>, and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">build/pannellum.css</code>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />To be able to create multiresolution panoramas, you need to have the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">nona</code> program installed, which is available as part of <a href="http://hugin.sourceforge.net/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Hugin</a>, as well as Python with the <a href="https://pillow.readthedocs.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Pillow</a> package. Then, run</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />python3 generate.py pano_image.jpg<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">in the </code>utils/multires<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory. This will generate all the image tiles and the </code>config.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> file in the </code>./output<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder by default. For this to work, </code>nona<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> needs to be on the system path; otherwise, the location of </code>nona<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can be specified using the </code>-n<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> flag. On a Unix-like platform, with </code>nona<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> already on the system path use:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ cd utils/multires<br />$ python3 generate.py pano_image.jpg<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">where </code>pano_image.jpg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the filename of your equirectangular panorama. If </code>nona<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is not on the system path, use:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ cd utils/multires<br />$ python3 generate.py -n /path/to/nona pano_image.jpg<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">For a complete list of options, run:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ python3 generate.py --help<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To view the generated configuration, run:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ cd ../..<br />$ python3 -m http.server<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">This goes back to the root directory of the repository and starts a local development web server. Then open http://localhost:8000/src/standalone/pannellum.htm?config=../../utils/multires/output/config.json in your web browser of choice.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Bundled examples</h2></p><p class="my-3">Examples using both the minified version and the version in the </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory are included in the </code>examples<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory. These can be viewed by starting a local web server in the root of the repository, e.g., by running:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ python3 -m http.server<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />in the directory containing this readme file, and then navigating to the hosted HTML files using a web browser; note that the examples use files from the </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory, so <strong>the web server must be started from the repository root, not the </code>examples<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory</strong>. For the </code>example-minified.htm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> example to work, a minified copy of Pannellum must first be built; see the _Building_ section below for details.</p><p class="my-3">Additional examples are available at <a href="https://pannellum.org/documentation/examples/simple-example/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pannellum.org</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Browser Compatibility</h2></p><p class="my-3">Since Pannellum is built with web standards, it requires a modern browser to function.</p><p class="my-3">#### Full support (with appropriate graphics drivers):<br />* Firefox 23+<br />* Chrome 24+<br />* Safari 8+<br />* Internet Explorer 11+<br />* Edge</p><p class="my-3">The support list is based on feature support. As only recent browsers are tested, there may be regressions in older browsers.</p><p class="my-3">#### Not officially supported:</p><p class="my-3">Mobile / app frameworks are not officially supported. They may work, but they're not tested and are not the targeted platform.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Translations</h2></p><p class="my-3">All user-facing strings can be changed using the </code>strings<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> configuration parameter. There exists a <a href="https://github.com/DanielBiegler/pannellum-translation" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">third-party respository of user-contributed translations</a> that can be used with this configuration option.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Building</h2><br />The </code>utils<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder contains the required build tools, with the exception of Python 3.2+ and Java installations. To build a minified version of Pannellum, run either </code>build.sh<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>build.bat<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> depending on your platform. On a Unix-like platform:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ cd utils/build<br />$ ./build.sh<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If successful, this should create </code>build/pannellum.htm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>build/pannellum.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>build/pannellum.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, relative to the root directory of the repository.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Tests</h2></p><p class="my-3">A minimal <a href="https://www.seleniumhq.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Selenium</a>-based test suite is located in the </code>tests<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory. The tests can be executed by running:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />python3 run_tests.py<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A Selenium-driven web browser (with a Chrome driver, by default) is created, and screenshots are generated<br />and compared against previously generated ones in <a href="tests" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tests</a>. For example, to regenerate the screenshots<br />one can run:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ python3 tests/run_tests.py --create-ref<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">And to simply run the tests to compare to, eliminate that argument. By default, a random<br />port is selected, along with other arguments. One can see usage via:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ python tests/run_tests.py --help<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Continuous integration tests are run via <a href="https://travis-ci.org/mpetroff/pannellum" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Travis CI</a>. Running the tests locally requires Python 3, the Selenium Python bindings, <a href="https://pillow.readthedocs.io/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Pillow</a>, <a href="https://www.numpy.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">NumPy</a>, and either Firefox & <a href="https://github.com/mozilla/geckodriver" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">geckodriver</a> or Chrome & <a href="https://chromedriver.chromium.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ChromeDriver</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Seeking support</h2><br />If you wish to ask a question or report a bug, please open an issue at <a href="https://github.com/mpetroff/pannellum" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">github.com/mpetroff/pannellum</a>. See the _Contributing_ section below for more details.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2><br />Development takes place at <a href="https://github.com/mpetroff/pannellum" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">github.com/mpetroff/pannellum</a>. Issues should be opened to report bugs or suggest improvements (or ask questions), and pull requests are welcome. When reporting a bug, please try to include a minimum reproducible example (or at least some sort of example). When proposing changes, please try to match the existing code style, e.g., four space indentation and <a href="https://jshint.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSHint</a> validation. If your pull request adds an additional configuration parameter, please document it in </code>doc/json-config-parameters.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Pull requests should preferably be created from <a href="https://www.atlassian.com/git/tutorials/comparing-workflows/feature-branch-workflow" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">feature branches</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2><br />Pannellum is distributed under the MIT License. For more information, read the file </code>COPYING` or peruse the license <a href="https://github.com/mpetroff/pannellum/blob/master/COPYING" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">online</a>.</p><p class="my-3">In the past, parts of Pannellum were based on <a href="https://github.com/mrdoob/three.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">three.js</a> r40, which is licensed under the <a href="https://github.com/mrdoob/three.js/blob/44a8652c37e576d51a7edd97b0f99f00784c3db7/LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT License</a>.</p><p class="my-3">The panoramic image provided with the examples is licensed under the <a href="http://creativecommons.org/licenses/by-sa/3.0/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Credits</h2></p><p class="my-3">* <a href="http://mpetroff.net/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Matthew Petroff</a>, Original Author<br />* <a href="https://github.com/mrdoob/three.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">three.js</a> r40, Former Underlying Framework</p><p class="my-3">If used as part of academic research, please cite:</p><p class="my-3">> Petroff, Matthew A. "Pannellum: a lightweight web-based panorama viewer." _Journal of Open Source Software_ 4, no. 40 (2019): 1628. <a href="https://doi.org/10.21105/joss.01628" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">doi:10.21105/joss.01628</a><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"pannellum\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"pannellum\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"pannellum - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Pannellum is a lightweight, free, and open source panorama viewer for the web.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>pannellum - npm explorer</title><meta name="description" content="Pannellum is a lightweight, free, and open source panorama viewer for the web."/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"pannellum\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"2.5.6\"]}],\"$undefined\",\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"Pannellum is a lightweight, free, and open source panorama viewer for the web.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-1.5\",\"children\":[[\"$\",\"$L5\",\"panorama\",{\"href\":\"/search?q=panorama\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"panorama\"}]}],[\"$\",\"$L5\",\"viewer\",{\"href\":\"/search?q=viewer\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"viewer\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"0\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"3 years ago\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[\"$L18\",\"$L19\",\"$L1a\",\"$L1b\",\"$L1c\",\"$undefined\"]}],\"MIT\"]}],\"$L1d\"]}],\"$L1e\"]}],\"$L1f\"]}],\"$L20\"]}]\n"])</script><script>self.__next_f.push([1,"21:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n22:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n23:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n24:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n25:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n26:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}]\n19:[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}]\n1a:[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}]\n1b:[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}]\n1c:[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}]\n1d:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[\"Unpacked: \",\"778.8 KB\"]}]\n1e:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~Matthew%20Petroff\",\"className\":\"font-medium hover:underline\",\"children\":\"Matthew Petroff\"}]]}]\n"])</script><script>self.__next_f.push([1,"1f:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L21\",null,{\"packageName\":\"pannellum\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/mpetroff/pannellum\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-github mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"tonef\",{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"}],[\"$\",\"path\",\"9comsn\",{\"d\":\"M9 18c-4.51 2-5-2-7-2\"}],\"$undefined\"]}],\"Repository\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],[\"$\",\"a\",null,{\"href\":\"https://pannellum.org/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Homepage\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/pannellum\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}]]}],false]}]\n"])</script><script>self.__next_f.push([1,"27:T26bf,"])</script><script>self.__next_f.push([1,"# Pannellum\n\n[![Build Status](https://travis-ci.org/mpetroff/pannellum.svg?branch=master)](https://travis-ci.org/mpetroff/pannellum)\n[![DOI](https://zenodo.org/badge/DOI/10.5281/zenodo.3334433.svg)](https://doi.org/10.5281/zenodo.3334433)\n[![DOI](https://joss.theoj.org/papers/10.21105/joss.01628/status.svg)](https://doi.org/10.21105/joss.01628)\n\n## About\n\nPannellum 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 be deployed easily as a single file, just 21kB gzipped, and then embedded into pages as an `\u003ciframe\u003e`. A configuration utility is included to generate the required code for embedding. An API is included for more advanced integrations.\n\n## Getting started\n\n### Hosted examples\n\nA set of [examples](https://pannellum.org/documentation/examples/simple-example/) that demonstrate the viewer's various functionality is hosted on [pannellum.org](https://pannellum.org/). This is the best place to start if you want an overview of Pannellum's functionality. They also provide helpful starting points for creating custom configurations.\n\n### Simple tutorial and configuration utility\n\nIf you are just looking to display a single panorama without any advanced functionality, the steps for doing so are covered on the [simple tutorial page](https://pannellum.org/documentation/overview/tutorial/). Said page also includes a utility for easily creating the necessary Pannellum configuration.\n\n### Local testing and self-hosting\n\nIf you would like to locally test or self-host Pannellum, continue to the _How to use_ section below.\n\n## How to use\n1. Upload `build/pannellum.htm` and a full equirectangular panorama to a web server or run a development web server locally.\n * Due to browser security restrictions, _a web server must be used locally as well_. With Python 3, one can use `python3 -m http.server`, but any other web server should also work.\n2. Use the included multi-resolution generator (`utils/multires/generate.py`), the configuration tool (`utils/config/configuration.htm`), or create a configuration from scratch or based on an [example](https://pannellum.org/documentation/examples/simple-example/).\n3. Insert the generated `\u003ciframe\u003e` code into a page, or create a more advanced configuration with [JSON](https://pannellum.org/documentation/reference) or the [API](https://pannellum.org/documentation/api/).\n\nConfiguration parameters are documented in the `doc/json-config-parameters.md` file, which is also available at [pannellum.org/documentation/reference/](https://pannellum.org/documentation/reference). API methods are documented inline with [JSDoc](https://jsdoc.app/) comments, and generated documentation is available at [pannellum.org/documentation/api/](https://pannellum.org/documentation/api/).\n\n### Using a minified copy\n\nFor final deployment, it is recommended that one use a minified copy of Pannellum instead of using the source files in `src` directly. The easiest method is to download the most recent [release](https://github.com/mpetroff/pannellum/releases) and use the pre-built copy of either `pannellum.htm` or `pannellum.js` \u0026 `pannellum.css`. If you wish to make changes to Pannellum or use the latest development copy of the code, follow the instructions in the _Building_ section below to create `build/pannellum.htm`, `build/pannellum.js`, and `build/pannellum.css`.\n\n### Using `generate.py` to create multires panoramas\nTo be able to create multiresolution panoramas, you need to have the `nona` program installed, which is available as part of [Hugin](http://hugin.sourceforge.net/), as well as Python with the [Pillow](https://pillow.readthedocs.org/) package. Then, run\n\n```\npython3 generate.py pano_image.jpg\n```\n\nin the `utils/multires` directory. This will generate all the image tiles and the `config.json` file in the `./output` folder by default. For this to work, `nona` needs to be on the system path; otherwise, the location of `nona` can be specified using the `-n` flag. On a Unix-like platform, with `nona` already on the system path use:\n\n```bash\n$ cd utils/multires\n$ python3 generate.py pano_image.jpg\n```\n\nwhere `pano_image.jpg` is the filename of your equirectangular panorama. If `nona` is not on the system path, use:\n\n```bash\n$ cd utils/multires\n$ python3 generate.py -n /path/to/nona pano_image.jpg\n```\n\nFor a complete list of options, run:\n\n```bash\n$ python3 generate.py --help\n```\n\nTo view the generated configuration, run:\n\n```bash\n$ cd ../..\n$ python3 -m http.server\n```\n\nThis goes back to the root directory of the repository and starts a local development web server. Then open http://localhost:8000/src/standalone/pannellum.htm?config=../../utils/multires/output/config.json in your web browser of choice.\n\n\n## Bundled examples\n\nExamples using both the minified version and the version in the `src` directory are included in the `examples` directory. These can be viewed by starting a local web server in the root of the repository, e.g., by running:\n```bash\n$ python3 -m http.server\n```\nin the directory containing this readme file, and then navigating to the hosted HTML files using a web browser; note that the examples use files from the `src` directory, so **the web server must be started from the repository root, not the `examples` directory**. For the `example-minified.htm` example to work, a minified copy of Pannellum must first be built; see the _Building_ section below for details.\n\nAdditional examples are available at [pannellum.org](https://pannellum.org/documentation/examples/simple-example/).\n\n## Browser Compatibility\n\nSince Pannellum is built with web standards, it requires a modern browser to function.\n\n#### Full support (with appropriate graphics drivers):\n* Firefox 23+\n* Chrome 24+\n* Safari 8+\n* Internet Explorer 11+\n* Edge\n\nThe support list is based on feature support. As only recent browsers are tested, there may be regressions in older browsers.\n\n#### Not officially supported:\n\nMobile / app frameworks are not officially supported. They may work, but they're not tested and are not the targeted platform.\n\n## Translations\n\nAll user-facing strings can be changed using the `strings` configuration parameter. There exists a [third-party respository of user-contributed translations](https://github.com/DanielBiegler/pannellum-translation) that can be used with this configuration option.\n\n## Building\nThe `utils` folder contains the required build tools, with the exception of Python 3.2+ and Java installations. To build a minified version of Pannellum, run either `build.sh` or `build.bat` depending on your platform. On a Unix-like platform:\n\n```bash\n$ cd utils/build\n$ ./build.sh\n```\n\nIf successful, this should create `build/pannellum.htm`, `build/pannellum.js`, and `build/pannellum.css`, relative to the root directory of the repository.\n\n## Tests\n\nA minimal [Selenium](https://www.seleniumhq.org/)-based test suite is located in the `tests` directory. The tests can be executed by running:\n\n```bash\npython3 run_tests.py\n```\n\nA Selenium-driven web browser (with a Chrome driver, by default) is created, and screenshots are generated\nand compared against previously generated ones in [tests](tests). For example, to regenerate the screenshots\none can run:\n\n```bash\n$ python3 tests/run_tests.py --create-ref\n```\n\nAnd to simply run the tests to compare to, eliminate that argument. By default, a random\nport is selected, along with other arguments. One can see usage via:\n\n```bash\n$ python tests/run_tests.py --help\n```\n\nContinuous integration tests are run via [Travis CI](https://travis-ci.org/mpetroff/pannellum). Running the tests locally requires Python 3, the Selenium Python bindings, [Pillow](https://pillow.readthedocs.io/), [NumPy](https://www.numpy.org/), and either Firefox \u0026 [geckodriver](https://github.com/mozilla/geckodriver) or Chrome \u0026 [ChromeDriver](https://chromedriver.chromium.org/).\n\n## Seeking support\nIf you wish to ask a question or report a bug, please open an issue at [github.com/mpetroff/pannellum](https://github.com/mpetroff/pannellum). See the _Contributing_ section below for more details.\n\n## Contributing\nDevelopment takes place at [github.com/mpetroff/pannellum](https://github.com/mpetroff/pannellum). Issues should be opened to report bugs or suggest improvements (or ask questions), and pull requests are welcome. When reporting a bug, please try to include a minimum reproducible example (or at least some sort of example). When proposing changes, please try to match the existing code style, e.g., four space indentation and [JSHint](https://jshint.com/) validation. If your pull request adds an additional configuration parameter, please document it in `doc/json-config-parameters.md`. Pull requests should preferably be created from [feature branches](https://www.atlassian.com/git/tutorials/comparing-workflows/feature-branch-workflow).\n\n## License\nPannellum is distributed under the MIT License. For more information, read the file `COPYING` or peruse the license [online](https://github.com/mpetroff/pannellum/blob/master/COPYING).\n\nIn the past, parts of Pannellum were based on [three.js](https://github.com/mrdoob/three.js) r40, which is licensed under the [MIT License](https://github.com/mrdoob/three.js/blob/44a8652c37e576d51a7edd97b0f99f00784c3db7/LICENSE).\n\nThe panoramic image provided with the examples is licensed under the [Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/).\n\n## Credits\n\n* [Matthew Petroff](http://mpetroff.net/), Original Author\n* [three.js](https://github.com/mrdoob/three.js) r40, Former Underlying Framework\n\nIf used as part of academic research, please cite:\n\n\u003e Petroff, Matthew A. \"Pannellum: a lightweight web-based panorama viewer.\" _Journal of Open Source Software_ 4, no. 40 (2019): 1628. [doi:10.21105/joss.01628](https://doi.org/10.21105/joss.01628)\n"])</script><script>self.__next_f.push([1,"20:[\"$\",\"$L22\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L23\",null,{\"children\":[[\"$\",\"$L24\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L24\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",0,\")\"]}]]}],[\"$\",\"$L24\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",13,\")\"]}]]}]]}],[\"$\",\"$L25\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L26\",null,{\"readme\":\"$27\"}]}],\"$L28\",\"$L29\"]}]\n"])</script><script>self.__next_f.push([1,"2a:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n28:[\"$\",\"$L25\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-lg border p-8 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mx-auto mb-2 h-8 w-8 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground\",\"children\":\"No dependencies\"}]]}]}]\n29:[\"$\",\"$L25\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L2a\",null,{\"packageName\":\"pannellum\",\"versions\":[{\"version\":\"2.5.6\",\"date\":\"2019-11-26T17:52:39.865Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.5.5\",\"date\":\"2019-11-22T01:43:11.209Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.5.4\",\"date\":\"2019-09-10T15:05:13.513Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.5.3\",\"date\":\"2019-08-21T13:38:00.813Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.5.2\",\"date\":\"2019-07-14T01:44:43.318Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.5.1\",\"date\":\"2019-07-13T23:56:07.503Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.4.1\",\"date\":\"2018-03-04T01:28:40.864Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.4.0\",\"date\":\"2018-01-31T04:28:13.754Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.3.2\",\"date\":\"2016-11-21T01:31:24.669Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.3.1\",\"date\":\"2016-11-20T01:00:07.475Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.3.0\",\"date\":\"2016-10-30T17:47:26.290Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.2.1\",\"date\":\"2016-03-11T20:42:14.925Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.2.0\",\"date\":\"2016-02-19T14:12:35.609Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"2.5.6\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">pannellum</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v2.5.6</span></div></div><p class="text-lg text-muted-foreground">Pannellum is a lightweight, free, and open source panorama viewer for the web.</p><div class="flex flex-wrap gap-1.5"><a href="/search?q=panorama"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">panorama</span></a><a href="/search?q=viewer"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">viewer</span></a></div><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">0</span>/week</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated 3 years ago</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>MIT</span><span class="flex items-center gap-1.5">Unpacked: 778.8 KB</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~Matthew%20Petroff">Matthew Petroff</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install pannellum</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://github.com/mpetroff/pannellum" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github mr-1.5 h-4 w-4"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>Repository</a><a href="https://pannellum.org/" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house mr-1.5 h-4 w-4"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Homepage</a><a href="https://npmjs.com/package/pannellum" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(0)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(13)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p><h1 class="text-2xl font-bold mt-6 mb-4">Pannellum</h1></p><p class="my-3"><a href="https://travis-ci.org/mpetroff/pannellum.svg?branch=master" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">![Build Status</a>](https://travis-ci.org/mpetroff/pannellum)<br /><a href="https://zenodo.org/badge/DOI/10.5281/zenodo.3334433.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">![DOI</a>](https://doi.org/10.5281/zenodo.3334433)<br /><a href="https://joss.theoj.org/papers/10.21105/joss.01628/status.svg" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">![DOI</a>](https://doi.org/10.21105/joss.01628)</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">About</h2></p><p class="my-3">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 be deployed easily as a single file, just 21kB gzipped, and then embedded into pages as an <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><iframe></code>. A configuration utility is included to generate the required code for embedding. An API is included for more advanced integrations.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Getting started</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">A set of <a href="https://pannellum.org/documentation/examples/simple-example/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">examples</a> that demonstrate the viewer's various functionality is hosted on <a href="https://pannellum.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pannellum.org</a>. This is the best place to start if you want an overview of Pannellum's functionality. They also provide helpful starting points for creating custom configurations.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If you are just looking to display a single panorama without any advanced functionality, the steps for doing so are covered on the <a href="https://pannellum.org/documentation/overview/tutorial/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">simple tutorial page</a>. Said page also includes a utility for easily creating the necessary Pannellum configuration.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">If you would like to locally test or self-host Pannellum, continue to the _How to use_ section below.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">How to use</h2><br />1. Upload <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">build/pannellum.htm</code> and a full equirectangular panorama to a web server or run a development web server locally.<br /> * Due to browser security restrictions, _a web server must be used locally as well_. With Python 3, one can use <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">python3 -m http.server</code>, but any other web server should also work.<br />2. Use the included multi-resolution generator (<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">utils/multires/generate.py</code>), the configuration tool (<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">utils/config/configuration.htm</code>), or create a configuration from scratch or based on an <a href="https://pannellum.org/documentation/examples/simple-example/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">example</a>.<br />3. Insert the generated <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><iframe></code> code into a page, or create a more advanced configuration with <a href="https://pannellum.org/documentation/reference" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSON</a> or the <a href="https://pannellum.org/documentation/api/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">API</a>.</p><p class="my-3">Configuration parameters are documented in the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">doc/json-config-parameters.md</code> file, which is also available at <a href="https://pannellum.org/documentation/reference" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pannellum.org/documentation/reference/</a>. API methods are documented inline with <a href="https://jsdoc.app/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSDoc</a> comments, and generated documentation is available at <a href="https://pannellum.org/documentation/api/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pannellum.org/documentation/api/</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">For final deployment, it is recommended that one use a minified copy of Pannellum instead of using the source files in <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">src</code> directly. The easiest method is to download the most recent <a href="https://github.com/mpetroff/pannellum/releases" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">release</a> and use the pre-built copy of either <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pannellum.htm</code> or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pannellum.js</code> & <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pannellum.css</code>. If you wish to make changes to Pannellum or use the latest development copy of the code, follow the instructions in the _Building_ section below to create <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">build/pannellum.htm</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">build/pannellum.js</code>, and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">build/pannellum.css</code>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />To be able to create multiresolution panoramas, you need to have the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">nona</code> program installed, which is available as part of <a href="http://hugin.sourceforge.net/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Hugin</a>, as well as Python with the <a href="https://pillow.readthedocs.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Pillow</a> package. Then, run</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />python3 generate.py pano_image.jpg<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">in the </code>utils/multires<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory. This will generate all the image tiles and the </code>config.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> file in the </code>./output<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder by default. For this to work, </code>nona<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> needs to be on the system path; otherwise, the location of </code>nona<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can be specified using the </code>-n<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> flag. On a Unix-like platform, with </code>nona<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> already on the system path use:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ cd utils/multires<br />$ python3 generate.py pano_image.jpg<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">where </code>pano_image.jpg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the filename of your equirectangular panorama. If </code>nona<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is not on the system path, use:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ cd utils/multires<br />$ python3 generate.py -n /path/to/nona pano_image.jpg<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">For a complete list of options, run:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ python3 generate.py --help<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To view the generated configuration, run:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ cd ../..<br />$ python3 -m http.server<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">This goes back to the root directory of the repository and starts a local development web server. Then open http://localhost:8000/src/standalone/pannellum.htm?config=../../utils/multires/output/config.json in your web browser of choice.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Bundled examples</h2></p><p class="my-3">Examples using both the minified version and the version in the </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory are included in the </code>examples<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory. These can be viewed by starting a local web server in the root of the repository, e.g., by running:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ python3 -m http.server<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />in the directory containing this readme file, and then navigating to the hosted HTML files using a web browser; note that the examples use files from the </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory, so <strong>the web server must be started from the repository root, not the </code>examples<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory</strong>. For the </code>example-minified.htm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> example to work, a minified copy of Pannellum must first be built; see the _Building_ section below for details.</p><p class="my-3">Additional examples are available at <a href="https://pannellum.org/documentation/examples/simple-example/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pannellum.org</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Browser Compatibility</h2></p><p class="my-3">Since Pannellum is built with web standards, it requires a modern browser to function.</p><p class="my-3">#### Full support (with appropriate graphics drivers):<br />* Firefox 23+<br />* Chrome 24+<br />* Safari 8+<br />* Internet Explorer 11+<br />* Edge</p><p class="my-3">The support list is based on feature support. As only recent browsers are tested, there may be regressions in older browsers.</p><p class="my-3">#### Not officially supported:</p><p class="my-3">Mobile / app frameworks are not officially supported. They may work, but they're not tested and are not the targeted platform.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Translations</h2></p><p class="my-3">All user-facing strings can be changed using the </code>strings<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> configuration parameter. There exists a <a href="https://github.com/DanielBiegler/pannellum-translation" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">third-party respository of user-contributed translations</a> that can be used with this configuration option.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Building</h2><br />The </code>utils<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder contains the required build tools, with the exception of Python 3.2+ and Java installations. To build a minified version of Pannellum, run either </code>build.sh<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>build.bat<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> depending on your platform. On a Unix-like platform:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ cd utils/build<br />$ ./build.sh<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If successful, this should create </code>build/pannellum.htm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>build/pannellum.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>build/pannellum.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, relative to the root directory of the repository.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Tests</h2></p><p class="my-3">A minimal <a href="https://www.seleniumhq.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Selenium</a>-based test suite is located in the </code>tests<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory. The tests can be executed by running:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />python3 run_tests.py<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A Selenium-driven web browser (with a Chrome driver, by default) is created, and screenshots are generated<br />and compared against previously generated ones in <a href="tests" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tests</a>. For example, to regenerate the screenshots<br />one can run:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ python3 tests/run_tests.py --create-ref<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">And to simply run the tests to compare to, eliminate that argument. By default, a random<br />port is selected, along with other arguments. One can see usage via:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />$ python tests/run_tests.py --help<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Continuous integration tests are run via <a href="https://travis-ci.org/mpetroff/pannellum" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Travis CI</a>. Running the tests locally requires Python 3, the Selenium Python bindings, <a href="https://pillow.readthedocs.io/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Pillow</a>, <a href="https://www.numpy.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">NumPy</a>, and either Firefox & <a href="https://github.com/mozilla/geckodriver" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">geckodriver</a> or Chrome & <a href="https://chromedriver.chromium.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ChromeDriver</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Seeking support</h2><br />If you wish to ask a question or report a bug, please open an issue at <a href="https://github.com/mpetroff/pannellum" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">github.com/mpetroff/pannellum</a>. See the _Contributing_ section below for more details.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2><br />Development takes place at <a href="https://github.com/mpetroff/pannellum" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">github.com/mpetroff/pannellum</a>. Issues should be opened to report bugs or suggest improvements (or ask questions), and pull requests are welcome. When reporting a bug, please try to include a minimum reproducible example (or at least some sort of example). When proposing changes, please try to match the existing code style, e.g., four space indentation and <a href="https://jshint.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSHint</a> validation. If your pull request adds an additional configuration parameter, please document it in </code>doc/json-config-parameters.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Pull requests should preferably be created from <a href="https://www.atlassian.com/git/tutorials/comparing-workflows/feature-branch-workflow" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">feature branches</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2><br />Pannellum is distributed under the MIT License. For more information, read the file </code>COPYING` or peruse the license <a href="https://github.com/mpetroff/pannellum/blob/master/COPYING" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">online</a>.</p><p class="my-3">In the past, parts of Pannellum were based on <a href="https://github.com/mrdoob/three.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">three.js</a> r40, which is licensed under the <a href="https://github.com/mrdoob/three.js/blob/44a8652c37e576d51a7edd97b0f99f00784c3db7/LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT License</a>.</p><p class="my-3">The panoramic image provided with the examples is licensed under the <a href="http://creativecommons.org/licenses/by-sa/3.0/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Credits</h2></p><p class="my-3">* <a href="http://mpetroff.net/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Matthew Petroff</a>, Original Author<br />* <a href="https://github.com/mrdoob/three.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">three.js</a> r40, Former Underlying Framework</p><p class="my-3">If used as part of academic research, please cite:</p><p class="my-3">> Petroff, Matthew A. "Pannellum: a lightweight web-based panorama viewer." _Journal of Open Source Software_ 4, no. 40 (2019): 1628. <a href="https://doi.org/10.21105/joss.01628" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">doi:10.21105/joss.01628</a><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>