| Table of Contents | ||||
|---|---|---|---|---|
|
1.
...
Distribution
This library is available through autosyncstudio.com website.
Here There are two optionsversion:
As a normal JavaScript file: Javascript module
https://vvs.autosyncstudio.com/lib/autosync-spin.module.js use this version for static websites or websites not builded through node or frameworks.As a Javascript module: – recommended for JavaScript frameworks or websites built with NodeJS.Plain old JavaScript file
https://vvs.autosyncstudio.com/lib/autosync-spin.module.js this version is for frameworks or websites builded with NodeJS..js – recommended in all other cases
2. How to
...
Use It
1. Initialization
...
Import the library
...
.
Create a
divto use it as a container
...
and assign an
idto it.Instantiate AutosyncSpin passing a config object with the
id, along with a path to spin images and a desired size.
For example:
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script src="https://vvs.autosyncstudio.com/lib/autosync-spin.js"></script>
</head>
<body>
<div id="spin-360-viewer"></div>
<script>
const autosyncSpin = new AutosyncSpin({
id: 'spin-360-viewer',
path: 'https://storage.googleapis.com/autosync-tire-spins/06026e3d311e72c7df6193ba5efd5f2e',
size: 500,
});
</script>
</body>
</html>
|
...
id– The id assigned to the container.
...
path– The URL or Path where images are stored. All the images used for this library
...
must be named from 1 to 36 and
...
be
...
in WebP format .
...
size– The desired size of the viewer (in pixels).
2. Methods
This The library comes with some util methods that can be used to interact with the its rendered content showed.
createCanvas(
containerId: String): This method is used on the constructor to create all. If you want to change the container to other DIV you can use this method. This method has a required
...
parameter, containerId is required and should be a String.
setPath(
path: String): With this method can change the path or URL where images are stored. After set a new path you will reload the visualizer with the method reload().setSize(
size: Number): This method can change the size for the viewer and the container. The size should be a Number value. After set a new size you will reload the visualizer with the method reload().showError(
val: Boolean): With this method you can show the error message sending a “true” value as
...
parameter and false to remove it.
reload(): This method will reset all the variables used to set states (Not path and size), and will load again the viewer.