| Table of Contents | ||||
|---|---|---|---|---|
|
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
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.
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-tire-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 36 and be in WebP format.size– The desired size of the viewer(in pixels).
2. Methods
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.