1. Distribution

This library is available through autosyncstudio.com website.

There are two version:

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 Use It

Import the library.
Create a div to use it as a container and assign an id to it.
Instantiate AutosyncSpin passing a config object with the id, along with a path to spin images and a desired size.

For example:

<!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 in WebP format.
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(REQUIRED containerId: string) – Change container providing a new element ID.
setPath(REQUIRED path: string) – Change the path or URL where images are stored. To take effect, reload() must be called.
setSize(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.

AutoSync Wiki

AutoSync Spin Images Library

1. Distribution

2. How to Use It

3. Method Reference