# Visualizer Logic

## Get Started

```html

<html>
  <head>
    <link
      href="https://visualizer.byondxr.com/releases/ui/<replace with current ui version>/index.css"
      rel="stylesheet"
    />
  </head>
  <body>

    <div
        class="visualizer"
        data-role="visualizer"
        experienceId="<your experience id, optional if using hashExperienceId>"
        hashExperienceId="<your hashed experience id, optional if using experienceId>"
        sceneConfigurationLabel="<optional, the maximum width image size to use on mobile, a number from 0 to 2048>"
        sceneId="<optional, will lunch a scene by scene id>"
        defaultProduct="<optional, product sku, will display the product on all available supported application>"
        defaultProducts="<optional, a stringified key vale pair, key: application, value: product sku, will present those as defaults >"
        >
    </div>
        const containerElement = document.querySelector('[data-role="visualizer"]');
        containerElement.addEventListener('visualizerLoaded', (event)=>{
            const visualizer = event.detail.visualizer;
        });
    </div>
    <script src="https://visualizer.byondxr.com/releases/logic/3.0.93/index.js"></script>
    <script src="https://visualizer.byondxr.com/releases/ui/<replace with current ui version>/index.js"></script>
  </body>
</html>
```

.

## Documentation

<https://visualizer.byondxr.com/releases/logic/3.0.93/doc/index.html>

## Plugins

### UI plugin

<https://www.npmjs.com/package/byondrnd/byondxr-web-visualizer-ui>

## Favorites

```ts
    /** set favorite scenes */
    abstract setFavoriteScenes(favoriteScenes: IFavoriteSceneList);

    /** set favorite products */
    abstract setFavoriteProducts(favoriteProducts: IFavoriteProductList | IFavoriteProductShortList);

```

**Code example:**

```ts
// subscribe to events that save favorites to localstorage
let subscribe = (container) => {
    const saveProducts = (param) => {
        localStorage.setItem('favoriteProducts', JSON.stringify(param.favorites));
    };
    const saveScenes = (param) => {
        localStorage.setItem('favoriteScenes', JSON.stringify(param.favoriteScenes));
    };
    container.Visualizer.addListener('productAddedToFavorites', saveProducts);
    container.Visualizer.addListener('productRemovedFromFavorites', saveProducts);
    container.Visualizer.addListener('sceneAddedToFavorites', saveScenes);
    container.Visualizer.addListener('sceneRemovedFromFavorites', saveScenes);

    // upon new start of application - read from localstorage
    container.Visualizer.setFavoriteProducts(JSON.parse(localStorage.getItem('favoriteProducts')));
    container.Visualizer.setFavoriteScenes(JSON.parse(localStorage.getItem('favoriteScenes')));
};
```

Subscribe to the Visualizer by acquiring its container. Example:

```ts
container = document.querySelector('[data-role="visualizer"]');
subscribe(container);
```

If the container is not there beause it will be launched, then use the launchVisualizer promise to acquire the container

```html
        <button onclick="
            const productsInitExampleSkus = ()=> {
                const products = [   {product: {application: 'Backsplash', sku: '1040502005'}},
                        {product: {application: 'Countertop', sku: '1400402005'}},
                        {product: {application: 'Countertop', sku: '1401102015'}},
                        {product: {application: 'Countertop', sku: '1400302005'}} ]
                localStorage.setItem('favoriteProducts', JSON.stringify(products))
            }

            productsInitExampleSkus()

        ">
            example - saves favorite product sku/application pairs to localstorage
        </button>
        <button
            onClick={() => {
                window.launchVisualizer({
                    experienceId: 'G2GcP2',
                    defaultProducts: { Countertop: '1200302000' },
                    defaultProduct: '1200302000',
                    sceneId: '6',
                    scene_configuration: 'US-EN',
                }).then((visualizerContainer)=>{
                    // Here the visualizer is loaded and you can do with it whatever you need
                    subscribe(visualizerContainer)
                })
            }}
        >
            Launch
        </button>
```

---
