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

1. Initialization

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

The library comes with some util methods that can be used to interact with its rendered content.

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.

Autosync Spin Images Library

1. Distribution

2. How to Use It

1. Initialization

2. Methods