| Table of Contents | ||||
|---|---|---|---|---|
|
1.
...
Distribution
This library is available through autosyncstudio.com website.
Here There are two optionsversion:
...
Javascript module
https://vvs.autosyncstudio.com/lib/autosync-spin.
...
module.js – recommended for JavaScript frameworks or websites built with NodeJS.
Plain old JavaScript file
https://vvs.autosyncstudio.com/lib/autosync-spin
...
.js – recommended in all other cases
2. How to
...
1. Initialization
...
Use It
Import the library.
Create a
divto use it as a container
...
As you can see in the image you will need to define an object with this attributes:
...
ID: Is the id gave it to the container.
...
and assign an
idto it.Instantiate
AutosyncSpinpassing a config object with theid, 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_tires/_spins/06026e3d311e72c7df6193ba5efd5f2e',
size: 500,
});
</script>
</body>
</html>
|
AutosyncSpin config object parameters:
id– The id assigned to the container.path– An absolute URL (or a relative path under the same domain) where images are stored. All the images used for this library
...
must be named from 1 to (24 or 36) and
...
be
...
2. Methods
This library comes with some util methods that can be used to interact with the 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 paramether, containerId is required and should be a String.
...
in WebP format.
...
SIZE: Is the size wanted for the viewer the size will be set on pixels.
size– The desired size of the viewer(in pixels).
3. Method Reference
The library comes with utility methods to interact with its rendered content.
createCanvas(
Status colour Red title REQUIRED containerId: string) – Change container providing a new element ID.setPath(
Status colour Red title REQUIRED path: string) – Change the path or URL where images are stored.
...
To take effect,
reload()must be called.setSize(
Status colour Red title REQUIRED size:
...
number) – Change the size
...
of the viewer and the container.
...
To take effect,
reload()must be called.
...
showError(
val:
...
boolean) – Show/hide an error message when loading images fails.
reload()
...
– Reset all the variables used to set
...
state (
...
excluding path and size), and
...
load again the viewer.