From 63fff87605e964a054fd4bb3fa5212e65f976560 Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Tue, 20 Aug 2024 18:42:35 +0200 Subject: [PATCH] Deployment --- 404.html | 2 +- _astro/ImageExample.BD47wxO_.js | 1 + _astro/ImageExample.BivlHBct.js | 1 - _astro/hoisted.D1vVlcWD.js | 2 + _astro/hoisted.DesBe1op.js | 2 - ...i-core.BLdgnpO0.js => ui-core.DE7397CQ.js} | 2 +- getting-started/index.html | 4 +- guides/annotating-images/index.html | 2 +- guides/data-model/index.html | 61 +++++++++++++++++- 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 0 -> 1705 bytes pagefind/fragment/en_ef35984.pf_fragment | Bin 180 -> 0 bytes pagefind/index/en_5484276.pf_index | Bin 0 -> 10928 bytes pagefind/index/en_d6fc501.pf_index | Bin 9180 -> 0 bytes pagefind/pagefind-entry.json | 2 +- pagefind/pagefind.en_21c312d3db.pf_meta | Bin 181 -> 0 bytes pagefind/pagefind.en_f1777d191d.pf_meta | Bin 0 -> 181 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 +- 26 files changed, 78 insertions(+), 21 deletions(-) create mode 100644 _astro/ImageExample.BD47wxO_.js delete mode 100644 _astro/ImageExample.BivlHBct.js create mode 100644 _astro/hoisted.D1vVlcWD.js delete mode 100644 _astro/hoisted.DesBe1op.js rename _astro/{ui-core.BLdgnpO0.js => ui-core.DE7397CQ.js} (99%) create mode 100644 pagefind/fragment/en_3388aec.pf_fragment delete mode 100644 pagefind/fragment/en_ef35984.pf_fragment create mode 100644 pagefind/index/en_5484276.pf_index delete mode 100644 pagefind/index/en_d6fc501.pf_index delete mode 100644 pagefind/pagefind.en_21c312d3db.pf_meta create mode 100644 pagefind/pagefind.en_f1777d191d.pf_meta diff --git a/404.html b/404.html index c682cae..cec2b63 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

…TODO…

\ No newline at end of file +

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:

+
{
  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 +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.

    +
    • +
+

Below is another example for a polygon annotation. In this case, 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:

+
    +
  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 +to the W3C model to make crosswalking as easy as possible.

    +
    2. +
  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.

    +
    3. +
  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.

    +
    4. +
+

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.

+
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 diff --git a/guides/openseadragon/index.html b/guides/openseadragon/index.html index cf8b641..ef2a83e 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