https://github.com/danielgamage/stereo-convergence
Viewer for stereoscopic images and video
https://github.com/danielgamage/stereo-convergence
stereoscopy
Last synced: 11 months ago
JSON representation
Viewer for stereoscopic images and video
- Host: GitHub
- URL: https://github.com/danielgamage/stereo-convergence
- Owner: danielgamage
- License: mit
- Created: 2016-04-21T08:30:53.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-27T17:00:52.000Z (almost 10 years ago)
- Last Synced: 2025-03-29T00:23:28.534Z (about 1 year ago)
- Topics: stereoscopy
- Language: JavaScript
- Homepage: https://danielgamage.github.io/stereo-convergence/
- Size: 2.93 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Stereo Convergence
[](https://www.npmjs.com/package/stereo-convergence)
[](https://raw.githubusercontent.com/danielgamage/stereo-convergence/master/LICENSE.md)
[]()
2D javascript stereoscopic viewer.
## Installation
#### npm
```bash
npm install --save stereo-convergence
```
## Usage
Convergence requires a container element with two child elements for each eye, each with some sort of unique identifier.
#### Basic
```html
...
// select StereoConvergence containers
var playerEl = document.querySelector('[data-stereo-player]')
// store instance in variable for further manipulation
var stereoPlayer = new StereoConvergence({player: playerEl})
// initialize instance
stereoPlayer.init()
```
But this may be an oversimplified example. If you have more than one player, you need to initialize for each element. You may also want to manage configuration in javascript. To do this, pass an `options` object:
#### Advanced
```html
let globalOptions = {
left: '.stereo-convergence__eye--left',
right: '.stereo-convergence__eye--right',
clip: false
}
let playerEls = document.querySelectorAll('.stereo-convergence')
let instances = []
// NodeList → Array & loop through items
[...playerEls].map((el, i) => {
let localOptions = {
// you can hypothetically fetch options dynamically
player: el,
min: data.players[i].min,
max: data.players[i].max
}
// A. use the spread operator (...) to dump the two options objects into one object argument for StereoConvergence
// B. store each instance in an array for further manipulation
instances[i] = new StereoConvergence({...localOptions, ...globalOptions})
instances[i].init()
})
```
## Properties
#### `player`
_Object_: DOM element | **Required**
Valueless attribute denotes container element to base image positioning from.
#### `left`
#### `right`
_String_: CSS selector
`left` Default: `'[data-stereo-eye="left"]'`
`right` Default: `'[data-stereo-eye="right"]'`
Two properties, `left` and `right`, denote a selector to query via `querySelector` within the player. **There should only be two eyes**.
```js
left: '[data-stereo-eye="left"]'
right: '[data-stereo-eye="right"]'
```
#### `min`
_Number_: Float
Default: `-1`
Property adjusts the minimum divergence as a percentage of the image width.
#### `max`
_Number_: Float
Default: `1`
Property adjusts the maximum divergence as a percentage of the image width.
#### `clip`
_Boolean_
Default: `true`
Extends the images by the maximum distance the images can shift from center during interaction (ie, the largest absolute value between `min` and `max`), removing gaps from the edges of the stereo-player during interaction.