Version 2.1

JeremyHeleine · Mar 16, 2015 · 43a2224 · 43a2224
1 parent bff2c02
commit 43a2224
Show file tree

Hide file tree

Showing 8 changed files with 398 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,10 @@ 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.
+    * `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.
+    * `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).
     * `anim_speed` (optional, default to `2rpm`): animation speed in radians/degrees/revolutions per second/minute.
@@ -32,10 +36,11 @@ 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_img` (optional, default to `null`): the path to the image shown during the loading.
+    * `size` (optional, default to `null`): the final size of the panorama container (e.g. `{width: 500, height: 300}`).
 
-You can find an example of use in the file `example.html`.
+You can find a basic example of use in the file `example.html`. The `example1.html` is a more complete (and more interesting) example.
 
-If your panorama is taken with Photo Sphere, `usexmpdata` must be set to `true`, unless it is not cropped.
+If your panorama is taken with Google's Photo Sphere, `usexmpdata` must be set to `true`, unless it is not cropped.
 
 ## License
 

diff --git a/example1.css b/example1.css
@@ -0,0 +1,50 @@
+body {
+	margin: 0;
+	font-family: 'Liberation Sans', sans-serif;
+}
+
+header {
+	margin-bottom: 40px;
+	padding: 30px 20px;
+	background: linear-gradient(to left, #F0F0F0, #FFFFFF 50%);
+	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+	text-align: right;
+}
+
+header h1 {
+	margin: 0;
+	color: #3D3D3D;
+}
+
+#content {
+	width: 70%;
+	max-width: 1000px;
+	margin: 0 auto;
+	line-height: 1.5em;
+	font-size: 1.1em;
+}
+
+#container, #your-pano {
+	width: 70%;
+	height: 0;
+	margin: 0 auto;
+}
+
+p {
+	margin-bottom: 30px;
+}
+
+a {
+	text-decoration: none;
+	color: #0096FF;
+}
+
+a:hover {
+	color: #FF9600;
+}
+
+code {
+	padding: 5px 10px;
+	border-radius: 3px;
+	background-color: #F0F0F0;
+}
diff --git a/example1.html b/example1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="utf-8" />
+		<title>Photo Sphere Viewer</title>
+		<meta name="viewport" content="initial-scale=1.0" />
+		<link rel="stylesheet" href="./example1.css" />
+		<script src="./three.min.js"></script>
+		<script src="./photo-sphere-viewer.js"></script>
+		<script src="./example1.js"></script>
+	</head>
+
+	<body>
+		<header>
+			<h1>Example of use of Photo Sphere Viewer</h1>
+		</header>
+
+		<div id="content">
+			<p>This example lets you test Photo Sphere Viewer by loading a predefined panorama (the one which was already loaded by the other example). To see this panorama, just hit the link below: currently, the <code>div</code> has a height of 0 pixel but Photo Sphere Viewer will increase it to 500 pixels.</p>
+
+			<div id="container"></div>
+
+			<p style="text-align: center;">
+				<a href="#" id="go">Load the predefined panorama</a>
+			</p>
+
+			<p>Note that the panorama is here given as a relative path, but you can give to Photo Sphere Viewer an absolute one or an URL pointing to another website if this website allows CORS.</p>
+
+			<p>Have you got a panorama stored on your computer? Try to read it with Photo Sphere Viewer with the following button. The code uses the FileReader API and is very simple to write (you can retrieve the source code in the <code>example1.js</code> file).</p>
+
+			<div id="your-pano"></div>
+
+			<form method="get" action="example1.html">
+				<p style="text-align: center;">
+					<input type="file" name="pano" id="pano" />
+				</p>
+			</form>
+		</div>
+	</body>
+
+</html>
diff --git a/example1.js b/example1.js
@@ -0,0 +1,65 @@
+window.onload = function() {
+	document.getElementById('go').addEventListener('click', loadPredefinedPanorama, false);
+
+	document.getElementById('pano').addEventListener('change', upload, false);
+};
+
+// Load the predefined panorama
+function loadPredefinedPanorama(evt) {
+	evt.preventDefault();
+
+	var div = document.getElementById('container');
+
+	var PSV = new PhotoSphereViewer({
+			// Path to the panorama
+			panorama: './sun.jpg',
+
+			// Container
+			container: div,
+
+			// Deactivate the animation
+			time_anim: false,
+
+			// Display the navigation bar
+			navbar: true,
+
+			// Resize the panorama
+			size: {
+					width: '100%',
+					height: '500px'
+				}
+		});
+}
+
+// Load a panorama stored on the user's computer
+function upload() {
+	// Retrieve the chosen file and create the FileReader object
+	var file = document.getElementById('pano').files[0];
+	var reader = new FileReader();
+
+	reader.onload = function() {
+		var div = document.getElementById('your-pano');
+
+		var PSV = new PhotoSphereViewer({
+				// Panorama, given in base 64
+				panorama: reader.result,
+
+				// Container
+				container: div,
+
+				// Deactivate the animation
+				time_anim: false,
+
+				// Display the navigation bar
+				navbar: true,
+
+				// Resize the panorama
+				size: {
+						width: '100%',
+						height: '500px'
+					}
+			});
+	};
+
+	reader.readAsDataURL(file);
+}