Skip to main content

Simple viewer - common features

Canvas Panel is a component of a IIIF viewer, rather than a viewer in its own right.

However, there are several expected viewer features, that Canvas Panel helps implement. 

<canvas-panel
  id="cp"
  preset="zoom"
  width="500"
  iiif-content="JTdCJTIyaWQlMjIlM0ElMjJodHRwcyUzQSUyRiUyRnByZXZpZXcuaWlpZi5pbyUyRmNvb2tib29rJTJGMzMzMy1jaG9pY2UlMkZyZWNpcGUlMkYwMDM2LWNvbXBvc2l0aW9uLWZyb20tbXVsdGlwbGUtaW1hZ2VzJTJGY2FudmFzJTJGcDElMjN4eXdoJTNEMzU2OSUyQzc2MSUyQzE4NTElMkMyMDU5JTIyJTJDJTIydHlwZSUyMiUzQSUyMkNhbnZhcyUyMiUyQyUyMnBhcnRPZiUyMiUzQSU1QiU3QiUyMmlkJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZnaXN0LmdpdGh1YnVzZXJjb250ZW50LmNvbSUyRnN0ZXBoZW53ZiUyRjE5ZTYxZGFjNWMzMjljNzdkYjhjZjIyZmUwMzY2ZGFkJTJGcmF3JTJGYTgxYzM3Mzk3MTFkMTQwYmQwNGJlNGYwYjQ4MDBlNDIxY2M2MTc2MSUyRm1hbmlmZXN0Lmpzb24lMjIlMkMlMjJ0eXBlJTIyJTNBJTIyTWFuaWZlc3QlMjIlN0QlNUQlN0Q"
  style="position: absolute"
>
  <div style="position: absolute; top: 10px; right: 10px; z-index: 11">
  	<button class="osd" onClick="cp.zoomIn()">🔍+</button>
    <button class="osd" onClick="cp.zoomOut()">🔍–</button>
    <button class="osd" onClick="cp.goHome()">🏠</button>
    <button class="osd" onClick="(cp.requestFullscreen || cp.webkitRequestFullscreen).call(cp)">⤢</button>
  </div>
</canvas-panel>

Placing buttons on top of the Canvas​

This is through CSS positioning, as in the example above.

Full screen​

This makes Canvas Panel invoke the browser's full screen "F11" API and take up the entire screen (not browser). How you do this may be up to your application, but the example above uses the following:

<button onClick="(cp.requestFullscreen || cp.webkitRequestFullscreen).call(cp)" />

This is not a Canvas Panel feature but a browser feature. It may not work in the sandbox environment.

Zoom in/out buttons​

Simply wire up your buttons to Canvas Panel's zoomIn and zoomOut methods:

<button class="osd" onClick="cp.zoomIn()">🔍+</button>
<button class="osd" onClick="cp.zoomOut()">🔍–</button>

Reset​

The goHome() function will return the viewport to the initial condition:

cp.goHome();