Skip to main content

Installation

Canvas panel is made up of several Web Components. In order to use the components you need to have a <script/> tag loaded on your webpage. You can also include them in your existing bundler of choice.

The provided Web Components are as follows:

  • <canvas-panel /> - this is the primary web component, used for rendering any single IIIF canvas.
  • <image-service /> - this is a web component that can be used without a IIIF manifest and only an Image service.
  • <sequence-panel /> - This is a web component that can show a sequence of Canvases either from a Manifest or a Range.

Canvas panel also uses a few libraries to provide IIIF functionality.

  • Vault is the library used by Canvas Panel to load, normalise and track IIIF resources.
  • Vault-helpers contains additional utilities for working with IIIF resources, such as getLabel and getThumbnail.
  • Canvas Panel is the web component. Its distribution includes vault and the various web components.
  • IIIF Image API is a utility library for working with IIIF Image resources
The web components (canvas-panel and image-service) are bundled in one script:
<script src="https://cdn.jsdelivr.net/npm/@digirati/canvas-panel-web-components@latest"></script>

<canvas-panel
  manifest-id="https://digirati-co-uk.github.io/wunder.json"
  canvas-id="https://digirati-co-uk.github.io/wunder/canvases/0">
</canvas-panel>

This also gives you access to Vault, for doing things programmatically:

<canvas-panel id="cp"></canvas-panel>

<script src="https://cdn.jsdelivr.net/npm/@digirati/canvas-panel-web-components@latest"></script>
<script>  
    const cp = document.getElementById("cp");
    const manifestUrl = "https://digirati-co-uk.github.io/wunder.json";
    cp.vault.load(manifestUrl).then((manifest) => console.log(manifest.items.length));
</script>

You can use Vault independently of the Canvas Panel web component:

<script src="https://cdn.jsdelivr.net/npm/@iiif/vault@latest/dist/index.umd.js"></script>
<script>  
    const manifestUrl = "https://digirati-co-uk.github.io/wunder.json";
    const vault = new IIIFVault.Vault();
    vault.load(manifestUrl).then((manifest) => console.log(manifest.items.length));
</script>

(Read more about Vault)