Highlighting Regions

Scenario

You want to highlight a region of the Canvas, and style the way you highlight it. You might have already initially constrained the viewport to a particular part of the canvas (as in Regions).

Consider Canvas Panel showing a painting:

<canvas-panel
   canvas-id="https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/canvas/123"
   manifest-id="https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/manifest"
/>

Then showing a detail via the addition of a region attribute:

<canvas-panel
   canvas-id="https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/canvas/123"
   manifest-id="https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/manifest"
   region="1105,1548,701,720"
/>

Then highlighting something within that detail:

<style id="my-style">
  .example-annotation {
    background: rgba(50, 0, 200, 0.4);
  }
</style>
<canvas-panel
  render="canvas"
  viewport="false"
  height="1024"
  canvas-id="https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/canvas/123"
  manifest-id="https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/manifest"
  region="1000,1500,1500,1000"
  highlight="1250,1780,400,400"
  highlight-css-class="example-annotation"
  style-id="my-style"
/>

This example shows one way of styling something inside canavas panel. The .example-annotation style is not accessible within the web component; we have to pass a reference to a stylesheet into Canvas Panel to enable it to access styles. This boundary layer between the canvas panel web component and its containing page is necessary, otherwise canvas panel could be inadvertently disrupted by the containing page CSS.

tip

The CSS classes are not part of Canvas Panel, they are in your styles under your control.

There is a more detailed discussion on styling in Canvas Panel.

In the above examples, the region and highlight attributes both take string values that can be transformed to Target objects. highlight is a convenience attribute, with a convenience CSS assistant; in code you are doing something more general - you are adding an annotation to the canvas that appears as a highlight. This common scenario can be done programmatically:

import "@digirati/canvas-panel-web-components";
import "./styles.css";

const cp = document.getElementById("cp");

async function load() {
  await cp.vault.loadManifest(
    "https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/manifest"
  );
  cp.setCanvas(
    "https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/canvas/123"
  );
  const target = { x: 1000, y: 1900, width: 1500, height: 1000 };
  setTimeout(() => {
    cp.goToTarget(target);
    drawBox();
  }, 1000);
}

load();

async function drawBox() {
  const w3CAnno = {
    id: "https://example.org/anno",
    type: "Annotation",
    motivation: "highlighting",
    target:
      "https://data.ng-london.org.uk/iiif/0CWR-0001-0000-0000/canvas/123#xywh=1250,1780,400,400"
  };
  await cp.vault.load(w3CAnno.id, w3CAnno);
  const highlight = cp.createAnnotationDisplay(w3CAnno.id);
  highlight.className = "example-annotation";
  cp.annotations.add(highlight);
  // for a bonus - change the style after three seconds
  setTimeout(() => {
  highlight.applyStyle({
    borderWidth: "2px",
    borderStyle: "solid",
    borderColor: "green",
    ":hover": {
      borderColor: "orange"
    }
  });    
  }, 3000);

}

For more information on creating annotations programatically, see Annotations. For more information on styling and CSS in Canvas Panel, see Styling.

Discuss on GitHub

Highlighting Regions

Scenario​

Scenario