Merge branch 'master' of https://github.com/mpetroff/pannellum.git into hotspots

examples/example-multires.json

@@ -6,6 +6,7 @@
     "multiRes": {
         "basePath": "./multires",
         "path": "/%l/%s%x%y",
+        "fallbackPath": "/fallback/%s",
         "extension": "png",
         "tileResolution": 256,
         "maxLevel": 4,

readme.md

@@ -2,18 +2,12 @@
 
 ## 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 18kB gzipped, and then embedded into pages as an `<iframe>`. A configuration utility is included to generate the required code for embedding.
+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 11kB gzipped, and then embedded into pages as an `<iframe>`. A configuration utility is included to generate the required code for embedding.
 
 ## How to use
 1. Upload `build/pannellum.htm` and a full equirectangular panorama to a web server.
     * Due to browser security restrictions, a web server must be used locally as well. With Python 2, one can use `python -m SimpleHTTPServer`, and with Python 3, one can use `python -m http.server`, but any other web server will work as well.
-2. Use the included configuration tool (`utils/config/configuration.htm`).
-    * `Pannellum Location` is the address of `pannellum.htm` and can be either a full or relative path (relative to the page containing the `<iframe>`).
-    * `Panorama URL` is the address of the panorama image file and can be either a full or relative path (relative to `pannellum.htm`).
-    * `Basic Information` is optional. If provided, it is displayed in the bottom left corner.
-    * `Embed Size` is the dimensions of the `<iframe>`.
-    * `Auto Load` loads the panorama when the page is loaded. If left unchecked, the user must click to load the panorama.
-    * `Generate` creates the embed code that can then be copied wherever desired.
+2. Use the included multi-resolution generator (`utils/multires/generate.py`) or configuration tool (`utils/config/configuration.htm`).
 3. Insert the generated `<iframe>` code into a page.
 
 ## Examples

src/js/libpannellum.js

@@ -45,22 +45,23 @@ function Renderer(container, image, imageType) {
         gl = this.canvas.getContext('experimental-webgl', {alpha: false, depth: false});
         
         // If there is no WebGL, fall back to CSS 3D transform renderer.
-        if (!gl && this.imageType == 'multires') {
+        if (!gl && this.imageType == 'multires' && this.image.fallbackPath) {
             // Initialize renderer
             container.className = 'viewport';
             this.world = container.querySelector('.world');
             this.world.style.display = 'block';
             
             // Add images
-            var path = this.image.basePath + '/fallback/';
-            this.world.querySelector('.fface').style.backgroundImage = 'url("' + path + 'f.' + this.image.extension + '")';
-            this.world.querySelector('.bface').style.backgroundImage = 'url("' + path + 'b.' + this.image.extension + '")';
-            this.world.querySelector('.uface').style.backgroundImage = 'url("' + path + 'u.' + this.image.extension + '")';
-            this.world.querySelector('.dface').style.backgroundImage = 'url("' + path + 'd.' + this.image.extension + '")';
-            this.world.querySelector('.lface').style.backgroundImage = 'url("' + path + 'l.' + this.image.extension + '")';
-            this.world.querySelector('.rface').style.backgroundImage = 'url("' + path + 'r.' + this.image.extension + '")';
+            var path = this.image.basePath + this.image.fallbackPath;
+            var sides = ['f', 'b', 'u', 'd', 'l', 'r'];
+            for (var s = 0; s < 6; s++) {
+                this.world.querySelector('.' + sides[s] + 'face').style.backgroundImage = 'url("' + path.replace('%s',sides[s]) + '.' + this.image.extension + '")';
+            }
             
             return;
+        } else if (!gl) {
+            console.log('Error: no WebGL support detected!');
+            throw 'no webgl';
         }
         this.image.fullpath = this.image.basePath + this.image.path;
         
@@ -189,6 +190,12 @@ function Renderer(container, image, imageType) {
             program.nodeCache = [];
             program.nodeCacheTimestamp = 0;
         }
+        
+        // Check if there was an error
+        if (gl.getError() != 0) {
+            console.log('Error: something went wrong with WebGL!');
+            throw 'webgl error';
+        }
     }
 
     this.render = function(pitch, yaw, hfov) {

src/js/pannellum.js

@@ -65,12 +65,7 @@ function init() {
     }
     
     function onImageLoad() {
-        try {
-            renderer = new libpannellum.renderer(document.getElementById('container'), panoImage, config.type);
-        } catch (event) {
-            // Show error message if WebGL is not supported
-            anError();
-        }
+        renderer = new libpannellum.renderer(document.getElementById('container'), panoImage, config.type);
         
         // Only add event listeners once
         if(!listenersAdded) {
@@ -464,7 +459,7 @@ function renderInit() {
         // Panorama not loaded
         
         // Display error if there is a bad texture
-        if(event == 'bad texture') {
+        if (event == 'webgl error' || event == 'no webgl') {
             anError();
         }
     }

utils/config/configuration.htm

@@ -11,7 +11,7 @@
                 embed_code.innerHTML = '<iframe title="pannellum panorama viewer"' +
                     ' width="' + escape(form.embed_width.value) +
                     '" height="' + escape(form.embed_height.value) +
-                    '" webkitAllowFullScreen mozallowfullscreen allowFullScreen' +
+                    '" allowfullscreen' +
                     ' style="border-style:none;"' +
                     '" src="' + escape(form.pannellum_url.value) +
                     '?' +

utils/multires/generate.py

@@ -139,6 +139,7 @@ text.append('    "type": "multires",')
 text.append('    ')
 text.append('    "multiRes": {')
 text.append('        "path": "./%l/%s%y_%x",')
+text.append('        "fallbackPath": "./fallback/%s",')
 text.append('        "extension": "jpg",')
 text.append('        "tileResolution": ' + str(args.tileSize) + ',')
 text.append('        "maxLevel": ' + str(levels) + ',')