Custom Resource Providers

In our configuration files, assets are referenced by their relative file name only. This gives you the freedom to define the actual location at runtime without having to change the configuration files. In most cases, the BaseURLResourceProviderwill fit your needs. It allows you to define a base URL for the location which is prefixed for ever asset request. But there are cases where you’ll need to implement your own provider. Examples for such cases are authorisation of request our if you need to generate the URL through an endpoint.

This is supported by our SDK through the concept of resource providers and the IResourceProvider interface. When loading assets, the requestURL(uri : string, identifier? : string) : Promise<string> method of the resource provider is queried to provide the actual URL. To implement your own logic, simple write a class that implements this interface and provide an instance of it to the viewer’s resource provider property. How this works can be seen in the following example.

import * as Pictofit from "./pictofit.min.js";

class CustomResourceProvider 
{
    requestURL(uri, identifier /* can be null */) {
        // your logic goes here
        return new Promise((resolve) => {
            console.log("requesting URL for " + uri);
            resolve(uri);
        });
    }
}

const resourceProvider = new CustomResourceProvider();
const staticAsset = new Pictofit.StaticAsset("garments/1234", resourceProvider);

The requestURL(uri : string, identifier? : string) : Promise<string> method gets the uri (corresponds to the file name) and returns a promise which will provide the actual url when resolved. If you need more information of the concept of promises please see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise