Version 2.4

README.md

@@ -13,18 +13,23 @@ Photo Sphere Viewer uses the [Three.js](http://threejs.org) library, so nothing
     * `container` (required): the `div` in which the panorama will be displayed.
     * `autoload` (optional, default to `true`): `true` to automatically load the panorama, `false` to load it later (with the `.load()` method).
     * `usexmpdata` (optional, default to `true`): `true` if Photo Sphere Viewer must read XMP data, `false` if it is not necessary.
+    * `pano_size` (optional, default to null) The panorama size, if cropped (unnecessary if XMP data can be read).
     * `default_position` (optional, default to `{}`) Defines the default position, the first point seen by the user (e.g. `{long: Math.PI, lat: Math.PI/2}`).
     * `min_fov` (optional, default to `30`): the minimal field of view, in degrees, between 1 and 179.
     * `max_fov` (optional, default to `90`): the maximal field of view, in degrees, between 1 and 179.
     * `allow_user_interactions` (optional, default to `true`): If set to `false`, the user won't be able to interact with the panorama (navigation bar is then disabled).
     * `tilt_up_max` (optional, default to `Math.PI/2`) The maximal tilt up angle, in radians.
     * `tilt_down_max` (optional, default to `Math.PI/2`) The maximal tilt down angle, in radians.
+    * `min_longitude` (optional, default to 0) The minimal longitude to show.
+    * `max_longitude` (optional, default to 2π) The maximal longitude to show.
     * `zoom_level` (optional, default to `0`) The default zoom level, between 0 and 100.
     * `long_offset` (optional, default to `PI/360`): the longitude to travel per pixel moved by mouse/touch.
     * `lat_offset` (optional, default to `PI/180`): the latitude to travel per pixel moved by mouse/touch.
     * `time_anim` (optional, default to `2000`): the panorama will be automatically animated after `time_anim` milliseconds (indicate `false` to deactivate it).
-    * `theta_offset` (deprecated, optional, default to `1440`): the horizontal speed during the automatic animation (we add `PI / theta_offset` to the angle).
+    * `reverse_anim` (optional, default to true) `true` if horizontal animation must be reversed when min/max longitude is reached (only if the whole circle is not described).
     * `anim_speed` (optional, default to `2rpm`): animation speed in radians/degrees/revolutions per second/minute.
+    * `vertical_anim_speed` (optional, default to `2rpm`): vertical animation speed in radians/degrees/revolutions per second/minute.
+    * `vertical_anim_target` (optional, default to `0`): latitude to target during the autorotate animation, default to the equator.
     * `navbar` (optional, default to `false`): set to `true`, a navigation bar will be displayed.
     * `navbar_style` (optional, default to `{}`): a custom style for the navigation bar. See the list below to know what properties are available.
         * `backgroundColor`: the navigation bar background color (default to `rgba(61, 61, 61, 0.5)`).
@@ -42,6 +47,7 @@ Photo Sphere Viewer uses the [Three.js](http://threejs.org) library, so nothing
         Colors can be in `rgb()`, `rgba()` or hexadecimal format, and the keyword `transparent` is accepted.
     * `loading_msg` (optional, default to `Loading…`): Loading message.
     * `loading_img` (optional, default to `null`): the path to the image shown during the loading.
+    * `loading_html` (optional, default to null) An HTML loader (element to append to the container or string representing the HTML).
     * `size` (optional, default to `null`): the final size of the panorama container (e.g. `{width: 500, height: 300}`).
     * `onready` (optional, default to `null`) Function called once the panorama is ready and the first image is displayed.
 

examples/example1.css

@@ -1,3 +1,9 @@
+@keyframes spin {
+	to {
+		transform: rotate(1turn);
+	}
+}
+
 body {
 	margin: 0;
 	font-family: 'Liberation Sans', sans-serif;
@@ -30,6 +36,18 @@ header h1 {
 	margin: 0 auto;
 }
 
+.loader {
+	margin: 0 auto;
+	width: 30px;
+	height: 30px;
+
+	border: 3px solid transparent;
+	border-top-color: #0096FF;
+	border-radius: 50%;
+
+	animation: spin 0.8s ease infinite;
+}
+
 p {
 	margin-bottom: 30px;
 }

examples/example1.js

@@ -8,7 +8,13 @@ window.onload = function() {
 function loadPredefinedPanorama(evt) {
 	evt.preventDefault();
 
+	// Loader
+	var loader = document.createElement('div');
+	loader.className = 'loader';
+
+	// Panorama display
 	var div = document.getElementById('container');
+	div.style.height = '30px';
 
 	var PSV = new PhotoSphereViewer({
 		// Path to the panorama
@@ -27,7 +33,10 @@ function loadPredefinedPanorama(evt) {
 		size: {
 			width: '100%',
 			height: '500px'
-		}
+		},
+
+		// HTML loader
+		loading_html: loader
 	});
 }
 
@@ -57,7 +66,10 @@ function upload() {
 			size: {
 				width: '100%',
 				height: '500px'
-			}
+			},
+
+			// No XMP data
+			usexmpdata: false
 		});
 	};