Skip to content

Commit

Permalink
useable without "new", simplify setAnimSpeed
Browse files Browse the repository at this point in the history
  • Loading branch information
mistic100 committed Apr 21, 2015
1 parent 716fd7f commit e18aa0a
Show file tree
Hide file tree
Showing 11 changed files with 28 additions and 1,046 deletions.
76 changes: 3 additions & 73 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,82 +1,12 @@
# Photo Sphere Viewer

[![Bower version](https://badge.fury.io/bo/Photo-Sphere-Viewer.svg)](http://badge.fury.io/bo/Photo-Sphere-Viewer)
[![Online documentation](https://img.shields.io/badge/documentation-online-blue.svg)](https://mistic100.github.io/Photo-Sphere-Viewer)

Photo Sphere Viewer is a JavaScript library that allows you to display 360×180 degrees panoramas on any web page. Panoramas must use the equirectangular projection and they can be taken with Photo Sphere, the camera mode brought by Android 4.2 Jelly Bean.

Photo Sphere Viewer uses the [Three.js](http://threejs.org) library, so nothing is required for your visitors except for a browser compatible with canvas or, better, WebGL.

## How To Use It

1. Include the `three.min.js` and `photo-sphere-viewer.js` files into your page.
2. Create a `div` in the size you want for your panorama.
3. In JavaScript, create a new `PhotoSphereViewer` object. You must pass it an object containing at least the two parameters `panorama` and `container`.

You can find a basic example of use in the file `example.html`. The `example1.html` is a more complete (and more interesting) example.

### Options

* `panorama` (required): the path to the panorama.
* `container` (required): the `div` in which the panorama will be displayed.
* `caption` (optional, default to `null`): a text (can contain HTML) displayed in the navbar.
* `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.
* `default_fov` (optional, default to `max_fov`): the default field of view, in degrees, between `min_fov` and `max_fov`.
* `default_long` (optional, default to `0`): the default longitude, in radians, between `0 and `2xPI`.
* `default_lat` (optional, default to `0`): the default latitude, in radians, between `-PI/2` and `PI/2`.
* `long_offset` (optional, default to `PI/720`): the longitude to travel per pixel moved by mouse/touch.
* `lat_offset` (optional, default to `PI/360`): 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).
* `anim_speed` (optional, default to `2rpm`): animation speed in radians/degrees/revolutions per second/minute.
* `anim_lat` (optional, default to `default_lat`): the latitude, in radians, at which the animation is done.
* `navbar` (optional, default to `false`): set to `true`, a navigation bar will be displayed. You can choose which buttons to display by providing an object.
* `autorotate`
* `zoom`
* `fullscreen`
* `loading_img` (optional, default to `null`): the path to the image shown during the loading.
* `loading_txt` (option, default to `Loading...`): the text shown during the loading, only used if no image provided.
* `size` (optional, default to `null`): the final size of the panorama container (e.g. `{width: 500, height: 300}`).
* `mousewheel` (optional, default to `true`): listen to mouse wheel to zoom the view.
* `mousemove` (optional, default to `true`): listen to mouse click+move to rotate the view.

If your panorama is taken with Google's Photo Sphere, `usexmpdata` must be set to `true`, unless it is not cropped.


### Events

You can listen to various events with the `on` method.

```js
var psv = new PhotoSphereViewer({ });

psv.on('ready', function() { });
```

Available events :

* `ready` when the viewer is ready, before the first render
* `autorotate` (enabled [bool]) when the autorotation state changes
* `size-updated` (width [int], height [int]) when the viewer size changes
* `position-updated` (long [float], lat [float]) when the view angles change
* `zoom-updated` (level [int]) when the zoom level changes
* `fullscreen-updated` (enabled [bool]) when the fullscreen state changes

### Methods

Available public methods :

* `load` loads the viewer if `autoload` is `false`
* `render` renders the scene
* `startAutorotate`
* `stopAutorotate`
* `toggleAutorotate`
* `resize` (width [int], height [int] in pixels)
* `rotate` (long [float], lat [float] in radians)
* `zoom` (level [int])
* `zoomIn` increases zoom level by 1
* `zoomOut` decreases zoom level by 1
* `toggleFullscreen`
* `setAnimSpeed`

## License

Expand Down
28 changes: 12 additions & 16 deletions dist/photo-sphere-viewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@
* - size (Object) (optional) (null) Final size of the panorama container (e.g. {width: 500, height: 300})
*/
var PhotoSphereViewer = function(options) {
if (!(this instanceof PhotoSphereViewer)) {
return new PhotoSphereViewer(options);
}

if (options === undefined || options.panorama === undefined || options.container === undefined) {
throw 'PhotoSphereViewer: no value given for panorama or container';
}
Expand Down Expand Up @@ -675,39 +679,31 @@ PhotoSphereViewer.prototype.setAnimSpeed = function(speed) {

// Which unit?
switch (speed_unit) {
// Revolutions per minute / second
case 'rpm':
case 'rev per minute':
case 'revolutions per minute':
case 'rps':
case 'rev per second':
case 'revolutions per second':
// speed * 2pi
rad_per_second = speed_value * PhotoSphereViewer.TwoPI;
break;

// Degrees per minute / second
case 'dpm':
case 'deg per minute':
case 'degrees per minute':
case 'dps':
case 'deg per second':
case 'degrees per second':
// Degrees to radians (rad = deg * pi / 180)
rad_per_second = speed_value * Math.PI / 180;
break;

// Radians per minute / second
case 'rad per minute':
case 'radians per minute':
case 'rad per second':
case 'radians per second':
rad_per_second = speed_value;
break;

// Revolutions per minute / second
case 'rpm':
case 'revolutions per minute':
case 'rps':
case 'revolutions per second':
// Unknown unit
default:
m_anim = false;
// speed * 2pi
rad_per_second = speed_value * PhotoSphereViewer.TwoPI;
break;
}

// Theta offset
Expand Down
2 changes: 1 addition & 1 deletion dist/photo-sphere-viewer.min.js

Large diffs are not rendered by default.

45 changes: 0 additions & 45 deletions examples/example.html

This file was deleted.

50 changes: 0 additions & 50 deletions examples/example1.css

This file was deleted.

43 changes: 0 additions & 43 deletions examples/example1.html

This file was deleted.

65 changes: 0 additions & 65 deletions examples/example1.js

This file was deleted.

Binary file removed examples/icon.png
Binary file not shown.
Binary file removed examples/sun.jpg
Binary file not shown.
Loading

0 comments on commit e18aa0a

Please sign in to comment.