| Table of Contents | ||||
|---|---|---|---|---|
|
1. Distribution
This library is available through autosyncstudio.com website.
...
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
divto use it as a container and assign anidto it.Instantiate
AutosyncSpinpassing a config object with theid, along with a path to spin images and a desired size.
...
| 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>
|
AutosyncSpin config object parameters:
id– The id assigned to the container.path– The An absolute URL or Path (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 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 utility methods to interact with its rendered content.
createCanvas(
Status colour Red title REQUIRED 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 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. After set a new path you will reload the visualizer with the method reload()To take effect,reload()must be called.setSize(
Status colour Red title REQUIRED size: Number): This method can change number) – Change the size for of 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 To take effect,reload()must be called.showError(
val: Boolean): With this method you can show the error message sending a “true” value as parameter and false to remove itboolean) – Show/hide an error message when loading images fails.reload(): This method will reset – Reset all the variables used to set states state (Not excluding path and size), and will load again the viewer.