# Visualizer Logic

## Get Started

    <html>
      <head>
        <link
          href="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@{version}/build/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 >"
            maxFaceSize="<optional, the maximum width image size to use, a number from 0 to 2048>"
            maxFaceSizeMobile="<optional, the maximum width image size to use on mobile, a number from 0 to 2048>"
            >
        </div>
            const containerElement = document.querySelector('[data-role="visualizer"]');
            containerElement.addEventListener('visualizerLoaded', (event)=>{
                const visualizer = event.detail.visualizer;
            });
        </div>
        <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer@2.1.45/dist/index.js"></script>
        <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@{version}/build/index.js"></script>
      </body>
    </html>

.

## Documentation

https://unpkg.com/@byondrnd/byondxr-web-visualizer@2.1.45/doc/index.html

## Plugins

### UI plugin

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

## Favorites

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

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

Code example:

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

    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

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

Generated using TypeDoc