1. How to get the library

This library is available through autosyncstudio website.

Here are two options:

As a normal JavaScript file: https://vvs.autosyncstudio.com/lib/autosync-spin.js use this version for static websites or websites not builded through node or frameworks.
As a Javascript module: https://vvs.autosyncstudio.com/lib/autosync-spin.module.js this version is for frameworks or websites builded with NodeJS.

2. How to use it

1. Initialization

When you already have the library you should create a div to use it as a container for the viewer and give it an ID then you can create an AutosyncSpin instance.

As you can see in this example code you will need to define an object with this attributes:

<!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: Is the id gave it to the container.
PATH: Is the URL or Path where images are stored. All the images used for this library should be named from 1 to 36 and should be WEBP files.
SIZE: Is the size wanted for the viewer the size will be set on pixels.

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.
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 paramether 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. How to get the library

2. How to use it

1. Initialization

2. Methods