The Viewer of Verpix to run panophoto and livephoto.
In the browser, include the minified library in your html. The library contains panophoto and livephoto.
<script src="https://d3je762wafoivc.cloudfront.net/sdk/sdk.js"></script>You can also just include specfic version only for panophoto or livephoto.
<!-- panophoto only version -->
<script src="https://d3je762wafoivc.cloudfront.net/sdk/sdk-panophoto.js"></script>
<!-- livephoto only version -->
<script src="https://d3je762wafoivc.cloudfront.net/sdk/sdk-livephoto.js"></script>You can run panophoto via html and javascript, detailed usage is shown in Panophoto API section.
The library automatically takes all html elements whose class are verpix-panophoto and run panophoto on them.
<div class="verpix-panophoto" data-id="ada933e24ca82c00" data-width="500" data-height="300"></div>// Create the DOM element that will show panophoto
const el = document.createElement('DIV');
// Set parameters
el.setAttribute('data-id', 'ada933e24ca82c00');
el.setAttribute('data-width', 500);
el.setAttribute('data-height', 300);
// Create panophoto
verpix.createPanophoto(el, {}, (err, instance) => {
if (err) {
// Some errors occur while creating, print it
console.error(err);
} else {
// Append the panophoto on body
document.body.appendChild(instance.root);
// Start playing panophoto
instance.start();
}
});You can run livephoto via html and javascript, detailed usage is shown in Livephoto API section.
The library automatically takes all html elements whose class are verpix-livephoto and run livephoto on them.
<div class="verpix-livephoto" data-id="ac4896d4daf9f400" data-width="280" data-height="500"></div>// Create the DOM element that will show livephoto
const el = document.createElement('DIV');
// Set parameters
el.setAttribute('data-id', 'ac4896d4daf9f400');
el.setAttribute('data-width', 280);
el.setAttribute('data-height', 500);
// Create livephoto
verpix.createLivephoto(el, {}, (err, instance) => {
if (err) {
// Some errors occur while creating, print it
console.error(err);
} else {
// Append the livephoto on body
document.body.appendChild(instance.root);
// Start playing livephoto
instance.start();
}
});You can run panophoto via html and javascript.
To run panophoto via html, you just need html elements whose class are verpix-panophoto. To parameterize, you should set the parameter value to html attribute data-*, such as data-width="500". Parameters section shows all available parameters.
To run panophoto via javascript, call verpix.createPanophoto.
- source: One of following types
- type 0: a DOM element that you want to show panophoto
- type 1: a string that is a media ID you have posted in Verpix
- type 2: an array of string that is each string is an URL of image
- params: An object that fills parameters, only used for type 1 and type 2. Type 0 is parameterized by setting attribute of
data-*. Parameters section shows all available parameters. - callback(err, instance): An function that will be executed after creating.
- err: An Error object if some errors occur while creating, and null if no error.
- instance: An object that contains the panophoto DOM element and methods to manipulate it. The return value of instance depends on the value of err.
You will get an DOM element that can display panophoto and methods to manipulate it.
| Name | Return | Description |
|---|---|---|
| root | The dom element that displays panophoto. | |
| start(function) | Start playing panophoto. An optional callback function will be called after starting. | |
| stop() | Stop playing panophoto. | |
| getCurrentCoordinates() | { lng: number, lat: number } | Get current coordinates of panophoto, lng is longitude and lat is latitude. |
| getCurrentSnapshot({ quality: number, ratio: number }) | string | Snapshot of current view. The snapshot is a base64 string encoded in JPEG format. The quality option should be in range from 0 to 1, and its default value is 1. The ratio option specifies the aspect ratio of snapshot. If ratio is no specified, the whole current view will be captured. |
| setPhotos(array[string]) | Replace current photos to new ones. Each string in the array is an URL of image. | |
| setVisibleSize(number, number) | Change visible size. The first number is width and second is height. | |
| setAutoplay(boolean) | Enable autoplay or not. |
You will get an DOM element that can show an alternative photo and methods to manipulate it.
| Name | Return | Description |
|---|---|---|
| root | The dom element that displays the alternative photo. | |
| showAltPhoto() | Show the alternative photo. It shows something only when parameter `altPhoto` is an URL of image. | |
| hideAltPhoto | Hide the alternative photo. |
Parameters can be passed via data attributes for html and type 0, and via params for type 1 and type 2. For data attributes, append the parameter name to data-, as in data-width="500".
Note that when specifying these parameters as data-attributes, you should convert camelCased names into dash-separated lower-case names (e.g. initialLng would be data-initial-lng="35", and disableCDN would be data-disable-cdn="true").
| Name | type | default | description |
|---|---|---|---|
| id | string | required | The media id you want to specify. Only used in html and type 0. |
| width | number | required | The visible size of panophoto. The size effects the quality of panophoto to load For html, type 0 and 1. If width and height are both not larger than 300, lowest quality panophoto are loaded; otherwise, highest ones are loaded. |
| height | number | required | |
| initialLng | number | 0/auto | The initial coordinates (longitude and latitude) of panophoto. For type 2, the default values are (0, 0). For other cases, the default values are determined by the coordinates when you posting on Verpix. |
| initialLat | number | 0/auto | |
| autoplay | boolean | true | Autoplay after idle duration. |
| idleDuration | number | 10 | Determine how long the idle duration to autoplay. This parameters is taken only when autoplay is true. |
| loopMediaIcon | boolean | false | In autoplay mode, show an 360 icon or not. This parameters is taken only when autoplay is true. |
| altPhotoUrl | string | '' | The URL of alternative image when error occurs while creating panophoto. |
| tipOnTop | boolean | false | Always show the tip on top even some other html elements are covered on it. |
| disableCDN | boolean | false | Load panophoto from CDN or not. The parameter is used only in html, type 0 and 1. |
| disableGA | boolean | false | Send a Google Analytics event or not. |
You can run livephoto via html and javascript.
To run livephoto via html, you just need html elements whose class are verpix-livephoto. To parameterize, you should set the parameter value to html attribute data-*, such as data-width="500". Parameters section shows all available parameters.
To run livephoto via javascript, call verpix.createLivephoto.
- source: One of following types
- params: An object that fills parameters, only used for type 1, type 2 and type 3. Type 0 is parameterized by setting attribute of
data-*. Parameters section shows all available parameters. - callback(err, instance): An function that will be executed after creating.
- err: An Error object if some errors occur while creating, and null if no error.
- instance: An object that contains the livephoto DOM element and methods to manipulate it if err is null. If err is not null, instance will be null.
You will get an DOM element that can display livephoto and methods to manipulate it.
| Name | Return | Description |
|---|---|---|
| root | The dom element that displays livephoto. | |
| start() | Start playing livephoto. | |
| stop() | Stop playing livephoto. | |
| getOriginalDimension() | { width: number, height: number } | Get the width and height of original photos. |
| setPhotos(array[Image|ImageData]) | Replace current photos to new ones. Each of the array is an instance of Image or ImageData. | |
| setWrapperDimension({ width: number, height: number }) | Change the visible wrapper size. |
Parameters can be passed via data attributes for html and type 0, and via params for type 1, type 2 and type 3. For data attributes, append the parameter name to data-, such as data-width="500".
Note that when specifying these parameters as data-attributes, you should convert camelCased names into dash-separated lower-case names (e.g. cutBased would be data-cut-based, and disableCDN would be data-disable-cdn).
| Name | type | default | description |
|---|---|---|---|
| id | string | required | The media id you want to specify. Only used in html and type 0. |
| width | number | auto | The visible width/height of livephoto. For html, type 0 and 1, the default width/height depends on the video you uploaded on Verpix. For type 2 and 3, the default width/height depends on the first photo you given. |
| height | number | auto | |
| cutBased | string | 'height' | Decide how to cut off the visible region. If it is 'width', the cut region depends on width. if it is 'height', the cut region depends on height. |
| action | string | 'horizontal' | The motion direction to play livephoto. The parameter can be 'horizontal' or 'vertical' and only works for type 2 and 3. For html, type0 and 1, the direction is always 'horizontal'. |
| loopMediaIcon | boolean | false | In autoplay mode, show an 360 icon or not. This parameters is taken only when autoplay is true. |
| disableCDN | boolean | false | Load livephoto from CDN or not. The parameter is used only in html, type 0 and 1. |
| disableGA | boolean | false | Send a Google Analytics event or not. |
-
Install Node.js.
-
Clone the project to your file system:
git clone https://github.com/TopPano/verpix-viewer- Go into the project directory
cd ./verpix-viewer- Install dependencies
npm installRun in development mode that will hot re-build the library when you modify source files.
npm startRun unit test.
npm testYou can also run test in watch mode. Test will re-run when you modify source and testing files.
npm run test:watchBuild the library, the output files are in public/dist.
npm run build