From e8d750ece504031c58510c09f09da802bd6a5af6 Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Wed, 21 Aug 2024 08:50:05 +0200 Subject: [PATCH] Deployment --- 404.html | 2 +- _astro/hoisted.BdrfN73g.js | 2 + _astro/hoisted.D1vVlcWD.js | 2 - ...i-core.DE7397CQ.js => ui-core.BPXree7Z.js} | 2 +- getting-started/index.html | 2 +- guides/annotating-images/index.html | 2 +- guides/data-model/index.html | 144 +++++++++++++----- guides/openseadragon/index.html | 2 +- index.html | 2 +- installation/index.html | 2 +- migration-guide/index.html | 2 +- openseadragon/index.html | 2 +- pagefind/fragment/en_3388aec.pf_fragment | Bin 1705 -> 0 bytes pagefind/fragment/en_c17af84.pf_fragment | Bin 0 -> 2655 bytes pagefind/index/en_5484276.pf_index | Bin 10928 -> 0 bytes pagefind/index/en_aa2be4b.pf_index | Bin 0 -> 12256 bytes pagefind/pagefind-entry.json | 2 +- pagefind/pagefind.en_dfedbce71b.pf_meta | Bin 0 -> 182 bytes pagefind/pagefind.en_f1777d191d.pf_meta | Bin 181 -> 0 bytes react/image-annotation/index.html | 2 +- react/openseadragon/index.html | 2 +- reference/configuration-options/index.html | 2 +- svelte/image-annotation/index.html | 2 +- svelte/openseadragon/index.html | 2 +- 24 files changed, 125 insertions(+), 53 deletions(-) create mode 100644 _astro/hoisted.BdrfN73g.js delete mode 100644 _astro/hoisted.D1vVlcWD.js rename _astro/{ui-core.DE7397CQ.js => ui-core.BPXree7Z.js} (99%) delete mode 100644 pagefind/fragment/en_3388aec.pf_fragment create mode 100644 pagefind/fragment/en_c17af84.pf_fragment delete mode 100644 pagefind/index/en_5484276.pf_index create mode 100644 pagefind/index/en_aa2be4b.pf_index create mode 100644 pagefind/pagefind.en_dfedbce71b.pf_meta delete mode 100644 pagefind/pagefind.en_f1777d191d.pf_meta diff --git a/404.html b/404.html index cec2b63..85c75c9 100644 --- a/404.html +++ b/404.html @@ -29,7 +29,7 @@ svg:where(.astro-c6vsoqas){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em} .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}} .sl-link-button:where(.astro-xwgiixxa){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-xwgiixxa).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-xwgiixxa).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-xwgiixxa).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-xwgiixxa).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-xwgiixxa) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-xwgiixxa){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-xwgiixxa){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-xwgiixxa):not(:where(p *)){margin-block:1rem} - + Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious

Annotation Data Model

At the core of Annotorious is a flexible data model that closely aligns with -the W3C Web Annotation Data Model, but -with a few key differences to optimize for performance and ease of use.

+

Annotation Data Model

At the core of Annotorious is a flexible data model that closely +aligns with the W3C Web Annotation Data Model, +but with a few key differences to optimize for performance and +ease of use.

Anatomy of an Annotation

-

Every annotation in Annotorious is represented by a JavaScript object with -the following structure:

+

Every annotation in Annotorious is represented by a JavaScript +object with the following structure:

{
  id: '7fb76422-3a8c-4c87-bbad-7c8bb68399a0',
  target: {
    selector: {
      type: 'RECTANGLE',
      geometry: {
        bounds: {
            minX: 272,
            minY: 169,
            maxX: 393,
            maxY: 259
        },
        x: 272,
        y: 169,
        w: 121,
        h: 90,
      }
    }
  }
}
  • -

    id - a unique identifier for the annotation. The ID can be any alphanumeric string. -If you provide an Annotation without an ID, Annotorious will automatically -assign a globally unique UUID on load. Annotations created by users will also receive a UUID +

    id - a unique identifier for the annotation. The ID can be any +alphanumeric string. If you provide an Annotation without an ID, +Annotorious will automatically assign a globally unique UUID on load. +Annotations created by users will also receive a UUID automatically.

  • -

    target - the target object represents the part of the image that the annotation is -associated with. In this example, the selector property specifies that the annotation -is a rectangular selection with the given coordinates and dimensions.

    +

    target - the target object represents the part of the image +that the annotation is associated with. In this example, the +selector property specifies that the annotation is a +rectangular selection with the given coordinates and dimensions.

    +
    • +
  • +

    bounds - represents the bounding box of the annotation, useful +for quick calculations without parsing the entire geometry.

-

Below is another example for a polygon annotation. In this case, the geometry object contains a -list of X/Y points.

+

Here’s another example for a polygon annotation, where the +geometry object contains a list of X/Y points.

{
  id: '64d7dda8-c156-4e1e-a4f9-55192399208b',
  target: {
    selector: {
      type: 'POLYGON',
      geometry: {
        bounds: {
          minX: 60,
          minY: 88,
          maxX: 248,
          maxY: 223
        },
        points: [
          [60, 221],
          [136, 88],
          [248, 148],
          [172, 223]
        ]
      }
    }
  }
}

Annotation Bodies

-

…TODO…

-

Differences from the W3C Web Annotation Data Model

-

While the Annotorious model shares similarities with the W3C Web Annotation Data Model, -there are key differences designed to enhance performance and simplify usage when -building web applications:

+

In addition to the target, annotations can also have one or more +bodies. The bodies property is designed to carry application-specific +annotation payload, such as comments, tags, or other metadata.

+

It’s important to note that Annotorious doesn’t process or display +body information directly. Instead, bodies serve as an extensible +data structure that you can use according to your application’s +needs, e.g. to drive info popups, hover tooltips, or data-driven +filters and styles.

+
{
  id: '64d7dda8-c156-4e1e-a4f9-55192399208b',
  bodies: [{
    id: '3f4d0a8c-803a-4e59-ad0b-20c82d87c815',
    purpose: 'commenting',
    value: 'This is a comment'
  }],
  target: {
    // ...
  }
}
+

The structure of bodies in Annotorious is closely aligned with +the W3C Web Annotation Data Model, with a few small differences +and simplifications.

+
    +
  • id: any alphanumeric string. If you provide a body without an +ID, Annotorious will automatically assign a UUID on load.
    • +
  • purpose: used similarly to the W3C model, +identifying the reason for the inclusion of the body in the annotation.
    • +
  • value: a generic field that you can use according to your +application’s needs.
    • +
+

Other optional fields include:

+
    +
  • creator: the user who created the body.
    • +
  • created: the creation timestamp of the body.
    • +
  • updatedBy: the user who last updated the body.
    • +
  • updated: stores the last update timestamp of the body.
    • +
+

Leveraging Bodies in Your Application

+

While Annotorious provides the structure for the bodies, it’s up +to you as the developer to decide how to use them.

+

Here are some ways to leverage annotation bodies:

+
    +
  1. Custom popups: display body information when users +interact with annotations. This could include showing comments, +tags or metadata in a tooltip or sidebar.
    2. +
  2. Data-driven styles: use body properties to dynamically style +annotations. For example: +
      +
    • Apply difference styles based on the purpose, e.g. different +colors for commenting vs tagging.
      • +
    • Use the value of tagging bodies to color-code annotations +based on label values.
      • +
    +
    3. +
  3. Data-driven filters: filter annotations dynamically, based +on body properties such as purpose, creator or updated +timestamp.
    4. +
  4. Application-Specific Metadata: store any additional +metadata your application needs in the value field, or by +adding your own properties to the body object.
    5. +
+

Annotorious provides a number of helpers and utility functions +to simplify these scenarios. To read more, see documentation on:

+ +

Key Differences from the W3C Model

+

While the Annotorious model shares similarities with the W3C Web +Annotation Data Model, there are key differences designed to +enhance performance and simplify usage when building web applications:

  1. -

    Simplified Structure: Annotorious makes no claim to support the full range of the -extensive W3C Web Annotation standard. Annotorious streamlines the annotation structure -to focus on the essential elements implemented in the library, while staying close enough +

    Simplified Structure: Annotorious makes no claim to support +the full range of the extensive W3C Web Annotation standard. +Annotorious streamlines the annotation structure to focus on the +essential elements that it implements, while staying close enough to the W3C model to make crosswalking as easy as possible.

  2. -

    Optimized for Performance: the model prioritizes performance by having explicit representations -for shape geometry, thus avoiding the need to repeatedly parse and serialize the selectors from and to -the W3C model’s string-based representations.

    +

    Optimized for Performance: the model prioritizes performance +by having explicit representations for shape geometry, thus avoiding +the need to repeatedly parse and serialize the selectors from and to +the W3C model’s string-based representations. For example, Annotorious +uses direct coordinate values instead of SVG path strings, allowing +for faster rendering and manipulation of annotations.

  3. -

    Ease of Use: Annotorious aims to be intuitive and easy to use, with a focus on providing -a smooth developer experience. Whereas the W3C model is designed to be more general-purpose, -Annotorious’ restricted use case allows it to make certain assumptions and simplifications that -are specific to its use case.

    +

    Ease of Use: Annotorious aims to be intuitive and easy to use, +with a focus on providing a smooth developer experience. Whereas +the W3C model is designed to be more general-purpose, Annotorious’ +restricted use case allows it to make certain assumptions and +simplifications.

The W3C Adapter

-

Despite the differences, Annotorious also provides a built-in feature that allows you to
-use W3C Web annotations directly, through a component called the W3CImageAdapter.

+

Despite the differences, Annotorious also provides a built-in feature +that allows you to use W3C Web annotations directly, through a +component called the W3CImageAdapter.

+

The W3CImageAdapter automatically crosswalks annotations between +the W3C- and the native model, allowing you to use the Annotorious +API while still adhering to the W3C standard. Through the adapter, +Annotorious offers the best of both worlds - the performance and +ease of use of its native data model, with the flexibility to conform +to the W3C standard when needed.

import { createImageAnnotator, W3CImageAdapter } from '@annotorious/annotorious';

 
import '@annotorious/annotorious/annotorious.css';

-
const anno = createImageAnnotator('sample-image', {
  adapter: W3CImageAdapter('sample-image')
});
-

The W3CImageAdapter automatically crosswalks annotations between the W3C- and the native model, -allowing you to use the Annotorious API while still adhering to the W3C standard. Through the -adapter, Annotorious offers the best of both worlds - the performance and ease of use of its -own data model, with the flexibility to conform to the W3C standard when needed.

\ No newline at end of file +
const anno = createImageAnnotator('sample-image', {
adapter: W3CImageAdapter('sample-image')
});
\ No newline at end of file diff --git a/guides/openseadragon/index.html b/guides/openseadragon/index.html index ef2a83e..3521418 100644 --- a/guides/openseadragon/index.html +++ b/guides/openseadragon/index.html @@ -29,7 +29,7 @@ svg:where(.astro-c6vsoqas){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em} .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}} .sl-link-button:where(.astro-xwgiixxa){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-xwgiixxa).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-xwgiixxa).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-xwgiixxa).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-xwgiixxa).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-xwgiixxa) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-xwgiixxa){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-xwgiixxa){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-xwgiixxa):not(:where(p *)){margin-block:1rem} - + Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious
+ Skip to content
Annotorious